ghassan/takeone-youtube-clone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Match highlights sheet: flush to player bottom + non-blocking coach caption

Browse Source 
- Sheet top now pins to the player's exact bottom edge (JS measures #ytpWrap
  height into --hl-sheet-top; 56.25vw fallback), so no title/actions row shows
  between the video and the sheet. Recomputes on open and on resize/rotate.
- Coach-note overlay on mobile is now a slim 2-line caption pinned to the very
  bottom of the player instead of a 16px block mid-frame, so it no longer
  covers the video. Full note stays readable in the sheet.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
ghassan 2026-07-28 22:56:33 +03:00
parent ea95a60d79
commit cffd8491d0
1 changed files with 40 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
resources/views/videos/types/match.blade.php
View File

@ -1896,9 +1896,13 @@
.events-sidebar {
display: flex !important; /* override desktop display:none so it can slide */
position: fixed;
left: 0; right: 0; bottom: 0; top: auto;
left: 0; right: 0; bottom: 0;
/* Top sits exactly at the player's bottom edge so nothing (title,
actions, channel row) shows between the video and the sheet. JS
sets the precise px; the 56.25vw fallback = a full-width 16:9 player. */
top: var(--hl-sheet-top, 56.25vw);
width: 100% !important;
height: 62vh; max-height: 62vh;
height: auto; max-height: none;
margin: 0 !important;
border-radius: 18px 18px 0 0;
box-shadow: 0 -14px 44px rgba(0, 0, 0, 0.55);
@ -1942,6 +1946,24 @@
!important overrides the base `.yt-bottom-nav { transform: none !important }`. */
.yt-bottom-nav { transition: transform 0.3s ease; }
body.hl-sheet-open .yt-bottom-nav { transform: translateY(100%) !important; }
/* Coach-note overlay on the small mobile player: a slim caption pinned to
the very bottom edge (max 2 lines) so it never blocks the view. The full
note stays readable in the sheet. */
.coach-note-overlay {
bottom: 6px;
font-size: 12px;
font-weight: 600;
line-height: 1.3;
padding: 5px 10px;
max-width: 94%;
}
.coach-note-overlay.show {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
.events-sidebar,
@ -2294,6 +2316,17 @@
const mainScroll = document.getElementById('main');
const isMobile = () => window.matchMedia('(max-width: 991px)').matches;
// Pin the sheet's top edge to the player's exact bottom so the
// gap between them is zero on any device/orientation.
const positionSheet = () => {
if (!isMobile()) { sidebar.style.removeProperty('--hl-sheet-top'); return; }
const wrap = document.getElementById('ytpWrap');
if (wrap) {
const h = Math.round(wrap.getBoundingClientRect().height);
if (h > 0) sidebar.style.setProperty('--hl-sheet-top', h + 'px');
}
};
const setOpen = (open) => {
sidebar.classList.toggle('show', open);
toggleBtn.classList.toggle('expanded', open);
@ -2304,7 +2337,10 @@
localStorage.setItem(`highlights_${videoId}`, 'open');
// Mobile: the pane is a bottom sheet — bring the player back
// to the top so the user can watch while reading highlights.
if (isMobile() && mainScroll) mainScroll.scrollTo({ top: 0, behavior: 'smooth' });
if (isMobile()) {
if (mainScroll) mainScroll.scrollTo({ top: 0, behavior: 'smooth' });
positionSheet();
}
} else {
localStorage.removeItem(`highlights_${videoId}`);
}
@ -2326,6 +2362,7 @@
const openMobile = sidebar.classList.contains('show') && isMobile();
if (backdrop) backdrop.classList.toggle('show', openMobile);
document.body.classList.toggle('hl-sheet-open', openMobile);
positionSheet();
});
}
});