From 2ed219158ddf6f720ce1be8e328bec4603a7e847 Mon Sep 17 00:00:00 2001
From: Christian Pillsbury <cpillsbury@mux.com>
Date: Fri, 12 Sep 2025 10:31:04 -0700
Subject: [PATCH] feat(skins): integrate duration display into default skins
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add duration display components to both HTML and React default skins:
- HTML: Add media-duration-display element to control bar
- React: Add DurationDisplay component to MediaSkinDefault

Duration display appears between time range and mute button controls,
providing users with total media duration information in the default
player interface.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 packages/html/html/src/skins/media-skin-default.ts  | 2 ++
 packages/react/react/src/skins/MediaSkinDefault.tsx | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/packages/html/html/src/skins/media-skin-default.ts b/packages/html/html/src/skins/media-skin-default.ts
index 71e8fcd6..33254c15 100644
--- a/packages/html/html/src/skins/media-skin-default.ts
+++ b/packages/html/html/src/skins/media-skin-default.ts
@@ -6,6 +6,7 @@ import '../components/media-mute-button';
 import '../components/media-volume-range';
 import '../components/media-time-range';
 import '../components/media-fullscreen-button';
+import '../components/media-duration-display';
 import '@vjs-10/html-icons';
 
 export function getTemplateHTML() {
@@ -99,6 +100,7 @@ export function getTemplateHTML() {
             <media-pause-icon class="icon pause-icon"></media-pause-icon>
           </media-play-button>
           <media-time-range></media-time-range>
+          <media-duration-display></media-duration-display>
           <media-mute-button class="button">
             <media-volume-high-icon class="icon volume-high-icon"></media-volume-high-icon>
             <media-volume-low-icon class="icon volume-low-icon"></media-volume-low-icon>
diff --git a/packages/react/react/src/skins/MediaSkinDefault.tsx b/packages/react/react/src/skins/MediaSkinDefault.tsx
index 20a2a019..c354efea 100644
--- a/packages/react/react/src/skins/MediaSkinDefault.tsx
+++ b/packages/react/react/src/skins/MediaSkinDefault.tsx
@@ -5,6 +5,7 @@ import MuteButton from '../components/MuteButton';
 import { VolumeRange } from '../components/VolumeRange';
 import { TimeRange } from '../components/TimeRange';
 import { FullscreenButton } from '../components/FullscreenButton';
+import { DurationDisplay } from '../components/DurationDisplay';
 import { MediaContainer } from '../components/MediaContainer';
 import {
   VolumeHighIcon,
@@ -30,6 +31,7 @@ export const MediaSkinDefault: React.FC<{ children: React.ReactNode }> = ({
             <PauseIcon className={styles.PauseIcon}></PauseIcon>
           </PlayButton>
           <TimeRange className={styles.TimeRange} />
+          <DurationDisplay />
           {/* @ts-ignore */}
           <MuteButton className={`${styles.Button} ${styles.MediaMuteButton}`}>
             <VolumeHighIcon