WIP: BREAKING CHANGE - Add interactive circular progress ring with dr…#1
Draft
WIP: BREAKING CHANGE - Add interactive circular progress ring with dr…#1
Conversation
…ag functionality - Implemented complete ProgressRing component system with: - CircularInput: Main interactive component with click and drag handling - CircularTrack: Background circle - CircularProgress: Progress arc showing current position - CircularThumb: Draggable handle for seeking - useCircularDrag: Custom hook for mouse/touch drag events - Context system for sharing state between components - Features: - Click anywhere in ring to play/pause video - Drag thumb to seek through video - Touch support for mobile devices - Keyboard accessibility (arrow keys, space, page up/down) - Accurate positioning for both fixed and percentage-based sizes - Real-time progress updates as video plays - Refactored VideoPlayer into modular architecture: - Split logic into separate hooks, utils, and components - Created reusable Video, Thumbnail, PlayButton components - Added proper TypeScript types and interfaces - Implemented UI library conventions with proper folder structure - Fixed issues: - Drag only triggers on thumb, not anywhere in ring - Accurate positioning for percentage-based sizes using ResizeObserver - Proper event handling to allow play/pause while maintaining drag functionality - HMR compatibility by removing defaultProps exports - Visual improvements: - Bright red progress ring for visibility - White thumb with red stroke for better contrast - Larger thumb (radius 8) for easier grabbing - Smooth animations and proper z-indexing BREAKING CHANGE: VideoPlayer component structure has been completely refactored. Existing implementations may need updates to import paths and prop handling.
- Add new modular progress ring architecture with CircularInput, CircularTrack, CircularProgress, and CircularThumb components - Implement configurable ring positioning (inside/outside video player) with adjustable offsets - Add customizable track styling with stroke width, color, fill, and line cap options - Enhance interactivity with click-to-seek functionality and configurable click tolerance - Implement full accessibility support with keyboard navigation, ARIA labels, and focus management - Add responsive sizing support for both pixel and percentage-based dimensions - Integrate progress ring with VideoPlayer component for seamless video seeking - Update useVideoPlayerState hook to track hasStarted state for ring interaction logic - Expand DevShowcase with comprehensive examples demonstrating all new progress ring features - Clean up old reference files and consolidate component structure - Improve type definitions with detailed ProgressRingProps interface - Add CircularInputContext for managing shared state across circular components - Implement utility functions for polar coordinate calculations and geometry handling BREAKING CHANGES: - Progress ring API has been redesigned with new prop structure - Removed old circular progress implementation in favor of new modular system
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.
…ag functionality
Implemented complete ProgressRing component system with:
Features:
Refactored VideoPlayer into modular architecture:
Fixed issues:
Visual improvements:
BREAKING CHANGE: VideoPlayer component structure has been completely refactored. Existing implementations may need updates to import paths and prop handling.