ソースを参照

再生リスト

dev-master
コミット
78719112d0
  1. 6
      app/Http/Controllers/Peertube/Channel.php
  2. 100
      public/css/peertube/channel.css
  3. 2
      resources/views/theme/techsuwa/component/peertube/c.blade.php
  4. 4
      resources/views/theme/techsuwa/component/peertube/parts/c/links.blade.php
  5. 30
      resources/views/theme/techsuwa/component/peertube/parts/c/playlists.blade.php

6
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);
}
}

100
public/css/peertube/channel.css vendored

@ -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);
}

2
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>

4
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>

30
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>
読み込み中…
キャンセル
保存