再生リスト
このコミットが含まれているのは:
コミット
78719112d0
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
|
@ -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>
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
新しいイシューから参照