チャンネルページ
このコミットが含まれているのは:
コミット
e2ca8f8e09
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
@extends('theme.'.env('THEME').'.peertube')
|
||||
|
||||
@section('content')
|
||||
@include('theme.'.env('THEME').'.component.peertube.c')
|
||||
@endsection
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
|
|
@ -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.'さんのチャンネル';
|
||||
}
|
||||
?>
|
||||
|
||||
|
|
|
|||
|
|
@ -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.'さんのチャンネル';
|
||||
}
|
||||
?>
|
||||
|
||||
|
|
|
|||
|
|
@ -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.'さんのチャンネル';
|
||||
}
|
||||
?>
|
||||
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
});
|
||||
|
|
|
|||
新しいイシューから参照