ソースを参照

チャンネルページ

peertube
コミット
e2ca8f8e09
  1. 35
      app/Http/Controllers/Peertube/Channel.php
  2. 640
      public/css/peertube/channel.css
  3. 5
      resources/views/pages/peertube/c.blade.php
  4. 5
      resources/views/theme/techsuwa/component/peertube/c.blade.php
  5. 7
      resources/views/theme/techsuwa/component/peertube/parts/c/head.blade.php
  6. 3
      resources/views/theme/techsuwa/component/peertube/parts/c/head/banner.blade.php
  7. 48
      resources/views/theme/techsuwa/component/peertube/parts/c/head/info.blade.php
  8. 22
      resources/views/theme/techsuwa/component/peertube/parts/c/head/owner.blade.php
  9. 12
      resources/views/theme/techsuwa/component/peertube/parts/c/links.blade.php
  10. 83
      resources/views/theme/techsuwa/component/peertube/parts/c/videos.blade.php
  11. 1
      resources/views/theme/techsuwa/component/peertube/parts/manifest.blade.php
  12. 1
      resources/views/theme/techsuwa/component/peertube/parts/meta.blade.php
  13. 1
      resources/views/theme/techsuwa/component/peertube/parts/stylelink.blade.php
  14. 1
      routes/view/peertube.php

35
app/Http/Controllers/Peertube/Channel.php

@ -0,0 +1,35 @@
<?php
namespace App\Http\Controllers\Peertube;
use Illuminate\Support\Facades\DB;
use Illuminate\Http\Request;
use App\Http\Controllers\Peertube\Common;
// use Illuminate\Support\Facades\Log;
class Channel extends Common {
private $common;
private $count;
public function __construct () {
$this->common = new Common;
$this->count = 25;
}
public function index ($id, $cat='videos', $page=0) {
$res = [];
$res['page'] = 'channel';
$res['cat'] = $cat;
$res['paginate'] = $page;
$res['channel'] = $this->getChannel($id);
$res['video'] = $this->getVideo($id, ($page*$this->count), $this->count);
return view('pages.peertube.c', ['res' => $res]);
}
function getChannel ($id) {
return $this->ptapi_get('/api/v1/video-channels/'.$id);
}
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');
}
}

640
public/css/peertube/channel.css vendored

