simon/jacuzzi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace video player with a fully custom fake-fullscreen HUD

Browse Source 
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
2026-07-01 19:08:21 +00:00
parent 5d739bec12
commit 7207e36510
9 changed files with 1605 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

517
frontend/css/style.css
View File

@@ -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;
}
}

8
frontend/index.html
View File

@@ -142,12 +142,7 @@
<img class="icon-svg" src="https://cdn.jsdelivr.net/npm/heroicons@2.0.13/24/outline/chevron-down.svg" alt="Load More">
</button>
<div id="video-modal" class="modal">
<div class="modal-content">
<span class="close" onclick="closePlayer()">&times;</span>
<video id="player" controls autoplay playsinline webkit-playsinline></video>
</div>
</div>
<div id="custom-player" class="custom-player" aria-hidden="true"></div>
<button id="mode-toggle-btn" class="mode-toggle-btn" type="button" title="Switch to Reels view" aria-pressed="false">
<img class="icon-svg" id="mode-toggle-icon" src="https://cdn.jsdelivr.net/npm/heroicons@2.0.13/24/outline/device-phone-mobile.svg" alt="Switch to Reels view">
@@ -193,6 +188,7 @@
<script src="static/js/state.js"></script>
<script src="static/js/storage.js"></script>
<script src="static/js/customPlayer.js"></script>
<script src="static/js/player.js"></script>
<script src="static/js/favorites.js"></script>
<script src="static/js/videos.js"></script>

302
frontend/js/customPlayer.js Normal file
View File

