style: format static/player/controls.ts

This commit is contained in:
2026-06-21 02:04:35 +02:00
committed by Milas Holsting
parent 9c8c9c9d3c
commit 239dd501aa

View File

@@ -1,17 +1,17 @@
import { state } from "./state";
import { saveProgress } from "./progress";
import { state } from "./state";
import { safeLocalStorage } from "./storage";
export const formatTime = (seconds: number): string => {
if (!Number.isFinite(seconds) || seconds < 0) return "00:00";
if (!Number.isFinite(seconds) || seconds < 0) {
return "00:00";
}
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
};
/**
* Shows the controls overlay and schedules auto-hide after 2s if playing.
*/
/** Shows the controls overlay and schedules auto-hide after 2s if playing. */
export const showControls = (): void => {
state.elements.container.classList.add("show-controls");
window.clearTimeout(state.timers.playerControlsTimeout);
@@ -24,7 +24,9 @@ export const showControls = (): void => {
// seek relative to current position
export const seekBy = (delta: number): void => {
if (state.elements.video.duration <= 0) return;
if (state.elements.video.duration <= 0) {
return;
}
state.elements.video.currentTime = Math.max(
0,
Math.min(state.elements.video.duration, state.elements.video.currentTime + delta),
@@ -59,7 +61,9 @@ export const toggleMute = (): void => {
export const setVolume = (value: number): void => {
state.elements.video.volume = Math.max(0, Math.min(1, value));
state.elements.video.muted = value === 0;
if (value > 0) state.playback.lastKnownVolume = value;
if (value > 0) {
state.playback.lastKnownVolume = value;
}
};
export const toggleFullscreen = (): void => {
@@ -78,40 +82,54 @@ const syncVolumeUI = (): void => {
volumeRange.value = String(value);
volumeRange.style.setProperty("--volume-percent", `${value}%`);
}
if (volumeUnderline) volumeUnderline.style.height = `${value}%`;
if (volumeUnderline) {
volumeUnderline.style.height = `${value}%`;
}
updateMuteIcons(state.elements.video.muted || state.elements.video.volume === 0);
};
const VOLUME_STORAGE_KEY = "player-volume";
const parseStoredVolume = (raw: string | null): number | null => {
if (!raw) return null;
if (!raw) {
return null;
}
const v = Number.parseFloat(raw);
if (!Number.isFinite(v)) return null;
if (v < 0 || v > 1) return null;
if (!Number.isFinite(v)) {
return null;
}
if (v < 0 || v > 1) {
return null;
}
return v;
};
const applyStoredVolume = (): void => {
const stored = parseStoredVolume(safeLocalStorage.getItem(VOLUME_STORAGE_KEY));
if (stored === null) return;
if (stored === null) {
return;
}
state.elements.video.volume = stored;
state.elements.video.muted = stored === 0;
if (stored > 0) state.playback.lastKnownVolume = stored;
if (stored > 0) {
state.playback.lastKnownVolume = stored;
}
};
let volumeSaveTimer: number | undefined;
const schedulePersistVolume = (): void => {
window.clearTimeout(volumeSaveTimer);
volumeSaveTimer = window.setTimeout(() => {
if (!Number.isFinite(state.elements.video.volume)) return;
if (!Number.isFinite(state.elements.video.volume)) {
return;
}
const clamped = Math.max(0, Math.min(1, state.elements.video.volume));
safeLocalStorage.setItem(VOLUME_STORAGE_KEY, clamped.toFixed(3));
}, 250);
};
interface Controls {
type Controls = {
playPause: HTMLButtonElement | null;
muteBtn: HTMLButtonElement | null;
volumePanel: HTMLElement | null;
@@ -127,12 +145,14 @@ interface Controls {
skipSegmentBtn: HTMLButtonElement | null;
subtitleText: HTMLElement | null;
autoplayBtn: HTMLInputElement | null;
}
};
let controlsCache: Controls | null = null;
const getControls = (): Controls => {
if (controlsCache) return controlsCache;
if (controlsCache) {
return controlsCache;
}
const c = state.elements.container;
controlsCache = {
playPause: c.querySelector("[data-play-pause]"),
@@ -166,10 +186,7 @@ const updateMuteIcons = (isMuted: boolean): void => {
iconMuted?.classList.toggle("hidden", !isMuted);
};
/**
* Binds click handlers to player control buttons.
* Sets up video event listeners for icon sync.
*/
/** Binds click handlers to player control buttons. Sets up video event listeners for icon sync. */
export const setupControls = (): void => {
applyStoredVolume();
@@ -209,8 +226,12 @@ export const setupControls = (): void => {
volumeRange?.addEventListener("pointerdown", () => volumePanel?.classList.add("is-dragging"));
window.addEventListener("pointerup", () => volumePanel?.classList.remove("is-dragging"));
backwardBtn?.addEventListener("click", () => seekBy(-10));
forwardBtn?.addEventListener("click", () => seekBy(10));
backwardBtn?.addEventListener("click", () => {
seekBy(-10);
});
forwardBtn?.addEventListener("click", () => {
seekBy(10);
});
fullscreenBtn?.addEventListener("click", () => {
toggleFullscreen();
@@ -219,16 +240,20 @@ export const setupControls = (): void => {
// skip intro/outro button
skipSegmentBtn?.addEventListener("click", () => {
if (!state.skip.activeSegment) return;
if (!state.skip.activeSegment) {
return;
}
state.elements.video.currentTime = state.skip.activeSegment.end + 0.01;
showControls();
});
// fullscreen change handler
document.addEventListener("fullscreenchange", () => {
state.ui.isFullscreen = !!document.fullscreenElement;
state.ui.isFullscreen = Boolean(document.fullscreenElement);
state.elements.container.classList.toggle("fullscreen", state.ui.isFullscreen);
if (state.ui.isFullscreen) showControls();
if (state.ui.isFullscreen) {
showControls();
}
});
// icon sync on state changes