style: format static/player/timeline.ts
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user