Remove VS screen; fix cropper + sports edit save + headshot/logo mapping

- Remove VS intro from player and thumbnail VS card from match video cards.
  All references (`msb-vs*`, `initVsIntro`, `setVsImg`, `HAS_VS`, `$vs`,
  `$msbThumbVs`, `$hasMatchMeta`) are stripped from scoreboard partials,
  video-card component, and scoreboard script. Related CSS keyframes
  (`msbFadeIn/Out`, `msbDriftA/B`, `msbSweep`) removed.

- Image cropper (resources/views/components/image-cropper.blade.php):
  replace unreliable third-party Cropme integration with a DIY cropper.
  Pan/zoom/rotate wired directly with pointer + wheel events; on save,
  the visible viewport is rendered to an offscreen canvas at the configured
  output-width (with circular clip for `shape="circle"`). Also reparent the
  overlay to <body> on open to escape any transformed Bootstrap-modal
  ancestor's stacking context that clipped it.

- Sports match modal (resources/views/layouts/partials/sports-match-modal.blade.php):
  set fighter photo croppers to 3:4 portrait (285x380) to match the VS
  card's 228x304 frame; club logos + referee stay 1:1 square.

- SportsMatchController::fillFromRequest (line 174): coerce
  `$this->clean($request->input('media', []))` to `[]` when it returns null
  so array_merge doesn't crash under PHP 8's stricter types.

- SportsMatch::headerData(): read fighter headshots + club logos from the
  canonical media.* keys (participant1_photo / participant2_photo /
  club1_logo / club2_logo) that the uploader modal actually saves, with the
  older p1_* / p2_* names kept as a secondary fallback.

Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>
This commit is contained in:
ghassanandClaude Opus 4.7 committed 2026-08-09 23:47:59 +03:00
1 parent 19741f489b
commit 2b5e480c9a
9 files changed
+235 -323

No files matched your search