@ -1 +1,639 @@
/**/
.root {
--myGlobalTopPadding: 60px;
--myChannelImgMargin: 30px;
--myFontSize: 16px;
--myGreyChannelFontSize: 16px;
--myGreyOwnerFontSize: 14px;
}
.banner img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
.banner {
position: relative;
height: 0;
width: 100%;
padding-top: 16.66666666%;
}
.channel-info {
padding-inline-end: var(--gridVideosMiniatureMargins)!important;
padding-inline-start: var(--gridVideosMiniatureMargins)!important;
--gridVideosMiniatureMargins: var(--videosHorizontalMarginContent);
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
background-color: var(--channelBackgroundColor);
margin-bottom: 45px;
padding-top: var(--myGlobalTopPadding);
font-size: var(--myFontSize);
}
.channel-info, .account-info, .channel, .miniature-show-channel, description-html {
background-color: #5e3c62 !important;
}
@media screen and (max-width: 1400px) {
.channel-avatar-row {
grid-column: 1/3;
}
}
.channel-avatar-row {
display: flex;
grid-column: 1;
margin-bottom: 30px;
}
.channel-avatar-row .main-avatar {
display: inline-block;
width: 120px;
height: 120px;
min-width: 120px;
min-height: 120px;
}
.channel-avatar-row > div {
margin-inline-start: var(--myChannelImgMargin);
min-width: 1px;
}
.section-label {
margin-bottom: 5px !important;
}
.inner-form-title, .section-label {
color: #ea81e8 !important;
}
.channel-avatar-row .actor-info {
display: flex;
}
.actor-info {
min-width: 1px;
width: 100%;
}
.channel-avatar-row .actor-info > div:first-child {
flex-grow: 1;
min-width: 1px;
}
.channel-avatar-row .actor-display-name {
word-break: break-word;
word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
hyphens: auto;
display: flex;
flex-wrap: wrap;
}
.channel-avatar-row h1 {
font-size: 28px;
font-weight: 700;
margin: 0;
}
.channel-avatar-row .actor-handle, .channel-avatar-row .actor-counters {
color: var(--greyForegroundColor);
font-size: var(--myGreyChannelFontSize);
}
.channel-avatar-row .actor-handle {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.channel-buttons.right {
margin-inline-start: 45px;
}
.channel-buttons {
display: flex;
flex-wrap: wrap;
}
@media screen and (max-width: 1100px) {
.channel-buttons.bottom {
display: flex;
justify-content: center;
margin-bottom: 30px;
}
}
.channel-buttons.bottom {
display: none;
}
.channel-buttons {
display: flex;
flex-wrap: wrap;
}
.channel-buttons > *:not(:last-child) {
margin-inline-end: 15px;
}
.orange-button, .orange-button:active, .orange-button:focus {
color: #fff;
background-color: var(--mainColor);
}
.peertube-button-link {
padding-inline-end: 17px;
}
.peertube-button-link {
padding-inline-start: 13px;
}
.peertube-button-link {
padding-top: 0;
padding-bottom: 0;
border: 0;
font-weight: 600;
font-size: 15px;
height: 30px;
line-height: 30px;
border-radius: 3px!important;
text-align: center;
cursor: pointer;
display: inline-block;
}
.support-button {
display: inline-flex;
align-items: center;
line-height: normal!important;
}
[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
cursor: pointer;
}
.orange-button-inverted, .orange-button-inverted:active, .orange-button-inverted:focus {
color: var(--mainColor);
background-color: var(--mainBackgroundColor);
}
.orange-button-inverted {
border: 2px solid var(--mainColor);
font-weight: 600;
}
.peertube-button {
padding-inline-end: 17px;
}
.peertube-button {
padding-inline-start: 13px;
}
.peertube-button {
padding-top: 0;
padding-bottom: 0;
border: 0;
font-weight: 600;
font-size: 15px;
height: 30px;
line-height: 30px;
border-radius: 3px!important;
text-align: center;
cursor: pointer;
}
button {
background: unset;
}
button, input[type=button], input[type=file]::-webkit-file-upload-button, input[type=reset], input[type=submit] {
border-radius: 0;
}
[type=button], [type=reset], [type=submit], button {
-webkit-appearance: button;
}
button, select {
text-transform: none;
}
button, input {
overflow: visible;
}
button, input, optgroup, select, textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
button {
border-radius: 0;
}
.support-button my-global-icon {
margin-inline-end: 0;
position: relative;
width: 21px;
top: -1px;
}
.support-button {
display: inline-flex;
align-items: center;
line-height: normal!important;
}
.channel-description {
grid-column: 1;
word-break: break-word;
padding-bottom: var(--myGlobalTopPadding);
}
@media screen and (max-width: 1400px) {
.owner-card {
margin-inline-start: 60px;
grid-row: 2;
}
}
.owner-card {
margin-inline-start: 105px;
}
.owner-card {
grid-column: 2;
grid-row: 1/3;
place-self: end;
}
@media screen and (max-width: 1100px) {
.bottom-owner {
display: block;
width: 100%;
border-bottom: 2px solid rgba(0,0,0,.1);
padding: var(--myGlobalTopPadding) 45px;
margin-bottom: 60px;
}
}
.bottom-owner {
display: none;
}
.owner-block {
background-color: rgba(48, 26, 48, 0.6) !important;
padding: 10px !important;
width: 300px;
font-size: var(--myFontSize);
}
.section-label {
color: var(--mainColor);
font-size: 12px;
margin-bottom: 15px;
font-weight: 700;
letter-spacing: 2.5px;
}
.section-label {
margin-bottom: 5px !important;
}
.inner-form-title, .section-label {
color: #ea81e8 !important;
}
.owner-block .avatar-row {
display: flex;
margin-bottom: 15px;
}
my-actor-avatar {
display: inline-block;
width: 36px;
height: 36px;
min-width: 36px;
min-height: 36px;
margin-inline-end: 10px;
margin-inline-start: 0;
margin-top: 10px;
margin-bottom: 0;
}
.owner-block .avatar-row .actor-info {
margin-inline-start: 15px;
}
.owner-block .avatar-row h4 {
font-size: 18px;
margin: 0;
}
.actor-info > h4, .actor-info > .actor-handle {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.owner-block .avatar-row h4 a {
color: var(--mainForegroundColor);
}
.owner-block .avatar-row .actor-handle {
font-size: var(--myGreyOwnerFontSize);
color: var(--greyForegroundColor);
}
.actor-info > h4, .actor-info > .actor-handle {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.owner-block .owner-description {
position: relative;
overflow: hidden;
max-height: 140px;
word-break: break-word;
}
.owner-description, .icon.icon-logo {
display: none !important;
}
.view-account.short, .view-account.short:active, .view-account.short:focus {
color: var(--mainColor);
background-color: var(--mainBackgroundColor);
}
.view-account.short:focus, .view-account.short.focus-visible {
box-shadow: 0 0 0 .2rem var(--mainColorLightest);
}
.view-account.short:hover, .view-account.short:focus, .view-account.short:active {
text-decoration: none!important;
outline: none!important;
}
.view-account.short {
padding-inline-end: 17px;
}
.view-account.short {
padding-inline-start: 13px;
}
.view-account.short {
padding-top: 0;
padding-bottom: 0;
border: 0;
font-size: 15px;
height: 30px;
line-height: 30px;
border-radius: 3px!important;
text-align: center;
cursor: pointer;
display: inline-block;
border: 2px solid var(--mainColor);
font-weight: 600;
margin-top: 30px;
}
.view-account.complete {
display: none;
}
.links {
margin-inline-end: var(--gridVideosMiniatureMargins)!important;
margin-inline-start: var(--gridVideosMiniatureMargins)!important;
--gridVideosMiniatureMargins: var(--videosHorizontalMarginContent);
}
.margin-content {
margin-inline-end: var(--gridVideosMiniatureMargins)!important;
margin-inline-start: var(--gridVideosMiniatureMargins)!important;
--gridVideosMiniatureMargins: var(--videosHorizontalMarginContent);
}
.main-col .margin-content {
margin: 0 var(--horizontalMarginContent);
flex-grow: 1;
}
.videos-header {
display: grid;
grid-template-columns: auto 1fr auto;
margin-bottom: 30px;
}
.videos-header .title-subscription.no-title {
margin-top: 10px;
}
.videos-header .title-subscription {
grid-row: 2;
font-size: 14px;
color: var(--greyForegroundColor);
}
.videos-header .title, .videos-header .title-subscription {
grid-column: 1;
}
.videos-header my-feed {
margin-inline-start: 5px;
display: inline-block;
width: 16px;
color: var(--mainColor);
position: relative;
top: -2px;
}
.feed {
width: 100%;
}
@media screen and (min-width: 500px) {
.margin-content .videos, .margin-content .playlists {
--miniatureMinWidth: 255px;
--miniatureMaxWidth: 280px;
display: grid;
grid-column-gap: 30px;
column-gap: 30px;
grid-template-columns: repeat(auto-fill,minmax(var(--miniatureMinWidth),1fr));
}
}
@media screen and (min-width: 500px) {
.margin-content .videos .video-wrapper, .margin-content .videos .playlist-wrapper, .margin-content .playlists .video-wrapper, .margin-content .playlists .playlist-wrapper {
margin: 0 auto;
width: 100%;
}
}
@media screen and (min-width: 500px) {
.margin-content .videos .video-wrapper my-video-miniature, .margin-content .videos .video-wrapper my-video-playlist-miniature, .margin-content .videos .playlist-wrapper my-video-miniature, .margin-content .videos .playlist-wrapper my-video-playlist-miniature, .margin-content .playlists .video-wrapper my-video-miniature, .margin-content .playlists .video-wrapper my-video-playlist-miniature, .margin-content .playlists .playlist-wrapper my-video-miniature, .margin-content .playlists .playlist-wrapper my-video-playlist-miniature {
display: block;
min-width: var(--miniatureMinWidth);
max-width: var(--miniatureMaxWidth);
}
}
.video-miniature:not(.display-as-row) {
display: flex;
flex-direction: column;
padding-bottom: 15px;
width: 100%;
}
.video-miniature:not(.display-as-row) my-video-thumbnail {
position: relative;
height: 0;
width: 100%;
padding-top: 56.25%;
}
.video-miniature:not(.display-as-row) my-video-thumbnail .video-thumbnail {
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
.video-thumbnail {
display: flex;
flex-direction: column;
position: relative;
border-radius: 3px;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #ececec;
transition: filter .2s ease;
}
.video-thumbnail img {
width: inherit;
height: inherit;
}
.video-thumbnail-label-overlay.warning {
background-color: orange;
}
.video-thumbnail-label-overlay.danger {
background-color: red;
}
.video-thumbnail-label-overlay {
position: absolute;
padding: 0 5px;
left: 5px;
top: 5px;
font-weight: 700;
}
.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-thumbnail .play-overlay, .video-thumbnail .play-overlay .icon {
transition: all .2s ease;
}
.video-thumbnail .play-overlay {
position: absolute;
right: 0;
bottom: 0;
width: inherit;
height: inherit;
opacity: 0;
background-color: #0000004d;
}
.video-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);
}
.progress-bar {
height: 3px;
width: 100%;
position: absolute;
bottom: 0;
background-color: #0003;
}
.progress-bar div {
height: 100%;
background-color: var(--mainColor);
}
.video-miniature:not(.display-as-row) .video-bottom {
display: flex;
width: 100%;
min-width: 1px;
}
.video-miniature-information {
width: calc(100% - 40px);
}
.video-miniature:not(.display-as-row) .video-miniature-name {
margin-top: 10px;
margin-bottom: 5px;
}
.video-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);
}
.video-miniature:not(.display-as-row) .video-miniature-created-at-views {
display: block;
}
.video-miniature-created-at-views {
font-size: 13px;
}
.video-info-privacy, .video-info-blocked .blocked-label, .video-info-nsfw {
font-weight: 600;
}

