style: format static/player/timeline.ts
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
import type { TimelineBounds } from "./types";
|
||||
import { state } from "./state";
|
||||
|
||||
import { formatTime } from "./controls";
|
||||
import { state } from "./state";
|
||||
|
||||
// cached to avoid recalc on every timeupdate
|
||||
let cachedBounds: TimelineBounds = { start: 0, end: 0, duration: 0 };
|
||||
@@ -14,14 +15,16 @@ const getDuration = (): number =>
|
||||
|
||||
const getSeekableEnd = (): number => {
|
||||
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);
|
||||
return Number.isFinite(end) && end > 0 ? end : 0;
|
||||
};
|
||||
|
||||
/**
|
||||
* Computes timeline bounds from video.
|
||||
* Uses the full duration for VOD, and seekable ranges only when duration is unavailable.
|
||||
* Computes timeline bounds from video. Uses the full duration for VOD, and seekable ranges only
|
||||
* when duration is unavailable.
|
||||
*/
|
||||
const timelineBounds = (): TimelineBounds => {
|
||||
const duration = getDuration();
|
||||
@@ -37,11 +40,7 @@ const timelineBounds = (): TimelineBounds => {
|
||||
Number.isFinite(seekableEnd) &&
|
||||
seekableEnd > seekableStart
|
||||
) {
|
||||
return {
|
||||
start: seekableStart,
|
||||
end: seekableEnd,
|
||||
duration: seekableEnd - seekableStart,
|
||||
};
|
||||
return { 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)
|
||||
export const displayTimeFromAbsolute = (absoluteTime: number): number => {
|
||||
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;
|
||||
};
|
||||
|
||||
// converts timeline-relative time back to video time
|
||||
export const absoluteTimeFromDisplay = (displayTime: number): number => {
|
||||
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));
|
||||
};
|
||||
|
||||
// converts 0-1 ratio to absolute video time
|
||||
export const absoluteTimeFromRatio = (ratio: number): number => {
|
||||
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;
|
||||
};
|
||||
|
||||
// finds the end of the buffered region containing currentTime
|
||||
const getBufferedEnd = (): number => {
|
||||
const currentTime = state.elements.video.currentTime;
|
||||
const { currentTime } = state.elements.video;
|
||||
let end = 0;
|
||||
// first: find buffered range that contains current time
|
||||
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.
|
||||
* Called on timeupdate, progress events, and seek.
|
||||
* Updates progress bar, scrubber position, and time displays. Called on timeupdate, progress
|
||||
* events, and seek.
|
||||
*/
|
||||
export const updateTimeline = (currentTime: number): void => {
|
||||
const { progress, scrubber, timeDisplay, durationDisplay, buffered } = state.elements;
|
||||
|
||||
Reference in New Issue
Block a user