@@ -0,0 +1,302 @@
window.App = window.App || {};
App.customPlayer = App.customPlayer || {};
// Shared building blocks for the custom video player HUD, reused by the
// standalone fullscreen player (player.js) and the reels feed (feed.js) so
// both present identical skip/format/gesture/PiP behavior.
(function() {
// -----------------------------------------------------------------
// Skip escalation: tapping skip-forward/back repeatedly ramps the skip
// duration up (5 -> 10 -> 20 -> 40 -> 60s), independently per direction,
// so mashing forward doesn't also ramp up backward. A tap lands as
// "rapid" (and escalates further) only if it arrives within
// RAPID_WINDOW_MS of the previous same-direction tap. After GRACE_MS of
// silence the level steps back down by one every DECAY_STEP_MS.
// -----------------------------------------------------------------
const LEVELS = [5, 10, 20, 40, 60];
const RAPID_WINDOW_MS = 1500;
const GRACE_MS = 2000;
const DECAY_STEP_MS = 1000;
App.customPlayer.createSkipEscalator = function() {
const dirs = {
back: { levelIndex: 0, lastTapAt: 0, decayTimer: null },
forward: { levelIndex: 0, lastTapAt: 0, decayTimer: null }
};
const clearDecay = (d) => {
if (d.decayTimer) {
clearTimeout(d.decayTimer);
d.decayTimer = null;
}
};
const scheduleDecay = (d) => {
clearDecay(d);
d.decayTimer = setTimeout(function tick() {
d.decayTimer = null;
if (d.levelIndex > 0) {
d.levelIndex -= 1;
d.decayTimer = setTimeout(tick, DECAY_STEP_MS);
}
}, GRACE_MS);
};
// Advances the state for a tap in `direction` and returns the number
// of seconds that tap should skip.
const trigger = function(direction) {
const d = dirs[direction];
if (!d) return LEVELS[0];
const now = Date.now();
if (now - d.lastTapAt <= RAPID_WINDOW_MS && d.levelIndex < LEVELS.length - 1) {
d.levelIndex += 1;
}
d.lastTapAt = now;
scheduleDecay(d);
return LEVELS[d.levelIndex];
};
const destroy = function() {
clearDecay(dirs.back);
clearDecay(dirs.forward);
};
return { trigger, destroy };
};
// Applies one skip tap to `video` using `escalator`, clamped to the
// media's bounds. Returns the number of seconds skipped (for HUD flash
// feedback), or 0 if the video has no usable duration yet.
App.customPlayer.skip = function(video, direction, escalator) {
if (!video) return 0;
const amount = escalator.trigger(direction);
const delta = direction === 'forward' ? amount : -amount;
let target = video.currentTime + delta;
if (isFinite(video.duration) && video.duration > 0) {
target = Math.min(target, Math.max(0, video.duration - 0.1));
}
video.currentTime = Math.max(0, target);
return amount;
};
// -----------------------------------------------------------------
// Format switching: builds a labeled, ranked list of a video's playable
// formats (quality/codec/container variants) for a picker menu. Reuses
// App.videos.rankFormats (same ranking as automatic selection) with no
// preferred-height ceiling, since a manual pick overrides that entirely.
// -----------------------------------------------------------------
App.customPlayer.formatLabel = function(fmt) {
if (!fmt) return 'Auto';
const parts = [];
const height = App.videos.coerceNumber(fmt.height);
const fps = App.videos.coerceNumber(fmt.fps);
if (height) parts.push(`${height}p${fps > 30 ? Math.round(fps) : ''}`);
const ext = (fmt.ext || fmt.video_ext || '').toString();
if (ext) parts.push(ext);
if (!parts.length) {
const vcodec = (fmt.vcodec || '').toString();
parts.push(vcodec && vcodec !== 'none' ? vcodec : 'Auto');
}
return parts.join(' ');
};
// Returns [] when there's nothing to pick from (no formats, or only one
// usable variant) so callers know to hide the format-switch button.
App.customPlayer.buildFormatOptions = function(video) {
const meta = video && (video.meta || video);
if (!meta || !Array.isArray(meta.formats) || meta.formats.length < 2) return [];
const ranked = App.videos.rankFormats(meta.formats, null);
if (ranked.length < 2) return [];
return ranked.map((fmt) => ({ fmt, label: App.customPlayer.formatLabel(fmt) }));
};
// Wires a format-switch button + its dropdown menu against `videoData`,
// calling onSelect(fmt) when the user picks one. Hides the button when
// there's nothing to pick from. Shared by the standalone player and the
// reels feed so both present an identical menu. Returns a destroy() fn.
App.customPlayer.bindFormatMenu = function(btn, menu, videoData, onSelect) {
if (!btn || !menu) return function destroy() {};
const options = App.customPlayer.buildFormatOptions(videoData);
if (!options.length) {
btn.hidden = true;
menu.hidden = true;
menu.innerHTML = '';
return function destroy() {};
}
btn.hidden = false;
menu.hidden = true;
menu.innerHTML = options.map((opt, i) =>
`<button class="cp-format-option" type="button" data-index="${i}">${opt.label}</button>`
).join('');
const cleanups = [];
menu.querySelectorAll('.cp-format-option').forEach((optBtn) => {
const onClick = (event) => {
event.stopPropagation();
const idx = parseInt(optBtn.dataset.index, 10);
const opt = options[idx];
menu.hidden = true;
menu.querySelectorAll('.cp-format-option').forEach((b) => b.classList.remove('is-active'));
optBtn.classList.add('is-active');
if (opt) onSelect(opt.fmt);
};
optBtn.addEventListener('click', onClick);
cleanups.push(() => optBtn.removeEventListener('click', onClick));
});
const onBtnClick = (event) => {
event.stopPropagation();
menu.hidden = !menu.hidden;
};
btn.addEventListener('click', onBtnClick);
cleanups.push(() => btn.removeEventListener('click', onBtnClick));
return function destroy() {
cleanups.forEach((fn) => fn());
};
};
// -----------------------------------------------------------------
// Picture-in-Picture: a manual toggle plus best-effort auto-PiP when the
// tab/app is backgrounded while a video is playing (Safari does this
// natively for inline video; Chrome/Android need an explicit call).
// -----------------------------------------------------------------
App.customPlayer.supportsPiP = function() {
return !!(document.pictureInPictureEnabled);
};
App.customPlayer.togglePiP = async function(video) {
if (!video || !document.pictureInPictureEnabled || video.disablePictureInPicture) return false;
try {
if (document.pictureInPictureElement === video) {
await document.exitPictureInPicture();
} else {
await video.requestPictureInPicture();
}
return true;
} catch (err) {
return false;
}
};
App.customPlayer.bindAutoPiP = function(video) {
if (!video) return function destroy() {};
const trigger = () => {
if (document.visibilityState !== 'hidden') return;
if (!document.pictureInPictureEnabled || video.disablePictureInPicture) return;
if (document.pictureInPictureElement) return;
if (video.paused || video.ended) return;
video.requestPictureInPicture().catch(() => {});
};
document.addEventListener('visibilitychange', trigger);
window.addEventListener('pagehide', trigger);
return function destroy() {
document.removeEventListener('visibilitychange', trigger);
window.removeEventListener('pagehide', trigger);
};
};
// -----------------------------------------------------------------
// Unified pointer-gesture recognizer for the video surface: a single
// pointer stream is classified into exactly one of tap / double-tap /
// volume-drag (right column) / dismiss-drag (top strip), so the gestures
// never fight each other over the same touch.
// -----------------------------------------------------------------
App.customPlayer.attachGestures = function(surfaceEl, handlers) {
handlers = handlers || {};
const TAP_MAX_MOVE = 10;
const DOUBLE_TAP_MS = 300;
const DISMISS_ZONE_FRACTION = 0.2; // top strip that owns swipe-to-dismiss
const VOLUME_ZONE_START = 0.66; // right column that owns volume swipe
const SKIP_ZONE_LEFT_END = 0.34;
const SKIP_ZONE_RIGHT_START = 0.66;
let pointerId = null;
let startX = 0, startY = 0, lastY = 0;
let moved = false;
let mode = null; // 'dismiss-candidate' | 'dismiss' | 'volume-candidate' | 'volume' | 'ignore'
let volumeStartValue = 0;
let lastTapTime = 0;
let lastTapSide = null;
const rectOf = () => surfaceEl.getBoundingClientRect();
const ignoreSelector = handlers.ignoreSelector || 'button, input, a, .cp-format-menu';
const onPointerDown = (e) => {
if (pointerId != null || e.button != null && e.button !== 0) return;
if (e.target && e.target.closest && e.target.closest(ignoreSelector)) return;
pointerId = e.pointerId;
startX = e.clientX;
startY = lastY = e.clientY;
moved = false;
mode = null;
const rect = rectOf();
const relX = rect.width ? (e.clientX - rect.left) / rect.width : 0;
const relY = rect.height ? (e.clientY - rect.top) / rect.height : 0;
if (relY <= DISMISS_ZONE_FRACTION && handlers.onDismissDrag) {
mode = 'dismiss-candidate';
} else if (relX >= VOLUME_ZONE_START && handlers.onVolumeDrag) {
mode = 'volume-candidate';
volumeStartValue = handlers.onVolumeStart ? handlers.onVolumeStart() : 0;
}
try { surfaceEl.setPointerCapture(e.pointerId); } catch (err) { /* ignore */ }
};
const onPointerMove = (e) => {
if (e.pointerId !== pointerId) return;
const dx = e.clientX - startX;
const dy = e.clientY - startY;
if (!moved && Math.hypot(dx, dy) > TAP_MAX_MOVE) moved = true;
if (moved) {
if (mode === 'dismiss-candidate') mode = 'dismiss';
else if (mode === 'volume-candidate') mode = 'volume';
else if (mode === null) mode = 'ignore';
if (mode === 'dismiss') {
handlers.onDismissDrag(dy, rectOf());
} else if (mode === 'volume') {
const rect = rectOf();
const deltaRatio = rect.height ? (startY - e.clientY) / rect.height : 0;
handlers.onVolumeDrag(Math.min(1, Math.max(0, volumeStartValue + deltaRatio)));
}
}
lastY = e.clientY;
};
const endGesture = (e) => {
if (e.pointerId !== pointerId) return;
try { surfaceEl.releasePointerCapture(e.pointerId); } catch (err) { /* ignore */ }
if (moved) {
if (mode === 'dismiss' && handlers.onDismissEnd) handlers.onDismissEnd(lastY - startY);
else if (mode === 'volume' && handlers.onVolumeEnd) handlers.onVolumeEnd();
} else {
if (handlers.onSingleTap) handlers.onSingleTap();
const rect = rectOf();
const relX = rect.width ? (startX - rect.left) / rect.width : 0.5;
const side = relX <= SKIP_ZONE_LEFT_END ? 'left' : (relX >= SKIP_ZONE_RIGHT_START ? 'right' : 'center');
const now = Date.now();
if (side !== 'center' && lastTapSide === side && (now - lastTapTime) <= DOUBLE_TAP_MS) {
lastTapTime = 0;
lastTapSide = null;
if (side === 'left' && handlers.onDoubleTapLeft) handlers.onDoubleTapLeft();
if (side === 'right' && handlers.onDoubleTapRight) handlers.onDoubleTapRight();
} else {
lastTapTime = now;
lastTapSide = side;
}
}
pointerId = null;
mode = null;
};
surfaceEl.addEventListener('pointerdown', onPointerDown);
surfaceEl.addEventListener('pointermove', onPointerMove);
surfaceEl.addEventListener('pointerup', endGesture);
surfaceEl.addEventListener('pointercancel', endGesture);
return function destroy() {
surfaceEl.removeEventListener('pointerdown', onPointerDown);
surfaceEl.removeEventListener('pointermove', onPointerMove);
surfaceEl.removeEventListener('pointerup', endGesture);
surfaceEl.removeEventListener('pointercancel', endGesture);
};
};
})();

