refactor: rename formatDuration to formatDisplayTime

Renames the time formatting utility to be more generic since it's used for
both duration and currentTime display:
- Add formatDisplayTime as the primary function name
- Update all component references to use formatDisplayTime
- Keep formatDuration as deprecated alias for backward compatibility
- More semantic naming that reflects actual usage across components

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

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);
 }

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);
     }
   }
 }

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 (
     <span {...props}>
-      {formatDuration(state.duration)}
+      {formatDisplayTime(state.duration)}
     </span>
   );
 };