Replace video player with a fully custom fake-fullscreen HUD
Single fullscreen player state everywhere (desktop/Android/iOS/feed) instead of the old modal-vs-native-fullscreen split, with custom controls: draggable timeline with buffered range, dynamically-escalating skip buttons (double-tap zones too), per-video format switching, favorites, PiP with auto-PiP on backgrounding, volume swipe, TikTok-style HUD auto-hide, and swipe-down/ back-button/close-button dismissal. Reels feed reuses the same skip/format/ PiP logic via the new customPlayer.js shared module. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Simon
@@ -1372,75 +1372,455 @@ body.theme-light .favorite-btn {
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
.modal {
|
||||
/* --- Custom player: single fake-fullscreen state everywhere ------------ */
|
||||
.custom-player {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: #000;
|
||||
z-index: 2000;
|
||||
z-index: 3000;
|
||||
touch-action: none;
|
||||
transition: transform 0.25s ease, opacity 0.25s ease;
|
||||
}
|
||||
|
||||
body.theme-light .modal {
|
||||
background: #0b0b0b;
|
||||
.custom-player.open {
|
||||
display: block;
|
||||
animation: cp-open 0.22s ease;
|
||||
}
|
||||
|
||||
.modal.open {
|
||||
display: flex;
|
||||
@keyframes cp-open {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
.cp-surface {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
/* Ambient backdrop: a blurred copy of the poster fills any letterbox bars
|
||||
behind the contained video (set via the --poster custom property). */
|
||||
.cp-surface::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: var(--poster);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
filter: blur(60px) saturate(1.3) brightness(0.5);
|
||||
transform: scale(1.25);
|
||||
opacity: 0.55;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.cp-video {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.cp-flash {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
padding: 8px 18px;
|
||||
border-radius: 999px;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.02em;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.cp-flash.is-visible {
|
||||
animation: cp-flash-fade 0.7s ease forwards;
|
||||
}
|
||||
|
||||
@keyframes cp-flash-fade {
|
||||
0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
|
||||
100% { opacity: 0; transform: translate(-50%, -50%) scale(1.08); }
|
||||
}
|
||||
|
||||
.cp-spinner {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.15s ease;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.cp-spinner.is-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.cp-spinner-ring {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid rgba(255, 255, 255, 0.25);
|
||||
border-top-color: var(--accent);
|
||||
animation: cp-spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes cp-spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.cp-error {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
gap: 12px;
|
||||
padding: 20px 24px;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
border-radius: var(--radius-lg);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
max-width: min(360px, 80vw);
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
color: #fff;
|
||||
font-size: 32px;
|
||||
.cp-retry-btn {
|
||||
padding: 8px 20px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--accent);
|
||||
background: transparent;
|
||||
color: var(--accent);
|
||||
cursor: pointer;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border: none;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.cp-retry-btn:hover {
|
||||
background: rgba(201, 165, 103, 0.15);
|
||||
}
|
||||
|
||||
.cp-replay-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border: none;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2001;
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.close:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
.cp-replay-btn .icon-svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
object-fit: contain;
|
||||
.cp-hud {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent 18%, transparent 78%, rgba(0, 0, 0, 0.6));
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s ease;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#mobile-video-host {
|
||||
position: fixed;
|
||||
left: -9999px;
|
||||
top: 0;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
.custom-player.cp-hud-idle .cp-hud {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.cp-hud * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.cp-top-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: max(14px, env(safe-area-inset-top)) 16px 0;
|
||||
}
|
||||
|
||||
.cp-close-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cp-title {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
font-family: var(--font-display);
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cp-title-text {
|
||||
display: inline-block;
|
||||
padding-right: 24px;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.cp-title.has-marquee .cp-title-text {
|
||||
animation: video-title-marquee var(--marquee-duration, 10s) linear infinite;
|
||||
}
|
||||
|
||||
.cp-fav-btn {
|
||||
position: static;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cp-bottom-bar {
|
||||
padding: 0 16px max(14px, env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.custom-player.is-live .cp-timeline,
|
||||
.custom-player.is-live .cp-skip-back-btn,
|
||||
.custom-player.is-live .cp-skip-fwd-btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cp-timeline {
|
||||
padding: 10px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cp-timeline-track {
|
||||
position: relative;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.cp-timeline-buffered {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
border-radius: 2px;
|
||||
background: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
|
||||
.cp-timeline-fill {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
border-radius: 2px;
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.cp-timeline-handle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0%;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
transform: translate(-50%, -50%) scale(0.7);
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
|
||||
.cp-timeline:hover .cp-timeline-handle,
|
||||
.cp-timeline.is-scrubbing .cp-timeline-handle {
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
|
||||
.cp-time-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.cp-time {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
flex-shrink: 0;
|
||||
min-width: 34px;
|
||||
}
|
||||
|
||||
.cp-time-duration {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.cp-transport {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cp-transport button {
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cp-play-btn {
|
||||
width: 48px !important;
|
||||
height: 48px !important;
|
||||
background: rgba(255, 255, 255, 0.12) !important;
|
||||
}
|
||||
|
||||
.cp-play-btn .icon-svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.cp-skip-back-btn .icon-svg,
|
||||
.cp-skip-fwd-btn .icon-svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.cp-skip-amount {
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
border-radius: 6px;
|
||||
padding: 0 3px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.cp-secondary-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cp-mute-btn,
|
||||
.cp-pip-btn {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cp-mute-btn .icon-svg,
|
||||
.cp-pip-btn .icon-svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.cp-volume-range {
|
||||
width: 64px;
|
||||
accent-color: var(--accent);
|
||||
}
|
||||
|
||||
.cp-format-btn {
|
||||
height: 26px;
|
||||
padding: 0 8px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.35);
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cp-format-menu {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
bottom: 64px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: rgba(20, 17, 13, 0.92);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
z-index: 6;
|
||||
max-height: 40vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.cp-format-option {
|
||||
padding: 9px 18px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--text-primary);
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cp-format-option:hover {
|
||||
background: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.cp-format-option.is-active {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* `.cp-error`/`.cp-replay-btn`/`.cp-format-menu` above set `display` on the
|
||||
bare class so JS can toggle visibility via the `hidden` attribute alone;
|
||||
these higher-specificity overrides keep that attribute effective (an
|
||||
unconditional `display` on the class would otherwise beat the UA
|
||||
`[hidden] { display: none }` rule). */
|
||||
.cp-error[hidden],
|
||||
.cp-replay-btn[hidden],
|
||||
.cp-format-menu[hidden],
|
||||
.cp-pip-btn[hidden],
|
||||
.favorite-btn[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.cp-title { font-size: 14px; }
|
||||
.cp-volume-range { display: none; }
|
||||
}
|
||||
|
||||
.error-toast {
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
@@ -1814,6 +2194,38 @@ body.feed-mode-open .mode-toggle-btn .icon-svg {
|
||||
background: rgba(255, 59, 48, 0.18);
|
||||
}
|
||||
|
||||
/* Reels HUD right rail additions: PiP + quality, stacked above favorite. */
|
||||
.feed-pip-btn {
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
bottom: 266px;
|
||||
z-index: 6;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
transition: background 0.2s ease, opacity 0.4s ease;
|
||||
}
|
||||
|
||||
.feed-pip-btn .icon-svg {
|
||||
filter: invert(100%) saturate(0%);
|
||||
}
|
||||
|
||||
.feed-format-btn {
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
bottom: 322px;
|
||||
z-index: 6;
|
||||
transition: opacity 0.4s ease;
|
||||
}
|
||||
|
||||
.feed-format-menu {
|
||||
right: 76px;
|
||||
bottom: 322px;
|
||||
}
|
||||
|
||||
.feed-flash {
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
/* Reels/TikTok mode: HUD auto-hides after a short idle. Elements stay
|
||||
interactive (pointer-events untouched) so the buttons keep working while
|
||||
invisible; any pointer/scroll activity reveals them again (see App.feed). */
|
||||
@@ -1821,6 +2233,8 @@ body.feed-hud-idle .feed-info,
|
||||
body.feed-hud-idle .feed-timeline,
|
||||
body.feed-hud-idle .feed-mute-btn,
|
||||
body.feed-hud-idle .feed-fav-btn,
|
||||
body.feed-hud-idle .feed-pip-btn,
|
||||
body.feed-hud-idle .feed-format-btn,
|
||||
body.feed-hud-idle .mode-toggle-btn {
|
||||
opacity: 0;
|
||||
}
|
||||
@@ -2055,26 +2469,6 @@ body.theme-light .video-card img:not(.is-loaded) {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* --- Player ambient backdrop: blurred poster behind the video --------- */
|
||||
.modal-content::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: var(--poster);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
filter: blur(60px) saturate(1.3) brightness(0.5);
|
||||
transform: scale(1.25);
|
||||
opacity: 0.55;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.modal-content > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* --- Reels HUD polish: serif title + brass scrubber + mute pulse ------- */
|
||||
.feed-title { font-family: var(--font-display); }
|
||||
|
||||
@@ -2096,10 +2490,3 @@ body.theme-light .video-card img:not(.is-loaded) {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* --- View Transition timing (player open/close crossfade) -------------- */
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
::view-transition-old(root),
|
||||
::view-transition-new(root) {
|
||||
animation-duration: 0.32s;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user