diff --git a/packages/core/media-store/src/utils/time.ts b/packages/core/media-store/src/utils/time.ts index 086d01ff..ee059157 100644 --- a/packages/core/media-store/src/utils/time.ts +++ b/packages/core/media-store/src/utils/time.ts @@ -142,19 +142,30 @@ export function isValidDuration(duration: unknown): duration is number { } /** - * Formats a duration with fallback handling for invalid values - * @param duration - The duration to format in seconds - * @param guide - Optional guide duration for consistent formatting - * @param fallback - Fallback text when duration is invalid (default: "--:--") - * @returns Formatted duration string or fallback + * Formats a time value with fallback handling for invalid values + * @param time - The time value to format in seconds (duration, currentTime, etc.) + * @param guide - Optional guide time for consistent formatting + * @param fallback - Fallback text when time is invalid (default: "--:--") + * @returns Formatted time string or fallback + */ +export function formatDisplayTime( + time: unknown, + guide?: number, + fallback: string = '--:--' +): string { + if (!isValidDuration(time)) { + return fallback; + } + return formatTime(time, guide); +} + +/** + * @deprecated Use formatDisplayTime instead. Will be removed in a future version. */ export function formatDuration( duration: unknown, guide?: number, fallback: string = '--:--' ): string { - if (!isValidDuration(duration)) { - return fallback; - } - return formatTime(duration, guide); + return formatDisplayTime(duration, guide, fallback); } \ No newline at end of file diff --git a/packages/html/html/src/components/media-duration-display.ts b/packages/html/html/src/components/media-duration-display.ts index cc99b824..20401efc 100644 --- a/packages/html/html/src/components/media-duration-display.ts +++ b/packages/html/html/src/components/media-duration-display.ts @@ -3,7 +3,7 @@ import { StateHook, PropsHook, } from '../utils/component-factory'; -import { durationDisplayStateDefinition, formatDuration } from '@vjs-10/media-store'; +import { durationDisplayStateDefinition, formatDisplayTime } from '@vjs-10/media-store'; import { namedNodeMapToObject } from '../utils/element-utils.js'; export function getTemplateHTML( @@ -57,7 +57,7 @@ export class DurationDisplayBase extends HTMLElement { // Update the span content with formatted duration const spanElement = this.shadowRoot?.querySelector('span') as HTMLElement; if (spanElement) { - spanElement.textContent = formatDuration(state.duration); + spanElement.textContent = formatDisplayTime(state.duration); } } } diff --git a/packages/react/react/src/components/DurationDisplay.tsx b/packages/react/react/src/components/DurationDisplay.tsx index 082daf1b..c8bb3afd 100644 --- a/packages/react/react/src/components/DurationDisplay.tsx +++ b/packages/react/react/src/components/DurationDisplay.tsx @@ -5,7 +5,7 @@ import { } from '@vjs-10/react-media-store'; import * as React from 'react'; import { toConnectedComponent } from '../utils/component-factory'; -import { durationDisplayStateDefinition, formatDuration } from '@vjs-10/media-store'; +import { durationDisplayStateDefinition, formatDisplayTime } from '@vjs-10/media-store'; export const useDurationDisplayState = (_props: any) => { const mediaStore = useMediaStore(); @@ -45,7 +45,7 @@ export const renderDurationDisplay = ( ) => { return ( - {formatDuration(state.duration)} + {formatDisplayTime(state.duration)} ); };