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

Fullscreen drawer: squeeze the video instead of overlaying it

Browse Source 
Better layout: when the drawer opens in fullscreen, shrink the player's inner
.ytp container to calc(100% - drawer width) so the video sits in the remaining
left area and the drawer owns the right — no overlap, both fully visible side
by side. Because controls, the coach caption and the Highlights button all live
inside .ytp, they move with the video automatically, so the previous overlay
compensations (control/gradient shift, caption re-anchor, button reposition)
are dropped. Drawer is now a clean solid panel (var(--bg-secondary)) since the
video is no longer behind it; blurred-glass background + @supports fallback
removed. Animated via a width transition on .ytp.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
ghassan 2026-07-28 23:24:36 +03:00
parent 4cd1d195a7
commit 0f3110f59d
1 changed files with 10 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1975,9 +1975,10 @@
/* ============================================================ /* ============================================================
MATCH HIGHLIGHTS — fullscreen landscape drawer MATCH HIGHLIGHTS — fullscreen landscape drawer
Native fullscreen renders only #ytpWrap + descendants, so JS Native fullscreen renders only #ytpWrap + descendants, so JS
relocates the pane inside the player and it becomes a Narrow, relocates the pane inside the player. It becomes a narrow solid
Clear (blurred-glass) right-side drawer that barely covers the right-side drawer, and the video (inside .ytp) is squeezed into
match. Applies at any width, only while .ytp-fullscreen is on. the remaining left area so nothing overlaps — both are fully
visible side by side. Only while .ytp-fullscreen is on.
============================================================ */ ============================================================ */
.ytp-wrap.ytp-fullscreen { --hl-drawer-w: clamp(230px, 30vw, 360px); } .ytp-wrap.ytp-fullscreen { --hl-drawer-w: clamp(230px, 30vw, 360px); }
@ -1990,11 +1991,9 @@
width: var(--hl-drawer-w) !important; width: var(--hl-drawer-w) !important;
height: auto !important; max-height: none !important; height: auto !important; max-height: none !important;
margin: 0 !important; border-radius: 0 !important; margin: 0 !important; border-radius: 0 !important;
background: linear-gradient(to left, rgba(10, 10, 13, 0.42), rgba(10, 10, 13, 0.14)); background: var(--bg-secondary, #17171b); /* solid: the video is squeezed aside, not behind it */
-webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
border-left: 1px solid rgba(255, 255, 255, 0.10); border-left: 1px solid rgba(255, 255, 255, 0.10);
box-shadow: none; box-shadow: none;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85); /* legibility over the video */
transform: translateX(100%); transform: translateX(100%);
transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1); transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1);
pointer-events: none; z-index: 40; pointer-events: none; z-index: 40;
@ -2002,25 +2001,11 @@
.ytp-wrap.ytp-fullscreen .events-sidebar.show { transform: translateX(0); pointer-events: auto; } .ytp-wrap.ytp-fullscreen .events-sidebar.show { transform: translateX(0); pointer-events: auto; }
.ytp-wrap.ytp-fullscreen .events-sidebar .hl-sheet-grab { display: none; } .ytp-wrap.ytp-fullscreen .events-sidebar .hl-sheet-grab { display: none; }
/* Fallback where backdrop-filter is unsupported — firm up the fill so the /* Squeeze the video into the remaining left area when the drawer is open.
list stays readable over the video. */ Everything else (controls, coach caption, the Highlights button) lives
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { inside .ytp, so it all moves with the video — nothing sits under the drawer. */
.ytp-wrap.ytp-fullscreen .events-sidebar { .ytp-wrap.ytp-fullscreen .ytp { transition: width 0.34s cubic-bezier(0.32, 0.72, 0, 1); }
background: linear-gradient(to left, rgba(10, 10, 13, 0.74), rgba(10, 10, 13, 0.52)); .ytp-wrap.ytp-fullscreen.hl-drawer-open .ytp { width: calc(100% - var(--hl-drawer-w)); }
}
}
/* While the drawer is open: pull the controls into the video area so the
scrubber isn't hidden, keep the coach caption in the video area, and slide
the Highlights button to the drawer's left edge so it stays tappable. */
.ytp-wrap.ytp-fullscreen.hl-drawer-open .ytp-chrome-bottom,
.ytp-wrap.ytp-fullscreen.hl-drawer-open .ytp-gradient-bottom { right: var(--hl-drawer-w) !important; }
.ytp-wrap.ytp-fullscreen.hl-drawer-open .coach-note-overlay {
left: 16px; right: auto; transform: none; max-width: 60%;
}
.ytp-wrap.ytp-fullscreen.hl-drawer-open .match-highlights-toggle {
right: calc(var(--hl-drawer-w) + 10px);
}
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.ytp-wrap.ytp-fullscreen .events-sidebar { transition: none; } .ytp-wrap.ytp-fullscreen .events-sidebar { transition: none; }
} }