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>
- 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>
Update HTML VolumeRange component to use the same generic handleEvent pattern
as PlayButton and MuteButton components for architectural consistency.
Changes:
- Replace specific handleInput() method with generic handleEvent(event: Event)
- Use event.type checking pattern consistent with other components
- Pass 'this' as EventListener instead of bound method reference
- Maintain exact same functionality while improving code consistency
This ensures all HTML media components follow the same event handling
pattern, making the codebase more maintainable and predictable.
🤖 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>
Add temporal state mediator with currentTime, duration, and seekable properties
ported from media-chrome architecture. Includes proper input validation,
media event bindings, and seek request handling.
- Add temporal.ts state mediator with time-based functionality
- Update StateMediator type to include temporal properties
- Integrate temporal module into default media store
- Export temporal module from package index
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Set React demo to use port 5173 (Vite's default)
- Set HTML demo to use port 5174 to avoid conflicts
- Enable strictPort: false to allow automatic fallback to next available port
- Allow simultaneous development of both React and HTML demos
- Maintain existing development workflow while preventing port conflicts
This enables developers to run `npm run dev:react` and `npm run dev:html`
concurrently without manual port management.
🤖 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>
- Create shared state definitions for MuteButton in both React and HTML packages
- Refactor React MuteButton to use centralized state definition
- Refactor HTML MuteButton to use centralized state definition
- Replace useState/useEffect pattern with useMemo for better performance
- Consolidate state logic for better maintainability across implementations
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
React changes:
- Add muteButtonStateDef with keys, stateTransform, and requestMethods
- Refactor useMuteButtonState to use shallowEqual optimization
- Migrate from useMediaDispatch to useMediaStore pattern
- Create request methods factory for consistent state management
- Improve type safety and performance with optimized state selection
HTML changes:
- Rename MediaMuteButton class to MuteButtonBase for consistency
- Restructure event handling logic to match PlayButton pattern
- Add TODO comment for React vs. W.C. data-* attribute discrepancies
- Update component factory usage to use renamed base class
This completes the migration to hook-style architecture that can be
shared between HTML and React implementations, matching the PlayButton pattern.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Improve code formatting with consistent indentation
- Organize video source options with clearer commenting
- Remove trailing whitespace
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add playButtonStateDef with keys, stateTransform, and requestMethods
- Refactor usePlayButtonState to use shallowEqual optimization
- Migrate from useMediaDispatch to useMediaStore pattern
- Create request methods factory for consistent state management
- Improve type safety and performance with optimized state selection
This continues the gradual migration to hook-style architecture that can be
shared between HTML and React implementations.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add shallowEqual function with array-specific optimizations to MediaProvider
- Export refEquality function for external use
- Export shallowEqual from package index for consumers
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Remove 'media' prefix from state mediator properties (mediaPaused -> paused, mediaMuted -> muted, etc.) and action types (mediaplayrequest -> playrequest) for cleaner, more consistent API across all platform implementations.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Create generic toConnectedHTMLComponent factory with hooks pattern
- Implement usePlayButtonState/Props/Events hooks for state, attributes, and event handling
- Implement useMuteButtonState/Props/Events hooks for mute functionality
- Replace old connected/ components with new hook-style architecture
- Fix button interactivity by using MediaPlayButton/MediaMuteButton base classes
- Maintain backward compatibility through connected-with-defaults/ registration
- Components now mirror React hooks architecture with separated concerns
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Extract toConnectedComponent into shared utility with full TypeScript generics
- Create src/utils/component-factory.tsx with generic types:
- StateHookFn, PropsHookFn, RenderFn for type safety
- Generic toConnectedComponent factory function
- ConnectedComponent type helper for inference
- Update PlayButton and MuteButton to use shared factory
- Remove duplicate toConnectedComponent implementations
- Add proper JSDoc documentation for the component factory pattern
- Fix TypeScript indexing issues with Record<string, any> typing
- Maintains full type safety while eliminating code duplication
This follows Adobe React Spectrum and Base UI architectural patterns for
maximum reusability and extensibility across components.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Refactor PlayButton and MuteButton to use standard boolean attribute behavior
- Boolean data attributes now follow HTML conventions:
- Present with empty string ("") when true
- Completely absent when false
- Revert CSS to clean selectors that work with boolean attribute presence/absence
- Fixes PlayButton icon display issue where data-paused="false" was still present
- Ensures semantic consistency with native HTML boolean attributes
- Improves CSS maintainability with simpler attribute selectors
Before: data-paused="true"|"false" (always present)
After: data-paused="" (present) or absent (not in DOM)
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Consolidate three PlayButton variants into single composable component
- Implement Adobe React Spectrum inspired hooks pattern:
- usePlayButtonState: manages paused state and play/pause actions
- usePlayButtonProps: handles accessibility and data attributes
- renderPlayButton: pure render function with semantic markup
- Add Base UI inspired component factory with render prop support
- Remove connected/, ui/, and connected-with-defaults/ PlayButton variants
- Update MediaSkinDefault to use consolidated PlayButton component
- Provide full TypeScript support and accessibility features
- Follow separation of concerns with testable, reusable hooks
This architecture enables component customization while preserving behavior
consistency and follows modern React design patterns.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Merge three separate MuteButton variants into single composable component
- Move from connected-with-defaults/MuteButton.tsx to components/MuteButton.tsx
- Remove connected/ and ui/ MuteButton variants to reduce code duplication
- Update MediaSkinDefault to use consolidated MuteButton component
- Implement composable pattern with hooks for state, props, and rendering
- Add temporary @ts-ignore for type compatibility during refactoring
- Add proper type predicate to filter for FacadeProp objects
- Use type assertion for setter calls to handle generic state objects
- Improve type safety by replacing 'any' types with proper interfaces
- Fix TS2345 error: "Argument of type 'number | boolean' is not assignable to parameter of type 'never'"
- Maintain runtime flexibility while preserving compile-time type checking
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Change from `export *` to explicit type/value exports in @vjs-10/media
- Resolves missing `createMediaStateOwner` export in React components
- Fixes TS2305 errors in React Video components that import from @vjs-10/media
- Ensures proper TypeScript declaration generation for downstream packages
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Resolves TypeScript TS4094 error "Property may not be private or protected"
in exported anonymous classes created by factory functions.
Changes:
- #mediaStore → _mediaStore (public with underscore convention)
- #mediaSlot → _mediaSlot (public with underscore convention)
- #handleMediaSlotChange → _handleMediaSlotChange (public with underscore)
The underscore prefix indicates internal/private usage by convention
while avoiding TypeScript restrictions on anonymous class exports.
Affected files:
- media-mute-button.ts: 5 field references updated
- media-play-button.ts: 5 field references updated
- media-container.ts: 10 field references updated
All HTML packages now build successfully without TS4094 errors.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Update TypeScript moduleResolution from "node" to "bundler" in base config
- Remove 5 @ts-ignore directives for context-protocol import resolution
- All HTML packages now import @open-wc/context-protocol without type errors
- Builds and type checking continue to work correctly
- Eliminates need for type suppression comments in critical components
Files affected:
- tsconfig.base.json: Updated module resolution strategy
- html-media-elements/src/media-provider.ts: Removed @ts-ignore
- html/src/media-provider.ts: Removed @ts-ignore
- html/src/media-container.ts: Removed @ts-ignore
- html/src/components/connected/media-play-button.ts: Removed @ts-ignore
- html/src/components/connected/media-mute-button.ts: Removed @ts-ignore
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add missing dependency @vjs-10/playback-engine to @vjs-10/media package
- Add missing dependency @vjs-10/media to @vjs-10/react package
- Fix @vjs-10/playback-engine exports to use explicit type/value exports
- Resolves "Module has no exported member 'IBasePlaybackEngine'" errors
- All packages now build successfully and pass typecheck
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Replace manually-coded React icon components with SVGR-generated ones from shared SVG assets.
This establishes a maintainable, single-source-of-truth system for icons across the monorepo.
## Key Changes
### ✨ SVGR Integration
- Add @svgr/cli with custom configuration for React component generation
- Generate components from packages/core/icons/assets/ SVG files
- Implement custom templates with generation warnings and JSDoc @generated tags
- Replace manual src/icons/ with auto-generated src/generated-icons/
### 🎨 Complete Styling Support
- Add fill="currentColor" to all SVG source files in core package
- Configure replaceAttrValues to transform currentColor → {color} in React components
- Restore full color prop functionality (fill={color} on path elements)
- Maintain backwards compatibility with existing IconProps interface
### 📚 Developer Experience
- Add comprehensive README.md with usage examples and development workflow
- Include clear "DO NOT EDIT" warnings in all generated files
- Add .gitignore to exclude generated files from version control
- Provide detailed generation instructions and architecture explanation
### 🏗️ Build System Integration
- Update package.json scripts: npm run generate creates React components
- Integrate generation into build pipeline (npm run build runs generate first)
- Add SVGR dependencies: @svgr/cli, plugins, and babel-plugin-add-jsx-attribute
- Maintain existing rollup + TypeScript build chain
## Technical Implementation
- **Source**: SVG files in packages/core/icons/assets/ (single source of truth)
- **Generator**: SVGR v8 with custom TypeScript React templates
- **Output**: Auto-generated components in src/generated-icons/ with full JSDoc
- **Styling**: fill={color} props + currentColor inheritance for dynamic theming
- **Types**: Preserved IconProps interface with SVGAttributes<SVGElement> + color prop
## Verification
✅ Playwright testing confirms icons render correctly with proper colors
✅ All 5 icons (Play, Pause, VolumeHigh, VolumeLow, VolumeOff) generate successfully
✅ Color prop functionality verified (fill attribute updates dynamically)
✅ Build system integration working across full monorepo
✅ Backwards compatibility maintained with existing components
This implementation provides automatic React component generation while maintaining
full feature parity with the original manually-coded icons.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