5
resources/views/pages/peertube/c.blade.php

@ -0,0 +1,5 @@
@extends('theme.'.env('THEME').'.peertube')
@section('content')
@include('theme.'.env('THEME').'.component.peertube.c')
@endsection

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

@ -0,0 +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')
</div>

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

@ -0,0 +1,7 @@
<div class="main-row">
<div class="root ng-star-inserted">
@include('theme.'.env('THEME').'.component.peertube.parts.c.head.banner')
@include('theme.'.env('THEME').'.component.peertube.parts.c.head.info')
@include('theme.'.env('THEME').'.component.peertube.parts.c.head.owner', ['class' => 'bottom-owner'])
</div>
</div>

3
resources/views/theme/techsuwa/component/peertube/parts/c/head/banner.blade.php

@ -0,0 +1,3 @@
<div class="banner ng-star-inserted">
<img alt="Channel banner" src="https://video.076.ne.jp{{ $res['channel']->banner->path }}">
</div>

48
resources/views/theme/techsuwa/component/peertube/parts/c/head/info.blade.php

@ -0,0 +1,48 @@
<div class="channel-info">
<div class="channel-avatar-row">
<my-actor-avatar class="main-avatar">
<img class="avatar channel ng-star-inserted" src="https://video.076.ne.jp{{ $res['channel']->avatar->path }}" alt="チャンネルのアバター">
</my-actor-avatar>
<div>
<div class="section-label">動画チャンネル</div>
<div class="actor-info">
<div>
<div class="actor-display-name">
<h1 title="Channel created on {{ date('Y/m/d', strtotime($res['channel']->createdAt)) }}">{{ $res['channel']->displayName }}</h1>
</div>
<div class="actor-handle">
<span>@worldorder</span>
</div>
<div class="actor-counters">
<span>{{ $res['channel']->followersCount }}人登録者</span>
<span class="videos-count ng-star-inserted"> {{ $res['video']->total }}枚動画 </span>
</div>
</div>
<div class="channel-buttons right">
@include('theme.'.env('THEME').'.component.peertube.parts.common.subscribe')
<button class="support-button peertube-button orange-button-inverted ng-star-inserted">
<my-global-icon iconname="support" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 947.70386 999.3125" width="947.70386" height="999.3125">
<g transform="translate(2.669496,27.625894)">
<g transform="matrix(0.1,0,0,-0.1,0,511)">
<path d="m 3744.3542,4564.3712 c -217.4,-34.2 -520.3,-200.3 -693.7,-376.2 -263.8,-263.8 -388.4,-571.6 -388.4,-952.6 0,-256.5 44,-437.2 173.4,-684 75.7,-144.1 197.9,-280.9 747.5,-842.7 1106.5,-1133.40001 1138.2,-1165.20001 1253,-1194.50001 188.1,-51.3 214.9,-29.3 1162.7,938.00001 498.3,508.1 911.1,950.2 962.4,1030.8 263.8,415.3 283.3,964.9 48.8,1409.4 -180.8,342 -581.3,620.4 -972.2,676.6 -332.2,48.9 -671.7,-36.6 -967.3,-236.9 l -156.3,-109.9 -119.7,87.9 c -158.8,117.2 -351.8,202.7 -554.5,244.3 -183.1,39.1 -295.4,41.6 -495.7,9.8 z" fill="currentColor"></path>
<path d="m 7991.4051,47.633899 c -39.1,-19.5 -473.9,-437.299999 -964.9,-925.800029 l -891.6,-891.59997 h -830.5 c -757.2,0 -837.8,4.9 -913.6,44 -207.6,112.4 -227.2,415.2 -39.1,561.8 66,53.7 83,53.7 950.2,53.7 989.3,0 1008.8,2.5 1094.3,173.49997 56.2,105 56.2,317.50003 4.9,427.50003 -83.1,175.9 4.8,168.5 -1915.1,168.5 h -1722 l -173.4,-63.5 c -95.3,-34.2 -232.1,-102.6 -305.3,-151.5 -73.3,-48.9 -442.1,-400.60003 -823.2,-779.2 l -688.80006,-693.7 664.40006,-647.3 c 366.4,-354.2 779.2,-754.8 918.4,-889.1 l 251.6,-241.8 481.2,481.2 481.2,481.2 h 1487.6 c 1294.6,0 1494.9,4.9 1565.8,39.1 58.6,26.9 339.6,368.8 1028.4,1248.2 522.8,666.89997 964.9,1243.3 982,1284.9 41.5,92.8 2.5,212.499999 -95.3,297.999999 -66,53.7 -95.3,61.1 -273.6,61.1 -132,-0.1 -224.8,-12.3 -273.6,-39.2 z" fill="currentColor"></path>
</g>
</g>
</svg>
</my-global-icon>
<span class="icon-text">支持</span>
</button>
</div>
</div>
</div>
</div>
<div class="channel-description">
<div class="description-html">
<p>
<?php echo nl2br($res['channel']->description); ?>
</p>
</div>
</div>
@include('theme.'.env('THEME').'.component.peertube.parts.c.head.owner', ['class' => 'owner-card'])
</div>

