- 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>
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>
Adds consistent styling to duration and current time display components
across both HTML and React platforms:
- Semi-transparent dark background matching other UI components
- Monospace font for better time alignment
- Proper padding, borders, and text alignment
- Consistent color scheme with existing control bar elements
Both HTML and React skins now display time values with proper visual
styling that integrates seamlessly with the control bar design.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Renames the time formatting utility to be more generic since it's used for
both duration and currentTime display:
- Add formatDisplayTime as the primary function name
- Update all component references to use formatDisplayTime
- Keep formatDuration as deprecated alias for backward compatibility
- More semantic naming that reflects actual usage across components
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Adds current time display functionality across HTML and React platforms:
- Core state definition for current time with duration support
- HTML component with shadow DOM and span rendering
- React component following hook-style architecture
- Integration into both HTML and React default skins
- Proper exports and component registration
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Move time formatting responsibility from core component state definition
to platform-specific components for better separation of concerns:
- Core state definition now only provides raw duration value
- HTML component calls formatDuration() in _update() method
- React component calls formatDuration() in render function
- Maintains same functionality with cleaner architecture
This approach gives platforms more control over formatting and reduces
the responsibility of the core state abstraction.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
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>
Add HTML duration display component using VJS-10 hook-style architecture:
- Custom element with shadow DOM containing single span
- Uses duration display state definition from media-store
- Minimal implementation without styling or ARIA attributes
- Follows toConnectedHTMLComponent pattern for consistency
Component renders formatted duration (e.g., "4:32") in a simple span element.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Clean up development artifacts:
- Remove double-click event listener for fullscreen testing
- Remove temporary mediaStore reference and console logging
- Simplify handleEvent to only handle click for play/pause
- Restore play button to single responsibility (playback control only)
Play button now focuses solely on play/pause functionality while
fullscreen control is handled by dedicated fullscreen button.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Complete fullscreen button integration:
- Add fullscreen button to media-skin-default control bar as rightmost control
- Icon styling follows play/pause pattern with proper state-based visibility
- Container state owner lifecycle management in media-container component
- Component factory passes mediaStore reference to support advanced integrations
Control bar layout: Play → Time → Mute → Volume → Fullscreen
Icons change appropriately based on [data-fullscreen] attribute state.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implement HTML fullscreen button following established patterns:
- MediaFullscreenButton web component with hook-style architecture
- HTML icon components: MediaFullscreenEnterIcon, MediaFullscreenExitIcon
- State management via useFullscreenButtonState hook
- Props handling via useFullscreenButtonProps hook
- Explicit enter/exit fullscreen methods (no toggle)
- Proper accessibility with aria-label and data-tooltip
Components integrate seamlessly with existing HTML component architecture
and provide foundation for control bar integration.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add container state owner to StateOwners type for fullscreen support
- Rename mediaelementchangerequest to mediastateownerchangerequest
- Add containerstateownerchangerequest event handling
- Refactor updateStateOwners to support multiple state owners
- Update all usage locations across HTML and React packages
- Validated with Playwright testing on both demo applications
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
