04d63cccdb
Match player + preview
- Rebuild VS intro as a 1920×1080 scaled canvas (arena design from drafts/):
angled RED/BLUE panels with clip-paths, slam-in VS with pulse+shine,
event/stage/weight header, Match/Court/Referee chips, per-fighter
Record/Rank/Stats chip row. Every placeholder from the artifact is
always in the DOM; empty ones are hidden by `.vs-nullable:empty`
and `.vs-nullable-hide` so the layout adapts without losing the
design's HTML shape. Country codes always render as full country
names (via new App\Data\Countries::name()).
- Real-time 6s countdown Skip button; video pinned at t=0 while
the intro runs, released to play at zero or on Skip.
- Standalone preview page at /videos/{video}/vs-preview.
Video cards (home + everywhere)
- Match cards get a `vs-mini` overlay of the same arena design
(fixed canvas, per-card ResizeObserver, animations replay every
time the mouse leaves the thumb). On hover the mini explodes
outward (panels fly out, VS scales+blurs+fades) and the hover
video plays over the cleared thumb.
- Match cards also render a `scorebar-mini` overlay (verbatim of
the full-player msb-scale scorebar + msb-feed) that shows
during hover playback. Live-scoring is wired per-card via a
data-sbm-state payload of rounds+points; RED/BLUE score, round
label, per-round clock, and the top-right Live Scoring ticker
(4 entries, sport-aware Yuko/Waza-ari/Ippon or Punch/Body
kick/… labels) all update from the mini video's timeupdate.
Bug fixes
- Hover video wasn't playing sound: dropped the `muted` attribute
I'd added while debugging match previews.
- White flash strobing on the left of match cards: removed the
`.vs-mini-flash` element (intro-only flourish that fired on
every mouseleave replay).
- Sports-match modal was showing "Please complete the required
fields" when saving basic info for match videos that had no
SportsMatch row yet: the submit gate only checked matchId, not
the attached videoId; now it correctly skips uploadVideoFirst()
in both edit and attach-existing-video modes.
Country names project-wide
- New helper App\Data\Countries::name($iso2) → full country name.
- Swapped `?? country` fallbacks to `?? Countries::name(country)`
in admin dashboard, video-analytics, video-insights payloads
(VideoController + SuperAdminController), and the VS partials.
Now user-visible country labels always show "Bahrain" instead
of "BH", including chart tooltips and modal titles.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
39 lines
1.8 KiB
PHP
39 lines
1.8 KiB
PHP
{{-- Standalone preview page for the VS intro overlay. Renders the same
|
|
partial that appears over the match player, in a fixed 16:9 stage
|
|
centered on a blank page, with no video element behind it. --}}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>VS Preview — {{ $video->title }}</title>
|
|
<link rel="stylesheet" href="{{ asset('vendor/flag-icons/css/flag-icons.min.css') }}">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
|
<style>
|
|
html, body { margin: 0; padding: 0; background: #050507; height: 100%; overflow: hidden; }
|
|
body { display: flex; align-items: center; justify-content: center; font-family: system-ui, sans-serif; }
|
|
.vs-preview-stage {
|
|
position: relative;
|
|
width: min(100vw, calc(100vh * 16 / 9));
|
|
aspect-ratio: 16 / 9;
|
|
background: #000;
|
|
box-shadow: 0 30px 80px rgba(0,0,0,.6);
|
|
}
|
|
/* The partial's #vsScreen uses position:absolute + inset:0, so it fills
|
|
the stage exactly like it does inside .ytp on the real player. */
|
|
#videoPlayer { display: none; } /* partial's script looks up this id, keep it inert */
|
|
</style>
|
|
</head>
|
|
<body>
|
|
{{-- The partial's script pauses/plays #videoPlayer to hold playback
|
|
until the countdown ends. On the preview page there is no source
|
|
to play, but the countdown itself is real-time so the overlay
|
|
still ticks 5 → 0 and dismisses correctly. --}}
|
|
<video id="videoPlayer" preload="none"></video>
|
|
<div class="vs-preview-stage">
|
|
@php $hd = $video->sportsMatch->headerData(); @endphp
|
|
@include('videos.partials.match.vs.index')
|
|
</div>
|
|
</body>
|
|
</html>
|