style: format static/player/timeline.ts

This commit is contained in:
2026-06-21 02:04:56 +02:00
committed by Milas Holsting
parent cffaa143a9
commit bb83966491

View File

@@ -1,6 +1,7 @@
import type { TimelineBounds } from "./types"; import type { TimelineBounds } from "./types";
import { state } from "./state";
import { formatTime } from "./controls"; import { formatTime } from "./controls";
import { state } from "./state";
// cached to avoid recalc on every timeupdate // cached to avoid recalc on every timeupdate
let cachedBounds: TimelineBounds = { start: 0, end: 0, duration: 0 }; let cachedBounds: TimelineBounds = { start: 0, end: 0, duration: 0 };
@@ -14,14 +15,16 @@ const getDuration = (): number =>
const getSeekableEnd = (): number => { const getSeekableEnd = (): number => {
const ranges = state.elements.video.seekable; const ranges = state.elements.video.seekable;
if (!ranges || ranges.length <= 0) return 0; if (!ranges || ranges.length <= 0) {
return 0;
}
const end = ranges.end(ranges.length - 1); const end = ranges.end(ranges.length - 1);
return Number.isFinite(end) && end > 0 ? end : 0; return Number.isFinite(end) && end > 0 ? end : 0;
}; };
/** /**
* Computes timeline bounds from video. * Computes timeline bounds from video. Uses the full duration for VOD, and seekable ranges only
* Uses the full duration for VOD, and seekable ranges only when duration is unavailable. * when duration is unavailable.
*/ */
const timelineBounds = (): TimelineBounds => { const timelineBounds = (): TimelineBounds => {
const duration = getDuration(); const duration = getDuration();
@@ -37,11 +40,7 @@ const timelineBounds = (): TimelineBounds => {
Number.isFinite(seekableEnd) && Number.isFinite(seekableEnd) &&
seekableEnd > seekableStart seekableEnd > seekableStart
) { ) {
return { return { start: seekableStart, end: seekableEnd, duration: seekableEnd - seekableStart };
start: seekableStart,
end: seekableEnd,
duration: seekableEnd - seekableStart,
};
} }
} }
@@ -74,27 +73,33 @@ export const getBounds = (): TimelineBounds => {
// converts video.currentTime to timeline-relative time (0-based for UI display) // converts video.currentTime to timeline-relative time (0-based for UI display)
export const displayTimeFromAbsolute = (absoluteTime: number): number => { export const displayTimeFromAbsolute = (absoluteTime: number): number => {
const b = getBounds(); const b = getBounds();
if (!Number.isFinite(absoluteTime) || b.duration <= 0) return 0; if (!Number.isFinite(absoluteTime) || b.duration <= 0) {
return 0;
}
return Math.max(b.start, Math.min(b.end, absoluteTime)) - b.start; return Math.max(b.start, Math.min(b.end, absoluteTime)) - b.start;
}; };
// converts timeline-relative time back to video time // converts timeline-relative time back to video time
export const absoluteTimeFromDisplay = (displayTime: number): number => { export const absoluteTimeFromDisplay = (displayTime: number): number => {
const b = getBounds(); const b = getBounds();
if (!Number.isFinite(displayTime) || b.duration <= 0) return 0; if (!Number.isFinite(displayTime) || b.duration <= 0) {
return 0;
}
return b.start + Math.max(0, Math.min(b.duration, displayTime)); return b.start + Math.max(0, Math.min(b.duration, displayTime));
}; };
// converts 0-1 ratio to absolute video time // converts 0-1 ratio to absolute video time
export const absoluteTimeFromRatio = (ratio: number): number => { export const absoluteTimeFromRatio = (ratio: number): number => {
const b = getBounds(); const b = getBounds();
if (!Number.isFinite(ratio) || b.duration <= 0) return 0; if (!Number.isFinite(ratio) || b.duration <= 0) {
return 0;
}
return b.start + Math.max(0, Math.min(1, ratio)) * b.duration; return b.start + Math.max(0, Math.min(1, ratio)) * b.duration;
}; };
// finds the end of the buffered region containing currentTime // finds the end of the buffered region containing currentTime
const getBufferedEnd = (): number => { const getBufferedEnd = (): number => {
const currentTime = state.elements.video.currentTime; const { currentTime } = state.elements.video;
let end = 0; let end = 0;
// first: find buffered range that contains current time // first: find buffered range that contains current time
for (let i = 0; i < state.elements.video.buffered.length; i++) { for (let i = 0; i < state.elements.video.buffered.length; i++) {
@@ -118,8 +123,8 @@ const getBufferedEnd = (): number => {
}; };
/** /**
* Updates progress bar, scrubber position, and time displays. * Updates progress bar, scrubber position, and time displays. Called on timeupdate, progress
* Called on timeupdate, progress events, and seek. * events, and seek.
*/ */
export const updateTimeline = (currentTime: number): void => { export const updateTimeline = (currentTime: number): void => {
const { progress, scrubber, timeDisplay, durationDisplay, buffered } = state.elements; const { progress, scrubber, timeDisplay, durationDisplay, buffered } = state.elements;