From d0036fc7d68b4e50c5c7af863105900f20bee12c Mon Sep 17 00:00:00 2001
From: Christian Pillsbury <cpillsbury@mux.com>
Date: Fri, 12 Sep 2025 10:30:30 -0700
Subject: [PATCH] feat(media-store): add duration display component state
 definition
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implement framework-agnostic duration display state definition following
VJS-10 patterns:
- Read-only component with duration transformation logic
- Formatted duration string and accessibility phrase generation
- Integrates with time formatting utilities for consistent display

This enables duration display components across HTML, React, and React Native
while maintaining shared business logic in the core package.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../duration-display.ts                       | 76 +++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 packages/core/media-store/src/component-state-definitions/duration-display.ts

diff --git a/packages/core/media-store/src/component-state-definitions/duration-display.ts b/packages/core/media-store/src/component-state-definitions/duration-display.ts
new file mode 100644
index 00000000..7f714585
--- /dev/null
+++ b/packages/core/media-store/src/component-state-definitions/duration-display.ts
@@ -0,0 +1,76 @@
+/**
+ * @fileoverview Duration display component state definition
+ * 
+ * This module provides the component state definition for duration display
+ * components across HTML, React, and React Native platforms. The duration
+ * display is a read-only component that shows the total duration of media.
+ */
+
+import { formatDuration, formatAsTimePhrase, isValidDuration } from '../utils/time';
+
+/**
+ * State interface for duration display components
+ */
+export interface DurationDisplayState {
+  /** The raw duration value in seconds */
+  duration: number | undefined;
+  
+  /** Whether the duration is valid and should be displayed */
+  isValidDuration: boolean;
+  
+  /** Formatted duration string for display (e.g., "4:32" or "--:--") */
+  formattedDuration: string;
+  
+  /** Human-readable duration phrase for accessibility (e.g., "4 minutes, 32 seconds") */
+  durationPhrase: string;
+}
+
+/**
+ * Duration display component state definition following VJS-10 patterns.
+ * This provides a read-only display component that shows the total media duration.
+ */
+export const durationDisplayStateDefinition = {
+  /**
+   * Keys from the media store that this component depends on
+   */
+  keys: ['duration'] as const,
+
+  /**
+   * Transform raw media store state into duration display component state
+   * @param rawState - Raw state from media store
+   * @returns Transformed state for duration display component
+   */
+  stateTransform: (rawState: Record<string, any>): DurationDisplayState => {
+    const { duration } = rawState;
+    const isValid = isValidDuration(duration);
+    
+    return {
+      duration,
+      isValidDuration: isValid,
+      formattedDuration: formatDuration(duration),
+      durationPhrase: isValid ? formatAsTimePhrase(duration) : 'Duration unknown',
+    };
+  },
+
+  /**
+   * Duration display is read-only, so no request methods are needed
+   * @param _dispatch - Dispatch function (unused)
+   * @returns Empty object (no request methods)
+   */
+  createRequestMethods: (_dispatch: (action: { type: string; detail?: any }) => void) => ({}),
+} as const;
+
+/**
+ * Type helper to extract the state type from the duration display state definition
+ */
+export type DurationDisplayStateDefinition = typeof durationDisplayStateDefinition;
+
+/**
+ * Type helper to extract the transformed state type
+ */
+export type DurationDisplayComponentState = ReturnType<typeof durationDisplayStateDefinition.stateTransform>;
+
+/**
+ * Type helper to extract the request methods type (empty for read-only component)
+ */
+export type DurationDisplayRequestMethods = ReturnType<typeof durationDisplayStateDefinition.createRequestMethods>;
\ No newline at end of file