108
frontend/js/feed.js
View File

@@ -233,6 +233,77 @@ App.feed = App.feed || {};
timeline.addEventListener('pointercancel', stopScrubbing);
};
const flashFeed = function(slide, text) {
const flashEl = slide.querySelector('.feed-flash');
if (!flashEl) return;
flashEl.textContent = text;
flashEl.classList.remove('is-visible');
void flashEl.offsetWidth;
flashEl.classList.add('is-visible');
};
// Wires the controls shared with the standalone fullscreen player (skip
// escalation + double-tap zones, format switching, PiP) onto a reels
// slide, reusing the same App.customPlayer logic so both surfaces behave
// identically. Feed's own timeline/favorite/title and scroll-snap
// slide-to-slide navigation are untouched (see bindTimeline above and
// setActive/onScroll below).
const bindSharedControls = function(slide, video, videoData) {
const cleanups = [];
const escalator = App.customPlayer.createSkipEscalator();
cleanups.push(() => escalator.destroy());
const doSkip = (direction) => {
const amount = App.customPlayer.skip(video, direction, escalator);
flashFeed(slide, `${direction === 'forward' ? '+' : '-'}${amount}s`);
wakeHud();
};
const pipBtn = slide.querySelector('.feed-pip-btn');
if (pipBtn) {
pipBtn.hidden = !App.customPlayer.supportsPiP();
const onClick = async (event) => {
event.stopPropagation();
await App.customPlayer.togglePiP(video);
};
pipBtn.addEventListener('click', onClick);
cleanups.push(() => pipBtn.removeEventListener('click', onClick));
}
cleanups.push(App.customPlayer.bindAutoPiP(video));
const formatBtn = slide.querySelector('.feed-format-btn');
const formatMenu = slide.querySelector('.feed-format-menu');
cleanups.push(App.customPlayer.bindFormatMenu(formatBtn, formatMenu, videoData, (fmt) => {
slide._formatOverride = fmt;
const t = video.currentTime;
if (isFinite(t) && t > 0) resumeTimes.set(videoData.id, t);
// Tear down the current source (mirrors destroySlidePlayback's
// hls/video reset) before reloading with the new format -- this
// is a live in-place reload, not a fresh never-loaded slide, so
// the old Hls.js instance must be destroyed or it keeps running
// (fetching segments, attached to the same <video>) forever.
if (video._hlsPlayer) {
video._hlsPlayer.destroy();
video._hlsPlayer = null;
}
video._tearingDown = true;
video.pause();
video.removeAttribute('src');
video.load();
slide.classList.remove('is-loaded');
loadSlideSource(slide, videoData, true);
}));
cleanups.push(App.customPlayer.attachGestures(slide, {
onSingleTap: wakeHud,
onDoubleTapLeft: () => doSkip('back'),
onDoubleTapRight: () => doSkip('forward'),
ignoreSelector: 'button, input, a, .cp-format-menu, .feed-timeline'
}));
slide._sharedControlCleanups = cleanups;
};
const loadSlideSource = function(slide, videoData, autoplay) {
const video = slide.querySelector('.feed-video');
if (!video) return;
@@ -246,8 +317,10 @@ App.feed = App.feed || {};
}
slide.classList.add('is-loaded');
const resolved = App.videos.resolveStreamSource(videoData);
if (!resolved.url) {
const resolved = slide._formatOverride
? App.videos.resolveSourceForFormat(videoData, slide._formatOverride)
: App.videos.resolveStreamSource(videoData);
if (!resolved || !resolved.url) {
// No playable source -- treat exactly like a load failure so the
// clip is dropped from the queue and the next one takes its place.
markSlideFailed(slide);
@@ -332,6 +405,12 @@ App.feed = App.feed || {};
<video class="feed-video" muted playsinline webkit-playsinline preload="none"></video>
${liveBadge}
${favKey ? `<button class="favorite-btn feed-fav-btn" type="button" data-fav-key="${favKey}"></button>` : ''}
<button class="cp-pip-btn feed-pip-btn" type="button" aria-label="Picture in picture" hidden>
<img class="icon-svg" src="https://cdn.jsdelivr.net/npm/heroicons@2.0.13/24/outline/arrow-top-right-on-square.svg" alt="">
</button>
<button class="cp-format-btn feed-format-btn" type="button" aria-label="Quality" hidden>HD</button>
<div class="cp-format-menu feed-format-menu" hidden></div>
<div class="cp-flash feed-flash" aria-hidden="true"></div>
<div class="feed-info">
<h4 class="feed-title"><span class="feed-title-text">${v.title || ''}</span></h4>
${uploaderText ? `<p class="feed-uploader">${uploaderText}</p>` : ''}
@@ -347,6 +426,7 @@ App.feed = App.feed || {};
App.videos.attachNoReferrerRetry(poster);
const slideVideo = slide.querySelector('.feed-video');
bindTimeline(slide, slideVideo);
bindSharedControls(slide, slideVideo, v);
// A media error (bad/expired source, network failure, unsupported codec)
// means this clip can't play -- drop it from the queue. Errors fired by
@@ -388,10 +468,23 @@ App.feed = App.feed || {};
return slide;
};
// Tears down everything a slide holds -- playback (video/hls) plus the
// shared skip/format/PiP/gesture bindings from bindSharedControls -- but
// does not remove it from the DOM or from slidesByIndex (callers differ
// on that: removeSlide always does, reset() removes the whole tree at
// once).
const teardownSlide = function(slide) {
destroySlidePlayback(slide);
if (Array.isArray(slide._sharedControlCleanups)) {
slide._sharedControlCleanups.forEach((fn) => { try { fn(); } catch (err) { /* ignore */ } });
slide._sharedControlCleanups = null;
}
};
const removeSlide = function(index) {
const slide = slidesByIndex.get(index);
if (!slide) return;
destroySlidePlayback(slide);
teardownSlide(slide);
slide.remove();
slidesByIndex.delete(index);
};
@@ -628,7 +721,7 @@ App.feed = App.feed || {};
App.feed.reset = function() {
slidesByIndex.forEach((slide) => {
destroySlidePlayback(slide);
teardownSlide(slide);
slide.remove();
});
slidesByIndex.clear();
@@ -653,7 +746,12 @@ App.feed = App.feed || {};
state.feedOpen = true;
if (App.player && typeof App.player.close === 'function') {
App.player.close();
// fromPopState: true suppresses the player's own history.back()
// -- this is an incidental "make sure it's closed" call when
// switching to Reels view, not the user pressing the player's
// close button, so it must not silently consume a back-button
// entry out from under real browser navigation.
App.player.close({ fromPopState: true });
}
container.classList.add('open');

946
frontend/js/player.js
View File

File diff suppressed because it is too large Load Diff

4
frontend/js/state.js
View File

@@ -10,10 +10,6 @@ App.state = {
hlsPlayer: null,
currentLoadController: null,
errorToastTimer: null,
playerMode: 'modal',
playerHome: null,
onFullscreenChange: null,
onWebkitEndFullscreen: null,
loadedVideos: [],
feedOpen: false,
feedMuted: true,

1
frontend/js/ui.js
View File

@@ -612,7 +612,6 @@ App.ui = App.ui || {};
App.ui.bindGlobalHandlers = function() {
window.toggleDrawer = App.ui.toggleDrawer;
window.closeDrawers = App.ui.closeDrawers;
window.closePlayer = App.player.close;
window.handleSearch = App.videos.handleSearch;
const modeToggleBtn = document.getElementById('mode-toggle-btn');

28
frontend/js/version.js
View File

@@ -49,15 +49,16 @@ App.version = App.version || {};
return changed;
}
// A reload is "safe" when the user isn't mid-playback: no open video modal,
// no active reels feed, and no playing <video>. App state survives a reload
// because it is restored from localStorage on boot.
// A reload is "safe" when the user isn't mid-playback: no open custom
// player, no active reels feed, and no playing <video>. App state survives
// a reload because it is restored from localStorage on boot.
function isSafeToReload() {
if (App.state && App.state.feedOpen) return false;
const modal = document.getElementById('video-modal');
if (modal && modal.style.display && modal.style.display !== 'none') return false;
const player = document.getElementById('player');
if (player && !player.paused && !player.ended) return false;
const player = document.getElementById('custom-player');
if (player && player.classList.contains('open')) {
const video = player.querySelector('.cp-video');
if (video && !video.paused && !video.ended) return false;
}
return true;
}
@@ -128,11 +129,12 @@ App.version = App.version || {};
check();
}
});
// Re-attempt a deferred reload whenever a video finishes/pauses.
const player = document.getElementById('player');
if (player) {
player.addEventListener('pause', tryReloadWhenSafe);
player.addEventListener('ended', tryReloadWhenSafe);
}
// Re-attempt a deferred reload whenever a video finishes/pauses. The
// custom player's <video> is torn down and rebuilt on every open(), so
// bind on the capture phase at the document level instead of to a
// specific element (media events don't bubble, but capture still sees
// them on ancestors).
document.addEventListener('pause', tryReloadWhenSafe, true);
document.addEventListener('ended', tryReloadWhenSafe, true);
};
})();