22
resources/views/theme/techsuwa/component/peertube/parts/c/head/owner.blade.php

@ -0,0 +1,22 @@
<div class="{{ $class }}">
<div class="owner-block ng-star-inserted">
<div class="section-label">OWNER ACCOUNT</div>
<div class="avatar-row">
<my-actor-avatar class="account-avatar">
<a title="{{ $res['channel']->ownerAccount->name }} (アカウントページへ) " href="/peertube/a/{{ $res['channel']->ownerAccount->name }}{{ $res['channel']->ownerAccount->host != 'video.076.ne.jp' ? '@'.$res['channel']->ownerAccount->host : '' }}" class="ng-star-inserted">
<img class="account avatar ng-star-inserted" src="https://video.076.ne.jp{{ $res['channel']->ownerAccount->avatar->path }}" alt="アカウントのアバター">
</a>
</my-actor-avatar>
<div class="actor-info">
<h4>
<a title="視聴回数" href="/peertube/a/{{ $res['channel']->ownerAccount->name }}{{ $res['channel']->ownerAccount->host != 'video.076.ne.jp' ? '@'.$res['channel']->ownerAccount->host : '' }}">{{ $res['channel']->ownerAccount->displayName }}</a>
</h4>
<div class="actor-handle">{{ '@'.$res['channel']->ownerAccount->name }}{{ $res['channel']->ownerAccount->host != 'video.076.ne.jp' ? '@'.$res['channel']->ownerAccount->host : '' }}</div>
</div>
</div>
<div class="owner-description">
<div class="description-html"></div>
</div>
<a class="view-account short" href="/peertube/a/{{ $res['channel']->ownerAccount->name }}{{ $res['channel']->ownerAccount->host != 'video.076.ne.jp' ? '@'.$res['channel']->ownerAccount->host : '' }}">視聴回数</a>
<a class="view-account complete" href="/peertube/a/{{ $res['channel']->ownerAccount->name }}{{ $res['channel']->ownerAccount->host != 'video.076.ne.jp' ? '@'.$res['channel']->ownerAccount->host : '' }}"> View owner account </a>
</div>

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

