Commit Graph
100 Commits
Author SHA1 Message Date
c9d6ccecdd docs(spf): seed feature registry, clusters reference, and document-feature skill (#1581)
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-21 12:07:33 -07:00
c112b6248b fix(spf): conventions, per-type specialization, config threading (#1537)
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-19 11:38:47 -07:00
8fa63c6567 feat(spf) discrete signals and behavior objects (#1508)
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-08 08:32:44 -07:00
0cfd3bb395 feat(spf): HLS engine composition walkthrough + doc-driven cleanups (#1512)
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-05 12:07:26 -07:00
Christian PillsburyandGitHub 69852ddeb0 docs/spf fundamental concepts (#1396)
Feedback from @decepulis treated as a fast follow/incremental improvement effort for expediency.
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-28 11:16:56 -07:00
b9349375cb fix(html): raise testTimeout to 15s for parallel-load reliability (#1448)
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-23 14:44:29 -07:00
1346d869ae feat(spf): architecture reactors (#1218)
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-08 13:38:24 -07:00
3fc6cbb9bc poc(spf): migrate reactors from WritableState to TC39 Signals (#1112)
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-30 13:24:39 -07:00
Christian PillsburyandGitHub f5ecc93554 fix(spf): call sourceBuffer.abort() on AbortError to reset MSE parser state (#1081) 2026-03-23 08:45:09 -07:00
Christian PillsburyandGitHub 04f81a26e1 fix(spf): implement preload IDL attribute on SpfMedia (#1069) 2026-03-23 07:30:20 -07:00
Christian PillsburyandGitHub 275aebdc8f chore(ci): add SPF to issue template package options (#1058) 2026-03-20 09:56:01 -07:00
Christian PillsburyandGitHub c782a0f0a1 docs(design): add SPF living design docs (#899) 2026-03-16 12:21:31 -07:00
Christian PillsburyandGitHub 5bdbbec8a0 feat: add DashVideo media element (html, react) with sandbox support (#940) 2026-03-16 12:21:19 -07:00
801be291c3 fix(spf): propagate byteRange when building segment load tasks (#904)
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-11 18:06:01 -07:00
Christian PillsburyandGitHub 6fcb8eb989 feat(spf): stream segment fetches via ReadableStream body (#890) 2026-03-11 12:00:04 -07:00
Christian PillsburyandGitHub 4bd287515f feat(spf): basic ManagedMediaSource support for Safari (#843) 2026-03-10 07:56:54 -07:00
Christian PillsburyandGitHub f50d509749 fix(spf): fix async teardown leaks and recreate engine on src change (#841) 2026-03-10 07:43:20 -07:00
Christian PillsburyandGitHub 54f71d62aa fix(spf): prefer MediaSource over ManagedMediaSource (#838) 2026-03-10 07:24:47 -07:00
Christian PillsburyandGitHub 71b5b415c5 fix(spf) subtitle change reactions (#835) 2026-03-10 07:12:29 -07:00
Christian PillsburyandGitHub 2b8b19bf31 build: force release please, please (#829) 2026-03-10 06:17:49 -07:00
Christian PillsburyandGitHub afe149f8de chore(sandbox): adding spf/simple-hls-video + filtering to only include CMAF/fmp4 sources (#802) 2026-03-09 20:19:42 -07:00
Christian PillsburyandGitHub e417ec3419 chore(sandbox): add hls-video to new sandbox setup (NOTE: hls-video H… (#798) 2026-03-09 19:04:06 -07:00
Christian PillsburyandGitHub c8a4a5990d build(spf): add spf to release please config (#796) 2026-03-09 18:05:32 -07:00
27a3993fb2 feat(spf): initial push of SPF (#784)
Co-authored-by: Claude Sonnet 4.5 (1M context) <noreply@anthropic.com>
Co-authored-by: Wesley Luyten <me@wesleyluyten.com>
2026-03-09 17:32:24 -07:00
Christian PillsburyandGitHub 1878a271ba feat(react): use SimpleVideo as default Video and rename HLS version to HlsVideo (#171) 2025-11-06 10:34:04 -08:00
Christian PillsburyandGitHub 7e467a41d3 docs: more minor issue cleanup (#169) 2025-11-05 14:48:22 -08:00
Christian PillsburyandGitHub bb7ca37d50 docs: cleanup issues with previous pass on readme and contributing (#168) 2025-11-05 14:41:39 -08:00
Christian PillsburyandGitHub 912e46c276 docs: readme and contributing docs updates (#167) 2025-11-05 13:27:07 -08:00
Christian PillsburyandGitHub a41cdba068 chore: discussion template naming convention (#166) 2025-11-05 10:22:45 -08:00
Christian PillsburyandGitHub d11afbeb09 chore: add templates for well defined issue and discussion types (#164) 2025-11-05 09:34:44 -08:00
Christian PillsburyandGitHub f28557359c fix(react, html): rename MediaProvider (and related) to VideoProvider (#159) 2025-11-04 07:34:10 -08:00
Christian PillsburyandGitHub 16cfde138d fix(react): update use client usage in react package modules for next.js use (#157) 2025-11-04 06:59:50 -08:00
b9032ca387 docs: initial component examples (#123)
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Darius Cepulis <dcepulis@mux.com>
2025-10-28 09:38:57 -05:00
Christian PillsburyandGitHub f6b5f804bf feat(react): adding simple video (#125) 2025-10-24 11:24:28 -07:00
92b82e94f9 feat(react): add Tailwind v4 compiled CSS for skins with vjs prefix (#114)
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Darius Cepulis <dcepulis@mux.com>
2025-10-22 16:05:31 -07:00
4448a5b252 docs: readmes v0 (#72)
Co-authored-by: Claude <noreply@anthropic.com>
2025-10-21 14:02:10 -07:00
78478503c8 docs: architecture docs v2 (#55)
Co-authored-by: Claude <noreply@anthropic.com>
2025-10-13 09:09:30 -07:00
1294877a94 docs: architecture docs (#51)
Co-authored-by: Claude <noreply@anthropic.com>
2025-10-10 21:39:35 -07:00
Christian PillsburyandGitHub d4f3f4b75b fix: skin syntax usage cleanup (#48) 2025-10-10 12:59:26 -07:00
Christian PillsburyandGitHub 284f63f33b build: removing react-native. Aiming for 18.x react dependencies cross-workspace to avoid bugs. (#49) 2025-10-10 10:24:02 -07:00
Christian PillsburyandGitHub 9c5b29a15b chore: consistent formatting (#47) 2025-10-09 12:18:31 -07:00
597e79d7fc fix(time-display): clean up time utilities and simplify components
- 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>
2025-09-12 15:59:15 -07:00
c1da674425 chore: add .playwright-mcp to .gitignore
Prevent accidental commit of playwright MCP screenshot files
in the future.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-12 15:59:15 -07:00
1db32d82fa chore: remove accidentally committed .playwright-mcp files
Remove screenshot files that were unintentionally added to git history.
These files should not be tracked in the repository.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-12 15:59:15 -07:00
ab07a8a9a2 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>
2025-09-12 15:59:15 -07:00
Christian PillsburyandChristian Pillsbury 3bca85f180 chore: swapping out m3u8 example asset for react demo. 2025-09-12 15:59:15 -07:00
5aeeb6dde6 style: add visual styling to time display components
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>
2025-09-12 15:59:15 -07:00
0746d400af refactor: rename formatDuration to formatDisplayTime
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>
2025-09-12 15:59:15 -07:00
5bd0a154db feat: implement current time display components
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>
2025-09-12 15:59:15 -07:00
6db4c3c4b8 refactor: move time formatting logic to platform components
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>
2025-09-12 15:59:15 -07:00
2ed219158d feat(skins): integrate duration display into default skins
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>
2025-09-12 15:59:15 -07:00
c5b659f449 feat(react): implement duration display component
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>
2025-09-12 15:59:15 -07:00
e35dd44be8 feat(html): implement duration display component
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>
2025-09-12 15:59:15 -07:00
d0036fc7d6 feat(media-store): add duration display component state definition
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>
2025-09-12 15:59:15 -07:00
7e26e547ea feat(media-store): add comprehensive time formatting utilities
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>
2025-09-12 15:59:15 -07:00
d0d487601e fix(icons): add currentColor fill to fullscreen icons for proper theming
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>
2025-09-12 08:06:08 -07:00
23e3876630 feat(react): add MediaContainer component for fullscreen functionality
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>
2025-09-12 08:06:08 -07:00
35072fd7c5 refactor(html): remove temporary fullscreen test code from play button
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>
2025-09-12 08:06:08 -07:00
465342e431 feat(html): integrate fullscreen button into control bar and improve container lifecycle
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>
2025-09-12 08:06:08 -07:00
7d819dfcd9 feat(react): add fullscreen button component
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>
2025-09-12 08:06:08 -07:00
63a340213f feat(html): add fullscreen button component and icons
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>
2025-09-12 08:06:08 -07:00
e19b98b120 feat(media-store): add fullscreen button component state definition
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>
2025-09-12 08:06:08 -07:00
7f243c22d8 feat(media-store): add fullscreen state mediator with shadow DOM support
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>
2025-09-12 08:06:08 -07:00
29ed5e3759 feat(icons): add fullscreen enter and exit icons
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>
2025-09-12 08:06:08 -07:00
2e99ba79ae refactor(media-store): add container state owner and rename event types
- 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>
2025-09-12 08:06:08 -07:00
da94272f63 refactor(media-store): replace mediaEvents with stateOwnersUpdateHandlers pattern
- 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>
2025-09-12 08:06:08 -07:00
Christian PillsburyandChristian Pillsbury 517bb30678 chore: remove range css from skins for now. 2025-09-09 07:59:56 -07:00
Christian PillsburyandChristian Pillsbury bef0d42631 chore: Add todo code comments. 2025-09-09 07:59:56 -07:00
Christian PillsburyandChristian Pillsbury d239f416bd chore: Add todo code comments. 2025-09-09 07:59:56 -07:00
77c2932b8d fix(media-store): replace tsup with rollup for consistent build tooling
- 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>
2025-09-09 07:59:56 -07:00
d8809c5abe fix(media-store): resolve TypeScript declaration generation build issues
- 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>
2025-09-09 07:59:56 -07:00
3540993534 chore: remove debug console.log statements and fix TypeScript declarations
- Remove console.log statements from temporal state mediator duration getter
- Remove console.log statements from React TimeRange onChange handler
- Fix TypeScript declaration file import paths (remove .ts extensions)
- Ensure all component state definitions have proper declaration files

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-09 07:59:56 -07:00
c29fd2c2c1 feat(media-store,html,react): implement TimeRange component with hook-style architecture
- 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>
2025-09-09 07:59:56 -07:00
dad2fea986 refactor(html): update VolumeRange to use handleEvent pattern for consistency
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>
2025-09-09 07:59:56 -07:00
75c6cb6bc3 refactor(react): restructure VolumeRange to use render function pattern
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>
2025-09-09 07:59:56 -07:00
2282f4799b feat(core,html,react): implement VolumeRange component with integrated state management
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>
2025-09-09 07:59:56 -07:00
1e12f66f16 feat(core): implement temporal state management for time-based media controls
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>
2025-09-08 17:50:03 -07:00
370762f500 feat(examples): configure separate default ports for React and HTML demos
- 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>
2025-09-08 17:29:12 -07:00
a1de5ebae3 refactor(react): consolidate Video component into single module
- 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>
2025-09-08 17:23:37 -07:00
e1d326ffaf refactor(core,react,html): migrate component state definitions to core media-store
- 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>
2025-09-08 17:15:40 -07:00
14caea24d3 refactor(react,html): update PlayButton to use centralized state definitions
- 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>
2025-09-08 17:15:40 -07:00
7842a36658 refactor(react,html): implement hook-style component architecture for MuteButton
- 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>
2025-09-08 17:15:40 -07:00
882019f458 refactor(react,html): implement hook-style component architecture for MuteButton
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>
2025-09-08 17:15:40 -07:00
115f181548 style(react-demo): clean up code formatting and video source organization
- 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>
2025-09-08 17:15:40 -07:00
ad69b451e6 refactor(react): implement hook-style component architecture for PlayButton
- 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>
2025-09-08 17:15:40 -07:00
8e75d62f62 feat(react-media-store): add shallowEqual utility for optimized state comparisons
- 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>
2025-09-08 17:15:40 -07:00
ad7aa79b61 refactor: standardize state property names across core, HTML, and React packages
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>
2025-09-08 17:15:40 -07:00
Christian PillsburyandChristian Pillsbury 74dea64ddd refactor(html): implement hook-style component architecture for PlayButton and MuteButton (gradual migration to more shareable with React). 2025-09-08 17:15:40 -07:00
c54945fd58 WIP: refactor(html): implement hook-style component architecture for PlayButton and MuteButton
- 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>
2025-09-08 17:15:40 -07:00
38215df70b refactor(react): create shared component factory for reusable architecture
- 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>
2025-09-08 17:15:40 -07:00
26998a1217 fix(react): implement proper HTML boolean data attributes for components
- 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>
2025-09-08 17:15:40 -07:00
910b999359 refactor(react): implement hooks-based PlayButton architecture
- 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>
2025-09-08 17:15:40 -07:00
Christian PillsburyandChristian Pillsbury cfdbc4c552 refactor(react): Continue with component hooks rearchitecture. 2025-09-08 17:15:40 -07:00
Christian PillsburyandChristian Pillsbury ba8797cd21 refactor(react): consolidate MuteButton components into unified implementation
- 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
2025-09-08 17:15:40 -07:00
3fd26eb654 fix(media-store): resolve TypeScript error in dispatch method
- 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>
2025-08-19 08:41:08 -07:00
4662dbcbb1 fix(media): use explicit exports to resolve React package TypeScript errors
- 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>
2025-08-19 08:41:08 -07:00
Christian PillsburyandChristian Pillsbury 87105db6be fix: Clean up more typescript errors. 2025-08-19 08:41:08 -07:00
3cffb4d59a fix: refactor private fields to public with underscore convention
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>
2025-08-19 08:41:08 -07:00
e5f23ed2bb fix: resolve @open-wc/context-protocol module resolution issues
- 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>
2025-08-19 08:41:08 -07:00
7154b1e446 fix: resolve package dependency and TypeScript export issues
- 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>
2025-08-19 08:41:08 -07:00