17
frontend/js/videos.js
View File

@@ -1032,6 +1032,23 @@ App.videos = App.videos || {};
return sources.length ? sources[0] : { url: '', referer: '', userAgent: '', isLive: false, refererRequired: false };
};
// Resolves one specific format (as picked from a format-switcher menu, see
// App.customPlayer.buildFormatOptions) into a playable source, using the
// same header-merging rules as the automatic ranked path above.
App.videos.resolveSourceForFormat = function(videoOrUrl, fmt) {
if (!fmt || !fmt.url) return null;
const isLive = !!(videoOrUrl && typeof videoOrUrl === 'object' &&
(videoOrUrl.isLive || (videoOrUrl.meta && videoOrUrl.meta.isLive)));
const meta = (videoOrUrl && typeof videoOrUrl === 'object' && (videoOrUrl.meta || videoOrUrl)) || {};
const metaReferer = headerValue(meta.http_headers, 'Referer');
const metaUserAgent = headerValue(meta.http_headers, 'User-Agent');
const explicitReferer = headerValue(fmt.http_headers, 'Referer') || metaReferer;
const referer = explicitReferer || deriveReferer(fmt.url);
const userAgent = headerValue(fmt.http_headers, 'User-Agent') || metaUserAgent;
const headers = mergeHeaders(meta.http_headers, fmt.http_headers);
return { url: fmt.url, referer, userAgent, headers, isLive, refererRequired: !!explicitReferer };
};
// Background "direct playability" probe. The backend proxy exists to work
// around CORS, hotlink (403) protection, and TLS fingerprinting. When the
// browser can fetch a media URL cross-origin and actually read the response