@ -0,0 +1,12 @@
<div class="links">
<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>
</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>
</span>
</div>
</my-list-overflow>
</div>

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

@ -0,0 +1,83 @@
<my-video-channel-videos class="ng-star-inserted" style="">
<my-videos-list class="ng-star-inserted">
<div class="margin-content">
<div class="videos-header">
<div class="title-subscription no-title ng-star-inserted">
Subscribe to RSS feed "動画"
<my-feed>
<div class="feed">
<my-global-icon role="button" aria-label="Open syndication dropdown" placement="bottom left auto" iconname="syndication" class="icon-syndication ng-star-inserted">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rss"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg>
</my-global-icon>
</div>
</my-feed>
</div>
<div class="action-block"></div>
</div>
<div class="videos">
@foreach ($res['video']->data as $v)
<div class="video-wrapper ng-star-inserted">
<my-video-miniature>
<div class="video-miniature">
<my-video-thumbnail>
<a class="video-thumbnail ng-star-inserted" href="/peertube/w/{{ $v->shortUUID }}">
<img alt="" aria-label="{{ $v->name }}" src="https://video.076.ne.jp{{ $v->thumbnailPath }}" class="ng-star-inserted">
<div class="video-thumbnail-actions-overlay ng-star-inserted">
<div placement="left" container="body" class="video-thumbnail-watch-later-overlay ng-star-inserted">
<my-global-icon iconname="clock" role="button" aria-label="「後で見る」に追加する">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
</my-global-icon>
</div>
</div>
<div class="video-thumbnail-label-overlay warning ng-star-inserted"></div>
<div class="video-thumbnail-label-overlay danger ng-star-inserted"></div>
@php
$seconds = $v->duration;
$hours = floor($seconds / 3600);
$seconds -= $hours * 3600;
$minutes = floor($seconds / 60);
$seconds -= $minutes * 60;
@endphp
<div class="video-thumbnail-duration-overlay ng-star-inserted">{{ $hours != 0 ? $hours.':' : '' }}{{ $minutes != 0 ? $minutes.':' : '0:' }}{{ $seconds }}</div>
<div class="play-overlay ng-star-inserted">
<div class="icon"></div>
</div>
<div class="progress-bar ng-star-inserted">
<div style="width: 100%;"></div>
</div>
</a>
</my-video-thumbnail>
<div class="video-bottom">
<div class="video-miniature-information">
<div class="d-flex video-miniature-meta">
<div class="w-100 d-flex flex-column">
<my-link tabindex="-1" class="video-miniature-name" style="max-height: 3em;">
<a tabindex="-1" title="{{ $v->name }}" href="/peertube/w/{{ $v->shortUUID }}" class="ng-star-inserted"> {{ $v->name }} </a>
</my-link>
<span class="video-miniature-created-at-views">
<my-date-toggle class="ng-star-inserted">
<span class="date-toggle" title="{{ date('Y/m/d', strtotime($v->createdAt)) }}"> {{ date('Y年m月d日 H:i:s T', strtotime($v->createdAt)) }} </span>
</my-date-toggle>
<span class="views" title="">
<my-video-views-counter class="ng-star-inserted">
<span title=""> {{ $v->views }} 回視聴 </span>
</my-video-views-counter>
</span>
</span>
<div class="video-info-privacy"></div>
</div>
</div>
</div>
<div class="video-actions"></div>
</div>
</div>
</my-video-miniature>
</div>
@endforeach
</div>
</div>
</my-videos-list>
</my-video-channel-videos>
@if ($res['paginate'] != 0) <a href="/peertube/c/{{ $res['channel']->name }}{{ $res['channel']->host != 'video.076.ne.jp' ? '@'.$res['channel']->host : '' }}/{{ $res['cat'] }}/{{ $res['paginate']-1 }}" class="block-title">戻り</a> @endif
@if (($res['paginate']*25) < $res['video']->total) <a href="/peertube/c/{{ $res['channel']->name }}{{ $res['channel']->host != 'video.076.ne.jp' ? '@'.$res['channel']->host : '' }}/{{ $res['cat'] }}/{{ $res['paginate']+1 }}" class="block-title"></a> @endif

