66fd78c10f
Introduce per-video language support and multiple audio tracks (VideoAudioTrack model + migrations for language, description, title), a reusable language-select component, and a track-editor form. Bundle the self-hosted flag-icons v7.2.3 library and a NAS auto-sync command. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
120 lines
3.8 KiB
PHP
120 lines
3.8 KiB
PHP
@props(['playlist'])
|
|
|
|
@php
|
|
$pl = $playlist;
|
|
$firstVid = $pl->videos->first();
|
|
$plUrl = $firstVid
|
|
? route('videos.show', $firstVid) . '?playlist=' . $pl->share_token
|
|
: route('playlists.show', $pl->id);
|
|
@endphp
|
|
|
|
@once
|
|
<style>
|
|
.pl-count-badge {
|
|
position: absolute;
|
|
inset: 0 0 0 auto;
|
|
width: 72px;
|
|
background: rgba(0,0,0,.78);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
pointer-events: none;
|
|
z-index: 3;
|
|
}
|
|
.pl-count-badge i { font-size: 20px; }
|
|
.pl-visibility-badge {
|
|
position: absolute;
|
|
bottom: 8px;
|
|
left: 8px;
|
|
background: rgba(0,0,0,.75);
|
|
color: #fff;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
padding: 3px 8px;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
text-transform: uppercase;
|
|
letter-spacing: .4px;
|
|
pointer-events: none;
|
|
z-index: 3;
|
|
}
|
|
.pl-type-badge {
|
|
position: absolute;
|
|
top: 8px;
|
|
left: 8px;
|
|
background: rgba(0,0,0,.82);
|
|
color: #a78bfa;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
padding: 3px 7px;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
text-transform: uppercase;
|
|
letter-spacing: .4px;
|
|
pointer-events: none;
|
|
white-space: nowrap;
|
|
z-index: 3;
|
|
}
|
|
</style>
|
|
@endonce
|
|
|
|
<div class="yt-video-card">
|
|
<a href="{{ $plUrl }}">
|
|
<div class="yt-video-thumb">
|
|
<img src="{{ $pl->thumbnail_url }}" alt="{{ $pl->name }}" loading="lazy" decoding="async" onload="this.classList.add('loaded');this.closest('.yt-video-thumb').classList.add('loaded')">
|
|
<div class="pl-count-badge">
|
|
<i class="bi bi-collection-play-fill"></i>
|
|
{{ $pl->videos_count }}
|
|
</div>
|
|
<span class="pl-type-badge">
|
|
<i class="bi bi-collection-play-fill"></i> Playlist
|
|
</span>
|
|
@if($pl->visibility === 'private')
|
|
<span class="pl-visibility-badge"><i class="bi bi-lock-fill"></i> Private</span>
|
|
@elseif($pl->visibility === 'unlisted')
|
|
<span class="pl-visibility-badge"><i class="bi bi-link-45deg"></i> Unlisted</span>
|
|
@endif
|
|
</div>
|
|
</a>
|
|
<div class="yt-video-info">
|
|
<div class="yt-channel-icon"
|
|
style="cursor:pointer;"
|
|
onclick="window.location.href='{{ $pl->user ? route('channel', $pl->user->channel) : '#' }}'">
|
|
@if($pl->user?->avatar_url)
|
|
<img src="{{ $pl->user->avatar_url }}" alt="{{ $pl->user->name }}"
|
|
style="width:100%;height:100%;object-fit:cover;border-radius:50%;">
|
|
@elseif($pl->user)
|
|
<span style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;">
|
|
{{ mb_strtoupper(mb_substr($pl->user->name, 0, 1)) }}
|
|
</span>
|
|
@endif
|
|
</div>
|
|
<div class="yt-video-details">
|
|
<h3 class="yt-video-title">
|
|
<a href="{{ $plUrl }}">{{ $pl->name }}</a>
|
|
</h3>
|
|
@if($pl->user)
|
|
<a href="{{ route('channel', $pl->user->channel) }}" class="yt-channel-name"
|
|
onclick="event.stopPropagation()">{{ $pl->user->name }}</a>
|
|
@endif
|
|
<div class="yt-video-meta">
|
|
<span class="yt-type-label" style="color:#a78bfa;">
|
|
<i class="bi bi-collection-play-fill"></i>
|
|
Playlist
|
|
</span>
|
|
·
|
|
{{ number_format($pl->view_count) }} {{ Str::plural('view', $pl->view_count) }} · {{ $pl->created_at->diffForHumans() }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|