05db0e128a
Controls bar added to playlist sidebar header with: - Prev/Next skip buttons (disabled when at bounds) - Shuffle toggle (Fisher-Yates order stored in localStorage) - Loop 3-state: off → loop all → loop one - Autoplay toggle (default on, persists per playlist in localStorage) All state is instant — no page reload on toggle. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1308 lines
53 KiB
PHP
1308 lines
53 KiB
PHP
@extends('layouts.app')
|
|
|
|
@push('head')
|
|
<!-- Open Graph / WhatsApp / Facebook / Twitter / LinkedIn / Telegram Preview -->
|
|
<meta property="og:title" content="{{ $video->title }}">
|
|
<meta property="og:description"
|
|
content="{{ $video->description ? Str::limit($video->description, 200) : 'Watch ' . $video->title . ' on ' . config('app.name') }}">
|
|
<meta property="og:image" content="{{ $video->open_graph_image }}">
|
|
<meta property="og:image:width" content="{{ $video->thumbnail_width }}">
|
|
<meta property="og:image:height" content="{{ $video->thumbnail_height }}">
|
|
<meta property="og:image:alt" content="{{ $video->title }} - Video Thumbnail">
|
|
<meta property="og:url" content="{{ $video->share_url }}">
|
|
<meta property="og:type" content="video.other">
|
|
<meta property="og:site_name" content="{{ config('app.name') }}">
|
|
<meta property="og:locale" content="en_US">
|
|
<meta property="og:author" content="{{ $video->author_name }}">
|
|
<meta property="og:published_time" content="{{ $video->created_at->toIso8601String() }}">
|
|
|
|
<!-- Video-specific Open Graph tags -->
|
|
<meta property="video:duration" content="{{ $video->duration }}">
|
|
<meta property="video:release_date" content="{{ $video->created_at->toIso8601String() }}">
|
|
|
|
<!-- Alternative video tag for some platforms -->
|
|
<meta property="og:video" content="{{ $video->stream_url }}">
|
|
<meta property="og:video:url" content="{{ $video->stream_url }}">
|
|
<meta property="og:video:secure_url" content="{{ $video->stream_url }}">
|
|
<meta property="og:video:type" content="video/mp4">
|
|
<meta property="og:video:width" content="{{ $video->width ?? 1920 }}">
|
|
<meta property="og:video:height" content="{{ $video->height ?? 1080 }}">
|
|
|
|
<!-- Twitter Card - Enhanced for video sharing -->
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:site" content="{{ config('app.name') }}">
|
|
<meta name="twitter:creator" content="{{ $video->author_name }}">
|
|
<meta name="twitter:title" content="{{ $video->title }}">
|
|
<meta name="twitter:description"
|
|
content="{{ $video->description ? Str::limit($video->description, 200) : 'Watch ' . $video->title . ' on ' . config('app.name') }}">
|
|
<meta name="twitter:image" content="{{ $video->open_graph_image }}">
|
|
<meta name="twitter:image:alt" content="{{ $video->title }} - Video Thumbnail">
|
|
|
|
<!-- Twitter Player card for video -->
|
|
<meta name="twitter:player" content="{{ $video->share_url }}">
|
|
<meta name="twitter:player:width" content="{{ $video->width ?? 1920 }}">
|
|
<meta name="twitter:player:height" content="{{ $video->height ?? 1080 }}">
|
|
<meta name="twitter:player:stream" content="{{ $video->stream_url }}">
|
|
|
|
<!-- LinkedIn specific -->
|
|
<meta property="linkedin:owner" content="{{ $video->author_name }}">
|
|
|
|
<!-- Pinterest -->
|
|
<meta name="pinterest-rich-pin" content="true">
|
|
|
|
<!-- WhatsApp specific (uses Open Graph) -->
|
|
<!-- No additional meta needed - uses og: tags above -->
|
|
|
|
<!-- Schema.org VideoObject for search engines -->
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "VideoObject",
|
|
"name": "{{ $video->title }}",
|
|
"description": "{{ $video->description ? addslashes($video->description) : 'Watch ' . addslashes($video->title) . ' on ' . config('app.name') }}",
|
|
"thumbnailUrl": "{{ $video->open_graph_image }}",
|
|
"uploadDate": "{{ $video->created_at->toIso8601String() }}",
|
|
"duration": "{{ $video->iso_duration }}",
|
|
"contentUrl": "{{ $video->stream_url }}",
|
|
"embedUrl": "{{ $video->share_url }}",
|
|
"author": {
|
|
"@type": "Person",
|
|
"name": "{{ $video->author_name }}"
|
|
},
|
|
"publisher": {
|
|
"@type": "Organization",
|
|
"name": "{{ config('app.name') }}",
|
|
"logo": {
|
|
"@type": "ImageObject",
|
|
"url": "{{ asset('storage/images/fullLogo.png') }}"
|
|
}
|
|
},
|
|
"interactionStatistic": [
|
|
{
|
|
"@type": "InteractionCounter",
|
|
"interactionType": "https://schema.org/WatchAction",
|
|
"userInteractionCount": {{ $video->view_count }}
|
|
},
|
|
{
|
|
"@type": "InteractionCounter",
|
|
"interactionType": "https://schema.org/LikeAction",
|
|
"userInteractionCount": {{ $video->like_count }}
|
|
}
|
|
]
|
|
}
|
|
</script>
|
|
@endpush
|
|
|
|
@section('title', $video->title . ' | ' . config('app.name'))
|
|
|
|
@section('extra_styles')
|
|
<style>
|
|
/* Video Section */
|
|
.yt-video-section {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Video Player */
|
|
.video-container {
|
|
position: relative;
|
|
aspect-ratio: 16/9;
|
|
background: #000;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
max-height: 70vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.video-container.portrait,
|
|
.video-container.square,
|
|
.video-container.ultrawide {
|
|
margin: 0 auto;
|
|
width: auto;
|
|
}
|
|
|
|
.video-container.portrait {
|
|
aspect-ratio: 9/16;
|
|
max-width: 50vh;
|
|
}
|
|
|
|
.video-container.square {
|
|
aspect-ratio: 1/1;
|
|
max-width: 70vh;
|
|
}
|
|
|
|
.video-container.ultrawide {
|
|
aspect-ratio: 21/9;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.video-container video {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
/* Video Info */
|
|
.video-title {
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
margin: 16px 0 8px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.video-stats-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding-bottom: 12px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
}
|
|
|
|
.video-stats-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.video-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.yt-action-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 16px;
|
|
border-radius: 20px;
|
|
border: none;
|
|
background: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.yt-action-btn:hover {
|
|
background: var(--border-color);
|
|
}
|
|
|
|
.yt-action-btn.liked {
|
|
color: var(--brand-red);
|
|
}
|
|
|
|
/* Channel Row */
|
|
.channel-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 16px 0;
|
|
}
|
|
|
|
.channel-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.channel-avatar {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
background: #555;
|
|
}
|
|
|
|
.channel-name {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.channel-subs {
|
|
font-size: 14px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.subscribe-btn {
|
|
background: white;
|
|
color: black;
|
|
border: none;
|
|
padding: 8px 16px;
|
|
border-radius: 18px;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Description */
|
|
.video-description {
|
|
background: var(--bg-secondary);
|
|
border-radius: 12px;
|
|
padding: 16px;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.description-text {
|
|
white-space: pre-wrap;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Sidebar */
|
|
.yt-sidebar-container {
|
|
width: 400px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.sidebar-video-card {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 8px;
|
|
cursor: pointer;
|
|
border-radius: 8px;
|
|
padding: 6px;
|
|
transition: background .15s;
|
|
}
|
|
.sidebar-video-card:hover { background: var(--bg-secondary); }
|
|
.sidebar-video-card.current-video {
|
|
background: rgba(230,30,30,.10);
|
|
border-left: 3px solid var(--brand-red);
|
|
padding-left: 9px;
|
|
}
|
|
|
|
.sidebar-thumb {
|
|
width: 168px;
|
|
aspect-ratio: 16/9;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
background: #1a1a1a;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.sidebar-thumb img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.sidebar-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.sidebar-title {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
margin-bottom: 4px;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sidebar-meta {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* Playlist controls bar */
|
|
.pl-controls-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
margin-bottom: 10px;
|
|
padding: 6px 8px;
|
|
background: var(--bg-secondary);
|
|
border-radius: 8px;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
.pl-ctrl-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
padding: 5px 8px;
|
|
border-radius: 6px;
|
|
font-size: 15px;
|
|
transition: color .15s, background .15s;
|
|
white-space: nowrap;
|
|
}
|
|
.pl-ctrl-btn:hover:not(:disabled) {
|
|
color: var(--text-primary);
|
|
background: rgba(255,255,255,.07);
|
|
}
|
|
.pl-ctrl-btn:disabled {
|
|
opacity: .35;
|
|
cursor: default;
|
|
}
|
|
.pl-ctrl-btn.pl-ctrl-active {
|
|
color: var(--brand-red);
|
|
}
|
|
.pl-ctrl-divider {
|
|
width: 1px;
|
|
height: 18px;
|
|
background: var(--border-color);
|
|
margin: 0 2px;
|
|
flex-shrink: 0;
|
|
}
|
|
.pl-ctrl-autoplay {
|
|
margin-left: auto;
|
|
font-size: 13px;
|
|
}
|
|
.pl-autoplay-label {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 1300px) {
|
|
.yt-sidebar-container {
|
|
width: 300px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 991px) {
|
|
.yt-main {
|
|
margin-left: 0;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.yt-sidebar-container {
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
.sidebar-video-card {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sidebar-thumb {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Video Layout Container - Stack vertically on tablet/mobile */
|
|
.video-layout-container {
|
|
flex-direction: column !important;
|
|
}
|
|
|
|
.yt-video-section {
|
|
width: 100% !important;
|
|
flex: none !important;
|
|
}
|
|
|
|
.yt-sidebar-container {
|
|
width: 100% !important;
|
|
margin-top: 16px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.video-stats-row {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.video-actions {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.yt-main {
|
|
padding: 0 !important;
|
|
max-width: 100% !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
/* Mobile video player fixes - always full width */
|
|
.video-layout-container {
|
|
max-width: 100% !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
.yt-video-section {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.video-container {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
max-height: 50vh !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
.video-container video {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
object-fit: contain !important;
|
|
}
|
|
|
|
.video-title {
|
|
font-size: 16px !important;
|
|
margin: 12px 0 6px !important;
|
|
}
|
|
|
|
.channel-row {
|
|
flex-direction: column;
|
|
align-items: flex-start !important;
|
|
gap: 12px;
|
|
}
|
|
|
|
.channel-info {
|
|
width: 100%;
|
|
}
|
|
|
|
.subscribe-btn {
|
|
width: 100%;
|
|
}
|
|
|
|
.video-description {
|
|
padding: 12px !important;
|
|
}
|
|
}
|
|
</style>
|
|
@endsection
|
|
|
|
@section('content')
|
|
|
|
<!-- Video Layout Container -->
|
|
<div class="video-layout-container" style="display: flex; gap: 24px; max-width: 1800px; margin: 0 auto;">
|
|
|
|
<!-- Video Section -->
|
|
<div class="yt-video-section">
|
|
<!-- Video Player -->
|
|
<div class="video-container @if ($video->orientation === 'portrait') portrait @elseif($video->orientation === 'square') square @elseif($video->orientation === 'ultrawide') ultrawide @endif"
|
|
id="videoContainer">
|
|
<video id="videoPlayer" controls playsinline preload="metadata" autoplay>
|
|
<source src="{{ route('videos.stream', $video) }}" type="video/mp4">
|
|
</video>
|
|
</div>
|
|
|
|
@php
|
|
$typeIcon = match ($video->type) {
|
|
'music' => 'bi-music-note',
|
|
'match' => 'bi-trophy',
|
|
default => 'bi-film',
|
|
};
|
|
@endphp
|
|
|
|
<!-- Video Title with Type Icon -->
|
|
<h1 class="video-title" style="display: flex; align-items: center; gap: 10px;">
|
|
<i class="bi {{ $typeIcon }}" style="color: #ef4444;"></i>
|
|
<span>{{ $video->title }}</span>
|
|
</h1>
|
|
|
|
<!-- Stats Row -->
|
|
<div class="video-stats-row">
|
|
<div class="video-stats-left">
|
|
<span>{{ number_format($video->view_count) }} views</span>
|
|
<span>•</span>
|
|
<span>{{ $video->created_at->format('M d, Y') }}</span>
|
|
</div>
|
|
<div class="video-actions">
|
|
@auth
|
|
<!-- Like Button -->
|
|
<form method="POST"
|
|
action="{{ $video->isLikedBy(Auth::user()) ? route('videos.unlike', $video) : route('videos.like', $video) }}"
|
|
class="d-inline">
|
|
@csrf
|
|
<button type="submit" class="yt-action-btn {{ $video->isLikedBy(Auth::user()) ? 'liked' : '' }}">
|
|
<i
|
|
class="bi {{ $video->isLikedBy(Auth::user()) ? 'bi-hand-thumbs-up-fill' : 'bi-hand-thumbs-up' }}"></i>
|
|
{{ $video->like_count > 0 ? number_format($video->like_count) : 'Like' }}
|
|
</button>
|
|
</form>
|
|
|
|
<!-- Edit / Delete Buttons - Only for video owner -->
|
|
@if (Auth::id() === $video->user_id)
|
|
<button class="yt-action-btn" onclick="openEditVideoModal('{{ $video->getRouteKey() }}')">
|
|
<i class="bi bi-pencil"></i> Edit
|
|
</button>
|
|
<button class="yt-action-btn" onclick="openVideoDeleteDialog()"
|
|
style="color:#ef4444;">
|
|
<i class="bi bi-trash"></i> Delete
|
|
</button>
|
|
@endif
|
|
@else
|
|
<a href="{{ route('login') }}" class="yt-action-btn">
|
|
<i class="bi bi-hand-thumbs-up"></i> Like
|
|
</a>
|
|
@endauth
|
|
@if ($video->isShareable())
|
|
<button class="yt-action-btn"
|
|
onclick="videoShare('{{ $video->share_url }}', '{{ addslashes($video->title) }}', '{{ route('videos.recordShare', $video) }}')"><i
|
|
class="bi bi-share"></i> Share</button>
|
|
@endif
|
|
|
|
<!-- Save to Playlist Button -->
|
|
<button class="yt-action-btn" onclick="openAddToPlaylistModal({{ $video->id }})">
|
|
<i class="bi bi-collection-plus"></i> Save
|
|
</button>
|
|
@auth
|
|
<!-- Quick Watch Later Button -->
|
|
<form method="POST" action="{{ route('videos.watchLater', $video) }}" class="d-inline"
|
|
style="display: inline;">
|
|
@csrf
|
|
<button type="submit" class="yt-action-btn" title="Watch Later">
|
|
<i class="bi bi-clock"></i>
|
|
</button>
|
|
</form>
|
|
@endauth
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Channel Row -->
|
|
<div class="channel-row"
|
|
style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;">
|
|
<div style="display: flex; align-items: center; gap: 12px;">
|
|
<a href="{{ $video->user ? route('channel', $video->user->channel) : '#' }}" class="channel-info text-decoration-none"
|
|
style="color: inherit; display: flex; align-items: center; gap: 12px;">
|
|
@if ($video->user)
|
|
<img src="{{ $video->user->avatar_url }}" class="channel-avatar"
|
|
style="width: 36px; height: 36px;" alt="{{ $video->user->name }}">
|
|
@else
|
|
<div class="channel-avatar" style="width: 36px; height: 36px;"></div>
|
|
@endif
|
|
<div>
|
|
<div class="channel-name">{{ $video->user->name ?? 'Unknown' }}</div>
|
|
<div class="channel-subs">{{ number_format($video->user->subscriber_count ?? 0) }} subscribers
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
{{-- Subscribe Button --}}
|
|
@auth
|
|
@if (Auth::id() !== $video->user_id)
|
|
<button class="subscribe-btn">Subscribe</button>
|
|
@endif
|
|
@else
|
|
<a href="{{ route('login') }}" class="subscribe-btn">Subscribe</a>
|
|
@endauth
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ── Description / Insights box ── --}}
|
|
@php
|
|
$isVideoOwner = Auth::check() && Auth::id() === $video->user_id;
|
|
$hasDesc = !empty($video->description);
|
|
$showBox = $hasDesc || $isVideoOwner;
|
|
@endphp
|
|
@if ($showBox)
|
|
@php
|
|
$fullDescription = $video->description ?? '';
|
|
$shortDescription = Str::limit($fullDescription, 200);
|
|
$needsExpand = strlen($fullDescription) > 200;
|
|
@endphp
|
|
|
|
<style>
|
|
/* ── Description box ── */
|
|
.vdb-wrap {
|
|
background: var(--bg-secondary);
|
|
border-radius: 12px;
|
|
margin-top: 12px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
.vdb-tabs {
|
|
display: flex;
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding: 0 4px;
|
|
}
|
|
.vdb-tab {
|
|
background: none; border: none;
|
|
color: var(--text-secondary);
|
|
font-size: 13px; font-weight: 600;
|
|
padding: 0 16px; height: 44px;
|
|
cursor: pointer; position: relative;
|
|
transition: color .15s; white-space: nowrap;
|
|
display: flex; align-items: center; gap: 6px;
|
|
}
|
|
.vdb-tab:hover { color: var(--text-primary); }
|
|
.vdb-tab.active { color: var(--text-primary); }
|
|
.vdb-tab.active::after {
|
|
content: ''; position: absolute; bottom: 0; left: 0; right: 0;
|
|
height: 2px; background: #ef4444; border-radius: 2px 2px 0 0;
|
|
}
|
|
.vdb-panel { display: none; padding: 14px 16px 16px; }
|
|
.vdb-panel.active { display: block; }
|
|
|
|
/* About panel */
|
|
.vdb-meta { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 10px; display: flex; gap: 10px; flex-wrap: wrap; }
|
|
.vdb-desc-text { font-size: 14px; line-height: 1.6; color: var(--text-primary); white-space: pre-wrap; }
|
|
.vdb-desc-text p { margin-bottom: 8px; }
|
|
.vdb-desc-text a { color: #3ea6ff; }
|
|
.vdb-show-more { background: none; border: none; color: var(--text-primary); font-weight: 700; font-size: 13px; cursor: pointer; padding: 6px 0 0; }
|
|
|
|
</style>
|
|
|
|
<div class="vdb-wrap" id="vdbWrap">
|
|
{{-- Tab bar --}}
|
|
<div class="vdb-tabs">
|
|
<button class="vdb-tab active" data-panel="vdb-about" onclick="switchVdbTab('vdb-about',this)">
|
|
<i class="bi bi-card-text"></i> About
|
|
</button>
|
|
@if($isVideoOwner)
|
|
<button class="vdb-tab" data-panel="vdb-insights" onclick="switchVdbTab('vdb-insights',this)" id="insightsTabBtn">
|
|
<i class="bi bi-bar-chart-line-fill"></i> Insights
|
|
</button>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- About panel --}}
|
|
<div class="vdb-panel active" id="vdb-about">
|
|
<div class="vdb-meta">
|
|
<span><i class="bi bi-eye" style="margin-right:4px;"></i>{{ number_format($video->view_count) }} views</span>
|
|
<span>•</span>
|
|
<span>{{ $video->created_at->format('M d, Y') }}</span>
|
|
@if($video->duration)
|
|
<span>•</span>
|
|
<span><i class="bi bi-clock" style="margin-right:4px;"></i>{{ $video->formatted_duration }}</span>
|
|
@endif
|
|
</div>
|
|
@if($hasDesc)
|
|
<div id="vdbDescShort" class="vdb-desc-text">{{ $needsExpand ? $shortDescription : $fullDescription }}</div>
|
|
@if($needsExpand)
|
|
<div id="vdbDescFull" class="vdb-desc-text" style="display:none;">{{ $fullDescription }}</div>
|
|
<button class="vdb-show-more" onclick="toggleVdbDesc(this)">Show more</button>
|
|
@endif
|
|
@else
|
|
<p style="font-size:13px;color:var(--text-secondary);margin:0;">No description added.</p>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- Insights panel (owner only) --}}
|
|
@if($isVideoOwner)
|
|
<x-video-insights :video="$video" />
|
|
@endif
|
|
</div>
|
|
|
|
<script>
|
|
// ── Tab switching ──────────────────────────────────────
|
|
function switchVdbTab(panelId, btn) {
|
|
document.querySelectorAll('.vdb-tab').forEach(b => b.classList.remove('active'));
|
|
document.querySelectorAll('.vdb-panel').forEach(p => p.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
document.getElementById(panelId).classList.add('active');
|
|
if (panelId === 'vdb-insights' && !window._insLoaded) loadInsights();
|
|
}
|
|
|
|
// ── Description expand/collapse ───────────────────────
|
|
function toggleVdbDesc(btn) {
|
|
const short = document.getElementById('vdbDescShort');
|
|
const full = document.getElementById('vdbDescFull');
|
|
if (full.style.display === 'none') {
|
|
short.style.display = 'none';
|
|
full.style.display = 'block';
|
|
btn.textContent = 'Show less';
|
|
} else {
|
|
short.style.display = 'block';
|
|
full.style.display = 'none';
|
|
btn.textContent = 'Show more';
|
|
}
|
|
}
|
|
|
|
// ── Share + track ──────────────────────────────────────
|
|
function videoShare(url, title, trackUrl) {
|
|
openShareModal(url, title);
|
|
fetch(trackUrl, {
|
|
method: 'POST',
|
|
headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '', 'Accept': 'application/json' }
|
|
}).catch(() => {});
|
|
}
|
|
|
|
</script>
|
|
@endif
|
|
|
|
@include('components.video-comments', ['video' => $video])
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar - Up Next / Recommendations -->
|
|
<div class="yt-sidebar-container">
|
|
@if ($playlist && $playlistVideos && $playlistVideos->count() > 0)
|
|
<h3 style="font-size: 16px; font-weight: 500; margin-bottom: 8px;">
|
|
<i class="bi bi-collection-play" style="margin-right: 8px;"></i>
|
|
{{ $playlist->name }}
|
|
<span
|
|
style="font-weight: 400; color: var(--text-secondary); font-size: 14px;">({{ $playlistVideos->count() }}
|
|
videos)</span>
|
|
</h3>
|
|
|
|
{{-- Playlist playback controls --}}
|
|
<div class="pl-controls-bar">
|
|
<button class="pl-ctrl-btn" id="plPrevBtn" title="Previous"
|
|
@if(!$previousVideo) disabled @endif
|
|
onclick="plGoTo('{{ $previousVideo ? route('videos.show', $previousVideo).'?playlist='.$playlist->share_token : '' }}')">
|
|
<i class="bi bi-skip-start-fill"></i>
|
|
</button>
|
|
<button class="pl-ctrl-btn" id="plNextBtn" title="Next"
|
|
onclick="plNext()">
|
|
<i class="bi bi-skip-end-fill"></i>
|
|
</button>
|
|
<div class="pl-ctrl-divider"></div>
|
|
<button class="pl-ctrl-btn" id="plShuffleBtn" title="Shuffle" onclick="plToggleShuffle()">
|
|
<i class="bi bi-shuffle"></i>
|
|
</button>
|
|
<button class="pl-ctrl-btn" id="plLoopBtn" title="Loop" onclick="plToggleLoop()">
|
|
<i class="bi bi-repeat"></i>
|
|
</button>
|
|
<button class="pl-ctrl-btn pl-ctrl-autoplay" id="plAutoplayBtn" title="Autoplay" onclick="plToggleAutoplay()">
|
|
<i class="bi bi-play-circle"></i>
|
|
<span class="pl-autoplay-label">Autoplay</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="recommended-videos-list" id="plVideoList">
|
|
@foreach ($playlistVideos as $index => $playlistVideo)
|
|
@php $isCurrent = $playlistVideo->id === $video->id; @endphp
|
|
<div class="sidebar-video-card{{ $isCurrent ? ' current-video' : '' }}"
|
|
{{ $isCurrent ? '' : "onclick=\"window.location.href='".route('videos.show', $playlistVideo)."?playlist={$playlist->share_token}'\"" }}
|
|
style="{{ $isCurrent ? 'cursor:default;' : 'cursor:pointer;' }}">
|
|
<div class="sidebar-thumb" style="position: relative;">
|
|
@if ($playlistVideo->thumbnail)
|
|
<img src="{{ route('media.thumbnail', $playlistVideo->thumbnail) }}"
|
|
alt="{{ $playlistVideo->title }}">
|
|
@else
|
|
<img src="https://picsum.photos/seed/{{ $playlistVideo->id }}/320/180"
|
|
alt="{{ $playlistVideo->title }}">
|
|
@endif
|
|
@if ($playlistVideo->duration)
|
|
<span class="yt-video-duration">{{ gmdate('i:s', $playlistVideo->duration) }}</span>
|
|
@endif
|
|
@if ($playlistVideo->is_shorts)
|
|
<span class="yt-shorts-badge"
|
|
style="position: absolute; top: 8px; left: 8px; font-size: 10px; padding: 2px 6px;">
|
|
<i class="bi bi-collection-play-fill"></i> SHORTS
|
|
</span>
|
|
@endif
|
|
<!-- Playlist position indicator -->
|
|
<span
|
|
style="position: absolute; bottom: 4px; left: 4px; background: rgba(0,0,0,0.8); color: white; padding: 2px 6px; border-radius: 4px; font-size: 12px; font-weight: 500;">
|
|
{{ $index + 1 }}
|
|
</span>
|
|
</div>
|
|
<div class="sidebar-info">
|
|
<div class="sidebar-title">
|
|
<i class="bi {{ match ($playlistVideo->type) {'music' => 'bi-music-note','match' => 'bi-trophy',default => 'bi-film'} }}"
|
|
style="color: #ef4444; margin-right: 4px; font-size: 12px;"></i>
|
|
{{ Str::limit($playlistVideo->title, 60) }}
|
|
</div>
|
|
<div class="sidebar-meta">
|
|
@if($isCurrent)
|
|
<div style="color:var(--brand-red);font-weight:600;font-size:11px;">▶ Now Playing</div>
|
|
@else
|
|
<div>{{ $playlistVideo->user->name ?? 'Unknown' }}</div>
|
|
<div>{{ number_format($playlistVideo->view_count) }} views •
|
|
{{ $playlistVideo->created_at->diffForHumans() }}</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@if ($playlist->canEdit(Auth::user()))
|
|
<a href="{{ route('playlists.show', $playlist->id) }}" class="yt-action-btn"
|
|
style="margin-top: 12px; display: inline-block;">
|
|
<i class="bi bi-pencil"></i> Edit Playlist
|
|
</a>
|
|
@endif
|
|
@else
|
|
<h3 style="font-size: 16px; font-weight: 500; margin-bottom: 12px;">Up Next</h3>
|
|
@if ($recommendedVideos && $recommendedVideos->count() > 0)
|
|
<div class="recommended-videos-list">
|
|
@foreach ($recommendedVideos as $recVideo)
|
|
<div class="sidebar-video-card"
|
|
onclick="window.location.href='{{ route('videos.show', $recVideo) }}'">
|
|
<div class="sidebar-thumb" style="position: relative;">
|
|
@if ($recVideo->thumbnail)
|
|
<img src="{{ route('media.thumbnail', $recVideo->thumbnail) }}"
|
|
alt="{{ $recVideo->title }}">
|
|
@else
|
|
<img src="https://picsum.photos/seed/{{ $recVideo->id }}/320/180"
|
|
alt="{{ $recVideo->title }}">
|
|
@endif
|
|
@if ($recVideo->duration)
|
|
<span class="yt-video-duration">{{ gmdate('i:s', $recVideo->duration) }}</span>
|
|
@endif
|
|
@if ($recVideo->is_shorts)
|
|
<span class="yt-shorts-badge"
|
|
style="position: absolute; top: 8px; left: 8px; font-size: 10px; padding: 2px 6px;">
|
|
<i class="bi bi-collection-play-fill"></i> SHORTS
|
|
</span>
|
|
@endif
|
|
</div>
|
|
<div class="sidebar-info">
|
|
<div class="sidebar-title">
|
|
<i class="bi {{ match ($recVideo->type) {'music' => 'bi-music-note','match' => 'bi-trophy',default => 'bi-film'} }}"
|
|
style="color: #ef4444; margin-right: 4px; font-size: 12px;"></i>
|
|
{{ Str::limit($recVideo->title, 60) }}
|
|
</div>
|
|
<div class="sidebar-meta">
|
|
<div>{{ $recVideo->user->name ?? 'Unknown' }}</div>
|
|
<div>{{ number_format($recVideo->view_count) }} views •
|
|
{{ $recVideo->created_at->diffForHumans() }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@else
|
|
<div class="text-secondary">No recommendations available yet. Check back later!</div>
|
|
@endif
|
|
@endif
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Mobile Bottom Action Bar -->
|
|
<div class="mobile-bottom-bar">
|
|
@auth
|
|
<form method="POST"
|
|
action="{{ $video->isLikedBy(Auth::user()) ? route('videos.unlike', $video) : route('videos.like', $video) }}"
|
|
class="d-inline" style="flex:1;">
|
|
@csrf
|
|
<button type="submit" class="yt-action-btn {{ $video->isLikedBy(Auth::user()) ? 'liked' : '' }}"
|
|
style="width:100%;">
|
|
<i class="bi {{ $video->isLikedBy(Auth::user()) ? 'bi-hand-thumbs-up-fill' : 'bi-hand-thumbs-up' }}"></i>
|
|
<span>{{ $video->like_count > 0 ? number_format($video->like_count) : 'Like' }}</span>
|
|
</button>
|
|
</form>
|
|
@else
|
|
<a href="{{ route('login') }}" class="yt-action-btn" style="flex:1;text-align:center;">
|
|
<i class="bi bi-hand-thumbs-up"></i><span>Like</span>
|
|
</a>
|
|
@endauth
|
|
|
|
@if ($video->isShareable())
|
|
<button class="yt-action-btn"
|
|
onclick="openShareModal('{{ $video->share_url }}', '{{ addslashes($video->title) }}')" style="flex:1;">
|
|
<i class="bi bi-share"></i><span>Share</span>
|
|
</button>
|
|
@endif
|
|
|
|
<button class="yt-action-btn" onclick="openAddToPlaylistModal({{ $video->id }})" style="flex:1;">
|
|
<i class="bi bi-collection-plus"></i><span>Save</span>
|
|
</button>
|
|
|
|
@auth
|
|
@if (Auth::id() === $video->user_id)
|
|
<button class="yt-action-btn" onclick="openVideoDeleteDialog()"
|
|
style="flex:1;color:#ef4444;">
|
|
<i class="bi bi-trash"></i><span>Delete</span>
|
|
</button>
|
|
@else
|
|
<button class="yt-action-btn" style="flex:1;background:var(--brand-red);color:white;">
|
|
<i class="bi bi-bell"></i><span>Subscribe</span>
|
|
</button>
|
|
@endif
|
|
@else
|
|
<a href="{{ route('login') }}" class="yt-action-btn"
|
|
style="flex:1;background:var(--brand-red);color:white;text-align:center;">
|
|
<i class="bi bi-bell"></i><span>Subscribe</span>
|
|
</a>
|
|
@endauth
|
|
</div>
|
|
|
|
@include('layouts.partials.share-modal')
|
|
@include('layouts.partials.edit-video-modal')
|
|
@include('layouts.partials.add-to-playlist-modal')
|
|
|
|
@if (Session::has('openEditModal') && Session::get('openEditModal'))
|
|
@auth
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
openEditVideoModal('{{ $video->getRouteKey() }}');
|
|
});
|
|
</script>
|
|
@endauth
|
|
@endif
|
|
|
|
@if(session('_auto_dl_video') && $video->isAudioOnly())
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
if (typeof startSlideshowDownload === 'function') {
|
|
startSlideshowDownload('{{ $video->getRouteKey() }}');
|
|
}
|
|
});
|
|
</script>
|
|
@endif
|
|
|
|
<script>
|
|
@if($playlist && $playlistVideos && $playlistVideos->count() > 0)
|
|
// ── Playlist data ────────────────────────────────────────────────────────
|
|
var PL_ID = '{{ $playlist->share_token }}';
|
|
var PL_TOKEN = '{{ $playlist->share_token }}';
|
|
var PL_CURRENT = {{ $video->id }};
|
|
var PL_NEXT_URL = '{{ $nextVideo ? route("videos.show", $nextVideo)."?playlist=".$playlist->share_token : "" }}';
|
|
var PL_PREV_URL = '{{ $previousVideo ? route("videos.show", $previousVideo)."?playlist=".$playlist->share_token : "" }}';
|
|
var PL_FIRST_URL = '{{ $playlistVideos->count() ? route("videos.show", $playlistVideos->first())."?playlist=".$playlist->share_token : "" }}';
|
|
var PL_VIDEOS = {!! $playlistVideos->map(fn($v) => [
|
|
'id' => $v->id,
|
|
'url' => route('videos.show', $v).'?playlist='.$playlist->share_token,
|
|
])->values()->toJson() !!};
|
|
|
|
// ── localStorage helpers ─────────────────────────────────────────────────
|
|
function plGet(key, def) {
|
|
var v = localStorage.getItem('pl_' + key + '_' + PL_ID);
|
|
return v !== null ? v : def;
|
|
}
|
|
function plSet(key, val) { localStorage.setItem('pl_' + key + '_' + PL_ID, val); }
|
|
|
|
// ── State (persisted per playlist) ───────────────────────────────────────
|
|
// autoplay: '1' | '0' (default on)
|
|
// loop: 'off' | 'all' | 'one'
|
|
// shuffle: '1' | '0'
|
|
var plAutoplay = plGet('autoplay', '1');
|
|
var plLoop = plGet('loop', 'off');
|
|
var plShuffle = plGet('shuffle', '0');
|
|
|
|
// Shuffled order: array of indices into PL_VIDEOS
|
|
function plGetShuffleOrder() {
|
|
var raw = localStorage.getItem('pl_shuffleOrder_' + PL_ID);
|
|
if (raw) { try { return JSON.parse(raw); } catch(e){} }
|
|
return null;
|
|
}
|
|
function plBuildShuffleOrder() {
|
|
var order = PL_VIDEOS.map(function(_,i){ return i; });
|
|
for (var i = order.length - 1; i > 0; i--) {
|
|
var j = Math.floor(Math.random() * (i + 1));
|
|
var t = order[i]; order[i] = order[j]; order[j] = t;
|
|
}
|
|
localStorage.setItem('pl_shuffleOrder_' + PL_ID, JSON.stringify(order));
|
|
return order;
|
|
}
|
|
|
|
// ── Navigation ───────────────────────────────────────────────────────────
|
|
function plGoTo(url) { if (url) window.location.href = url; }
|
|
|
|
function plNext() {
|
|
if (plShuffle === '1') {
|
|
var order = plGetShuffleOrder() || plBuildShuffleOrder();
|
|
var curIdx = PL_VIDEOS.findIndex(function(v){ return v.id === PL_CURRENT; });
|
|
var pos = order.indexOf(curIdx);
|
|
var nextPos = (pos + 1) % order.length;
|
|
if (pos === order.length - 1 && plLoop !== 'all') return; // end of shuffle, no loop
|
|
window.location.href = PL_VIDEOS[order[nextPos]].url;
|
|
} else {
|
|
if (PL_NEXT_URL) {
|
|
window.location.href = PL_NEXT_URL;
|
|
} else if (plLoop === 'all' && PL_FIRST_URL) {
|
|
window.location.href = PL_FIRST_URL;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ── Button UI ────────────────────────────────────────────────────────────
|
|
function plRenderControls() {
|
|
var shuffleBtn = document.getElementById('plShuffleBtn');
|
|
var loopBtn = document.getElementById('plLoopBtn');
|
|
var autoplayBtn = document.getElementById('plAutoplayBtn');
|
|
var nextBtn = document.getElementById('plNextBtn');
|
|
var prevBtn = document.getElementById('plPrevBtn');
|
|
|
|
// Shuffle
|
|
if (shuffleBtn) {
|
|
shuffleBtn.classList.toggle('pl-ctrl-active', plShuffle === '1');
|
|
shuffleBtn.title = plShuffle === '1' ? 'Shuffle: On' : 'Shuffle: Off';
|
|
}
|
|
|
|
// Loop
|
|
if (loopBtn) {
|
|
loopBtn.classList.remove('pl-ctrl-active');
|
|
if (plLoop === 'all') {
|
|
loopBtn.classList.add('pl-ctrl-active');
|
|
loopBtn.innerHTML = '<i class="bi bi-repeat"></i>';
|
|
loopBtn.title = 'Loop: All';
|
|
} else if (plLoop === 'one') {
|
|
loopBtn.classList.add('pl-ctrl-active');
|
|
loopBtn.innerHTML = '<i class="bi bi-repeat-1"></i>';
|
|
loopBtn.title = 'Loop: One';
|
|
} else {
|
|
loopBtn.innerHTML = '<i class="bi bi-repeat"></i>';
|
|
loopBtn.title = 'Loop: Off';
|
|
}
|
|
}
|
|
|
|
// Autoplay
|
|
if (autoplayBtn) {
|
|
autoplayBtn.classList.toggle('pl-ctrl-active', plAutoplay === '1');
|
|
autoplayBtn.title = plAutoplay === '1' ? 'Autoplay: On' : 'Autoplay: Off';
|
|
}
|
|
|
|
// Next/Prev availability
|
|
if (nextBtn) nextBtn.disabled = !PL_NEXT_URL && plLoop !== 'all' && plShuffle !== '1';
|
|
if (prevBtn) prevBtn.disabled = !PL_PREV_URL;
|
|
}
|
|
|
|
// ── Toggle handlers ──────────────────────────────────────────────────────
|
|
function plToggleShuffle() {
|
|
plShuffle = plShuffle === '1' ? '0' : '1';
|
|
plSet('shuffle', plShuffle);
|
|
if (plShuffle === '1') plBuildShuffleOrder();
|
|
else localStorage.removeItem('pl_shuffleOrder_' + PL_ID);
|
|
plRenderControls();
|
|
}
|
|
|
|
function plToggleLoop() {
|
|
var states = ['off', 'all', 'one'];
|
|
var idx = states.indexOf(plLoop);
|
|
plLoop = states[(idx + 1) % states.length];
|
|
plSet('loop', plLoop);
|
|
plRenderControls();
|
|
// Apply loop-one directly on the video element
|
|
var vp = document.getElementById('videoPlayer');
|
|
if (vp) vp.loop = (plLoop === 'one');
|
|
}
|
|
|
|
function plToggleAutoplay() {
|
|
plAutoplay = plAutoplay === '1' ? '0' : '1';
|
|
plSet('autoplay', plAutoplay);
|
|
plRenderControls();
|
|
}
|
|
|
|
@endif
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
var videoPlayer = document.getElementById('videoPlayer');
|
|
if (videoPlayer) {
|
|
videoPlayer.volume = 0.5;
|
|
var playPromise = videoPlayer.play();
|
|
if (playPromise !== undefined) {
|
|
playPromise.then(function() {}).catch(function() {});
|
|
}
|
|
|
|
@if($playlist && $playlistVideos && $playlistVideos->count() > 0)
|
|
// Apply loop-one state immediately on load
|
|
if (plLoop === 'one') videoPlayer.loop = true;
|
|
|
|
videoPlayer.addEventListener('ended', function() {
|
|
if (plLoop === 'one') return; // native loop handles it
|
|
|
|
if (plAutoplay === '1') {
|
|
plNext();
|
|
}
|
|
// If autoplay off, do nothing — video just stops
|
|
});
|
|
|
|
// Render control states
|
|
plRenderControls();
|
|
@endif
|
|
}
|
|
|
|
// Scroll current video into view in sidebar
|
|
var currentCard = document.querySelector('.sidebar-video-card.current-video');
|
|
if (currentCard) {
|
|
setTimeout(function() {
|
|
currentCard.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
|
|
}, 400);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
@auth
|
|
@if(Auth::id() === $video->user_id)
|
|
@php $owner2fa = Auth::user()->two_factor_enabled && Auth::user()->two_factor_secret; @endphp
|
|
|
|
{{-- Delete confirmation dialog --}}
|
|
<div id="videoDeleteDialog" style="display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:16px;" onclick="if(event.target===this)closeVideoDeleteDialog()">
|
|
<div style="background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;width:100%;max-width:420px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.6);">
|
|
<div style="padding:20px 24px 16px;border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;">
|
|
<div style="display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;color:#ef4444;">
|
|
<i class="bi bi-trash"></i> Delete Video
|
|
</div>
|
|
<button onclick="closeVideoDeleteDialog()" style="background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:18px;line-height:1;padding:4px;"><i class="bi bi-x-lg"></i></button>
|
|
</div>
|
|
<div style="padding:20px 24px;">
|
|
<p style="margin:0 0 12px;font-size:14px;color:var(--text-primary);">
|
|
You are about to permanently delete <strong>{{ $video->title }}</strong>.
|
|
</p>
|
|
<div style="background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);border-radius:8px;padding:10px 14px;font-size:13px;color:#fca5a5;display:flex;gap:8px;align-items:flex-start;">
|
|
<i class="bi bi-exclamation-triangle-fill" style="flex-shrink:0;margin-top:1px;"></i>
|
|
<span>All views, likes, comments, and HLS files will also be deleted. This cannot be undone.</span>
|
|
</div>
|
|
@if($owner2fa)
|
|
<div style="margin-top:16px;">
|
|
<label style="font-size:13px;color:var(--text-secondary);display:flex;align-items:center;gap:6px;margin-bottom:8px;">
|
|
<i class="bi bi-shield-lock-fill" style="color:#a78bfa;"></i>
|
|
Enter your <strong style="color:var(--text-primary);">2FA code</strong> to confirm
|
|
</label>
|
|
<input type="text" id="delVideoOtp" inputmode="numeric" pattern="[0-9]*"
|
|
maxlength="6" autocomplete="one-time-code" placeholder="000000"
|
|
style="width:100%;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:8px;padding:10px 14px;color:#fff;font-size:22px;letter-spacing:.3em;text-align:center;box-sizing:border-box;">
|
|
</div>
|
|
@endif
|
|
<div id="delVideoError" style="display:none;margin-top:12px;padding:8px 12px;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);border-radius:6px;color:#f87171;font-size:13px;"></div>
|
|
</div>
|
|
<div style="padding:12px 24px 20px;display:flex;gap:10px;justify-content:flex-end;">
|
|
<button onclick="closeVideoDeleteDialog()" class="yt-action-btn">Cancel</button>
|
|
<button id="delVideoConfirmBtn" onclick="confirmVideoDelete()" class="yt-action-btn" style="background:#ef4444;color:#fff;border-color:#ef4444;">
|
|
<i class="bi bi-trash"></i> Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const _owner2fa = {{ $owner2fa ? 'true' : 'false' }};
|
|
const _videoDeleteUrl = '{{ route('videos.destroy', $video) }}';
|
|
const _videoCsrf = '{{ csrf_token() }}';
|
|
|
|
function openVideoDeleteDialog() {
|
|
const dlg = document.getElementById('videoDeleteDialog');
|
|
dlg.style.display = 'flex';
|
|
dlg.style.alignItems = 'center';
|
|
dlg.style.justifyContent = 'center';
|
|
document.getElementById('delVideoError').style.display = 'none';
|
|
if (_owner2fa) { document.getElementById('delVideoOtp').value = ''; setTimeout(() => document.getElementById('delVideoOtp').focus(), 100); }
|
|
}
|
|
function closeVideoDeleteDialog() {
|
|
document.getElementById('videoDeleteDialog').style.display = 'none';
|
|
}
|
|
function confirmVideoDelete() {
|
|
const btn = document.getElementById('delVideoConfirmBtn');
|
|
const errEl = document.getElementById('delVideoError');
|
|
const otpCode = _owner2fa ? document.getElementById('delVideoOtp').value.replace(/\s/g,'') : '';
|
|
|
|
if (_owner2fa && otpCode.length !== 6) {
|
|
errEl.textContent = 'Please enter your 6-digit 2FA code.';
|
|
errEl.style.display = 'block';
|
|
document.getElementById('delVideoOtp').focus();
|
|
return;
|
|
}
|
|
|
|
btn.disabled = true;
|
|
btn.innerHTML = '<i class="bi bi-hourglass-split"></i> Deleting…';
|
|
errEl.style.display = 'none';
|
|
|
|
const body = new URLSearchParams({ '_token': _videoCsrf, '_method': 'DELETE' });
|
|
if (_owner2fa) body.append('otp_code', otpCode);
|
|
|
|
fetch(_videoDeleteUrl, {
|
|
method: 'POST',
|
|
headers: { 'Accept': 'application/json', 'Content-Type': 'application/x-www-form-urlencoded' },
|
|
body: body.toString()
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
window.location.href = '/';
|
|
} else {
|
|
errEl.textContent = data.message || 'Delete failed.';
|
|
errEl.style.display = 'block';
|
|
btn.disabled = false;
|
|
btn.innerHTML = '<i class="bi bi-trash"></i> Delete';
|
|
if (_owner2fa) { document.getElementById('delVideoOtp').value = ''; document.getElementById('delVideoOtp').focus(); }
|
|
}
|
|
})
|
|
.catch(() => {
|
|
errEl.textContent = 'An error occurred. Please try again.';
|
|
errEl.style.display = 'block';
|
|
btn.disabled = false;
|
|
btn.innerHTML = '<i class="bi bi-trash"></i> Delete';
|
|
});
|
|
}
|
|
document.addEventListener('keydown', e => { if (e.key === 'Escape') closeVideoDeleteDialog(); });
|
|
</script>
|
|
@endif
|
|
@endauth
|
|
@endsection
|
|
|
|
|
|
/* Mobile Bottom Action Bar */
|
|
@media (max-width: 576px) {
|
|
.mobile-bottom-bar {
|
|
display: flex !important;
|
|
}
|
|
.desktop-actions {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.mobile-bottom-bar {
|
|
display: none;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: var(--bg-primary);
|
|
border-top: 1px solid var(--border-color);
|
|
padding: 12px 16px;
|
|
justify-content: space-around;
|
|
z-index: 1000;
|
|
gap: 8px;
|
|
box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.mobile-bottom-bar .yt-action-btn {
|
|
flex: 1;
|
|
justify-content: center;
|
|
padding: 12px 8px;
|
|
font-size: 12px;
|
|
min-height: 44px;
|
|
}
|
|
|
|
.mobile-bottom-bar .yt-action-btn i {
|
|
font-size: 18px;
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.yt-video-section {
|
|
padding-bottom: 70px;
|
|
}
|
|
}
|
|
|
|
|
|
<!-- Extra Mobile Styles -->
|
|
<style>
|
|
@media (max-width: 400px) {
|
|
.video-layout-container {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.video-title {
|
|
font-size: 15px !important;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
.video-stats-left {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.video-description-box {
|
|
margin: 12px 4px;
|
|
padding: 10px !important;
|
|
}
|
|
|
|
.comments-section {
|
|
margin-top: 16px;
|
|
padding: 12px 4px;
|
|
}
|
|
|
|
.comment-form {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.comment-form>img {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|