fix(time-display): clean up time utilities and simplify components

- Remove deprecated formatDuration function from time utils
- Simplify HTML current time display by removing template generation
- Use direct shadow DOM text content updates for better performance
- Remove unused imports from React current time display component
- Enable show-remaining by default in HTML skin
- Ensure consistent negative time formatting across platforms

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

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

packages/html/html/src/components/media-current-time-display.ts

@@ -7,23 +7,11 @@ import {
   currentTimeDisplayStateDefinition,
   formatDisplayTime,
 } from '@vjs-10/media-store';
-import { namedNodeMapToObject } from '../utils/element-utils.js';
-
-export function getTemplateHTML(
-  this: typeof CurrentTimeDisplayBase,
-  _attrs: Record<string, string>,
-  _props: Record<string, any> = {},
-) {
-  return /* html */ `
-    <span></span>
-  `;
-}
 
 export class CurrentTimeDisplayBase extends HTMLElement {
   static shadowRootOptions = {
     mode: 'open' as ShadowRootMode,
   };
-  static getTemplateHTML = getTemplateHTML;
   static observedAttributes = ['show-remaining'];
 
   _state:
@@ -40,15 +28,6 @@ export class CurrentTimeDisplayBase extends HTMLElement {
       this.attachShadow(
         (this.constructor as typeof CurrentTimeDisplayBase).shadowRootOptions,
       );
-
-      const attrs = namedNodeMapToObject(this.attributes);
-      const html = (
-        this.constructor as typeof CurrentTimeDisplayBase
-      ).getTemplateHTML(attrs);
-      const shadowRoot = this.shadowRoot as unknown as ShadowRoot;
-      shadowRoot.setHTMLUnsafe
-        ? shadowRoot.setHTMLUnsafe(html)
-        : (shadowRoot.innerHTML = html);
     }
   }
 
@@ -78,21 +57,14 @@ export class CurrentTimeDisplayBase extends HTMLElement {
   _update(_props: any, state: any) {
     this._state = state;
 
-    // Update the span content with formatted time
-    const spanElement = this.shadowRoot?.querySelector('span') as HTMLElement;
-    if (spanElement) {
-      if (
-        this.showRemaining &&
-        state.duration != null &&
-        state.currentTime != null
-      ) {
-        // Show remaining time: duration - currentTime
-        const remainingTime = state.duration - state.currentTime;
-        spanElement.textContent = `-${formatDisplayTime(remainingTime)}`;
-      } else {
-        // Show current time (default behavior)
-        spanElement.textContent = formatDisplayTime(state.currentTime);
-      }
+    /** @TODO Should this live here or elsewhere? (CJP) */
+    const timeLabel =
+      this.showRemaining && state.duration != null && state.currentTime != null
+        ? formatDisplayTime(-(state.duration - state.currentTime))
+        : formatDisplayTime(state.currentTime);
+
+    if (this.shadowRoot) {
+      this.shadowRoot.textContent = timeLabel;
     }
   }
 }

packages/html/html/src/skins/media-skin-default.ts

@@ -115,7 +115,7 @@ export function getTemplateHTML() {
             <media-pause-icon class="icon pause-icon"></media-pause-icon>
           </media-play-button>
           <!-- Use the show-remaining attribute to show count down/remaining time -->
-          <media-current-time-display></media-current-time-display>
+          <media-current-time-display show-remaining></media-current-time-display>
           <media-time-range></media-time-range>
           <media-duration-display></media-duration-display>
           <media-mute-button class="button">