873 lines
32 KiB
PHP
873 lines
32 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;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
/* 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->id) }}" 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->id) : route('videos.like', $video->id) }}"
|
|
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 Button - Only for video owner -->
|
|
@if (Auth::id() === $video->user_id)
|
|
<button class="yt-action-btn" onclick="openEditVideoModal({{ $video->id }})">
|
|
<i class="bi bi-pencil"></i> Edit
|
|
</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="openShareModal('{{ $video->share_url }}', '{{ addslashes($video->title) }}')"><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->id) }}" 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="{{ route('channel', $video->user_id) }}" 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 -->
|
|
@if ($video->description)
|
|
@php
|
|
$fullDescription = $video->description;
|
|
$shortDescription = Str::limit($fullDescription, 200);
|
|
$needsExpand = strlen($fullDescription) > 200;
|
|
@endphp
|
|
|
|
<div class="video-description-box"
|
|
style="background: var(--bg-secondary); border-radius: 12px; padding: 12px; margin-top: 12px;">
|
|
<div class="description-stats" style="font-size: 14px; font-weight: 500; margin-bottom: 8px;">
|
|
<span>{{ number_format($video->view_count) }} views</span>
|
|
<span>•</span>
|
|
<span>{{ $video->created_at->format('M d, Y') }}</span>
|
|
</div>
|
|
<div style="border-bottom: 1px solid var(--border-color); margin: 8px 0;"></div>
|
|
<div class="description-content">
|
|
@if ($needsExpand)
|
|
<div class="description-short">
|
|
<span class="description-text">{!! Str::markdown($shortDescription) !!}</span>
|
|
<span style="color: var(--text-secondary);">... </span>
|
|
</div>
|
|
<div class="description-full" style="display: none;">
|
|
<span class="description-text">{!! Str::markdown($fullDescription) !!}</span>
|
|
</div>
|
|
<button onclick="toggleDescription()"
|
|
style="background: none; border: none; color: var(--text-primary); font-weight: 600; font-size: 14px; cursor: pointer; padding: 0; margin-top: 4px;">Show
|
|
more</button>
|
|
@else
|
|
<span class="description-text">{!! Str::markdown($fullDescription) !!}</span>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function toggleDescription() {
|
|
const short = document.querySelector('.description-short');
|
|
const full = document.querySelector('.description-full');
|
|
const btn = document.querySelector('.video-description-box button');
|
|
if (short.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';
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.video-description-box .description-text {
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.video-description-box .description-text p {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.video-description-box .description-text a {
|
|
color: #3ea6ff;
|
|
}
|
|
</style>
|
|
@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: 12px;">
|
|
<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>
|
|
<div class="recommended-videos-list">
|
|
@foreach ($playlistVideos as $index => $playlistVideo)
|
|
@if ($playlistVideo->id !== $video->id)
|
|
<div class="sidebar-video-card{{ $playlistVideo->id === $video->id ? ' current-video' : '' }}"
|
|
onclick="window.location.href='{{ route('videos.show', $playlistVideo->id) }}?playlist={{ $playlist->id }}'">
|
|
<div class="sidebar-thumb" style="position: relative;">
|
|
@if ($playlistVideo->thumbnail)
|
|
<img src="{{ asset('storage/thumbnails/' . $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">
|
|
<div>{{ $playlistVideo->user->name ?? 'Unknown' }}</div>
|
|
<div>{{ number_format($playlistVideo->view_count) }} views •
|
|
{{ $playlistVideo->created_at->diffForHumans() }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
@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->id) }}'">
|
|
<div class="sidebar-thumb">
|
|
@if ($recVideo->thumbnail)
|
|
<img src="{{ asset('storage/thumbnails/' . $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->id) : route('videos.like', $video->id) }}"
|
|
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" 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->id }});
|
|
});
|
|
</script>
|
|
@endauth
|
|
@endif
|
|
|
|
<script>
|
|
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() {
|
|
console.log('Video autoplayed');
|
|
}).catch(function(error) {
|
|
console.log('Autoplay blocked');
|
|
});
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
@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>
|