@chenzy-design/core 0.3.1 → 0.4.1

package/dist/video-player.d.ts

@@ -0,0 +1,196 @@
+/**
+ * video-player — framework-agnostic state machine for a native <video> player,
+ * ported 1:1 from Semi Design's VideoPlayerFoundation + VideoProgressFoundation.
+ *
+ * ZERO framework deps. The render layer injects an adapter (getVideo /
+ * getVideoWrapper + notify callbacks + state setters) and forwards native media
+ * events (timeupdate / durationchange / progress / ended / error / canplay /
+ * waiting / stalled / leavepictureinpicture) and document keydown /
+ * fullscreenchange into the foundation methods. All time/volume clamping,
+ * play-rate/quality/route switching, the keyboard map (Space / ← / →) and the
+ * progress-bar drag→time math live here so any MVVM layer can reuse them.
+ *
+ * The foundation NEVER reads the DOM except through the adapter's getVideo /
+ * getVideoWrapper accessors (which return the live element or null), matching
+ * Semi. No document.* is touched here beyond fullscreen APIs invoked through
+ * the video wrapper the adapter hands us — event (un)registration is delegated
+ * to the render layer, so this module stays library-agnostic and SSR-safe.
+ *
+ * See specs Semi videoPlayer.foundation.js / progressFoundation.js.
+ */
+/** A localized string bundle the foundation needs for transient notifications. */
+export interface VideoPlayerLocale {
+    /** shown while the media is buffering (native `waiting`) */
+    loading: string;
+    /** shown when playback stalls (native `stalled`) */
+    stall: string;
+    /** mirror-on notification */
+    mirror: string;
+    /** mirror-off notification */
+    cancelMirror: string;
+    /** rate-change notification template, contains `${rate}` */
+    rateChange: string;
+    /** quality-change notification template, contains `${quality}` */
+    qualityChange: string;
+    /** route-change notification template, contains `${route}` */
+    routeChange: string;
+}
+/** A `{ label, value }` option for the playback-rate menu. */
+export interface PlaybackRateOption {
+    label: string;
+    value: number;
+}
+/** A `{ label, value }` option for the quality / route menus. */
+export interface LabeledOption {
+    label: string;
+    value: string;
+}
+/** A chapter marker on the progress track. */
+export interface VideoMarker {
+    /** start time in seconds */
+    start: number;
+    /** chapter title */
+    title?: string;
+}
+/**
+ * Adapter the render layer implements. Mirrors Semi's VideoPlayerAdapter:
+ * two element accessors, a set of `notify*` callbacks (fired outward to the
+ * host's `onXxx` props) and a set of `set*` state mutators (fired inward to
+ * the render layer's reactive state).
+ */
+export interface VideoPlayerAdapter {
+    getVideo: () => HTMLVideoElement | null;
+    getVideoWrapper: () => HTMLElement | null;
+    notifyPlay: () => void;
+    notifyPause: () => void;
+    notifyQualityChange: (quality: string) => void;
+    notifyRateChange: (rate: number) => void;
+    notifyRouteChange: (route: string) => void;
+    notifyVolumeChange: (volume: number) => void;
+    setBufferedValue: (bufferedValue: number) => void;
+    setCurrentTime: (currentTime: number) => void;
+    setIsError: (isError: boolean) => void;
+    setIsMirror: (isMirror: boolean) => void;
+    setIsPlaying: (isPlaying: boolean) => void;
+    setMuted: (muted: boolean) => void;
+    setNotificationContent: (content: string) => void;
+    setPlaybackRate: (rate: number) => void;
+    setQuality: (quality: string) => void;
+    setRoute: (route: string) => void;
+    setShowControls: (showControls: boolean) => void;
+    setShowNotification: (showNotification: boolean) => void;
+    setTotalTime: (totalTime: number) => void;
+    setVolume: (volume: number) => void;
+}
+/** Reactive state the foundation reads back through `getState`. */
+export interface VideoPlayerState {
+    isPlaying: boolean;
+    muted: boolean;
+    volume: number;
+    currentTime: number;
+    isMirror: boolean;
+}
+/** Host props the foundation reads through `getProps`. */
+export interface VideoPlayerProps {
+    volume: number;
+    muted: boolean;
+    seekTime: number;
+    controlsList: string[];
+}
+export interface VideoPlayerFoundationOptions {
+    adapter: VideoPlayerAdapter;
+    getState: () => VideoPlayerState;
+    getProps: () => VideoPlayerProps;
+    /** how long (ms) auto-hide controls waits after the last mouse move (Semi: 3000) */
+    controlsHideDelay?: number;
+    /** how long (ms) a transient notification stays up (Semi: 1000) */
+    notificationDuration?: number;
+}
+/** Default control items, in Semi's order. */
+export declare const DEFAULT_CONTROLS_LIST: string[];
+/** Semi's default 6-tier playback-rate menu (2.0 → 0.75). */
+export declare const DEFAULT_PLAYBACK_RATE_LIST: PlaybackRateOption[];
+export declare const VIDEO_PLAYER_NUMBERS: {
+    readonly DEFAULT_VOLUME: 100;
+    readonly DEFAULT_SEEK_TIME: 10;
+    readonly DEFAULT_VOLUME_STEP: 10;
+    readonly DEFAULT_PLAYBACK_RATE: 1;
+};
+/**
+ * Create the VideoPlayer foundation. Returns an object of methods the render
+ * layer wires to DOM events + UI controls. Pure w.r.t. framework; the only
+ * side effects are through the injected adapter, timers, and fullscreen /
+ * PiP browser APIs reached via the elements the adapter returns.
+ */
+export declare function createVideoPlayerFoundation(options: VideoPlayerFoundationOptions): {
+    init: () => void;
+    destroy: () => void;
+    clearTimer: () => void;
+    shouldShowControlItem: (name: string) => boolean;
+    checkFullScreen: () => boolean;
+    handleVideoPlay: () => void;
+    handleVideoPause: () => void;
+    handleCanPlay: () => void;
+    handleWaiting: (locale: VideoPlayerLocale) => void;
+    handleStalled: (locale: VideoPlayerLocale) => void;
+    handleProgress: () => void;
+    handleEnded: () => void;
+    handleTimeUpdate: () => void;
+    handleDurationChange: () => void;
+    handleError: () => void;
+    handleLeavePictureInPicture: () => void;
+    handleMouseMove: () => void;
+    handleMouseEnterWrapper: () => void;
+    handleMouseLeaveWrapper: () => void;
+    handlePlay: () => void;
+    handlePause: () => void;
+    handlePlayOrPause: () => void;
+    handleTimeChange: (value: number) => void;
+    handleVolumeChange: (value: number) => void;
+    handleVolumeSilent: () => void;
+    handleFullscreen: () => void;
+    handleFullscreenChange: () => void;
+    handleMirror: (locale: VideoPlayerLocale) => void;
+    handlePictureInPicture: () => void;
+    handleRateChange: (rate: PlaybackRateOption, locale: VideoPlayerLocale) => void;
+    handleQualityChange: (quality: LabeledOption, locale: VideoPlayerLocale) => void;
+    handleRouteChange: (route: LabeledOption, locale: VideoPlayerLocale) => void;
+    handleTemporaryNotification: (content: string) => void;
+    handleBodyKeyDown: (e: KeyboardEvent) => void;
+};
+export type VideoPlayerFoundation = ReturnType<typeof createVideoPlayerFoundation>;
+/** Clamp a pointer X to a [0,1] fraction of a slider rect, then to a value. */
+export declare function progressValueFromPointer(clientX: number, rect: {
+    left: number;
+    width: number;
+}, max: number): {
+    percentage: number;
+    value: number;
+    offset: number;
+};
+/**
+ * Width (as CSS length) of the `value` overlay within one marker segment.
+ * Returns `'0%'` before the segment, a clamped `calc(100% - 2px)` past it, and
+ * a percentage inside it — matching Semi's getValueWidth.
+ */
+export declare function segmentValueWidth(marker: {
+    start: number;
+    end: number;
+}, value: number): string;
+/**
+ * Build contiguous `[start, end)` marker segments across the whole duration
+ * from Semi-style chapter markers (each with only a `start`). The last segment
+ * runs to `totalTime`. When there are no markers a single full-width segment is
+ * returned so the progress bar always has exactly one track to render.
+ */
+export declare function buildMarkerSegments(markers: VideoMarker[], totalTime: number): Array<{
+    start: number;
+    end: number;
+    title?: string;
+}>;
+/**
+ * Format seconds as `MM:SS` / `H:MM:SS`（严格对齐 Semi utils.formatTime）：
+ * NaN/非法 → '00:00'；≥1h → `H:MM:SS`；否则 `MM:SS`（分钟也补零）。
+ */
+export declare function formatTimeDisplay(seconds: number): string;
+//# sourceMappingURL=video-player.d.ts.map

