feat: add showRemaining functionality to current time display

Adds support for displaying remaining time (countdown) instead of elapsed time:

**HTML Component:**
- Add `show-remaining` attribute support with observedAttributes
- Implement attributeChangedCallback for reactive updates
- Display remaining time as `-{duration - currentTime}` when attribute present
- Maintain backward compatibility with default current time display

**React Component:**
- Add `showRemaining` prop with proper TypeScript typing
- Calculate and display remaining time in render function
- Destructure prop to avoid passing to DOM element
- Consistent `-{remaining}` format matching HTML component

**Usage:**
- HTML: `<media-current-time-display show-remaining></media-current-time-display>`
- React: `<CurrentTimeDisplay showRemaining />`

Both implementations include documentation comments and maintain
consistent behavior 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

@@ -3,7 +3,10 @@ import {
   StateHook,
   PropsHook,
 } from '../utils/component-factory';
-import { currentTimeDisplayStateDefinition, formatDisplayTime } from '@vjs-10/media-store';
+import {
+  currentTimeDisplayStateDefinition,
+  formatDisplayTime,
+} from '@vjs-10/media-store';
 import { namedNodeMapToObject } from '../utils/element-utils.js';
 
 export function getTemplateHTML(
@@ -21,6 +24,7 @@ export class CurrentTimeDisplayBase extends HTMLElement {
     mode: 'open' as ShadowRootMode,
   };
   static getTemplateHTML = getTemplateHTML;
+  static observedAttributes = ['show-remaining'];
 
   _state:
     | {
@@ -56,13 +60,39 @@ export class CurrentTimeDisplayBase extends HTMLElement {
     return this._state?.duration;
   }
 
+  get showRemaining() {
+    return this.hasAttribute('show-remaining');
+  }
+
+  attributeChangedCallback(
+    name: string,
+    _oldValue: string | null,
+    _newValue: string | null,
+  ) {
+    if (name === 'show-remaining' && this._state) {
+      // Re-render with current state when show-remaining attribute changes
+      this._update({}, this._state);
+    }
+  }
+
   _update(_props: any, state: any) {
     this._state = state;
-    
-    // Update the span content with formatted current time
+
+    // Update the span content with formatted time
     const spanElement = this.shadowRoot?.querySelector('span') as HTMLElement;
     if (spanElement) {
-      spanElement.textContent = formatDisplayTime(state.currentTime);
+      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);
+      }
     }
   }
 }
@@ -108,7 +138,10 @@ export const CurrentTimeDisplay = toConnectedHTMLComponent(
 // Register the custom element
 if (!globalThis.customElements.get('media-current-time-display')) {
   // @ts-ignore - Custom element constructor compatibility
-  globalThis.customElements.define('media-current-time-display', CurrentTimeDisplay);
+  globalThis.customElements.define(
+    'media-current-time-display',
+    CurrentTimeDisplay,
+  );
 }
 
-export default CurrentTimeDisplay;
+export default CurrentTimeDisplay;

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

@@ -114,6 +114,7 @@ export function getTemplateHTML() {
             <media-play-icon class="icon play-icon"></media-play-icon>
             <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-time-range></media-time-range>
           <media-duration-display></media-duration-display>