1
resources/views/theme/techsuwa/component/peertube/parts/manifest.blade.php

@ -4,6 +4,7 @@
if (isset($res['page'])) {
if ($res['page'] == 'watch') $name = $res['detail']->name;
else if ($res['page'] == 'account') $name = $res['owner']->displayName.'さんのチャンネル一覧';
else if ($res['page'] == 'channel') $name = $res['channel']->displayName.'さんのチャンネル';
}
?>

1
resources/views/theme/techsuwa/component/peertube/parts/meta.blade.php

@ -4,6 +4,7 @@
if (isset($res['page'])) {
if ($res['page'] == 'watch') $name = $res['detail']->name;
else if ($res['page'] == 'account') $name = $res['owner']->displayName.'さんのチャンネル一覧';
else if ($res['page'] == 'channel') $name = $res['channel']->displayName.'さんのチャンネル';
}
?>

1
resources/views/theme/techsuwa/component/peertube/parts/stylelink.blade.php

@ -4,6 +4,7 @@
if (isset($res['page'])) {
if ($res['page'] == 'watch') $name = $res['detail']->name;
else if ($res['page'] == 'account') $name = $res['owner']->displayName.'さんのチャンネル一覧';
else if ($res['page'] == 'channel') $name = $res['channel']->displayName.'さんのチャンネル';
}
?>

1
routes/view/peertube.php

@ -2,5 +2,6 @@
Route::group(['prefix' => 'peertube'], function () {
Route::any('/a/{id}', 'Peertube\Account@index');
Route::any('/c/{id}/{cat?}/{page?}', 'Peertube\Channel@index');
Route::any('/w/{id}', 'Peertube\Watch@index');
});

読み込み中…
キャンセル
保存