再生リスト

app/Http/Controllers/Peertube/Channel.php

@@ -24,7 +24,7 @@ class Channel extends Common {
       'userinfo' => $this->common->user,
     ];
     $res['channel'] = $this->getChannel($id);
-    $res['video'] = $this->getVideo($id, ($page*$this->count), $this->count);
+    $res['video'] = $cat == 'video-playlists' ? $this->getPlaylist($id, ($page*$this->count), $this->count) : $this->getVideo($id, ($page*$this->count), $this->count);
     $res['pagetotal'] = $res['video']->total;
     return view('pages.peertube.c', ['res' => $res]);
   }
@@ -36,4 +36,8 @@ class Channel extends Common {
   function getVideo ($id, $start, $count) {
     return $this->ptapi_get('/api/v1/video-channels/'.$id.'/videos?start='.$start.'&count='.$count.'&sort=-publishedAt&skipCount=false&nsfw=both');
   }
+
+  function getPlaylist ($id, $start, $count) {
+    return $this->ptapi_get('/api/v1/video-channels/'.$id.'/video-playlists?start='.$start.'&count='.$count);
+  }
 }

public/css/peertube/channel.css

@@ -632,4 +632,104 @@ my-actor-avatar {
 
 .video-info-privacy, .video-info-blocked .blocked-label, .video-info-nsfw {
   font-weight: 600;
+}
+
+.miniature:not(.display-as-row) .miniature-thumbnail {
+  position: relative;
+  height: 0;
+  width: 100%;
+  padding-top: 56.25%;
+  margin-top: 10px;
+  margin-bottom: 5px;
+}
+
+.miniature-thumbnail {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  border-radius: 3px;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: #ececec;
+  transition: filter .2s ease;
+}
+
+.miniature:not(.display-as-row) .miniature-thumbnail a {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+}
+
+.miniature-thumbnail img {
+  width: inherit;
+  height: inherit;
+}
+
+.miniature-thumbnail .miniature-playlist-info-overlay {
+  display: inline-block;
+  background-color: #000000b3;
+  color: #fff;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 100%;
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.miniature-thumbnail .play-overlay, .miniature-thumbnail .play-overlay .icon {
+  transition: all .2s ease;
+}
+
+.miniature-thumbnail .play-overlay {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: inherit;
+  height: inherit;
+  opacity: 0;
+  background-color: #0000004d;
+}
+
+.miniature-thumbnail .play-overlay .icon {
+  width: 0;
+  height: 0;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%,-50%) scale(.5);
+  border-top: 13px solid transparent;
+  border-bottom: 13px solid transparent;
+  border-left: 18px solid rgba(255,255,255,.95);
+}
+
+.miniature-thumbnail .play-overlay, .miniature-thumbnail .play-overlay .icon {
+  transition: all .2s ease;
+}
+
+.miniature:not(.display-as-row) .miniature-name {
+  margin-top: 10px;
+  margin-bottom: 5px;
+}
+
+.miniature-info .miniature-name {
+  display: block;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  font-size: 1.1em;
+  line-height: 1.1em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-height: 2.2em;
+  word-break: break-word;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  transition: color .2s;
+  font-weight: 600;
+  color: var(--mainForegroundColor);
 }

resources/views/theme/techsuwa/component/peertube/c.blade.php

@@ -1,5 +1,5 @@
 <div id="content" tabindex="-1" class="main-col">
   @include('theme.'.env('THEME').'.component.peertube.parts.c.head')
   @include('theme.'.env('THEME').'.component.peertube.parts.c.links')
-  @include('theme.'.env('THEME').'.component.peertube.parts.c.videos')
+  @include('theme.'.env('THEME').'.component.peertube.parts.c.'.($res['cat'] == 'video-playlists' ? 'playlists' : 'videos'))
 </div>

resources/views/theme/techsuwa/component/peertube/parts/c/links.blade.php

@@ -2,10 +2,10 @@
   <my-list-overflow>
     <div class="d-flex align-items-center text-nowrap w-100 list-overflow-parent">
       <span id="pe_0" class="ng-star-inserted" style="visibility: inherit;">
-        <a routerlinkactive="active" class="title-page ng-star-inserted active" href="/peertube/c/{{ $res['channel']->name }}{{ $res['channel']->host != 'video.076.ne.jp' ? '@'.$res['channel']->host : '' }}/videos">動画</a>
+        <a routerlinkactive="active" class="title-page ng-star-inserted{{ $res['cat'] == 'videos' ? ' active' : '' }}" href="/peertube/c/{{ $res['channel']->name }}{{ $res['channel']->host != 'video.076.ne.jp' ? '@'.$res['channel']->host : '' }}/videos">動画</a>
       </span>
       <span id="pe_1" class="ng-star-inserted" style="visibility: inherit;">
-        <a routerlinkactive="active" class="title-page ng-star-inserted" href="/peertube/c/{{ $res['channel']->name }}{{ $res['channel']->host != 'video.076.ne.jp' ? '@'.$res['channel']->host : '' }}/video-playlists">プレイリスト</a>
+        <a routerlinkactive="active" class="title-page ng-star-inserted{{ $res['cat'] == 'video-playlists' ? ' active' : '' }}" href="/peertube/c/{{ $res['channel']->name }}{{ $res['channel']->host != 'video.076.ne.jp' ? '@'.$res['channel']->host : '' }}/video-playlists">プレイリスト</a>
       </span>
     </div>
   </my-list-overflow>

resources/views/theme/techsuwa/component/peertube/parts/c/playlists.blade.php

@@ -0,0 +1,30 @@
+<div class="margin-content">
+  <div class="title-page title-page-single ng-star-inserted"> 再生リスト数：{{ $res['video']->total }} </div>
+  <div class="playlists">
+    @foreach ($res['video']->data as $v)
+      <div class="playlist-wrapper ng-star-inserted">
+        <my-video-playlist-miniature>
+          <div class="miniature">
+            <my-link class="miniature-thumbnail">
+              <a tabindex="0" href="/peertube/w/p/{{ $v->shortUUID }}" class="ng-star-inserted">
+                <img alt="" aria-labelledby="{{ $v->displayName }}" src="{{ !is_null($v->thumbnailPath) ? 'https://video.076.ne.jp'.$v->thumbnailPath : '/img/noicon.jpg' }}" class="ng-star-inserted">
+                <div class="miniature-playlist-info-overlay ng-star-inserted">動画数：{{ $v->videosLength }} </div>
+                <div class="play-overlay ng-star-inserted">
+                  <div class="icon"></div>
+                </div>
+              </a>
+            </my-link>
+            <div class="miniature-info">
+              <my-link tabindex="-1" class="miniature-name">
+                <a tabindex="-1" href="/w/p/ocDHV9wrgt4BhWZ3STJrfg" class="ng-star-inserted"> {{ $v->displayName }} </a>
+              </my-link>
+              <div class="privacy-date">
+                <span class="updated-at">最新更新： {{ date('Y年m月d日', strtotime($v->updatedAt)) }}</span>
+              </div>
+            </div>
+          </div>
+        </my-video-playlist-miniature>
+      </div>
+    @endforeach
+  </div>
+</div>