feat(skins): integrate duration display into default skins

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

@@ -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>

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