From f850f40f7803b52fa3e91de759a450369f5f5793 Mon Sep 17 00:00:00 2001 From: ghassan Date: Sun, 15 Mar 2026 04:06:35 +0300 Subject: [PATCH] all is working great --- app/Http/Controllers/VideoController.php | 6 +- .../views/emails/video-uploaded.blade.php | 77 +- .../partials/confirm-delete-modal.blade.php | 29 + resources/views/videos/index.blade.php | 298 +- resources/views/videos/shorts.blade.php | 609 +- resources/views/videos/show.blade.php | 89 +- .../views/videos/types/generic.blade.php | 317 +- .../views/videos/types/match.blade-old.php | 2276 ------- resources/views/videos/types/match.blade.php | 5348 ++++++++++------- resources/views/videos/types/music.blade.php | 797 ++- .../types/music.blade.php-script-append | 45 + 11 files changed, 4609 insertions(+), 5282 deletions(-) create mode 100644 resources/views/layouts/partials/confirm-delete-modal.blade.php delete mode 100644 resources/views/videos/types/match.blade-old.php create mode 100644 resources/views/videos/types/music.blade.php-script-append diff --git a/app/Http/Controllers/VideoController.php b/app/Http/Controllers/VideoController.php index cae07d0..711df84 100644 --- a/app/Http/Controllers/VideoController.php +++ b/app/Http/Controllers/VideoController.php @@ -23,7 +23,7 @@ class VideoController extends Controller public function index() { - $videos = Video::public()->latest()->paginate(12); + $videos = Video::public()->latest()->get(); return view('videos.index', compact('videos')); } @@ -42,7 +42,7 @@ class VideoController extends Controller ->orWhere('description', 'like', "%{$query}%"); }) ->latest() - ->paginate(12); + ->get(); return view('videos.index', compact('videos', 'query')); } @@ -491,7 +491,7 @@ class VideoController extends Controller ->where('status', 'ready') ->with('user') ->latest() - ->paginate(12); + ->get(); return view('videos.shorts', compact('videos')); } diff --git a/resources/views/emails/video-uploaded.blade.php b/resources/views/emails/video-uploaded.blade.php index 2ef248b..82a2240 100644 --- a/resources/views/emails/video-uploaded.blade.php +++ b/resources/views/emails/video-uploaded.blade.php @@ -1,14 +1,41 @@ + +
@@ -19,16 +46,44 @@

Hi {{ $userName }},

Your video "{{ $video->title }}" has been uploaded successfully!

Your video is now being processed and will be available shortly.

-

Video Details:

-
    -
  • Size: {{ round($video->size / 1024 / 1024, 2) }} MB
    • -
  • Orientation: {{ $video->orientation }}
    • -
-

View Video

+ +

Check out your uploaded video:

+
+ @if ($video->thumbnail) + + {{ $video->title }} + + @else +
+ + {{ Str::limit($video->title, 30) }} +
+

Thumbnail generating...

+ @endif +
+ +
+

Video Details:

+
    +
  • Title: {{ $video->title }}
    • +
  • Size: {{ round($video->size / 1024 / 1024, 2) }} MB
    • +
  • Orientation: {{ $video->orientation ?? 'Horizontal' }}
    • +
+
+ +

+ ▶️ + Watch Video +

+

TAKEONE Video Platform

+ diff --git a/resources/views/layouts/partials/confirm-delete-modal.blade.php b/resources/views/layouts/partials/confirm-delete-modal.blade.php new file mode 100644 index 0000000..2d5bc51 --- /dev/null +++ b/resources/views/layouts/partials/confirm-delete-modal.blade.php @@ -0,0 +1,29 @@ + diff --git a/resources/views/videos/index.blade.php b/resources/views/videos/index.blade.php index dd65722..9cb64e3 100644 --- a/resources/views/videos/index.blade.php +++ b/resources/views/videos/index.blade.php @@ -1,6 +1,7 @@ @extends('layouts.app') -@section('title', isset($query) ? 'Search: ' . $query . ' | ' . config('app.name') : 'Video Gallery | ' . config('app.name')) +@section('title', isset($query) ? 'Search: ' . $query . ' | ' . config('app.name') : 'Video Gallery | ' . + config('app.name')) @section('extra_styles') @endsection @@ -203,118 +210,129 @@

Search results for "{{ $query }}"

{{ $videos->total() }} videos found

- @endif - - @if($videos->isEmpty()) -
- - @isset($query) -

No results found

-

Try different keywords or browse all videos.

- @else -

No videos yet

-

Be the first to upload a video!

- @endisset - @auth - - - Upload Video - - @else - - - Login to Upload - - @endauth -
- @else -
- @foreach($videos as $video) - - @endforeach -
- -
{{ $videos->links() }}
- @endif - - @include('layouts.partials.share-modal') -@endsection + @endif + + @if ($videos->isEmpty()) +
+ + @isset($query) +

No results found

+

Try different keywords or browse all videos.

+ @else +

No videos yet

+

Be the first to upload a video!

+ @endisset + @auth + + + Upload Video + + @else + + + Login to Upload + + @endauth +
+ @else +
+ @foreach ($videos as $video) + + @endforeach +
+ + @endif + + @include('layouts.partials.share-modal') + @endsection @section('scripts') - + function stopVideo(card) { + const video = card.querySelector('video'); + if (video) { + video.pause(); + video.currentTime = 0; + video.classList.remove('active'); + } + } + + // Mobile touch support for hover-like behavior + document.addEventListener('touchstart', function(e) { + const card = e.target.closest('.yt-video-card'); + if (card) { + // Stop any other playing videos first + document.querySelectorAll('.yt-video-card').forEach(function(otherCard) { + if (otherCard !== card) { + stopVideo(otherCard); + } + }); + playVideo(card); + } + }, { + passive: true + }); + + document.addEventListener('touchend', function(e) { + const card = e.target.closest('.yt-video-card'); + if (card) { + stopVideo(card); + } + }, { + passive: true + }); + @endsection - - + + .yt-video-thumb { + border-radius: 8px; + } + + .yt-video-info { + gap: 8px; + margin-top: 8px; + } + + .yt-channel-icon { + width: 28px; + height: 28px; + } + + .yt-video-title { + font-size: 13px; + } + + .yt-channel-name, + .yt-video-meta { + font-size: 11px; + } + + .search-info { + padding: 12px; + } + + .search-info h2 { + font-size: 16px; + } + } + diff --git a/resources/views/videos/shorts.blade.php b/resources/views/videos/shorts.blade.php index 0486101..7617e44 100644 --- a/resources/views/videos/shorts.blade.php +++ b/resources/views/videos/shorts.blade.php @@ -3,351 +3,348 @@ @section('title', 'Shorts - ' . config('app.name')) @section('content') -
-
- -
-
-
- -
-

Shorts

-
-
- - -
- @forelse($videos as $video) -
- -
- {{ $video->title }} -
- - {{ number_format($video->view_count) }} - -
- @if($video->duration) - {{ gmdate('i:s', $video->duration) }} - @endif -
-
-

{{ $video->title }}

-
- @if($video->user) -
- @if($video->user->avatar_url) - {{ $video->user->name }} - @else -
{{ substr($video->user->name, 0, 1) }}
- @endif - {{ $video->user->name }} -
- @endif - {{ $video->created_at->diffForHumans() }} -
-
- -
- @empty -
-
- +
+
+ +
+
+
+
-

No Shorts yet

-

Be the first to upload a Short!

- @auth - - Upload Short - - @else - - Login to Upload - - @endauth +

Shorts

- @endforelse -
+
+ + +
+ @forelse($videos as $video) +
+ +
+ {{ $video->title }} +
+ + {{ number_format($video->view_count) }} + +
+ @if ($video->duration) + {{ gmdate('i:s', $video->duration) }} + @endif +
+
+

{{ $video->title }}

+
+ @if ($video->user) +
+ @if ($video->user->avatar_url) + {{ $video->user->name }} + @else +
+ {{ substr($video->user->name, 0, 1) }}
+ @endif + {{ $video->user->name }} +
+ @endif + {{ $video->created_at->diffForHumans() }} +
+
+ +
+ @empty +
+
+ +
+

No Shorts yet

+

Be the first to upload a Short!

