{{ $i + 1 }}
- {!! $row->country ? countryCodeToFlag($row->country) : countryCodeToFlag('xx') !!}
- {{ $row->country_name ?? 'Unknown' }}
+ {!! $row->country ? countryCodeToFlag($row->country) : countryCodeToFlag('xx') !!}
+ {{ $row->country_name ?? \App\Data\Countries::name($row->country) ?? 'Unknown' }}
@@ -742,7 +742,11 @@ new Chart(document.getElementById('typeChart'), {
// ── Country Chart ───────────────────────────────────────────────
@if($viewsByCountry->isNotEmpty())
(function() {
- const countryData = @json($viewsByCountry);
+ const countryData = @json($viewsByCountry->map(fn($r) => [
+ 'country' => $r->country,
+ 'country_name' => $r->country_name ?? \App\Data\Countries::name($r->country),
+ 'total' => $r->total,
+ ])->values());
const labels = countryData.map(r => r.country_name || r.country || '');
const values = countryData.map(r => r.total);
const maxVal = Math.max(...values);
@@ -1015,7 +1019,10 @@ if (typeChartInst) {
// Country bar chart click
const countryChartInst = Chart.getChart('countryChart');
if (countryChartInst) {
- const countryData = @json($viewsByCountry ?? collect());
+ const countryData = @json(($viewsByCountry ?? collect())->map(fn($r) => [
+ 'country' => $r->country,
+ 'country_name' => $r->country_name ?? \App\Data\Countries::name($r->country),
+ ])->values());
countryChartInst.options.onClick = function(evt, elements) {
if (!elements.length) return;
const row = countryData[elements[0].index];
diff --git a/resources/views/admin/video-analytics.blade.php b/resources/views/admin/video-analytics.blade.php
index f91b1ba..5a5ce1d 100644
--- a/resources/views/admin/video-analytics.blade.php
+++ b/resources/views/admin/video-analytics.blade.php
@@ -294,7 +294,7 @@ function flagEmoji(string $code): string {
{{ $i + 1 }}
{!! flagEmoji($row->country) !!}
- {{ $row->country_name ?? $row->country }}
+ {{ $row->country_name ?? \App\Data\Countries::name($row->country) }}
@@ -423,7 +423,7 @@ function flagEmoji(string $code): string {
@if($view->country)
{!! flagEmoji($view->country) !!}
- {{ $view->country_name ?? $view->country }}
+ {{ $view->country_name ?? \App\Data\Countries::name($view->country) }}
@else
Unknown
@endif
@@ -498,7 +498,7 @@ new Chart(document.getElementById('dailyChart'), {
// ── Country chart ───────────────────────────────────────────────────────────
@if($viewsByCountry->isNotEmpty())
-const countryLabels = {!! json_encode($viewsByCountry->map(fn($r) => ($r->country_name ?? $r->country))->values()) !!};
+const countryLabels = {!! json_encode($viewsByCountry->map(fn($r) => ($r->country_name ?? \App\Data\Countries::name($r->country)))->values()) !!};
const countryData = {!! json_encode($viewsByCountry->pluck('total')->values()) !!};
const countryMax = Math.max(...countryData);
diff --git a/resources/views/components/partials/scorebar-mini.blade.php b/resources/views/components/partials/scorebar-mini.blade.php
new file mode 100644
index 0000000..f026cce
--- /dev/null
+++ b/resources/views/components/partials/scorebar-mini.blade.php
@@ -0,0 +1,377 @@
+{{-- ══════════════════════════════════════════════════════════════════════
+ SCOREBAR MINI — the same match scorebar shown on the full player,
+ rendered inside a video-card thumbnail during hover playback.
+
+ Uses the design's fixed 1150 px canvas (identical to the main player's
+ msb-scale block). Every card scales its own canvas via ResizeObserver
+ so the scorebar keeps its pixel-perfect proportions at any card size.
+
+ Static-only: fighter names, flags, clubs, corner labels, "Round 1"
+ and 0-0 / 0:00. No live-scoring script — hover previews cover the
+ first few seconds of the match where those values are always the
+ baseline anyway.
+════════════════════════════════════════════════════════════════════════ --}}
+@php
+ $sbm_hd = $video->sportsMatch?->headerData();
+ $sbm_red = $sbm_hd['red'] ?? null;
+ $sbm_blue = $sbm_hd['blue'] ?? null;
+ $sbm_show = $sbm_hd && (($sbm_red['name'] ?? null) || ($sbm_blue['name'] ?? null));
+@endphp
+
+@if ($sbm_show)
+@php
+ $sbm_redName = $sbm_red['name'] ?? 'RED';
+ $sbm_blueName = $sbm_blue['name'] ?? 'BLUE';
+ $sbm_redClub = $sbm_red['club'] ?? '';
+ $sbm_blueClub = $sbm_blue['club'] ?? '';
+ $sbm_redFlag = strtolower(trim((string) ($sbm_red['flag'] ?? '')));
+ $sbm_blueFlag = strtolower(trim((string) ($sbm_blue['flag'] ?? '')));
+ $sbm_redLogo = !empty($sbm_red['club_logo']) ? route('media.thumbnail', $sbm_red['club_logo']) : null;
+ $sbm_blueLogo = !empty($sbm_blue['club_logo']) ? route('media.thumbnail', $sbm_blue['club_logo']) : null;
+
+ // Live-scoring payload — same shape as the full-player scoreboard uses.
+ // Rounds drive the round label + per-round clock. Points give us the
+ // score at any t (last point ≤ t defines the score).
+ $sbm_rounds = $video->matchRounds()
+ ->orderBy('round_number')
+ ->get(['round_number', 'name', 'start_time_seconds'])
+ ->map(fn ($r) => [
+ 'n' => (int) $r->round_number,
+ 'name' => (string) ($r->name ?? ''),
+ 'start' => (float) ($r->start_time_seconds ?? 0),
+ ])->values()->all();
+ if (empty($sbm_rounds)) $sbm_rounds = [['n' => 1, 'name' => '', 'start' => 0]];
+
+ $sbm_points = $video->matchPoints()
+ ->orderBy('timestamp_seconds')
+ ->get(['timestamp_seconds', 'action', 'points', 'competitor', 'score_red', 'score_blue'])
+ ->flatMap(function ($p) {
+ // Same rule the full-player uses: a "both" event emits two feed rows
+ // — one per corner — so the ticker shows both fighters scoring.
+ $side = ($p->competitor === 'both') ? 'red' : $p->competitor;
+ $rows = [[
+ 't' => (float) $p->timestamp_seconds,
+ 'action' => (string) ($p->action ?? 'Point'),
+ 'pts' => (int) $p->points,
+ 'side' => $side,
+ 'sr' => (int) ($p->score_red ?? 0),
+ 'sb' => (int) ($p->score_blue ?? 0),
+ ]];
+ if ($p->competitor === 'both') {
+ $rows[] = array_merge($rows[0], ['side' => 'blue', 't' => (float) $p->timestamp_seconds + 0.001]);
+ }
+ return $rows;
+ })->values()->all();
+
+ $sbm_sport = $sbm_hd['sport'] ?? null;
+
+ $sbm_data = json_encode(['rounds' => $sbm_rounds, 'points' => $sbm_points, 'sport' => $sbm_sport], JSON_HEX_APOS | JSON_HEX_QUOT);
+@endphp
+
+
+ @if($video && $video->type === 'match' && $video->sportsMatch)
+ @include('components.partials.vs-mini', ['video' => $video])
+ @endif
@if($videoUrl)
-
+ {{-- Live scoring ticker — sits in its OWN scaled canvas at the
+ top-right of the thumb. Populated by the sbm live-sync JS. --}}
+
+@endif
+
+@once
+
+
+
+
+
+
+
+@endonce
diff --git a/resources/views/components/partials/vs-mini.blade.php b/resources/views/components/partials/vs-mini.blade.php
new file mode 100644
index 0000000..2b60f8f
--- /dev/null
+++ b/resources/views/components/partials/vs-mini.blade.php
@@ -0,0 +1,536 @@
+{{-- ══════════════════════════════════════════════════════════════════════
+ VS MINI — the arena intro card rendered INSIDE a video-card thumbnail.
+ No countdown / no skip button; identical layout to the full-page VS
+ intro (fixed 1920×1080 stage, transform-scaled to fit the thumb).
+
+ Behavior:
+ - Sits at z-index 1 (above the still image, BELOW the hover video
+ which uses z-index 2 + .active { opacity: 1 }).
+ - On mouseleave from the thumb, animations restart so the intro
+ plays again the next time the user's mouse is off the card.
+════════════════════════════════════════════════════════════════════════ --}}
+@php
+ $vsm_hd = $video->sportsMatch?->headerData();
+ $vsm_red = $vsm_hd['red'] ?? null;
+ $vsm_blue = $vsm_hd['blue'] ?? null;
+ $vsm_show = $vsm_hd && (($vsm_red['name'] ?? null) || ($vsm_blue['name'] ?? null));
+@endphp
+
+@if ($vsm_show)
+@php
+ $vsm_flag = fn(?string $c) => (($c = strtolower(trim((string) $c))) !== '' ? $c : 'xx');
+ $vsm_cname = fn (?string $c) => \App\Data\Countries::name($c);
+ $vsm_img = fn(?string $p) => $p ? route('media.thumbnail', $p) : null;
+ $vsm_str = fn ($x) => (is_string($x) && trim($x) !== '') ? trim($x) : '';
+
+ // Every placeholder from the design is always in the DOM; empty ones
+ // are hidden by `.vsm-nullable:empty` / `.vsm-nullable-hide` in the
+ // CSS below. Same treatment as the full-page VS.
+ $vsm_event = $vsm_str($vsm_hd['championship'] ?? '');
+ $vsm_stage = $vsm_str($vsm_hd['division'] ?? '') ?: $vsm_str($vsm_hd['format'] ?? '');
+ $vsm_weight = $vsm_str($vsm_hd['weight_category'] ?? '');
+ $vsm_matchNo = $vsm_str($vsm_hd['match_number'] ?? '');
+ $vsm_court = $vsm_str($vsm_hd['court'] ?? '');
+ $vsm_ref = $vsm_str($vsm_hd['referee']['name'] ?? '');
+
+ // Per-fighter chips (Record / Rank / Stats) — fields aren't in
+ // headerData() today, so fall back to raw participants JSON.
+ $vsm_parts = $video->sportsMatch?->participants ?? [];
+ $vsm_redRecord = $vsm_str($vsm_parts['p2_record'] ?? '');
+ $vsm_redRank = $vsm_str($vsm_parts['p2_rank'] ?? '');
+ $vsm_redStats = $vsm_str($vsm_parts['p2_stats'] ?? '');
+ $vsm_blueRecord = $vsm_str($vsm_parts['p1_record'] ?? '');
+ $vsm_blueRank = $vsm_str($vsm_parts['p1_rank'] ?? '');
+ $vsm_blueStats = $vsm_str($vsm_parts['p1_stats'] ?? '');
+
+ $vsm_redName = $vsm_str($vsm_red['name'] ?? '');
+ $vsm_blueName = $vsm_str($vsm_blue['name'] ?? '');
+ $vsm_redClub = $vsm_str($vsm_red['club'] ?? '');
+ $vsm_blueClub = $vsm_str($vsm_blue['club'] ?? '');
+ $vsm_redFlag = $vsm_str($vsm_red['flag'] ?? '');
+ $vsm_blueFlag = $vsm_str($vsm_blue['flag'] ?? '');
+ $vsm_redLogo = $vsm_img($vsm_red['club_logo'] ?? null);
+ $vsm_blueLogo = $vsm_img($vsm_blue['club_logo'] ?? null);
+@endphp
+
+
+
+
+
+
+ Live scoring
+
+
+ {{-- ══ Scorebar markup — same design + inline styles as the
+ overlay.blade.php `data-msb-part="scorebar"` block, but stripped
+ of the live-sync data-msb hooks. ══ --}}
+
+
+
+ {{-- RED / AKA --}}
+
+
+ {{-- CENTER: round + clock --}}
+
+
+
+
+ {{-- BLUE / AO --}}
+
+
+ Round 1
+ 0:00
+
+
+
+
+
+
+
+@endif
+
+@once
+
+
+
+
+
+
+
+@endonce
diff --git a/resources/views/components/video-card.blade.php b/resources/views/components/video-card.blade.php
index dc2231b..fc41459 100644
--- a/resources/views/components/video-card.blade.php
+++ b/resources/views/components/video-card.blade.php
@@ -54,11 +54,21 @@ $sizeClasses = match($size) {
+ {{-- RED panel --}}
+
+
+
+
+
+
+ {{-- BLUE panel --}}
+
+
+
+
+
+
+
+
+ {{-- RED identity (left) — every placeholder always in DOM ── --}}
+
+
+
+ {{-- BLUE identity (right) ── --}}
+ AKA · RED
+
+
+
+ {{ $vsm_redFlag !== '' ? strtoupper($vsm_cname($vsm_redFlag) ?? $vsm_redFlag) : '' }}
+ {{ $vsm_redName }}
+
+
+
+ {{ $vsm_redClub }}
+
+
+ {{ $vsm_redRecord }}
+ {{ $vsm_redRank }}
+ {{ $vsm_redStats }}
+
+
+
+ {{-- Top: event + stage + weight (all in DOM) --}}
+ AO · BLUE
+
+
+
+ {{ $vsm_blueFlag !== '' ? strtoupper($vsm_cname($vsm_blueFlag) ?? $vsm_blueFlag) : '' }}
+ {{ $vsm_blueName }}
+
+
+
+ {{ $vsm_blueClub }}
+
+
+ {{ $vsm_blueRecord }}
+ {{ $vsm_blueRank }}
+ {{ $vsm_blueStats }}
+
+
+
+ {{-- Center VS --}}
+ {{ $vsm_event }}
+
+
+
+ {{ $vsm_stage }}
+
+ {{ $vsm_weight }}
+
+
+ {{-- .vs-mini-flash removed — the intro's full-thumb white flash at
+ t=1.5s was firing on every mouseleave-triggered replay, which
+ read as strobing on the left edge of the card. --}}
+
+ {{-- Bottom chips — Match / Court / Referee always in DOM; each hides
+ via data-vsm-empty and the flanking diamonds collapse via :has(). --}}
+ VS
+
+
+
+
+
+ Match{{ $vsm_matchNo }}
+
+
+
+ Court{{ $vsm_court }}
+
+
+
+ Referee{{ $vsm_ref }}
+
+