feat: time display components#12
Merged
Merged
Conversation
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>
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 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>
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 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>
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>
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>
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 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>
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>
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>
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>
- 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>
cjpillsbury
added a commit
that referenced
this pull request
May 21, 2026
Adds the network-resilience feature doc at coarse depth as the cluster G foundation. Borderline / response-error handling: retry/backoff, error classification, VRLT-aware response handling, playback-token- expiry refresh, customer-policy hooks. Tier 1 / Tier 2 framing with Naive vs Full depth distinctions per phase. Reframes cluster G: previously framed as "selection resilience" with multi-CDN as the primary feature. The cluster splits along two axes now — response-error handling (network-resilience covers this) and selection-side resilience (multi-cdn-failover / content-steering as sister consumer features yet to land). Absorbs: - selection-retry-backoff candidate (now Tier 1 phase: Generic retry with backoff + Error classification + retry budget/circuit-breaker in Tier 2) - Notion epic #12 VRLT (Viewer Rate Limiting Token) as Tier 2 phase - Notion epic #14 Playback Token Expiry as Tier 2 phase Six phases total: Generic retry (Tier 1) + Error classification (Tier 1) + Retry budget/circuit breaker (Tier 2) + VRLT-aware response (Tier 2) + Playback-token-expiry (Tier 2) + Customer-policy hooks (Tier 2). Cross-cutting impact captures: createTrackedFetch composition (sibling wrapper vs extension), bandwidth-sample exclusion for retry attempts, retry-policy slot vs per-site config, composition with multi-cdn-failover (retry vs rotation boundary), circuit-breaker state ownership, token-refresh hook convergence with DRM license- refresh, per-fetch-site config (manifest/segment/license/text- segment), live-stream reload-loop retry semantics. Open questions left explicit: retry-policy slot, default retry counts per site, VRLT detection signature shape, token-refresh hook, bandwidth-sample filtering, circuit-breaker ownership, composition order with multi-cdn-failover, retry-exhaustion error surfacing, composition with DRM, composition with content-steering. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
cjpillsbury
added a commit
that referenced
this pull request
May 21, 2026
Adds the network-resilience feature doc at coarse depth as the cluster G foundation. Borderline / response-error handling: retry/backoff, error classification, VRLT-aware response handling, playback-token- expiry refresh, customer-policy hooks. Tier 1 / Tier 2 framing with Naive vs Full depth distinctions per phase. Reframes cluster G: previously framed as "selection resilience" with multi-CDN as the primary feature. The cluster splits along two axes now — response-error handling (network-resilience covers this) and selection-side resilience (multi-cdn-failover / content-steering as sister consumer features yet to land). Absorbs: - selection-retry-backoff candidate (now Tier 1 phase: Generic retry with backoff + Error classification + retry budget/circuit-breaker in Tier 2) - Notion epic #12 VRLT (Viewer Rate Limiting Token) as Tier 2 phase - Notion epic #14 Playback Token Expiry as Tier 2 phase Six phases total: Generic retry (Tier 1) + Error classification (Tier 1) + Retry budget/circuit breaker (Tier 2) + VRLT-aware response (Tier 2) + Playback-token-expiry (Tier 2) + Customer-policy hooks (Tier 2). Cross-cutting impact captures: createTrackedFetch composition (sibling wrapper vs extension), bandwidth-sample exclusion for retry attempts, retry-policy slot vs per-site config, composition with multi-cdn-failover (retry vs rotation boundary), circuit-breaker state ownership, token-refresh hook convergence with DRM license- refresh, per-fetch-site config (manifest/segment/license/text- segment), live-stream reload-loop retry semantics. Open questions left explicit: retry-policy slot, default retry counts per site, VRLT detection signature shape, token-refresh hook, bandwidth-sample filtering, circuit-breaker ownership, composition order with multi-cdn-failover, retry-exhaustion error surfacing, composition with DRM, composition with content-steering. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.