package/dist/video-player.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"video-player.d.ts","sourceRoot":"","sources":["../src/video-player.ts"],"names":[],"mappings":"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"}

package/dist/video-player.js

@@ -0,0 +1,461 @@
+/**
+ * video-player — framework-agnostic state machine for a native <video> player,
+ * ported 1:1 from Semi Design's VideoPlayerFoundation + VideoProgressFoundation.
+ *
+ * ZERO framework deps. The render layer injects an adapter (getVideo /
+ * getVideoWrapper + notify callbacks + state setters) and forwards native media
+ * events (timeupdate / durationchange / progress / ended / error / canplay /
+ * waiting / stalled / leavepictureinpicture) and document keydown /
+ * fullscreenchange into the foundation methods. All time/volume clamping,
+ * play-rate/quality/route switching, the keyboard map (Space / ← / →) and the
+ * progress-bar drag→time math live here so any MVVM layer can reuse them.
+ *
+ * The foundation NEVER reads the DOM except through the adapter's getVideo /
+ * getVideoWrapper accessors (which return the live element or null), matching
+ * Semi. No document.* is touched here beyond fullscreen APIs invoked through
+ * the video wrapper the adapter hands us — event (un)registration is delegated
+ * to the render layer, so this module stays library-agnostic and SSR-safe.
+ *
+ * See specs Semi videoPlayer.foundation.js / progressFoundation.js.
+ */
+/** Default control items, in Semi's order. */
+export const DEFAULT_CONTROLS_LIST = [
+    'play',
+    'next',
+    'time',
+    'volume',
+    'playbackRate',
+    'quality',
+    'route',
+    'mirror',
+    'fullscreen',
+    'pictureInPicture',
+];
+/** Semi's default 6-tier playback-rate menu (2.0 → 0.75). */
+export const DEFAULT_PLAYBACK_RATE_LIST = [
+    { label: '2.0x', value: 2 },
+    { label: '1.5x', value: 1.5 },
+    { label: '1.25x', value: 1.25 },
+    { label: '1.0x', value: 1 },
+    { label: '0.75x', value: 0.75 },
+];
+export const VIDEO_PLAYER_NUMBERS = {
+    DEFAULT_VOLUME: 100,
+    DEFAULT_SEEK_TIME: 10,
+    DEFAULT_VOLUME_STEP: 10,
+    DEFAULT_PLAYBACK_RATE: 1,
+};
+/**
+ * Create the VideoPlayer foundation. Returns an object of methods the render
+ * layer wires to DOM events + UI controls. Pure w.r.t. framework; the only
+ * side effects are through the injected adapter, timers, and fullscreen /
+ * PiP browser APIs reached via the elements the adapter returns.
+ */
+export function createVideoPlayerFoundation(options) {
+    const { adapter, getState, getProps } = options;
+    const controlsHideDelay = options.controlsHideDelay ?? 3000;
+    const notificationDuration = options.notificationDuration ?? 1000;
+    let controlsTimer = null;
+    let notificationTimer = null;
+    let mouseMoveThrottleTs = 0;
+    let scrollPosition = null;
+    function clearTimer() {
+        if (controlsTimer !== null) {
+            clearTimeout(controlsTimer);
+            controlsTimer = null;
+        }
+    }
+    function clearNotificationTimer() {
+        if (notificationTimer !== null) {
+            clearTimeout(notificationTimer);
+            notificationTimer = null;
+        }
+    }
+    // --- controls auto-hide (Semi throttles mousemove at 200ms) ---
+    function handleMouseMove() {
+        const now = Date.now();
+        if (now - mouseMoveThrottleTs < 200)
+            return;
+        mouseMoveThrottleTs = now;
+        adapter.setShowControls(true);
+        clearTimer();
+        controlsTimer = setTimeout(() => {
+            adapter.setShowControls(false);
+        }, controlsHideDelay);
+    }
+    function handleMouseEnterWrapper() {
+        adapter.setShowControls(true);
+    }
+    function handleMouseLeaveWrapper() {
+        if (getState().isPlaying) {
+            adapter.setShowControls(false);
+        }
+    }
+    // --- native media events → state ---
+    function handleVideoPlay() {
+        adapter.setIsPlaying(true);
+        adapter.notifyPlay();
+    }
+    function handleVideoPause() {
+        adapter.setIsPlaying(false);
+        adapter.notifyPause();
+    }
+    function handleCanPlay() {
+        adapter.setShowNotification(false);
+    }
+    function handleWaiting(locale) {
+        adapter.setNotificationContent(locale.loading);
+        adapter.setShowNotification(true);
+    }
+    function handleStalled(locale) {
+        adapter.setNotificationContent(locale.stall);
+        adapter.setShowNotification(true);
+    }
+    function handleProgress() {
+        const video = adapter.getVideo();
+        if (video && video.buffered.length > 0) {
+            const bufferedEnd = video.buffered.end(video.buffered.length - 1);
+            adapter.setBufferedValue(bufferedEnd);
+        }
+    }
+    function handleEnded() {
+        adapter.setIsPlaying(false);
+        adapter.setShowControls(true);
+    }
+    function handleTimeUpdate() {
+        const video = adapter.getVideo();
+        if (!video)
+            return;
+        adapter.setCurrentTime(video.currentTime);
+    }
+    function handleDurationChange() {
+        const video = adapter.getVideo();
+        if (!video)
+            return;
+        adapter.setTotalTime(video.duration);
+    }
+    function handleError() {
+        adapter.setIsError(true);
+    }
+    // --- play / pause ---
+    function handlePlay() {
+        const video = adapter.getVideo();
+        if (video) {
+            // native onPlay → handleVideoPlay updates isPlaying
+            void video.play();
+        }
+    }
+    function handlePause() {
+        const video = adapter.getVideo();
+        if (video) {
+            video.pause();
+        }
+    }
+    function handlePlayOrPause() {
+        const video = adapter.getVideo();
+        if (!video)
+            return;
+        if (video.paused)
+            handlePlay();
+        else
+            handlePause();
+    }
+    // --- time / seek (with NaN guard, matching Semi) ---
+    function handleTimeChange(value) {
+        const video = adapter.getVideo();
+        if (!video)
+            return;
+        if (!Number.isNaN(value)) {
+            video.currentTime = value;
+            adapter.setCurrentTime(value);
+        }
+    }
+    // --- volume (0–100 floor + mute derivation, matching Semi) ---
+    function handleVolumeChange(value) {
+        const video = adapter.getVideo();
+        if (!video)
+            return;
+        const volume = Math.floor(value > 0 ? value : 0);
+        video.volume = volume / 100;
+        adapter.setVolume(volume);
+        adapter.setMuted(volume === 0);
+        // NB: Semi's handleVolumeChange does not fire notifyVolumeChange; the
+        // onVolumeChange callback is wired by the render layer to the slider's
+        // own change event. Kept faithful — no notify here.
+    }
+    /** Toggle mute: restore previous volume when muted, else drop to 0. */
+    function handleVolumeSilent() {
+        const video = adapter.getVideo();
+        if (!video)
+            return;
+        const { volume, muted } = getState();
+        if (muted) {
+            video.volume = volume / 100;
+            adapter.setVolume(volume);
+            adapter.setMuted(false);
+        }
+        else {
+            video.volume = 0;
+            adapter.setMuted(true);
+        }
+    }
+    // --- fullscreen ---
+    function checkFullScreen() {
+        const videoWrapper = adapter.getVideoWrapper();
+        if (!videoWrapper)
+            return false;
+        const doc = document;
+        const el = videoWrapper;
+        return !!(doc.fullscreenElement === videoWrapper ||
+            doc.webkitFullscreenElement === videoWrapper ||
+            doc.mozFullScreenElement === videoWrapper ||
+            doc.msFullscreenElement === videoWrapper ||
+            el.webkitDisplayingFullscreen // iOS Safari
+        );
+    }
+    function handleFullscreen() {
+        const videoWrapper = adapter.getVideoWrapper();
+        if (!videoWrapper)
+            return;
+        if (checkFullScreen()) {
+            void document.exitFullscreen();
+        }
+        else {
+            scrollPosition = { x: window.scrollX, y: window.scrollY };
+            void videoWrapper.requestFullscreen();
+        }
+    }
+    function handleFullscreenChange() {
+        if (checkFullScreen()) {
+            document.addEventListener('mousemove', handleMouseMove);
+        }
+        else {
+            // Esc or button exit both land here; restore the pre-fullscreen scroll.
+            if (scrollPosition) {
+                const pos = scrollPosition;
+                setTimeout(() => {
+                    window.scrollTo(pos.x, pos.y);
+                    scrollPosition = null;
+                }, 0);
+            }
+            document.removeEventListener('mousemove', handleMouseMove);
+        }
+    }
+    // --- mirror ---
+    function handleMirror(locale) {
+        const { isMirror } = getState();
+        const next = !isMirror;
+        adapter.setIsMirror(next);
+        handleTemporaryNotification(next ? locale.mirror : locale.cancelMirror);
+    }
+    // --- picture-in-picture ---
+    function handlePictureInPicture() {
+        const video = adapter.getVideo();
+        if (!video)
+            return;
+        void video.requestPictureInPicture();
+    }
+    function handleLeavePictureInPicture() {
+        const video = adapter.getVideo();
+        if (!video)
+            return;
+        adapter.setIsPlaying(!video.paused);
+    }
+    // --- rate / quality / route ---
+    function handleRateChange(rate, locale) {
+        const video = adapter.getVideo();
+        if (!video)
+            return;
+        video.playbackRate = rate.value;
+        adapter.setPlaybackRate(rate.value);
+        adapter.notifyRateChange(rate.value);
+        handleTemporaryNotification(locale.rateChange.replace('${rate}', rate.label));
+    }
+    function handleQualityChange(quality, locale) {
+        adapter.setQuality(quality.value);
+        adapter.notifyQualityChange(quality.value);
+        handleTemporaryNotification(locale.qualityChange.replace('${quality}', quality.label));
+        restorePlayPosition();
+    }
+    function handleRouteChange(route, locale) {
+        adapter.setRoute(route.value);
+        adapter.notifyRouteChange(route.value);
+        handleTemporaryNotification(locale.routeChange.replace('${route}', route.label));
+        restorePlayPosition();
+    }
+    /** After a src swap, seek back to the previous position and resume if it was playing. */
+    function restorePlayPosition() {
+        const video = adapter.getVideo();
+        if (!video)
+            return;
+        const wasPlaying = !video.paused;
+        const currentTime = video.currentTime;
+        const handleLoaded = () => {
+            video.currentTime = currentTime;
+            if (wasPlaying)
+                void video.play();
+            video.removeEventListener('loadeddata', handleLoaded);
+        };
+        video.addEventListener('loadeddata', handleLoaded);
+    }
+    // --- transient notification ---
+    function handleTemporaryNotification(content) {
+        adapter.setNotificationContent(content);
+        adapter.setShowNotification(true);
+        clearNotificationTimer();
+        notificationTimer = setTimeout(() => {
+            adapter.setShowNotification(false);
+            notificationTimer = null;
+        }, notificationDuration);
+    }
+    // --- keyboard (Space play/pause, ←/→ seek by seekTime) ---
+    function handleBodyKeyDown(e) {
+        const videoWrapper = adapter.getVideoWrapper();
+        // Only respond when focus is inside the player, so we don't hijack keys
+        // from other interactive elements on the page (Semi behavior).
+        if (videoWrapper && !videoWrapper.contains(document.activeElement)) {
+            return;
+        }
+        const { currentTime } = getState();
+        const { seekTime } = getProps();
+        if (e.key === ' ') {
+            handlePlayOrPause();
+        }
+        else if (e.key === 'ArrowLeft') {
+            handleTimeChange(currentTime - seekTime);
+        }
+        else if (e.key === 'ArrowRight') {
+            handleTimeChange(currentTime + seekTime);
+        }
+    }
+    // --- lifecycle ---
+    function init() {
+        const { volume, muted } = getProps();
+        const video = adapter.getVideo();
+        if (video) {
+            adapter.setTotalTime(video.duration);
+            handleVolumeChange(muted ? 0 : volume);
+        }
+    }
+    function destroy() {
+        clearTimer();
+        clearNotificationTimer();
+        document.removeEventListener('mousemove', handleMouseMove);
+    }
+    function shouldShowControlItem(name) {
+        return getProps().controlsList.includes(name);
+    }
+    return {
+        init,
+        destroy,
+        clearTimer,
+        shouldShowControlItem,
+        checkFullScreen,
+        // media events
+        handleVideoPlay,
+        handleVideoPause,
+        handleCanPlay,
+        handleWaiting,
+        handleStalled,
+        handleProgress,
+        handleEnded,
+        handleTimeUpdate,
+        handleDurationChange,
+        handleError,
+        handleLeavePictureInPicture,
+        // controls
+        handleMouseMove,
+        handleMouseEnterWrapper,
+        handleMouseLeaveWrapper,
+        handlePlay,
+        handlePause,
+        handlePlayOrPause,
+        handleTimeChange,
+        handleVolumeChange,
+        handleVolumeSilent,
+        handleFullscreen,
+        handleFullscreenChange,
+        handleMirror,
+        handlePictureInPicture,
+        handleRateChange,
+        handleQualityChange,
+        handleRouteChange,
+        handleTemporaryNotification,
+        handleBodyKeyDown,
+    };
+}
+// ---------------------------------------------------------------------------
+// Progress-bar drag → time math (ported from VideoProgressFoundation).
+// Pure geometry helpers the render layer calls on pointer events; no DOM
+// beyond the ClientRect the caller passes in.
+// ---------------------------------------------------------------------------
+/** Clamp a pointer X to a [0,1] fraction of a slider rect, then to a value. */
+export function progressValueFromPointer(clientX, rect, max) {
+    const offset = clientX - rect.left;
+    const total = rect.width;
+    const percentage = total > 0 ? Math.min(Math.max(offset / total, 0), 1) : 0;
+    const value = percentage * max;
+    return { percentage, value, offset: offset - rect.width / 2 };
+}
+/**
+ * Width (as CSS length) of the `value` overlay within one marker segment.
+ * Returns `'0%'` before the segment, a clamped `calc(100% - 2px)` past it, and
+ * a percentage inside it — matching Semi's getValueWidth.
+ */
+export function segmentValueWidth(marker, value) {
+    const { start, end } = marker;
+    if (value > end)
+        return 'calc(100% - 2px)';
+    if (value < start)
+        return '0%';
+    if (end === start)
+        return '0%';
+    return `${((value - start) / (end - start)) * 100}%`;
+}
+/**
+ * Build contiguous `[start, end)` marker segments across the whole duration
+ * from Semi-style chapter markers (each with only a `start`). The last segment
+ * runs to `totalTime`. When there are no markers a single full-width segment is
+ * returned so the progress bar always has exactly one track to render.
+ */
+export function buildMarkerSegments(markers, totalTime) {
+    const total = Number.isFinite(totalTime) && totalTime > 0 ? totalTime : 0;
+    if (!markers || markers.length === 0) {
+        return [{ start: 0, end: total }];
+    }
+    const sorted = [...markers]
+        .filter((m) => Number.isFinite(m.start) && m.start >= 0)
+        .sort((a, b) => a.start - b.start);
+    if (sorted.length === 0)
+        return [{ start: 0, end: total }];
+    return sorted.map((m, i) => {
+        const next = sorted[i + 1];
+        const end = next ? next.start : total;
+        const seg = {
+            start: m.start,
+            end: Math.max(end, m.start),
+        };
+        if (m.title !== undefined)
+            seg.title = m.title;
+        return seg;
+    });
+}
+/**
+ * Format seconds as `MM:SS` / `H:MM:SS`（严格对齐 Semi utils.formatTime）：
+ * NaN/非法 → '00:00'；≥1h → `H:MM:SS`；否则 `MM:SS`（分钟也补零）。
+ */
+export function formatTimeDisplay(seconds) {
+    if (!Number.isFinite(seconds) || seconds < 0)
+        return '00:00';
+    const total = Math.floor(seconds);
+    const h = Math.floor(total / 3600);
+    const m = Math.floor((total % 3600) / 60);
+    const s = total % 60;
+    const ss = String(s).padStart(2, '0');
+    const mm = String(m).padStart(2, '0');
+    if (h > 0) {
+        return `${h}:${mm}:${ss}`;
+    }
+    return `${mm}:${ss}`;
+}
+//# sourceMappingURL=video-player.js.map