@@ -14,14 +14,6 @@
!empty($hd['court']) ? ('Tatami '.$hd['court']) : null,
], fn ($p) => is_string($p) && trim($p) !== '');
/* ── Country display names (from Countries::all()) ───────────────── */
$countries = \App\Data\Countries::all();
$countryName = function (?string $iso2) use ($countries) {
if (!$iso2) return null;
$key = strtoupper($iso2);
return $countries[$key]['name'] ?? null;
};
/* ── Playback-time-driven data (rounds + points) ─────────────────── */
$msbRounds = $video->matchRounds()
->orderBy('round_number')
@@ -75,64 +67,10 @@
'rounds' => $msbRounds ?: [['n' => 1, 'name' => '', 'start' => 0]],
'points' => $msbPoints,
'defaults' => is_array($hd['scoreboard_defaults'] ?? null) ? $hd['scoreboard_defaults'] : [],
'vs' => null, // populated below once $vs is built
];
/* ── VS card — only render if there is anything to show ─────────── */
$vs = [
'event' => $hd['championship'] ?? null,
'division' => $hd['division'] ?? null,
'category' => $hd['weight_category'] ?? null,
'round' => null,
'red' => [
'name' => $hd['red']['name'] ?? null,
'flag' => $hd['red']['flag'] ?? null,
'country_name' => $countryName($hd['red']['flag'] ?? null),
'club' => $hd['red']['club'] ?? null,
'club_logo' => $hd['red']['club_logo'] ?? null,
'headshot' => $hd['red']['headshot'] ?? null,
],
'blue' => [
'name' => $hd['blue']['name'] ?? null,
'flag' => $hd['blue']['flag'] ?? null,
'country_name' => $countryName($hd['blue']['flag'] ?? null),
'club' => $hd['blue']['club'] ?? null,
'club_logo' => $hd['blue']['club_logo'] ?? null,
'headshot' => $hd['blue']['headshot'] ?? null,
],
'weight_category' => $hd['weight_category'] ?? null,
'format_line' => $hd['format'] ?? null,
'match_number' => $hd['match_number'] ?? null,
'court' => !empty($hd['court']) ? ('Tatami '.$hd['court']) : null,
'match_date' => $hd['match_date'] ?? null,
'venue_name' => $hd['venue']['name'] ?? null,
];
// Enough metadata for a VS card? Need at least one athlete name or headshot.
$hasMatchMeta = ($vs['red']['name'] || $vs['red']['headshot'] ||
$vs['blue']['name'] || $vs['blue']['headshot']);
// Feed image paths (headshot/logo) already routed to media.thumbnail for the
// JS to consume — mirror them into $msbState.vs so setVsImg() can use them.
$msbState['vs'] = [
'red' => [
'name' => $vs['red']['name'] ?? null,
'flag' => $vs['red']['flag'] ?? null,
'club_logo' => !empty($vs['red']['club_logo']) ? route('media.thumbnail', $vs['red']['club_logo']) : null,
'headshot' => !empty($vs['red']['headshot']) ? route('media.thumbnail', $vs['red']['headshot']) : null,
],
'blue' => [
'name' => $vs['blue']['name'] ?? null,
'flag' => $vs['blue']['flag'] ?? null,
'club_logo' => !empty($vs['blue']['club_logo']) ? route('media.thumbnail', $vs['blue']['club_logo']) : null,
'headshot' => !empty($vs['blue']['headshot']) ? route('media.thumbnail', $vs['blue']['headshot']) : null,
],
];
@endphp
@include('videos.partials.match.scoreboard.styles')
@include('videos.partials.match.scoreboard.overlay')
@if ($hasMatchMeta)
@include('videos.partials.match.scoreboard.vs-intro', ['vs' => $vs])
@endif
@include('videos.partials.match.scoreboard.script', ['msbState' => $msbState, 'hasMatchMeta' => $hasMatchMeta])
@include('videos.partials.match.scoreboard.script', ['msbState' => $msbState])
@@ -13,10 +13,8 @@
<script>
(function () {
const MSB_STATE = @json($msbState);
const HAS_VS = @json($hasMatchMeta);
const VIDEO_ID = @json($video->id);
const LS_KEY = 'msb_prefs';
const SS_VS_KEY = 'msb_vs_shown_v' + VIDEO_ID;
const RUN = function () {
const root = document.getElementById('msbRoot');
@@ -130,31 +128,6 @@
setFlag('blueFlag', MSB_STATE.blue.flag);
setImage('redClub', MSB_STATE.red.club_logo);
setImage('blueClub', MSB_STATE.blue.club_logo);
// ── VS card image slots (photo, crest, flag) ────────────────
// If data exists, swap the placeholder for a real image.
// If no data, hide the placeholder box entirely (never leave
// "FIGHTER PHOTO" / "CLUB LOGO" / "FLAG" text visible in prod).
const VS = (MSB_STATE.vs || {});
const setVsImg = (name, path, hideWhenEmpty = true) => {
const el = $(name); if (!el) return;
if (path) {
el.textContent = '';
el.style.background = '#0d0d10';
const img = document.createElement('img');
img.src = path; img.alt = '';
img.style.cssText = 'width:100%;height:100%;object-fit:cover;display:block';
el.appendChild(img);
} else if (hideWhenEmpty) {
el.style.display = 'none';
}
};
setVsImg('vsRedPhoto', VS.red && VS.red.headshot);
setVsImg('vsBluePhoto', VS.blue && VS.blue.headshot);
setVsImg('vsRedCrest', VS.red && VS.red.club_logo);
setVsImg('vsBlueCrest', VS.blue && VS.blue.club_logo);
setFlag('vsRedFlag', VS.red && VS.red.flag);
setFlag('vsBlueFlag', VS.blue && VS.blue.flag);
}
// ── Playback-time-driven render (memoised) ────────────────────────
@@ -291,48 +264,6 @@
}
tryInject(30);
// ── VS intro lifecycle ────────────────────────────────────────────
function initVsIntro() {
if (!HAS_VS) return;
const vs = document.getElementById('msbVs');
const v = player();
if (!vs || !v) return;
let alreadyShown = false;
try { alreadyShown = sessionStorage.getItem(SS_VS_KEY) === '1'; } catch (e) {}
if (alreadyShown) return;
let shown = false;
const show = () => {
if (shown) return;
shown = true;
try { sessionStorage.setItem(SS_VS_KEY, '1'); } catch (e) {}
vs.hidden = false;
vs.dataset.visible = 'true';
try { v.pause(); } catch (e) {}
const dismiss = (playToo = true) => {
if (!vs || vs.classList.contains('msb-vs-out')) return;
vs.classList.add('msb-vs-out');
if (playToo) { try { v.play(); } catch (e) {} }
setTimeout(() => { if (vs && vs.parentNode) vs.parentNode.removeChild(vs); }, 520);
document.removeEventListener('keydown', onKey);
};
vs.addEventListener('click', () => dismiss(true));
vs.addEventListener('touchstart', () => dismiss(true), { passive: true });
const onKey = () => dismiss(true);
document.addEventListener('keydown', onKey);
setTimeout(() => dismiss(true), 2000);
};
// Trigger on the first play attempt (autoplay-friendly).
const onPlay = () => { v.removeEventListener('play', onPlay); v.removeEventListener('playing', onPlay); show(); };
v.addEventListener('play', onPlay, { once: true });
v.addEventListener('playing', onPlay, { once: true });
// If autoplay is already firing when we arrive:
if (!v.paused && v.currentTime < 0.5) show();
}
// ── Overlay scaling to a fixed 1150 px design canvas ──────────────
// Keeps the score bar, ticker, and identity at their pixel-perfect
// proportions no matter how wide the actual player is.
@@ -372,7 +303,6 @@
v.addEventListener('loadedmetadata', tick);
v.addEventListener('ratechange', tick);
tick();
initVsIntro();
}
attachPlayer();
};
@@ -12,16 +12,6 @@
/* ────────────────────────────── keyframes ────────────────────────────── */
@keyframes msbRiseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes msbPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes msbFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes msbFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes msbDriftA { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(60px, -28px, 0) scale(1.14); } }
@keyframes msbDriftB { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.08); }
50% { transform: translate3d(-54px, 26px, 0) scale(1); } }
@keyframes msbSweep { 0% { transform: translateX(-60%) skewX(-14deg); opacity: 0; }
25% { opacity: .5; }
60% { opacity: 0; }
100% { transform: translateX(160%) skewX(-14deg); opacity: 0; } }
/* ────────────────────────────── root layer ─────────────────────────────
No z-index on the root: source order inside #ytpWrap places the video
@@ -128,19 +118,6 @@ body.msb-off-penalties [data-msb-part="penalties"] { display: none !important; }
body.msb-small .msb-info,
body.msb-small .msb-feed { display: none !important; }
/*
* VS intro card — visuals are entirely inline styles on the verbatim markup
* from drafts/vs-screen.html. Only the outer wrapper + fade in/out lives
* here; keyframes (msbDriftA/B, msbSweep, msbFadeIn/Out) are up top.
*/
.msb-vs {
position: absolute; inset: 0; z-index: 12;
background: #08080a; overflow: hidden;
pointer-events: auto;
animation: msbFadeIn .3s ease both;
}
.msb-vs.msb-vs-out { animation: msbFadeOut .5s ease both; }
/* ────────────────────────────── injected gear rows ──────────────────── */
/* Matches the design prototype's custom look (26×14 track, 10 px bone knob),
scoped so it never touches the platform's other rows. */
@@ -1,106 +0,0 @@
{{--
VS SCREEN — verbatim markup from drafts/vs-screen.html. Only {{ }} holes
filled with Blade data. `data-msb` hooks on the photo, crest, and flag
boxes let the script swap in real images at runtime. Missing fields are
hidden by inline display:none (never substituted with placeholder text).
--}}
@php
$rc = strtoupper(trim($vs['red']['flag'] ?? ''));
$bc = strtoupper(trim($vs['blue']['flag'] ?? ''));
$eventName = $vs['event'] ?? '';
$category = $vs['category'] ?? '';
$division = $vs['division'] ?? '';
$roundName = $vs['round'] ?? '';
$redName = $vs['red']['name'] ?? '';
$redCountry = $vs['red']['country_name'] ?? '';
$redClub = $vs['red']['club'] ?? '';
$blueName = $vs['blue']['name'] ?? '';
$blueCountry= $vs['blue']['country_name'] ?? '';
$blueClub = $vs['blue']['club'] ?? '';
$weightClass= $vs['weight_category'] ?? '';
$format = $vs['format_line'] ?? '';
$bout = !empty($vs['match_number']) ? ('Bout '.$vs['match_number']) : '';
$tatami = $vs['court'] ?? '';
$dateVenue = trim(($vs['match_date'] ?? '').' '.($vs['venue_name'] ? '· '.$vs['venue_name'] : ''));
$hide = fn($v) => (is_string($v) && trim($v) === '') ? 'display:none;' : '';
@endphp
<div class="msb-vs" id="msbVs" hidden data-visible="false">
<div style="position:relative;width:100%;height:100%;overflow:hidden;background:#08080a">
<div style="position:absolute;inset:-12%;width:70%;left:-6%;background:radial-gradient(closest-side, rgba(168,42,34,.62), rgba(8,8,10,0) 72%);animation:msbDriftA 19s ease-in-out infinite"></div>
<div style="position:absolute;inset:-12%;width:70%;left:36%;background:radial-gradient(closest-side, rgba(28,64,136,.62), rgba(8,8,10,0) 72%);animation:msbDriftB 23s ease-in-out infinite"></div>
<div style="position:absolute;top:0;bottom:0;left:0;width:26%;background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.09), rgba(255,255,255,0));animation:msbSweep 11s linear infinite"></div>
<div style="position:absolute;top:0;bottom:0;left:0;width:54%;clip-path:polygon(0 0, 100% 0, 78% 100%, 0 100%);background:linear-gradient(120deg, rgba(122,26,22,.5), rgba(8,8,10,0) 76%)"></div>
<div style="position:absolute;top:0;bottom:0;right:0;width:54%;clip-path:polygon(22% 0, 100% 0, 100% 100%, 0 100%);background:linear-gradient(300deg, rgba(24,52,110,.5), rgba(8,8,10,0) 76%)"></div>
{{-- event header --}}
<div style="position:absolute;top:34px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:8px">
<div style="font-family:'Zen Old Mincho',serif;font-size:24px;letter-spacing:.44em;color:#efe9e0;text-transform:uppercase;text-indent:.44em;{{ $hide($eventName) }}">{{ $eventName }}</div>
<div style="display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.34em;color:#8f8a83;text-transform:uppercase">
<span style="{{ $hide($category) }}">{{ $category }}</span>
<span style="width:4px;height:4px;background:#e8534a;{{ $hide($category).$hide($division) }}"></span>
<span style="{{ $hide($division) }}">{{ $division }}</span>
<span style="width:4px;height:4px;background:#6aa6ff;{{ $hide($division).$hide($roundName) }}"></span>
<span style="{{ $hide($roundName) }}">{{ $roundName }}</span>
</div>
</div>
<div style="position:absolute;inset:96px 0 54px;display:grid;grid-template-columns:1fr 200px 1fr;align-items:start">
{{-- RED fighter --}}
<div style="display:flex;flex-direction:column;align-items:center;padding:34px 24px 0;min-width:0">
<div style="position:relative;width:228px;height:304px">
<div data-msb="vsRedPhoto" style="position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.1) 0 6px,rgba(255,255,255,.03) 6px 12px);border:1px solid rgba(255,255,255,.16);display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px;font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.1em;color:rgba(255,255,255,.6)">FIGHTER PHOTO</div>
<div data-msb="vsRedCrest" style="position:absolute;bottom:-26px;right:-26px;width:104px;height:104px;border-radius:50%;background:#0d0d10;border:1px solid rgba(255,255,255,.28);box-shadow:0 10px 30px rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;font-family:ui-monospace,monospace;font-size:9px;letter-spacing:.06em;color:rgba(255,255,255,.7);text-align:center;line-height:1.35">CLUB<br>LOGO</div>
</div>
<div style="margin-top:34px;padding-top:12px;border-top:3px solid #e8534a;display:flex;flex-direction:column;align-items:center;gap:8px">
<div style="font-size:42px;line-height:.95;font-weight:800;color:#fff;text-transform:uppercase;white-space:nowrap">{{ $redName ?: 'RED' }}</div>
<div style="display:flex;align-items:center;gap:12px;{{ $hide($redCountry).($rc ? '' : $hide('')) }}">
<span data-msb="vsRedFlag" style="width:40px;height:27px;flex:none;background:repeating-linear-gradient(135deg,rgba(255,255,255,.28) 0 5px,rgba(255,255,255,.1) 5px 10px);box-shadow:0 0 0 1px rgba(255,255,255,.32);display:flex;align-items:center;justify-content:center;font-family:ui-monospace,monospace;font-size:8px;color:rgba(255,255,255,.85)">FLAG</span>
<span style="font-size:14px;letter-spacing:.3em;color:#d3b3ad;text-transform:uppercase;{{ $hide($redCountry) }}">{{ $redCountry }}</span>
</div>
<div style="display:flex;align-items:center;gap:10px;margin-top:2px;{{ $hide($redClub) }}">
<span style="font-size:13px;letter-spacing:.18em;color:#9d9691;text-transform:uppercase">{{ $redClub }}</span>
</div>
</div>
</div>
{{-- centre --}}
<div style="display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:96px">
<span style="font-family:'Zen Old Mincho',serif;font-size:88px;line-height:.8;font-weight:700;color:#efe9e0;text-shadow:0 8px 34px rgba(0,0,0,.75)">VS</span>
<span style="padding:7px 16px;border:1px solid rgba(255,255,255,.3);font-size:14px;letter-spacing:.32em;color:#efe9e0;text-transform:uppercase;{{ $hide($weightClass) }}">{{ $weightClass }}</span>
<span style="font-size:11px;letter-spacing:.34em;color:#8f8a83;text-transform:uppercase;{{ $hide($format) }}">{{ $format }}</span>
</div>
{{-- BLUE fighter — mirror --}}
<div style="display:flex;flex-direction:column;align-items:center;padding:34px 24px 0;min-width:0">
<div style="position:relative;width:228px;height:304px">
<div data-msb="vsBluePhoto" style="position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.1) 0 6px,rgba(255,255,255,.03) 6px 12px);border:1px solid rgba(255,255,255,.16);display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px;font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.1em;color:rgba(255,255,255,.6)">FIGHTER PHOTO</div>
<div data-msb="vsBlueCrest" style="position:absolute;bottom:-26px;left:-26px;width:104px;height:104px;border-radius:50%;background:#0d0d10;border:1px solid rgba(255,255,255,.28);box-shadow:0 10px 30px rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;font-family:ui-monospace,monospace;font-size:9px;letter-spacing:.06em;color:rgba(255,255,255,.7);text-align:center;line-height:1.35">CLUB<br>LOGO</div>
</div>
<div style="margin-top:34px;padding-top:12px;border-top:3px solid #6aa6ff;display:flex;flex-direction:column;align-items:center;gap:8px">
<div style="font-size:42px;line-height:.95;font-weight:800;color:#fff;text-transform:uppercase;white-space:nowrap">{{ $blueName ?: 'BLUE' }}</div>
<div style="display:flex;align-items:center;gap:12px;{{ $hide($blueCountry) }}">
<span style="font-size:14px;letter-spacing:.3em;color:#a8b6cf;text-transform:uppercase;{{ $hide($blueCountry) }}">{{ $blueCountry }}</span>
<span data-msb="vsBlueFlag" style="width:40px;height:27px;flex:none;background:repeating-linear-gradient(135deg,rgba(255,255,255,.28) 0 5px,rgba(255,255,255,.1) 5px 10px);box-shadow:0 0 0 1px rgba(255,255,255,.32);display:flex;align-items:center;justify-content:center;font-family:ui-monospace,monospace;font-size:8px;color:rgba(255,255,255,.85)">FLAG</span>
</div>
<div style="display:flex;align-items:center;gap:10px;margin-top:2px;{{ $hide($blueClub) }}">
<span style="font-size:13px;letter-spacing:.18em;color:#9d9691;text-transform:uppercase">{{ $blueClub }}</span>
</div>
</div>
</div>
</div>
{{-- bout line --}}
<div style="position:absolute;bottom:26px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:16px;font-size:11px;letter-spacing:.32em;color:#8f8a83;text-transform:uppercase">
<span style="{{ $hide($bout) }}">{{ $bout }}</span>
<span style="width:4px;height:4px;background:#e8534a;{{ $hide($bout).$hide($tatami) }}"></span>
<span style="{{ $hide($tatami) }}">{{ $tatami }}</span>
<span style="width:4px;height:4px;background:#6aa6ff;{{ $hide($tatami).$hide($dateVenue) }}"></span>
<span style="{{ $hide($dateVenue) }}">{{ $dateVenue }}</span>
</div>
</div>
</div>