* 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>
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>
Implement framework-agnostic duration display state definition following
VJS-10 patterns:
- Read-only component with duration transformation logic
- Formatted duration string and accessibility phrase generation
- Integrates with time formatting utilities for consistent display
This enables duration display components across HTML, React, and React Native
while maintaining shared business logic in the core package.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add time formatting functions ported from Media Chrome:
- formatTime() - formats seconds to HH:MM:SS or MM:SS
- formatAsTimePhrase() - creates accessibility descriptions
- isValidDuration() - validates duration values
- formatDuration() - combines formatting with fallback handling
These utilities provide the foundation for time-based display components
across HTML, React, and React Native platforms.
🤖 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>
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 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>
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 reusable state definition for fullscreen button components:
- FullscreenButtonState interface with fullscreen boolean
- Explicit request methods: requestEnterFullscreen, requestExitFullscreen
- Follows established pattern similar to play/pause and mute/unmute
- Platform-agnostic state logic shared between HTML and React
State definition provides consistent behavior across all platforms
while enabling explicit control over fullscreen enter/exit actions.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implement comprehensive fullscreen state management:
- Cross-browser fullscreen API support (webkit, moz, ms prefixes)
- Advanced shadow DOM traversal for nested web components
- Support for container-based fullscreen targeting
- Event-driven state updates with stateOwnersUpdateHandlers
- Fallback support for older Safari versions using composed node traversal
The implementation handles complex scenarios where fullscreen elements
are nested within shadow DOM boundaries, ensuring accurate state
detection in modern web component architectures.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add SVG assets for fullscreen functionality with Media Chrome-compatible paths:
- fullscreen-enter.svg: expand corners icon for entering fullscreen
- fullscreen-exit.svg: contract corners icon for exiting fullscreen
- Both icons use 26x24 viewBox matching Media Chrome design
🤖 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>
- Replace simple mediaEvents arrays with stateOwnersUpdateHandlers functions
- Add cleanup function returns to prevent memory leaks
- Update factory to use new event handler pattern with proper teardown
- Maintain backward compatibility with all existing functionality
- Enable support for multiple state owners (media, document, etc.)
- All existing controls (play/pause, volume, seek) tested and working
This refactor provides the foundation for cross-platform fullscreen support
and other multi-state-owner scenarios while following Media Chrome patterns.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Remove tsup configuration and dependencies
- Add rollup configuration matching other packages in monorepo
- Use 'rollup -c && tsc --project tsconfig.build.json' build pattern
- Add tsconfig.build.json for declaration-only builds
- Install required rollup plugins (@rollup/plugin-typescript, node-resolve, commonjs)
This eliminates the need for manual dist file modifications by using the same
proven build approach as HTML/React packages. TypeScript now automatically
generates all .d.ts files in proper directory structure.
Fixes the fundamental build system inconsistency where media-store used different
tooling than the rest of the monorepo.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Switch from pure tsup to hybrid tsup + tsc approach for declaration generation
- Update build script to use 'tsup && tsc --emitDeclarationOnly'
- Disable tsup's DTS generation to avoid conflicts with TypeScript composite projects
- Ensure all component state definitions have proper .d.ts files generated
- Fix build pipeline that was requiring manual dist file modifications
This resolves the fundamental build system issue where TypeScript declarations
weren't being properly generated, eliminating the need for manual dist file edits.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
