From 500e44fa515cd9267c2628a0b07b99f74ea4b54f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=83=86=E3=82=AF=E3=83=8B=E3=82=AB=E3=83=AB=E8=AB=8F?= =?UTF-8?q?=E8=A8=AA=E5=AD=90?= Date: Thu, 24 Feb 2022 13:53:47 +0900 Subject: [PATCH] =?UTF-8?q?=E6=A4=9C=E7=B4=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.example | 7 +- app/Http/Controllers/Search.php | 70 ++++ public/css/common.css | 17 +- public/css/search.css | 318 ++++++++++++++++++ .../layout/component/search/channel.blade.php | 16 + .../layout/component/search/filters.blade.php | 158 +++++++++ .../component/search/playlist.blade.php | 28 ++ .../views/pages/peertube/search.blade.php | 30 ++ 8 files changed, 638 insertions(+), 6 deletions(-) create mode 100644 app/Http/Controllers/Search.php create mode 100644 public/css/search.css create mode 100644 resources/views/layout/component/search/channel.blade.php create mode 100644 resources/views/layout/component/search/filters.blade.php create mode 100644 resources/views/layout/component/search/playlist.blade.php create mode 100644 resources/views/pages/peertube/search.blade.php diff --git a/.env.example b/.env.example index 4594291..db2344f 100644 --- a/.env.example +++ b/.env.example @@ -3,8 +3,9 @@ APP_ENV=local APP_KEY= APP_DEBUG=false APP_LOG_LEVEL=debug -APP_URL=http://localhost -ONION_HOST=jkdasfhfdhndsfnklhjfdsknjfdgsjk.onion +APP_URL=https://example.com +ONION_HOST=http://example.onion +I2P_HOST=http://exampe.b32.i2p SESSION_SECURE_COOKIE=false SESSION_HTTP_ONLY=true THEME="techsuwa" @@ -65,4 +66,4 @@ YOUTUBE_API="" LBRY_URI="" PEER_URI="" PEER_USER="" -PEER_PASS="" \ No newline at end of file +PEER_PASS="" diff --git a/app/Http/Controllers/Search.php b/app/Http/Controllers/Search.php new file mode 100644 index 0000000..7018ff1 --- /dev/null +++ b/app/Http/Controllers/Search.php @@ -0,0 +1,70 @@ +common = new Common; + $this->res = [ + 'page' => 'search', + 'style' => 'search', + 'userinfo' => $this->common->user, + 'version' => $this->common->version, + ]; + } + + public function index (Request $r) { + $this->updateFilter($r->all()); + $filter = $this->formatFilter(); + $this->res['searchterm'] = $this->filter['search']; + $this->res['res'] = []; + $this->res['res']['video-channels'] = $this->get('video-channels', 0, 2, $filter); + $this->res['res']['video-playlists'] = $this->get('video-playlists', 0, 2, $filter); + $this->res['res']['videos'] = $this->get('videos', 0, 2, $filter); + + $this->res['totalres'] = 0; + foreach ($this->res['res'] as $v) $this->res['totalres'] += $v->total; + + return view('pages.peertube.search', ['res' => $this->res]); + } + + public function updateFilter ($v) { + $this->filter['search'] = isset($v['search']) ? $v['search'] : ''; + $this->filter['searchTarget'] = 'local'; + $this->filter['sort'] = isset($v['sort']) ? '-'.$v['sort'] : '-match'; // 並び替え、match | publishedAt | views + $this->filter['isLive'] = isset($v['isLive']) ? $v['isLive'] : null; // 表示、null | true | false + $this->filter['nsfw'] = isset($v['nsfw']) ? $v['nsfw'] : null; // センシティブなコンテンツを表示、both | false + $this->filter['startDate'] = isset($v['startDate']) ? $v['startDate'] : null; // 投稿日、null | フォーマット＝「yyyy-mm-ddT15:00:000Z」 + $this->filter['originallyPublishedStartDate'] = isset($v['originallyPublishedStartDate']) ? $v['originallyPublishedStartDate'] : null; // 動画が投稿された年→から、フォーマット＝「yyyy-12-31T15:00:000.Z」 + $this->filter['originallyPublishedEndDate'] = isset($v['originallyPublishedEndDate']) ? $v['originallyPublishedEndDate'] : null; // 動画が投稿された年→まで、フォーマット＝「yyyy-12-31T15:00:000.Z」 + $this->filter['durationMin'] = isset($v['durationMin']) ? $v['durationMin'] : null; // 再生時間、中間の場合＝240、長いの場合＝600 + $this->filter['durationMax'] = isset($v['durationMax']) ? $v['durationMax'] : null; // 再生時間、短いの場合＝240、中間の場合＝600 + $this->filter['categoryOneOf'] = isset($v['categoryOneOf']) ? $v['categoryOneOf'] : null; // カテゴリ、カテゴリのINT + $this->filter['licenseOneOf'] = isset($v['licenseOneOf']) ? $v['licenseOneOf'] : null; // ライセンス、ライセンスのINT + $this->filter['languageOneOf'] = isset($v['languageOneOf']) ? $v['languageOneOf'] : null; // 言語、２文字言語コード + $this->filter['tagsOneOf'] = isset($v['tagsOneOf']) ? $v['tagsOneOf'] : null; // これらのタグ全て、単語（複数場合：&tagsOneOf=sa1&tagsOneOf=sa2） + $this->filter['tagsAllOf'] = isset($v['tagsAllOf']) ? $v['tagsAllOf'] : null; // これらのタグのうち１つ、単語（複数場合：&tagsAllOf=sa1&tagsAllOf=sa2） + $this->filter['host'] = isset($v['host']) ? $v['host'] : null; // インスタンス、ドメイン名 + } + + function formatFilter () { + $filter = ''; + + foreach ($this->filter as $k => $v) { + if (!is_null($v)) $filter .= '&'.$k.'='.$v; + } + + return $filter; + } + + function get ($type, $start, $count, $filter) { + return $this->ptapi('/api/v1/search/'.$type.'?start='.$start.'&count='.$count.$filter); + } +} diff --git a/public/css/common.css b/public/css/common.css index d82b9c5..6466bdd 100755 --- a/public/css/common.css +++ b/public/css/common.css @@ -261,6 +261,20 @@ my-recommended-videos { max-width: 201px; } +@media screen and (max-width: 499px) { + .menu-wrapper { + width: 66px !important; + } + + .login-buttons-block, .menu-block .block-title, .footer-block .block-title, .publish-button, .publish-button:active, .publish-button:focus { + display: none; + } + + .menu-link { + padding-inline-start: 20; + } +} + @media screen and (min-width: 500px) { .margin-content .videos, .margin-content .playlists { --miniatureMinWidth: 255px; @@ -990,9 +1004,6 @@ my-notification { margin-top: 1.5rem; } -[tabindex="-1"]:focus:not(:focus-visible) { - outline: 0!important; -} .avatar-32 { --avatarSize: 32px; } diff --git a/public/css/search.css b/public/css/search.css new file mode 100644 index 0000000..26b0530 --- /dev/null +++ b/public/css/search.css @@ -0,0 +1,318 @@ +.search-result { + padding: 40px; +} + +.results-header { + font-size: 16px; + padding-bottom: 20px; + margin-bottom: 30px; + border-bottom: 1px solid #DADADA; +} + +.results-header .first-line { + display: flex; + flex-direction: row; +} + +.results-header .first-line .results-counter { + flex-grow: 1; +} + +.mr-1 { + margin-inline-end: .25rem; +} + +.mr-1, .mx-1 { + margin-right: .25rem !important; +} + +.results-header .first-line .results-counter .search-value { + font-weight: 600; +} + +.ml-auto, .mx-auto { + margin-left: auto!important; +} + +.results-header .first-line .results-filter-button .icon.icon-filter { + margin-inline-end: 5px; +} + +.results-header .first-line .results-filter-button .icon.icon-filter { + display: inline-block; + background-repeat: no-repeat; + background-size: contain; + width: 20px; + height: 20px; + vertical-align: middle; + cursor: pointer; + position: relative; + top: -1px; + background-image: url(filter.c4a7184e9b15e9a9.svg); +} + +.collapse-transition { + transition: max-height .3s; + display: block!important; + overflow: hidden!important; + max-height: 0; +} + +.form-group { + margin-bottom: 25px; +} + +.label-container { + display: flex; + white-space: nowrap; +} + +.radio-label { + font-size: 15px; + font-weight: 700; +} + +.peertube-radio-container { + margin-inline-end: 30px; + display: inline-block; +} + +#custom-css input, #custom-css textarea { + background: var(--inputColor) !important; + color: var(--mainForegroundColor) !important; + border: 1px solid var(--mainBackgroundColor); +} + +.peertube-radio-container [type=radio]:checked, .peertube-radio-container [type=radio]:not(:checked) { + position: absolute; + left: -9999px; +} + +input[type=radio], input[type=checkbox] { + box-sizing: border-box; + padding: 0; +} + +.peertube-radio-container [type=radio]:checked+label, .peertube-radio-container [type=radio]:not(:checked)+label { + position: relative; + padding-left: 28px; + cursor: pointer; + line-height: 20px; + display: inline-block; + font-size: 15px; + font-weight: 400; +} + +.pl-0 { + padding-inline-start: 0; +} + +.pl-0, .px-0 { + padding-left: 0 !important; +} + +@media (min-width: 576px) { + .col-sm-6 { + flex: 0 0 50%; + max-width: 50%; + } +} + +.col-uhd, .col-uhd-auto, .col-uhd-12, .col-uhd-11, .col-uhd-10, .col-uhd-9, .col-uhd-8, .col-uhd-7, .col-uhd-6, .col-uhd-5, .col-uhd-4, .col-uhd-3, .col-uhd-2, .col-uhd-1, .col-qhd, .col-qhd-auto, .col-qhd-12, .col-qhd-11, .col-qhd-10, .col-qhd-9, .col-qhd-8, .col-qhd-7, .col-qhd-6, .col-qhd-5, .col-qhd-4, .col-qhd-3, .col-qhd-2, .col-qhd-1, .col-fhd, .col-fhd-auto, .col-fhd-12, .col-fhd-11, .col-fhd-10, .col-fhd-9, .col-fhd-8, .col-fhd-7, .col-fhd-6, .col-fhd-5, .col-fhd-4, .col-fhd-3, .col-fhd-2, .col-fhd-1, .col-xxl, .col-xxl-auto, .col-xxl-12, .col-xxl-11, .col-xxl-10, .col-xxl-9, .col-xxl-8, .col-xxl-7, .col-xxl-6, .col-xxl-5, .col-xxl-4, .col-xxl-3, .col-xxl-2, .col-xxl-1, .col-xl, .col-xl-auto, .col-xl-12, .col-xl-11, .col-xl-10, .col-xl-9, .col-xl-8, .col-xl-7, .col-xl-6, .col-xl-5, .col-xl-4, .col-xl-3, .col-xl-2, .col-xl-1, .col-lg, .col-lg-auto, .col-lg-12, .col-lg-11, .col-lg-10, .col-lg-9, .col-lg-8, .col-lg-7, .col-lg-6, .col-lg-5, .col-lg-4, .col-lg-3, .col-lg-2, .col-lg-1, .col-md, .col-md-auto, .col-md-12, .col-md-11, .col-md-10, .col-md-9, .col-md-8, .col-md-7, .col-md-6, .col-md-5, .col-md-4, .col-md-3, .col-md-2, .col-md-1, .col-sm, .col-sm-auto, .col-sm-12, .col-sm-11, .col-sm-10, .col-sm-9, .col-sm-8, .col-sm-7, .col-sm-6, .col-sm-5, .col-sm-4, .col-sm-3, .col-sm-2, .col-sm-1, .col, .col-auto, .col-12, .col-11, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 { + position: relative; + width: 100%; + padding-right: 15px; + padding-left: 15px; +} + +.submit-button { + text-align: end; +} + +#custom-css input, #custom-css textarea { + background: var(--inputColor) !important; + color: var(--mainForegroundColor) !important; + border: 1px solid var(--mainBackgroundColor); +} + +input[type=text] { + padding: 0 15px; + display: inline-block; + height: 30px; + width: 100%; + color: var(--inputForegroundColor); + background-color: var(--inputBackgroundColor); + border: 1px solid #C6C6C6; + border-radius: 3px; + font-size: 15px; + display: block; +} + +#custom-css .peertube-select-container, input[type="text"] { + border: 1px solid var(--mainBackgroundColor) !important; + background: var(--inputColor) !important; + color: var(--mainForegroundColor) !important; +} + +.form-control { + font-size: 15px; + color: var(--mainForegroundColor); + background-color: var(--inputBackgroundColor); + outline: none; +} + +.form-control { + display: block; + width: 100%; + height: calc(1.5em + 0.75rem + 2px); + padding: .375rem .75rem; + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + color: #495057; + background-color: #fff; + background-clip: padding-box; + border: 1px solid #ced4da; + border-radius: .25rem; + transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; +} + +input, textarea { + outline: none; + color: var(--inputForegroundColor); +} + +button, input { + overflow: visible; +} + +input, button, select, optgroup, textarea { + margin: 0; + font-family: inherit; + font-size: inherit; + line-height: inherit; +} + +#custom-css .peertube-select-container, input[type="text"] { + border: 1px solid var(--mainBackgroundColor) !important; + background: var(--inputColor) !important; + color: var(--mainForegroundColor) !important; +} + +.peertube-select-container { + padding: 0; + margin: 0 0 1rem; + width: auto; + border-radius: 3px; + color: var(--inputForegroundColor); + background: var(--inputBackgroundColor); + position: relative; + font-size: 15px; + height: min-content; +} + +.peertube-select-container select { + padding: 0 35px 0 12px; + position: relative; + border: 1px solid #C6C6C6; + background: transparent none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + cursor: pointer; + height: 30px; + text-overflow: ellipsis; + color: var(--mainForegroundColor); +} + +#custom-css .peertube-select-container > select option:hover, #custom-css .peertube-select-container > select > option:checked { + color: var(--whiteColor) !important; + background-color: var(--mainColor) !important; +} + +#custom-css .peertube-select-container > select > option { + background: var(--inputColor); + color: var(--mainForegroundColor) !important; +} + +#custom-css input, #custom-css textarea { + background: var(--inputColor) !important; + color: var(--mainForegroundColor) !important; + border: 1px solid var(--mainBackgroundColor); +} + +input[type=text] { + padding: 0 15px; + display: inline-block; + height: 30px; + width: 100%; + color: var(--inputForegroundColor); + background-color: var(--inputBackgroundColor); + border: 1px solid #C6C6C6; + border-radius: 3px; + font-size: 15px; + display: block; +} + +#custom-css .peertube-select-container, input[type="text"] { + border: 1px solid var(--mainBackgroundColor) !important; + background: var(--inputColor) !important; + color: var(--mainForegroundColor) !important; +} + +.entry { + display: flex; + margin-bottom: 40px; + max-width: 800px; +} + +.video-miniature.display-as-row my-video-thumbnail { + margin-inline-end: 10px; + min-width: var(--rowThumbnailWidth); + max-width: var(--rowThumbnailWidth); + height: var(--rowThumbnailHeight); +} + +.video-thumbnail-actions-overlay { + position: absolute; + display: flex; + flex-direction: column; + right: 5px; + top: 5px; + opacity: 0; +} + +.video-thumbnail-watch-later-overlay { + padding: 3px; +} + +.video-thumbnail-watch-later-overlay, .video-thumbnail-label-overlay, .video-thumbnail-duration-overlay, .video-thumbnail-live-overlay { + display: inline-block; + background-color: #000000b3; + color: #fff; + border-radius: 3px; + font-size: 12px; + font-weight: 600; + line-height: 1.1; + z-index: 10; +} + +[role=button] { + cursor: pointer; +} + +.video-thumbnail-watch-later-overlay, .video-thumbnail-label-overlay, .video-thumbnail-duration-overlay, .video-thumbnail-live-overlay { + display: inline-block; + background-color: #000000b3; + color: #fff; + border-radius: 3px; + font-size: 12px; + font-weight: 600; + line-height: 1.1; + z-index: 10; +} + +.video-miniature.display-as-row .video-bottom { + display: flex; + min-width: 1px; +} diff --git a/resources/views/layout/component/search/channel.blade.php b/resources/views/layout/component/search/channel.blade.php new file mode 100644 index 0000000..fb09175 --- /dev/null +++ b/resources/views/layout/component/search/channel.blade.php @@ -0,0 +1,16 @@ +@foreach ($res['res']['video-channels']->data as $k => $v) +
+ + + チャンネルのアバター + + +
+ +
{{ $v->displayName }}
+
{{ ptFullHandle($v) }}
+ +
チャンネル登録者数 {{ $v->followersCount }}人
+
+
+@endforeach diff --git a/resources/views/layout/component/search/filters.blade.php b/resources/views/layout/component/search/filters.blade.php new file mode 100644 index 0000000..641d86b --- /dev/null +++ b/resources/views/layout/component/search/filters.blade.php @@ -0,0 +1,158 @@ + diff --git a/resources/views/layout/component/search/playlist.blade.php b/resources/views/layout/component/search/playlist.blade.php new file mode 100644 index 0000000..4331a51 --- /dev/null +++ b/resources/views/layout/component/search/playlist.blade.php @@ -0,0 +1,28 @@ +@foreach ($res['res']['video-playlists']->data as $k => $v) +
+ +
+ + + +
{{ $v->videosLength }}枚動画
+
+
+
+ + +
+ + {{ $v->displayName }} + + + {{ ptFullHandle($v->videoChannel) }} + +
+ 最近編集：{{ date('Y年m月d日 H:i:s T', strtotime($v->updatedAt)) }} +
+
+
+ +
+@endforeach diff --git a/resources/views/pages/peertube/search.blade.php b/resources/views/pages/peertube/search.blade.php new file mode 100644 index 0000000..c5b17b2 --- /dev/null +++ b/resources/views/pages/peertube/search.blade.php @@ -0,0 +1,30 @@ +@extends('layout') + +@section('content') +
+
+ +
+
+
+
+ + こちらのインスタンスでの {{ $res['searchterm'] }} の結果数：{{ $res['totalres'] }} + +
+ +
+
+ @include('layout.component.search.filters') + @include('layout.component.search.channel') + @include('layout.component.search.playlist') + @foreach ($res['res']['videos']->data as $k => $v) + @include('layout.component.common.videominature') + @endforeach +
+ +
+
+@endsection