+ @auth + + Upload Short + + @else + + Login to Upload + + @endauth +
+ @endforelse +
+ - - @if($videos->hasPages()) -
- {{ $videos->links() }}
- @endif
-
- + @media (max-width: 600px) { + .shorts-container { + grid-template-columns: 1fr; + max-width: 320px; + margin: 0 auto; + } + + .shorts-header { + text-align: center; + } + + .shorts-brand { + justify-content: center; + } + } + @endsection - diff --git a/resources/views/videos/show.blade.php b/resources/views/videos/show.blade.php index 85074f3..f900bcb 100644 --- a/resources/views/videos/show.blade.php +++ b/resources/views/videos/show.blade.php @@ -492,7 +492,8 @@ @auth -
+ @csrf - {{ Str::limit($previousVideo->title, 20) }} - @else - - @endif + @if ($nextVideo || $previousVideo) +
+ + @if ($previousVideo) + + {{ Str::limit($previousVideo->title, 20) }} + @else + + @endif - -
- - + +
+ + +
+ + + @if ($nextVideo) + {{ Str::limit($nextVideo->title, 20) }} + + @else + + @endif +
+
+
- - - @if($nextVideo) - {{ Str::limit($nextVideo->title, 20) }} - - @else - - @endif -
-
- -
@endif
@@ -530,8 +571,9 @@ @if (Auth::id() !== $video->user_id) @else - @endif @else @@ -543,7 +585,7 @@ action="{{ $video->isLikedBy(Auth::user()) ? route('videos.unlike', $video->id) : route('videos.like', $video->id) }}" class="d-inline"> @csrf - @endif + + + + +
@@ -646,15 +699,20 @@
{{ Auth::user()->name }} -
- -
- - -
+
+ + +
@else @@ -690,29 +748,69 @@ }) }) .then(response => response.json()) + .catch(error => { + console.error('Error:', error); + alert('Failed to post comment: ' + error); + }) .then(data => { - if (data.success) { + if (data && data.success) { document.getElementById('commentBody').value = ''; - location.reload(); + addCommentToList(data.comment); + } else { + alert('Failed to post comment'); } }); } - function deleteComment(commentId) { - if (!confirm('Are you sure you want to delete this comment?')) return; + function addCommentToList(comment) { + const commentsList = document.getElementById('commentsList'); + const commentHtml = ` +
+ ${comment.user.name} +
+
+ ${comment.user.name} + just now +
+
+ ${comment.body.replace(/@(\\w+)/g, '@$1')} +
+
+ +
+
+
+ `; + commentsList.insertAdjacentHTML('afterbegin', commentHtml); + const commentCount = document.querySelector('h3 span'); + if (commentCount) { + const count = parseInt(commentCount.textContent.match(/\\((\\d+)\\)/)?.[2] || 0) + 1; + commentCount.textContent = `(${count})`; + } + } - fetch(`/comments/${commentId}`, { - method: 'DELETE', - headers: { - 'X-CSRF-TOKEN': '{{ csrf_token() }}' - } - }) - .then(response => response.json()) - .then(data => { - if (data.success) { - location.reload(); - } - }); + function deleteComment(commentId) { + if (confirm('Are you sure you want to delete this comment?')) { + fetch(`/comments/${commentId}`, { + method: 'DELETE', + headers: { + 'X-CSRF-TOKEN': '{{ csrf_token() }}' + } + }) + .then(response => response.json()) + .then(data => { + if (data.success) { + document.getElementById('comment-' + commentId).remove(); + const commentCount = document.querySelector('h3 span'); + if (commentCount) { + const count = parseInt(commentCount.textContent.match(/\\((\\d+)\\)/)?.[2] || 0) - 1; + commentCount.textContent = `(${count})`; + } + } + }); + } } document.addEventListener('DOMContentLoaded', function() { @@ -752,57 +850,62 @@
- @if($playlist && $playlistVideos && $playlistVideos->count() > 0) + @if ($playlist && $playlistVideos && $playlistVideos->count() > 0)

{{ $playlist->name }} - ({{ $playlistVideos->count() }} videos) + ({{ $playlistVideos->count() }} + videos)

- @foreach($playlistVideos as $index => $playlistVideo) - @if($playlistVideo->id !== $video->id) -
-
- @if ($playlistVideo->thumbnail) - {{ $playlistVideo->title }} - @else - {{ $playlistVideo->title }} - @endif - @if ($playlistVideo->duration) - {{ gmdate('i:s', $playlistVideo->duration) }} - @endif - @if ($playlistVideo->is_shorts) - - SHORTS + @foreach ($playlistVideos as $index => $playlistVideo) + @if ($playlistVideo->id !== $video->id) +
+
+ @if ($playlistVideo->thumbnail) + {{ $playlistVideo->title }} + @else + {{ $playlistVideo->title }} + @endif + @if ($playlistVideo->duration) + {{ gmdate('i:s', $playlistVideo->duration) }} + @endif + @if ($playlistVideo->is_shorts) + + SHORTS + + @endif + + + {{ $index + 1 }} - @endif - - - {{ $index + 1 }} - -
-
-
- - {{ Str::limit($playlistVideo->title, 60) }}
-
-
{{ $playlistVideo->user->name ?? 'Unknown' }}
-
{{ number_format($playlistVideo->view_count) }} views • - {{ $playlistVideo->created_at->diffForHumans() }}
+
+
+ + {{ Str::limit($playlistVideo->title, 60) }} +
+
+
{{ $playlistVideo->user->name ?? 'Unknown' }}
+
{{ number_format($playlistVideo->view_count) }} views • + {{ $playlistVideo->created_at->diffForHumans() }}
+
-
@endif @endforeach
- @if($playlist->canEdit(Auth::user())) - + @if ($playlist->canEdit(Auth::user())) + Edit Playlist @endif @@ -938,11 +1041,9 @@ // Keyboard navigation document.addEventListener('keydown', function(e) { - // Only handle if not typing in an input if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') { return; } - if (e.key === 'ArrowLeft') { e.preventDefault(); goToPreviousVideo(); diff --git a/resources/views/videos/types/match.blade-old.php b/resources/views/videos/types/match.blade-old.php deleted file mode 100644 index dd1730e..0000000 --- a/resources/views/videos/types/match.blade-old.php +++ /dev/null @@ -1,2276 +0,0 @@ -@extends('layouts.app') - -@section('title', $video->title . ' | ' . config('app.name')) - -@section('extra_styles') - -@endsection - -@section('content') - - -
- - -
- -
- - - - @if($nextVideo || $previousVideo) -
- - @if($previousVideo) - - {{ Str::limit($previousVideo->title, 20) }} - @else - - @endif - - -
- - -
- - - @if($nextVideo) - {{ Str::limit($nextVideo->title, 20) }} - - @else - - @endif -
-
- -
- @endif -
- - -

- - {{ $video->title }} -

- - - - - -
- - -
- @auth - @if(Auth::id() !== $video->user_id) - - @else - - @endif - @else - - @endauth - - @auth - - @csrf - - - @else - - Like - - @endauth - - @if($video->isShareable()) - - @endif -
-
- - - @if($video->description) - @php - $fullDescription = $video->description; - $shortDescription = Str::limit($fullDescription, 200); - $needsExpand = strlen($fullDescription) > 200; - @endphp - -
-
- {{ number_format($video->view_count) }} views - • - {{ $video->created_at->format('M d, Y') }} -
-
-
- -
-
-
Final • Male -63kg division
-
- -
-
-
-
- Blue fighter -
-
- - Blue -
-
-
-
Ali Mohammed
-
Blue Dragons Club
-
- 🇧🇭 - Bahrain -
-
-
- -
-
- 7 - Final score - 5 -
-
-
- Referee -
-
- M. Al‑Khalifa -
-
Center Referee
-
-
- -
-
-
- - Red -
-
- Red fighter -
-
-
-
Omar Al‑Khaled
-
Red Tigers TKD
-
- 🇸🇦 - Saudi Arabia -
-
-
-
- -
- - 📍 Manama Sports Hall - - • Electronic scoring system (PSS & head‑gear) • Video replay - available for head kicks and gam-jeom appeals -
-
- -
-

Match Overview

-

- This Male U18 -63kg final features three 2:00 rounds (with a - golden point tie-breaker) showcasing a classic clash of styles: - Blue drives the action with relentless pressure, body kicks, and - ring control, while Red utilizes angle changes to set up tactical - head-shot counters. When analyzing the replay, coaches and - athletes should focus on distance management and guard resets - immediately following exchanges, specifically noting how conceding - points affects a fighter's momentum and leads to hesitation. - Furthermore, close attention should be paid to the effectiveness - of corner instructions and tactical time-outs, evaluating how - consistently each fighter adheres to the established game plan - during the high-fatigue environment of the final 30 seconds of - every round. -

-

- Coaches can also focus on corner instructions between rounds, the - timing of tactical time-outs, and how often each athlete follows - the game plan under fatigue in the closing 30 seconds of every - round. -

-
- - @if($needsExpand) -
- {!! Str::markdown($shortDescription) !!} - ... -
- - - @else - {!! Str::markdown($fullDescription) !!} - @endif -
-
- - - - - @endif - - -
-

- Comments ({{ $video->comment_count }}) -

- - @auth -
- {{ Auth::user()->name }} -
- -
- - -
-
-
- @else -
- Sign in to comment -
- @endauth - -
- @forelse($video->comments()->whereNull('parent_id')->with('user', 'replies.user')->latest()->get() as $comment) - @include('videos.partials.comment', ['comment' => $comment]) - @empty -

No comments yet. Be the first to comment!

- @endforelse -
-
- - -
- - -
- -
- - - - - - - - - - - - - -
- - @include('layouts.partials.share-modal') - @include('layouts.partials.edit-video-modal') - - @if(Session::has('openEditModal') && Session::get('openEditModal')) - @auth - - @endauth - @endif - - -@endsection diff --git a/resources/views/videos/types/match.blade.php b/resources/views/videos/types/match.blade.php index 419a41c..eab25c0 100644 --- a/resources/views/videos/types/match.blade.php +++ b/resources/views/videos/types/match.blade.php @@ -2,2082 +2,2830 @@ @section('title', ($video->title ?? 'Match Video') . ' | ' . config('app.name')) @section('extra_styles') - + .match-highlights-toggle:hover { + background: rgba(255, 255, 255, 0.12); + border-color: rgba(255, 255, 255, 0.3); + transform: translateY(-1px); + } + + /* No rotation animation */ + + /* Hide sidebar by default */ + .events-sidebar { + display: none; + } + + .events-sidebar.show { + display: flex; + } + + /* ===== Playlist Navigation Controls ===== */ + .playlist-controls { + position: absolute; + bottom: 60px; + left: 50%; + transform: translateX(-50%); + display: flex; + align-items: center; + gap: 12px; + background: rgba(0, 0, 0, 0.8); + padding: 8px 16px; + border-radius: 24px; + z-index: 10; + opacity: 0; + transition: opacity 0.3s ease; + } + + .video-container:hover .playlist-controls, + .playlist-controls.visible { + opacity: 1; + } + + .playlist-nav-btn { + background: transparent; + border: none; + color: white; + cursor: pointer; + padding: 8px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + transition: background 0.2s ease; + } + + .playlist-nav-btn:hover { + background: rgba(255, 255, 255, 0.2); + } + + .playlist-nav-btn:disabled { + opacity: 0.3; + cursor: not-allowed; + } + + .playlist-nav-btn:disabled:hover { + background: transparent; + } + + .playlist-nav-btn i { + font-size: 20px; + } + + .playlist-nav-label { + font-size: 12px; + color: #aaa; + max-width: 120px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + /* ===== Autoplay Toggle ===== */ + .autoplay-toggle { + display: flex; + align-items: center; + gap: 8px; + padding: 0 8px; + border-left: 1px solid rgba(255, 255, 255, 0.2); + } + + .autoplay-toggle label { + font-size: 12px; + color: #aaa; + cursor: pointer; + white-space: nowrap; + } + + .autoplay-switch { + position: relative; + width: 36px; + height: 20px; + } + + .autoplay-switch input { + opacity: 0; + width: 0; + height: 0; + } + + .autoplay-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #666; + transition: 0.3s; + border-radius: 20px; + } + + .autoplay-slider:before { + position: absolute; + content: ""; + height: 14px; + width: 14px; + left: 3px; + bottom: 3px; + background-color: white; + transition: 0.3s; + border-radius: 50%; + } + + .autoplay-switch input:checked+.autoplay-slider { + background-color: var(--brand-red); + } + + .autoplay-switch input:checked+.autoplay-slider:before { + transform: translateX(16px); + } + + /* ===== Keyboard Hint ===== */ + .keyboard-hint { + position: absolute; + bottom: 10px; + right: 10px; + font-size: 10px; + color: rgba(255, 255, 255, 0.5); + background: rgba(0, 0, 0, 0.6); + padding: 4px 8px; + border-radius: 4px; + } + + /* ===== 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; + } + + /* ===== Event Header ===== */ + .event-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + margin-top: 16px; + padding: 12px 0; + } + + .event-header-left { + display: flex; + align-items: flex-start; + gap: 12px; + min-width: 0; + flex: 1; + } + + .event-logo { + width: 56px; + height: 56px; + border-radius: 14px; + overflow: hidden; + background: var(--bg-secondary); + border: 1px solid var(--border-color); + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + } + + .event-logo img { + width: 100%; + height: 100%; + object-fit: contain; + } + + .event-text { + display: flex; + flex-direction: column; + gap: 4px; + min-width: 0; + flex: 1; + } + + .event-text .title { + font-size: 1.4rem; + margin: 0; + line-height: 1.3; + color: var(--text-primary); + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 8px; + } + + .event-text .title .trophy-icon { + color: #ef4444; + font-size: 1.2rem; + } + + .event-text .title a { + color: inherit; + text-decoration: none; + } + + .event-text .title a:hover { + text-decoration: underline; + opacity: 0.85; + } + + .event-text .meta-link { + font-size: 0.85rem; + color: var(--text-secondary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + text-decoration: none; + cursor: pointer; + transition: color 0.2s ease; + } + + .event-text .meta-link:hover { + color: var(--brand-red); + } + + .event-text .meta-link a { + color: inherit; + font-weight: bold; + text-decoration: none; + } + + .event-text .meta-link a:hover { + text-decoration: underline; + } + + .event-header-actions { + display: flex; + align-items: center; + gap: 8px; + flex-shrink: 0; + } + + .event-header-actions .action-btn { + border: none; + border-radius: 8px; + padding: 8px 14px; + font-size: 0.82rem; + font-weight: 500; + cursor: pointer; + background: var(--bg-secondary); + border: 1px solid var(--border-color); + color: var(--text-primary); + display: flex; + align-items: center; + gap: 6px; + transition: all 0.2s ease; + } + + .event-header-actions .action-btn:hover { + background: var(--border-color); + transform: translateY(-1px); + } + + .event-header-actions .action-btn:active { + transform: translateY(0); + } + + .event-header-actions .action-btn svg, + .event-header-actions .action-btn i { + flex-shrink: 0; + } + + .event-header-actions .action-btn.liked { + color: var(--brand-red); + } + + .action-btn, + .comment-section .action-btn { + border: none; + border-radius: 8px; + padding: 8px 14px; + font-size: 0.82rem; + font-weight: 500; + cursor: pointer; + background: var(--bg-secondary); + border: 1px solid var(--border-color); + color: var(--text-primary); + display: flex; + align-items: center; + gap: 6px; + transition: all 0.2s ease; + } + + .action-btn:hover, + .comment-section .action-btn:hover { + background: var(--border-color); + transform: translateY(-1px); + } + + .action-btn:active, + .comment-section .action-btn:active { + transform: translateY(0); + } + + .action-btn svg, + .action-btn i, + .comment-section .action-btn svg, + .comment-section .action-btn i { + flex-shrink: 0; + } + + .action-btn.comment-btn { + background: var(--brand-red); + color: white; + border-color: var(--brand-red); + } + + .event-header-actions .action-btn.disliked { + color: #ef4444; + background: rgba(239, 68, 68, 0.15); + border-color: #ef4444; + } + + .event-header-actions .action-btn.saved { + color: #f59e0b; + background: rgba(245, 158, 11, 0.15); + border-color: #f59e0b; + } + + .event-header-actions .action-btn.subscribed { + color: #ffffff; + background: #6b7280; + border-color: #6b7280; + } + + /* Video Owner Badge */ + .video-owner-badge { + display: inline-flex; + align-items: center; + gap: 6px; + font-size: 0.85rem; + color: var(--text-secondary); + margin-top: 4px; + } + + .video-owner-badge .owner-avatar { + width: 24px; + height: 24px; + border-radius: 50%; + object-fit: cover; + } + + .video-owner-badge .owner-name { + color: var(--text-primary); + font-weight: 500; + } + + /* ===== Description Panel ===== */ + .description-panel { + margin-top: 16px; + border-radius: 12px; + padding: 8px 10px 10px; + } + + .description-toggle { + width: 100%; + border: none; + background: transparent; + color: var(--text-primary); + display: flex; + align-items: center; + justify-content: space-between; + font-size: 0.85rem; + cursor: pointer; + padding: 4px 0; + } + + .description-toggle:hover { + color: #ffffff; + } + + .description-body { + margin-top: 6px; + display: none; + } + + .description-body.open { + display: block; + } + + /* ===== Match Card ===== */ + .match-card { + margin-top: 16px; + padding: 16px 18px; + border-radius: 14px; + border: 1px solid var(--border-color); + background: var(--bg-secondary); + } + + .match-header { + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 12px; + } + + .match-label { + font-size: 1.2rem; + text-transform: uppercase; + letter-spacing: 0.16em; + color: var(--text-primary); + text-align: center; + font-weight: 600; + } + + .fighters-row { + display: grid; + grid-template-columns: 1.1fr 0.8fr 1.1fr; + align-items: stretch; + gap: 16px; + } + + .fighter-card { + border-radius: 14px; + padding: 10px; + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + } + + .fighter-top { + display: flex; + align-items: center; + justify-content: center; + gap: 10px; + width: 100%; + } + + .fighter-photo { + width: 110px; + height: 145px; + border-radius: 12px; + overflow: hidden; + box-shadow: 0 0 0 1px var(--bg-primary); + flex-shrink: 0; + } + + .fighter-photo img { + width: 100%; + height: 100%; + object-fit: cover; + } + + .fighter-logo { + width: 64px; + height: 64px; + border-radius: 20px; + overflow: hidden; + background: var(--bg-primary); + } + + .fighter-logo img { + width: 100%; + height: 100%; + object-fit: contain; + } + + .fighter-badge { + font-size: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.12em; + padding: 3px 8px; + border-radius: 999px; + border: 1px solid #404040; + color: var(--text-primary); + } + + .fighter-badge.blue { + background: rgba(37, 99, 235, 0.15); + border-color: #1d4ed8; + } + + .fighter-badge.red { + background: rgba(239, 68, 68, 0.14); + border-color: #b91c1c; + } + + .fighter-name.blue-corner { + color: #2563eb; + font-weight: bold; + } + + .fighter-name.red-corner { + color: #ef4444; + font-weight: bold; + } + + .fighter-name a { + color: inherit; + text-decoration: none; + } + + .fighter-name a:hover { + text-decoration: underline; + } + + .fighter-info { + display: flex; + flex-direction: column; + gap: 2px; + width: 100%; + text-align: center; + font-size: 0.8rem; + } + + .fighter-name { + font-weight: 600; + font-size: 0.95rem; + } + + .fighter-team { + color: var(--text-secondary); + } + + .fighter-team a { + color: inherit; + text-decoration: none; + } + + .fighter-team a:hover { + text-decoration: underline; + } + + .fighter-country { + display: inline-flex; + justify-content: center; + align-items: center; + gap: 4px; + color: var(--text-secondary); + margin-top: 2px; + } + + .fighter-country-flag { + font-size: 0.9rem; + } + + .match-center { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + gap: 10px; + } + + .score-pill { + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + padding: 6px 12px; + border-radius: 999px; + background: var(--bg-secondary); + border: 1px solid var(--border-color); + } + + .score-number { + font-size: 2rem; + font-weight: 700; + } + + .score-label { + font-size: 0.75rem; + color: var(--text-secondary); + } + + .referee-block { + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; + } + + .referee-photo { + width: 80px; + height: 115px; + border-radius: 12px; + overflow: hidden; + box-shadow: 0 0 0 1px var(--bg-primary); + flex-shrink: 0; + } + + .referee-photo img { + width: 100%; + height: 100%; + object-fit: cover; + } + + .referee-block a { + color: inherit; + text-decoration: none; + } + + .referee-block a:hover { + text-decoration: underline; + } + + .ref-label { + font-size: 0.7rem; + color: var(--text-secondary); + } + + .match-footer { + margin-top: 12px; + font-size: 0.8rem; + color: #666666; + text-align: center; + } + + .hall-link { + color: #e61e1e; + font-weight: 600; + text-decoration: none; + cursor: pointer; + transition: color 0.2s ease; + } + + .hall-link:hover { + color: #ff4757; + text-decoration: underline; + } + + /* ===== Markdown Body ===== */ + .markdown-body { + font-size: 0.95rem; + line-height: 1.6; + margin-top: 16px; + } + + .markdown-body h2 { + font-size: 1.05rem; + margin-top: 14px; + } + + .description-text { + font-size: 14px; + line-height: 1.5; + color: var(--text-primary); + } + + .description-text p { + margin-bottom: 8px; + } + + .description-text a { + color: #3ea6ff; + } + + /* ===== Sidebar ===== */ + .yt-sidebar-container { + width: 400px; + flex-shrink: 0; + } + + /* ===== Match Events Sidebar ===== */ + .events-sidebar { + background: var(--bg-secondary); + border-radius: 12px; + overflow: hidden; + width: 400px; + flex-shrink: 0; + height: var(--video-height, 70vh); + display: none !important; + flex-direction: column; + } + + .events-sidebar.show { + display: flex !important; + } + + .events-sidebar-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 16px; + border-bottom: 1px solid var(--border-color); + } + + .events-sidebar-header h3 { + font-size: 16px; + font-weight: 600; + margin: 0; + } + + .close-btn { + background: transparent; + border: none; + color: var(--text-secondary); + font-size: 24px; + cursor: pointer; + padding: 0; + line-height: 1; + } + + .close-btn:hover { + color: var(--text-primary); + } + + .tab-header { + display: flex; + border-bottom: 1px solid var(--border-color); + } + + .tab-button { + flex: 1; + padding: 12px 16px; + background: transparent; + border: none; + color: var(--text-secondary); + font-size: 14px; + font-weight: 500; + cursor: pointer; + transition: all 0.2s ease; + border-bottom: 2px solid transparent; + } + + .tab-button:hover { + color: var(--text-primary); + background: rgba(255, 255, 255, 0.05); + } + + .tab-button.active { + color: var(--brand-red); + border-bottom-color: var(--brand-red); + } + + .tab-panels { + height: 100%; + overflow-y: auto; + flex: 1; + } + + /* Custom Scrollbar for Match Highlights */ + .tab-panels::-webkit-scrollbar { + width: 6px; + } + + .tab-panels::-webkit-scrollbar-track { + background: var(--bg-primary); + border-radius: 3px; + } + + .tab-panels::-webkit-scrollbar-thumb { + background: var(--border-color); + border-radius: 3px; + } + + .tab-panels::-webkit-scrollbar-thumb:hover { + background: var(--text-secondary); + } + + .tab-panels::-webkit-scrollbar-corner { + background: var(--bg-primary); + } + + .tab-panel { + display: none; + padding: 16px; + } + + .tab-panel.active { + display: block; + } + + .section-label { + font-size: 12px; + color: var(--text-secondary); + text-transform: uppercase; + letter-spacing: 0.5px; + font-weight: 500; + } + + .btn-icon { + background: transparent; + border: none; + color: var(--text-secondary); + cursor: pointer; + padding: 4px 8px; + border-radius: 4px; + font-size: 14px; + } + + .btn-icon:hover { + background: var(--border-color); + color: var(--text-primary); + } + + .btn-add { + background: var(--brand-red); + color: white; + border: none; + padding: 4px 10px; + border-radius: 4px; + font-size: 12px; + cursor: pointer; + display: flex; + align-items: center; + gap: 4px; + } + + .btn-add:hover { + background: #dc2626; + } + + .event-list { + margin-top: 12px; + } + + .round-marker { + font-size: 11px; + font-weight: 600; + color: var(--text-secondary); + text-transform: uppercase; + letter-spacing: 1px; + margin-top: 8px; + margin-bottom: 8px; + display: flex; + justify-content: space-between; + align-items: center; + } + + .round-marker:first-child { + border-top: none; + margin-top: 0; + } + + .round-badge { + background-color: #fbbf24; + color: #000000; + font-weight: 700; + padding: 4px 12px; + border-radius: 6px; + font-size: 12px; + display: inline-block; + } + + .round-actions { + display: flex; + gap: 4px; + } + + .round-action-btn { + background: transparent; + border: none; + color: var(--text-secondary); + cursor: pointer; + padding: 2px 6px; + border-radius: 4px; + font-size: 12px; + } + + .round-action-btn:hover { + background: var(--border-color); + color: var(--text-primary); + } + + .event-item { + display: flex; + gap: 12px; + padding: 10px; + border-radius: 8px; + cursor: pointer; + transition: background 0.2s ease; + margin-bottom: 4px; + position: relative; + } + + .event-item:hover { + background: var(--border-color); + } + + .event-item:hover .event-actions { + opacity: 1; + } + + .event-actions { + position: absolute; + right: 8px; + top: 8px; + display: flex; + gap: 4px; + opacity: 0; + transition: opacity 0.2s ease; + } + + .event-action-btn { + background: var(--bg-primary); + border: none; + color: var(--text-secondary); + cursor: pointer; + padding: 4px 6px; + border-radius: 4px; + font-size: 10px; + } + + .event-action-btn:hover { + background: var(--border-color); + color: var(--text-primary); + } + + .event-action-btn.delete:hover { + color: var(--brand-red); + } + + .event-time { + font-size: 12px; + color: #3ea6ff; + font-weight: 500; + min-width: 55px; + text-align: center; + } + + .event-label { + font-size: 14px; + font-weight: 500; + margin-bottom: 4px; + display: flex; + align-items: center; + gap: 8px; + flex-wrap: wrap; + } + + .event-meta { + font-size: 12px; + color: var(--text-secondary); + line-height: 1.4; + } + + .pill { + font-size: 10px; + padding: 2px 6px; + border-radius: 4px; + font-weight: 600; + text-transform: uppercase; + } + + .pill-blue { + background: #3b82f6; + color: white; + } + + .pill-red { + background: #ef4444; + color: white; + } + + /* ===== Match Modal Styles ===== */ + .match-modal-overlay { + display: none; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.7); + z-index: 9999; + align-items: center; + justify-content: center; + } + + .match-modal-overlay.active { + display: flex; + } + + .match-modal-content { + background: var(--bg-secondary); + border-radius: 12px; + padding: 24px; + width: 90%; + max-width: 500px; + max-height: 90vh; + overflow-y: auto; + } + + .match-modal-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; + } + + .match-modal-header h3 { + font-size: 18px; + font-weight: 600; + margin: 0; + } + + .match-modal-close { + background: transparent; + border: none; + color: var(--text-secondary); + font-size: 24px; + cursor: pointer; + padding: 0; + line-height: 1; + } + + .match-modal-close:hover { + color: var(--text-primary); + } + + .match-form-group { + margin-bottom: 16px; + } + + .match-form-group label { + display: block; + font-size: 14px; + font-weight: 500; + margin-bottom: 6px; + color: var(--text-primary); + } + + .match-form-group input, + .match-form-group select, + .match-form-group textarea { + width: 100%; + padding: 10px 12px; + border: 1px solid var(--border-color); + border-radius: 8px; + background: var(--bg-primary); + color: var(--text-primary); + font-size: 14px; + } + + .match-form-group input:focus, + .match-form-group select:focus, + .match-form-group textarea:focus { + outline: none; + border-color: var(--brand-red); + } + + .match-form-row { + display: flex; + gap: 12px; + } + + .match-form-row .match-form-group { + flex: 1; + } + + .match-modal-actions { + display: flex; + gap: 12px; + justify-content: flex-end; + margin-top: 20px; + } + + .match-btn-cancel { + background: var(--bg-primary); + border: 1px solid var(--border-color); + color: var(--text-primary); + padding: 10px 20px; + border-radius: 8px; + cursor: pointer; + font-size: 14px; + font-weight: 500; + } + + .match-btn-cancel:hover { + background: var(--border-color); + } + + .match-btn-save { + background: var(--brand-red); + border: none; + color: white; + padding: 10px 20px; + border-radius: 8px; + cursor: pointer; + font-size: 14px; + font-weight: 500; + } + + .match-btn-save:hover { + background: #dc2626; + } + + .match-btn-delete { + background: transparent; + border: 1px solid var(--brand-red); + color: var(--brand-red); + padding: 10px 20px; + border-radius: 8px; + cursor: pointer; + font-size: 14px; + font-weight: 500; + } + + .match-btn-delete:hover { + background: var(--brand-red); + color: white; + } + + /* ===== Responsive ===== */ + @media (max-width: 1300px) { + .yt-sidebar-container { + width: 300px; + } + + .events-sidebar { + width: 300px; + } + } + + @media (max-width: 991px) { + .yt-main { + margin-left: 0; + flex-direction: column; + } + + .yt-sidebar-container, + .events-sidebar { + width: 100%; + } + + .sidebar-video-card { + flex-direction: column; + } + + .sidebar-thumb { + width: 100%; + } + + .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; + } + + .fighters-row { + grid-template-columns: 1fr !important; + } + + .match-center { + order: -1; + } + + .event-header { + flex-direction: column; + align-items: flex-start; + } + + .event-header-actions { + align-self: flex-end; + width: 100%; + justify-content: flex-end; + } + } + + @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: 12px !important; + } + + .video-container { + max-height: 50vh !important; + border-radius: 0 !important; + } + + .video-container video { + 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%; + } + + .description-panel { + padding: 8px !important; + } + + .match-card { + padding: 12px !important; + } + + .event-header { + padding: 8px 0; + } + + .event-text .title { + font-size: 1.1rem; + } + + .event-header-actions { + gap: 4px; + } + + .event-header-actions .action-btn { + padding: 6px 10px; + font-size: 0.75rem; + } + } + @endsection @section('content') -@php -// ===== DUMMY DATA FALLBACKS ===== -$blueFighter = $blueFighter ?? (object)[ - 'name' => 'Sami Al Manea', - 'flag' => '🇧🇭', - 'photo' => 'https://takeone-dev.innovator.bh/storage/images/profiles/profile_5.png?v=1773157950', - 'team' => 'Emperor TaeKwonDo Academy', - 'country' => 'Bahrain', - 'logo' => 'https://takeone-dev.innovator.bh/storage/clubs/1/branding/logo_1771488666.png', - 'member_id' => 5, - 'club_url' => 'https://takeone-dev.innovator.bh/mobile/eta', -]; -$redFighter = $redFighter ?? (object)[ - 'name' => 'Hassan Al Shallan', - 'flag' => '🇧🇭', - 'photo' => 'https://takeone-dev.innovator.bh/storage/images/profiles/profile_11.png?t=1773268056907', - 'team' => 'Legend TaeKwonDo Academy', - 'country' => 'Bahrain', - 'logo' => 'https://takeone-dev.innovator.bh/storage/clubs/logos/logo_1773267551.png', - 'member_id' => 11, - 'club_url' => 'https://takeone-dev.innovator.bh/clubs/legend-taekwondo-academy', -]; -$match = $match ?? (object)[ - 'number' => '103', - 'court' => '2', - 'weight_category' => 'U18', - 'score_blue' => 7, - 'score_red' => 5, - 'features' => 'Electronic scoring system (PSS & head‑gear) • Video replay available for head kicks and gam-jeom appeals', -]; -$referee = $referee ?? (object)[ - 'name' => 'Ghassan Yusuf', - 'flag' => '🇧🇭', - 'photo' => 'https://takeone-dev.innovator.bh/storage/images/profiles/profile_8.png?t=1773267305519', - 'member_id' => 4, -]; -$championship = $championship ?? (object)[ - 'name' => 'Championship 2026', - 'url' => '/championship/2026', -]; -$venue = $venue ?? (object)[ - 'name' => 'Manama Sports Hall', - 'map_link' => 'https://maps.google.com/?q=Manama+Sports+Hall+Bahrain', -]; -@endphp + @php + // ===== DUMMY DATA FALLBACKS ===== + $blueFighter = + $blueFighter ?? + (object) [ + 'name' => 'Sami Al Manea', + 'flag' => '🇧🇭', + 'photo' => 'https://takeone-dev.innovator.bh/storage/images/profiles/profile_5.png?v=1773157950', + 'team' => 'Emperor TaeKwonDo Academy', + 'country' => 'Bahrain', + 'logo' => 'https://takeone-dev.innovator.bh/storage/clubs/1/branding/logo_1771488666.png', + 'member_id' => 5, + 'club_url' => 'https://takeone-dev.innovator.bh/mobile/eta', + ]; + $redFighter = + $redFighter ?? + (object) [ + 'name' => 'Hassan Al Shallan', + 'flag' => '🇧🇭', + 'photo' => 'https://takeone-dev.innovator.bh/storage/images/profiles/profile_11.png?t=1773268056907', + 'team' => 'Legend TaeKwonDo Academy', + 'country' => 'Bahrain', + 'logo' => 'https://takeone-dev.innovator.bh/storage/clubs/logos/logo_1773267551.png', + 'member_id' => 11, + 'club_url' => 'https://takeone-dev.innovator.bh/clubs/legend-taekwondo-academy', + ]; + $match = + $match ?? + (object) [ + 'number' => '103', + 'court' => '2', + 'weight_category' => 'U18', + 'score_blue' => 7, + 'score_red' => 5, + 'features' => + 'Electronic scoring system (PSS & head‑gear) • Video replay available for head kicks and gam-jeom appeals', + ]; + $referee = + $referee ?? + (object) [ + 'name' => 'Ghassan Yusuf', + 'flag' => '🇧🇭', + 'photo' => 'https://takeone-dev.innovator.bh/storage/images/profiles/profile_8.png?t=1773267305519', + 'member_id' => 4, + ]; + $championship = + $championship ?? + (object) [ + 'name' => 'Championship 2026', + 'url' => '/championship/2026', + ]; + $venue = + $venue ?? + (object) [ + 'name' => 'Manama Sports Hall', + 'map_link' => 'https://maps.google.com/?q=Manama+Sports+Hall+Bahrain', + ]; + @endphp - -
- -
- -
- + +
+ +
+ +
+ - - @if(isset($nextVideo) || isset($previousVideo)) -
- @if(isset($previousVideo)) - - {{ Str::limit($previousVideo->title ?? 'Previous', 20) }} - @else - - @endif -
- - -
+ + @if (isset($nextVideo) || isset($previousVideo)) +
+ @if (isset($previousVideo)) + + {{ Str::limit($previousVideo->title ?? 'Previous', 20) }} + @else + + @endif - @if(isset($nextVideo)) - {{ Str::limit($nextVideo->title ?? 'Next', 20) }} - - @else - - @endif -
-
- -
- @endif -
+
+ + +
- -
-
- -
- -

- - Taekwondo Finals – - - {{ $blueFighter->flag ?? '🇧🇭' }} - - {{ $blueFighter->name ?? 'Sami Al Manea' }} - - - vs - - {{ $redFighter->flag ?? '🇧🇭' }} - - {{ $redFighter->name ?? 'Hassan Al Shallan' }} - - - ({{ $match->weight_category ?? 'U18' }}) -

- - - - {{ $championship->name ?? 'Championship 2026' }} - • - Match# {{ $match->number ?? '103' }} - • - Court {{ $match->court ?? '2' }} - • - - {{ $referee->flag ?? '🇧🇭' }} {{ $referee->name ?? 'Ghassan Yusuf' }} - - -
-
- -
- - @auth - @if(isset($video)) -
- @csrf - -
- @endif - @else - - - Like - - @endauth - - - @auth - @if(isset($video) && $video->user && Auth::id() !== $video->user_id) - - @endif - @else - - - Subscribe - - @endauth - - - @if(isset($video) && $video->isShareable()) - - @endif - - - -
-
- - - - @if(isset($video) && $video->description) - @php - $fullDescription = $video->description; - $shortDescription = Str::limit($fullDescription, 200); - $needsExpand = strlen($fullDescription) > 200; - @endphp - -
- - -
- -
-
-
Final • Male -63kg division
+ @if (isset($nextVideo)) + {{ Str::limit($nextVideo->title ?? 'Next', 20) }} + + @else + + @endif
+
+ +
+ @endif +
-
- - - - -
-
- {{ $match->score_blue ?? 7 }} - Final score - {{ $match->score_red ?? 5 }} -
-
- - -
- Referee -
- - -
Center Referee
-
-
- - - -
+ + ({{ $match->weight_category ?? 'U18' }}) + -
- - 📍 {{ $venue->name ?? 'Manama Sports Hall' }} + + + {{ $championship->name ?? 'Championship 2026' }} + • + Match# + {{ $match->number ?? '103' }} + • + Court + {{ $match->court ?? '2' }} + • + + {{ $referee->flag ?? '🇧🇭' }} {{ $referee->name ?? 'Ghassan Yusuf' }} + + + - {{ number_format($video->view_count) }} views • + {{ $video->created_at->format('M d, Y') }} - @if(isset($match->features)) - • {{ $match->features }} - @endif
-
+
- -
-
-

Match Overview

- @if(isset($video) && $video->user) -
- {{ $video->user->name }} - {{ $video->user->name }} - • {{ number_format($video->user->subscriber_count ?? 0) }} subscribers +
+ + @auth + @if (Auth::id() === $video->user_id) + + @endif + @endif + @auth + @if (isset($video)) +
+ @csrf + +
+ @endif + @else + + + Like + + @endauth + + + @auth + @if (isset($video) && $video->user && Auth::id() !== $video->user_id) + + @endif + @else + + + Subscribe + + @endauth + + + @if (isset($video) && $video->isShareable()) + + @endif + + + + +
+
+ + + + @if (isset($video) && $video->description) + @php + $fullDescription = $video->description; + $shortDescription = Str::limit($fullDescription, 200); + $needsExpand = strlen($fullDescription) > 200; + @endphp + +
+ + +
+ +
+
+
Final • Male -63kg division
+
+ +
+ + + + +
+
+ {{ $match->score_blue ?? 7 }} + Final score + {{ $match->score_red ?? 5 }} +
+
+ + +
+ Referee +
+ + +
Center Referee
+
+
+ + + +
+ +
+ + 📍 {{ $venue->name ?? 'Manama Sports Hall' }} + + @if (isset($match->features)) + • {{ $match->features }} + @endif +
+
+ + +
+
+

Match Overview

+ @if (isset($video) && $video->user) +
+ {{ $video->user->name }} + {{ $video->user->name }} + • {{ number_format($video->user->subscriber_count ?? 0) }} subscribers +
+ @endif +
+
+ {!! Str::markdown($fullDescription) !!} +
+
+
+ + + @endif + + +
+

+ Comments ({{ isset($video) ? $video->comment_count ?? 0 : 0 }}) +

+ @auth +
+ {{ Auth::user()->name }} +
+ + + +
+
+ @else +
+ Sign in to comment +
+ @endauth +
+ @if (isset($video)) + @forelse($video->comments()->whereNull('parent_id')->with('user', 'replies.user')->latest()->get() as $comment) + @include('videos.partials.comment', ['comment' => $comment]) + @empty +

No comments yet. Be + the first to comment!

+ @endforelse @endif
-
- {!! Str::markdown($fullDescription) !!} +
+ +
-
- + +
+ @if ($playlist && $playlistVideos && $playlistVideos->count() > 0) +

+ + {{ $playlist->name }} + ({{ $playlistVideos->count() }} + videos) +

+
+ @foreach ($playlistVideos as $index => $playlistVideo) + @if ($playlistVideo->id !== $video->id) +
+
+ @if ($playlistVideo->thumbnail) + {{ $playlistVideo->title }} + @else + {{ $playlistVideo->title }} + @endif + @if ($playlistVideo->duration) + {{ gmdate('i:s', $playlistVideo->duration) }} + @endif + @if ($playlistVideo->is_shorts) + + SHORTS + + @endif + + + {{ $index + 1 }} + +
+
+
+ + {{ Str::limit($playlistVideo->title, 60) }} +
+
+
{{ $playlistVideo->user->name ?? 'Unknown' }}
+
{{ number_format($playlistVideo->view_count) }} views • + {{ $playlistVideo->created_at->diffForHumans() }}
+
+
+
+ @endif + @endforeach +
+ @if ($playlist->canEdit(Auth::user())) + + Edit Playlist + + @endif + @else +

Up Next

+ @if ($recommendedVideos && $recommendedVideos->count() > 0) +
+ @foreach ($recommendedVideos as $recVideo) +
+
+ @if ($recVideo->thumbnail) + {{ $recVideo->title }} + @else + {{ $recVideo->title }} + @endif + @if ($recVideo->duration) + {{ gmdate('i:s', $recVideo->duration) }} + @endif + @if ($recVideo->is_shorts) + + SHORTS + + @endif +
+
+
+ + {{ Str::limit($recVideo->title, 60) }} +
+
+
{{ $recVideo->user->name ?? 'Unknown' }}
+
{{ number_format($recVideo->view_count) }} views • + {{ $recVideo->created_at->diffForHumans() }}
+
+
+
+ @endforeach +
+ @else +
No recommendations available yet. Check back later!
+ @endif + @endif +
+ +
+
+ + + @include('layouts.partials.share-modal') + @include('layouts.partials.edit-video-modal') + + +
+
+
+

Add New Round

+ +
+
+
+
+ + +
+
+ + +
+
+
+ + +
+
+
+
+ + +
+
+
+

Add Point

+ +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ + +
+
+ +
+ + +
+
+
+
+ + +
+
+
+

Edit Round

+ +
+
+ +
+ + +
+
+ +
+ + +
+
+
+
+ + +
+
+
+

Add Coach Note

+ +
+
+ +
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + +
+
+
+
+ + @if (Session::has('openEditModal') && Session::get('openEditModal')) + @auth + + @endauth @endif - -
-

- Comments ({{ isset($video) ? ($video->comment_count ?? 0) : 0 }}) -

- @auth -
- {{ Auth::user()->name }} -
- -
- - -
-
-
- @else -
- Sign in to comment -
- @endauth -
- @if(isset($video)) - @forelse($video->comments()->whereNull('parent_id')->with('user', 'replies.user')->latest()->get() as $comment) - @include('videos.partials.comment', ['comment' => $comment]) - @empty -

No comments yet. Be the first to comment!

- @endforelse - @endif -
-
- -
+ } - -
- -
-
+ function renderMatchData(rounds, reviews) { + if (!rounds || rounds.length === 0) return; + const pointsContainer = document.getElementById('officialEvents'); + const reviewsContainer = document.getElementById('reviewEvents'); + let pointsHtml = ''; + let reviewsHtml = ''; - -@include('layouts.partials.share-modal') -@include('layouts.partials.edit-video-modal') - - - - - - - - - - - - - -@if(Session::has('openEditModal') && Session::get('openEditModal')) -@auth - -@endauth -@endif - - -@endsection + function openModal(modalId) { + document.getElementById(modalId).classList.add('active'); + } + + function closeModal(modalId) { + document.getElementById(modalId).classList.remove('active'); + } + document.querySelectorAll('.match-modal-overlay').forEach(modal => { + modal.addEventListener('click', function(e) { + if (e.target === this) this.classList.remove('active'); + }); + }); + + const csrfToken = '{{ Auth::check() ? csrf_token() : '' }}'; + const isDemoMode = !{{ Auth::check() ? 'true' : 'false' }}; + + // Round/Point/Review functions (abbreviated for brevity) + function openAddRoundModal() { + if (isDemoMode || !csrfToken) { + alert('Demo Mode: Requires authentication'); + return; + } + document.getElementById('roundNumber').value = ''; + document.getElementById('roundName').value = ''; + openModal('addRoundModal'); + } + async function storeRound(roundNumber, roundName) { + if (!csrfToken) return; + try { + const res = await fetch(`/videos/${videoId}/rounds`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'X-CSRF-TOKEN': csrfToken + }, + body: JSON.stringify({ + round_number: roundNumber, + name: roundName + }) + }); + const data = await res.json(); + if (data.success) { + closeModal('addRoundModal'); + loadMatchData(); + } else alert(data.message || 'Error'); + } catch (e) { + alert('Error: ' + e.message); + } + } + + function editRound(roundNumber, roundId, currentName) { + if (isDemoMode || !csrfToken) { + alert('Demo Mode'); + return; + } + document.getElementById('editRoundNumber').value = roundId; + document.getElementById('editRoundName').value = currentName; + openModal('editRoundModal'); + } + async function updateRound() { + if (!csrfToken) return; + const roundId = document.getElementById('editRoundNumber').value; + const roundName = document.getElementById('editRoundName').value; + try { + const res = await fetch(`/rounds/${roundId}`, { + method: 'PUT', + headers: { + 'Content-Type': 'application/json', + 'X-CSRF-TOKEN': csrfToken + }, + body: JSON.stringify({ + name: roundName + }) + }); + const data = await res.json(); + if (data.success) { + closeModal('editRoundModal'); + loadMatchData(); + } else alert(data.message || 'Error'); + } catch (e) { + alert('Error: ' + e.message); + } + } + async function deleteRound(roundId) { + if (!csrfToken) return; + if (!confirm('Delete this round?')) return; + try { + const res = await fetch(`/rounds/${roundId}`, { + method: 'DELETE', + headers: { + 'X-CSRF-TOKEN': csrfToken + } + }); + const data = await res.json(); + if (data.success) loadMatchData(); + else alert(data.message || 'Error'); + } catch (e) { + alert('Error: ' + e.message); + } + } + + function openAddPointModal(roundNumber, roundId) { + if (isDemoMode || !csrfToken) { + alert('Demo Mode'); + return; + } + document.getElementById('pointModalTitle').textContent = 'Add Point'; + document.getElementById('pointId').value = ''; + document.getElementById('pointRoundId').value = roundId || ''; + document.getElementById('pointTimestamp').value = ''; + document.getElementById('pointRoundSelect').value = roundNumber || '1'; + document.getElementById('pointAction').value = ''; + document.getElementById('pointValue').value = '1'; + document.getElementById('pointCompetitor').value = 'blue'; + document.getElementById('pointNotes').value = ''; + document.getElementById('deletePointBtn').style.display = 'none'; + openModal('pointModal'); + } + + function editPoint(pointId) { + const el = document.querySelector(`.event-item[data-id="${pointId}"]`); + if (!el) return; + document.getElementById('pointModalTitle').textContent = 'Edit Point'; + document.getElementById('pointId').value = pointId; + document.getElementById('pointTimestamp').value = el.dataset.timeStart || ''; + document.getElementById('pointRoundSelect').value = el.dataset.round || '1'; + document.getElementById('pointAction').value = el.querySelector('.event-label')?.textContent.split('(')[0] + .trim() || ''; + document.getElementById('pointValue').value = '1'; + document.getElementById('pointCompetitor').value = el.querySelector('.pill')?.classList.contains('pill-blue') ? + 'blue' : 'red'; + document.getElementById('pointNotes').value = el.querySelector('.event-meta')?.textContent.split('•').slice(2) + .join('').trim() || ''; + document.getElementById('deletePointBtn').style.display = (isDemoMode || !csrfToken) ? 'none' : 'block'; + openModal('pointModal'); + } + async function savePoint() { + if (!csrfToken) { + closeModal('pointModal'); + return; + } + const pointId = document.getElementById('pointId').value; + const roundId = document.getElementById('pointRoundId').value; + const timestamp = document.getElementById('pointTimestamp').value; + const round = document.getElementById('pointRoundSelect').value; + const action = document.getElementById('pointAction').value; + const value = document.getElementById('pointValue').value; + const competitor = document.getElementById('pointCompetitor').value; + const notes = document.getElementById('pointNotes').value; + try { + if (pointId) { + const res = await fetch(`/points/${pointId}`, { + method: 'PUT', + headers: { + 'Content-Type': 'application/json', + 'X-CSRF-TOKEN': csrfToken + }, + body: JSON.stringify({ + timestamp_seconds: parseInt(timestamp), + action, + points: parseInt(value), + competitor, + notes + }) + }); + const data = await res.json(); + if (data.success) { + closeModal('pointModal'); + loadMatchData(); + } else alert(data.message || 'Error'); + } else { + const res = await fetch(`/videos/${videoId}/points`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'X-CSRF-TOKEN': csrfToken + }, + body: JSON.stringify({ + round_id: roundId, + timestamp_seconds: parseInt(timestamp), + action, + points: parseInt(value), + competitor, + notes + }) + }); + const data = await res.json(); + if (data.success) { + closeModal('pointModal'); + loadMatchData(); + } else alert(data.message || 'Error'); + } + } catch (e) { + alert('Error: ' + e.message); + } + } + async function deletePoint(pointId) { + if (!csrfToken) return; + if (!confirm('Delete this point?')) return; + try { + const res = await fetch(`/points/${pointId}`, { + method: 'DELETE', + headers: { + 'X-CSRF-TOKEN': csrfToken + } + }); + const data = await res.json(); + if (data.success) { + closeModal('pointModal'); + loadMatchData(); + } else alert(data.message || 'Error'); + } catch (e) { + alert('Error: ' + e.message); + } + } + + function openAddReviewModal() { + if (isDemoMode || !csrfToken) { + alert('Demo Mode'); + return; + } + document.getElementById('reviewModalTitle').textContent = 'Add Coach Note'; + document.getElementById('reviewId').value = ''; + document.getElementById('reviewStartTime').value = ''; + document.getElementById('reviewEndTime').value = ''; + document.getElementById('reviewNote').value = ''; + document.getElementById('reviewCoach').value = ''; + document.getElementById('reviewEmoji').value = '🔥'; + document.getElementById('deleteReviewBtn').style.display = 'none'; + openModal('reviewModal'); + } + + function editReview(reviewId) { + const el = document.querySelector(`.event-item[data-id="${reviewId}"]`); + if (!el) return; + document.getElementById('reviewModalTitle').textContent = 'Edit Coach Note'; + document.getElementById('reviewId').value = reviewId; + document.getElementById('reviewStartTime').value = el.dataset.timeStart || ''; + document.getElementById('reviewEndTime').value = el.dataset.timeEnd || ''; + document.getElementById('reviewNote').value = el.querySelector('.event-label')?.textContent.trim() || ''; + document.getElementById('reviewCoach').value = el.querySelector('.event-meta')?.textContent.trim() || ''; + document.getElementById('reviewEmoji').value = el.querySelector('div:first-child')?.textContent || '🔥'; + document.getElementById('deleteReviewBtn').style.display = 'block'; + openModal('reviewModal'); + } + async function saveReview() { + if (!csrfToken) return; + const reviewId = document.getElementById('reviewId').value; + const startTime = document.getElementById('reviewStartTime').value; + const endTime = document.getElementById('reviewEndTime').value; + const note = document.getElementById('reviewNote').value; + const coach = document.getElementById('reviewCoach').value; + const emoji = document.getElementById('reviewEmoji').value; + try { + if (reviewId) { + const res = await fetch(`/reviews/${reviewId}`, { + method: 'PUT', + headers: { + 'Content-Type': 'application/json', + 'X-CSRF-TOKEN': csrfToken + }, + body: JSON.stringify({ + start_time_seconds: parseInt(startTime), + end_time_seconds: endTime ? parseInt(endTime) : null, + note, + coach_name: coach, + emoji + }) + }); + const data = await res.json(); + if (data.success) { + closeModal('reviewModal'); + loadMatchData(); + } else alert(data.message || 'Error'); + } else { + const res = await fetch(`/videos/${videoId}/reviews`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'X-CSRF-TOKEN': csrfToken + }, + body: JSON.stringify({ + start_time_seconds: parseInt(startTime), + end_time_seconds: endTime ? parseInt(endTime) : null, + note, + coach_name: coach, + emoji + }) + }); + const data = await res.json(); + if (data.success) { + closeModal('reviewModal'); + loadMatchData(); + } else alert(data.message || 'Error'); + } + } catch (e) { + alert('Error: ' + e.message); + } + } + async function deleteReview(reviewId) { + if (!csrfToken) return; + if (!confirm('Delete this note?')) return; + try { + const res = await fetch(`/reviews/${reviewId}`, { + method: 'DELETE', + headers: { + 'X-CSRF-TOKEN': csrfToken + } + }); + const data = await res.json(); + if (data.success) { + closeModal('reviewModal'); + loadMatchData(); + } else alert(data.message || 'Error'); + } catch (e) { + alert('Error: ' + e.message); + } + } + + // Playlist navigation + document.addEventListener('DOMContentLoaded', function() { + const videoPlayer = document.getElementById('videoPlayer'); + const playlistControls = document.getElementById('playlistControls'); + const autoplayToggle = document.getElementById('autoplayToggle'); + if (videoPlayer) { + videoPlayer.volume = 0.5; + const playPromise = videoPlayer.play(); + if (playPromise !== undefined) { + playPromise.then(() => console.log('Autoplayed')).catch(() => console.log('Autoplay blocked')); + } + if (nextVideoUrl) { + videoPlayer.addEventListener('ended', () => { + if (autoplayEnabled) window.location.href = nextVideoUrl; + }); + } + } + if (playlistControls) { + const videoContainer = document.getElementById('videoContainer'); + videoContainer.addEventListener('mouseenter', () => playlistControls.classList.add('visible')); + videoContainer.addEventListener('mouseleave', () => playlistControls.classList.remove('visible')); + setTimeout(() => playlistControls.classList.add('visible'), 2000); + setTimeout(() => playlistControls.classList.remove('visible'), 6000); + } + if (autoplayToggle) { + autoplayToggle.addEventListener('change', function() { + autoplayEnabled = this.checked; + localStorage.setItem('playlistAutoplay', autoplayEnabled ? '1' : '0'); + }); + const saved = localStorage.getItem('playlistAutoplay'); + if (saved !== null) { + autoplayEnabled = saved === '1'; + autoplayToggle.checked = autoplayEnabled; + } + } + document.addEventListener('keydown', function(e) { + if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return; + if (e.key === 'ArrowLeft') { + e.preventDefault(); + if (previousVideoUrl) window.location.href = previousVideoUrl; + } else if (e.key === 'ArrowRight') { + e.preventDefault(); + if (nextVideoUrl) window.location.href = nextVideoUrl; + } + }); + }); + + function goToPreviousVideo() { + if (previousVideoUrl) window.location.href = previousVideoUrl; + } + + function goToNextVideo() { + if (nextVideoUrl) window.location.href = nextVideoUrl; + } + + @endsection diff --git a/resources/views/videos/types/music.blade.php b/resources/views/videos/types/music.blade.php index 698d998..e23ce88 100644 --- a/resources/views/videos/types/music.blade.php +++ b/resources/views/videos/types/music.blade.php @@ -5,7 +5,10 @@ @section('extra_styles') + @endif -
+

- Comments ({{ $video->comment_count }}) + Comments ({{ $video->comment_count }})

@auth
- {{ Auth::user()->name }} -
- -
- - -
+ {{ Auth::user()->name }} +
+ + +
@else -
+
Sign in to comment
@endauth @@ -542,162 +726,224 @@ @forelse($video->comments()->whereNull('parent_id')->with('user', 'replies.user')->latest()->get() as $comment) @include('videos.partials.comment', ['comment' => $comment]) @empty -

No comments yet. Be the first to comment!

+

No comments yet. Be the + first to comment!

@endforelse
- @if($playlist && $playlistVideos && $playlistVideos->count() > 0) + @if ($playlist && $playlistVideos && $playlistVideos->count() > 0)

{{ $playlist->name }} - ({{ $playlistVideos->count() }} videos) + ({{ $playlistVideos->count() }} + videos)

- @foreach($playlistVideos as $index => $playlistVideo) - @if($playlistVideo->id !== $video->id) -
-
- @if ($playlistVideo->thumbnail) - {{ $playlistVideo->title }} - @else - {{ $playlistVideo->title }} - @endif - @if ($playlistVideo->duration) - {{ gmdate('i:s', $playlistVideo->duration) }} - @endif - @if ($playlistVideo->is_shorts) - - SHORTS + @foreach ($playlistVideos as $index => $playlistVideo) + @if ($playlistVideo->id !== $video->id) +
+
+ @if ($playlistVideo->thumbnail) + {{ $playlistVideo->title }} + @else + {{ $playlistVideo->title }} + @endif + @if ($playlistVideo->duration) + {{ gmdate('i:s', $playlistVideo->duration) }} + @endif + @if ($playlistVideo->is_shorts) + + SHORTS + + @endif + + + {{ $index + 1 }} - @endif - - - {{ $index + 1 }} - -
-
-
- - {{ Str::limit($playlistVideo->title, 60) }}
-
-
{{ $playlistVideo->user->name ?? 'Unknown' }}
-
{{ number_format($playlistVideo->view_count) }} views • {{ $playlistVideo->created_at->diffForHumans() }}
+
+
+ + {{ Str::limit($playlistVideo->title, 60) }} +
+
+
{{ $playlistVideo->user->name ?? 'Unknown' }}
+
{{ number_format($playlistVideo->view_count) }} views • + {{ $playlistVideo->created_at->diffForHumans() }}
+
-
@endif @endforeach
- @if($playlist->canEdit(Auth::user())) - + @if ($playlist->canEdit(Auth::user())) + Edit Playlist @endif @else

Up Next

- @if($recommendedVideos && $recommendedVideos->count() > 0) + @if ($recommendedVideos && $recommendedVideos->count() > 0)
- @foreach($recommendedVideos as $recVideo) -
+ @foreach ($recommendedVideos as $recVideo) +
- @if($recVideo->thumbnail) - {{ $recVideo->title }} + @if ($recVideo->thumbnail) + {{ $recVideo->title }} @else - {{ $recVideo->title }} + {{ $recVideo->title }} @endif - @if($recVideo->duration) + @if ($recVideo->duration) {{ gmdate('i:s', $recVideo->duration) }} @endif - @if($recVideo->is_shorts) - + @if ($recVideo->is_shorts) + SHORTS @endif
- + {{ Str::limit($recVideo->title, 60) }}
{{ $recVideo->user->name ?? 'Unknown' }}
-
{{ number_format($recVideo->view_count) }} views • {{ $recVideo->created_at->diffForHumans() }}
+
{{ number_format($recVideo->view_count) }} views • + {{ $recVideo->created_at->diffForHumans() }}
@@ -714,14 +960,14 @@ @include('layouts.partials.share-modal') @include('layouts.partials.edit-video-modal') - @if(Session::has('openEditModal') && Session::get('openEditModal')) - @auth - - @endauth + @if (Session::has('openEditModal') && Session::get('openEditModal')) + @auth + + @endauth @endif @endsection diff --git a/resources/views/videos/types/music.blade.php-script-append b/resources/views/videos/types/music.blade.php-script-append new file mode 100644 index 0000000..bdc43ae --- /dev/null +++ b/resources/views/videos/types/music.blade.php-script-append @@ -0,0 +1,45 @@ +