* feat: make time range compound component
* fix: add root ctx, use skin styles
* fix: improve time range
* fix: move more logic to root component
* fix: renaming
* fix: dragging and add memo to context value
* fix: improve time range styles
- 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 React duration display component using VJS-10 hook-style patterns:
- Native React component using media store hooks
- Uses duration display state definition from media-store
- Minimal implementation rendering single span element
- Follows toConnectedComponent pattern for consistency
Component renders formatted duration (e.g., "4:32") without styling or
ARIA attributes, providing a clean foundation for duration display.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
The fullscreen enter/exit SVG icons were missing fill="currentColor"
attributes, causing them to render as black/invisible against dark
button backgrounds. This fix ensures proper theming support.
Also integrates fullscreen button into React default skin with
MediaContainer wrapper for complete out-of-the-box functionality.
- Fix fullscreen-enter.svg and fullscreen-exit.svg with currentColor fill
- Add MediaContainer wrapper to React MediaSkinDefault
- Add FullscreenButton to React control bar with proper icon states
- Add CSS for fullscreen button icon state management
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add MediaContainer component that provides fullscreen container registration
for React applications. Includes useMediaContainerRef hook for manual
element registration and MediaContainer wrapper component for convenience.
- Add MediaContainer.tsx with useMediaContainerRef hook and component
- Export MediaContainer and useMediaContainerRef from React package
- Clean up React demo to remove testing modifications
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implement React fullscreen button with native React patterns:
- useFullscreenButtonState hook for media store integration
- useFullscreenButtonProps hook for element attribute management
- renderFullscreenButton function for button rendering
- Connected component via toConnectedComponent factory
- Explicit enter/exit methods matching HTML implementation
- Proper accessibility and data attributes
Provides consistent fullscreen functionality across HTML and React
platforms using shared state definition from media-store.
🤖 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>
- Add timeRangeStateDefinition in core media-store package for currentTime/duration state
- Create HTML TimeRange component using handleEvent pattern and <input type="range">
- Create React TimeRange component using render function pattern
- Update HTML and React skins to include TimeRange in control bars with proper styling
- TimeRange handles seek requests and displays current playback position
- Follow established architectural patterns from PlayButton/MuteButton/VolumeRange components
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Refactor VolumeRange component to follow the same architectural pattern as
PlayButton and MuteButton components for consistency and maintainability.
Changes:
- Split component into useVolumeRangeState, useVolumeRangeProps, renderVolumeRange
- Use toConnectedComponent factory for consistent component creation
- Separate state management, props transformation, and rendering concerns
- Add proper TypeScript exports for all hooks and types
- Maintain existing functionality while improving code organization
This ensures architectural consistency across all React media components
and makes the codebase easier to maintain and extend.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add volume range slider component following established hook-style architecture.
Includes state synchronization improvements between volume and mute controls.
Core changes:
- Add volumeRangeStateDefinition with volume, muted, volumeLevel state
- Enhance audible state mediator with volume/mute coordination logic
- Export VolumeRange state definition from media-store
HTML component:
- Create media-volume-range web component using hook architecture
- Add native range input with accessibility attributes
- Integrate into default skin with styled slider
React component:
- Create VolumeRange component using useMediaSelector for state reactivity
- Fix state subscription to properly update slider thumb position
- Add CSS module styling matching HTML implementation
Bug fixes:
- Fix React VolumeRange thumb position updates with proper state subscription
- Improve mute button logic to use volumeLevel instead of muted state
- Add volume/mute state coordination (unmute sets volume, volume > 0 unmutes)
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Merge connected, connected-with-defaults, and media-elements Video components
- Create unified Video.tsx in main components directory alongside PlayButton/MuteButton
- Preserve all existing functionality: media store connection, custom components, defaults
- Maintain backwards compatibility with both Video and MediaElementVideo exports
- Remove duplicate component directories and reduce architectural complexity
- Simplify component structure while keeping TypeScript types and 'use client' directive
This consolidation reduces the Video component from 3 separate files across 3 directories
to a single, comprehensive module that's easier to understand and maintain.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Move PlayButton and MuteButton state definitions from React/HTML packages to core media-store
- Create component-state-definitions directory in @vjs-10/media-store
- Update exports in media-store to include new state definitions
- Update all React and HTML components to import from @vjs-10/media-store
- Remove duplicate state definition files from React and HTML packages
- Establish single source of truth for component state logic in core package
- Fix TypeScript declaration generation for proper module resolution
This migration follows the monorepo architecture where core packages provide
foundation logic and platform packages consume it, eliminating code duplication
and ensuring consistent behavior across implementations.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Update React PlayButton to import from state-definitions/play-button
- Update HTML PlayButton to import from state-definitions/play-button
- Maintain consistency with MuteButton refactor pattern
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
