- Implement responsive sizing for all controls based on screen width (phone/tablet support)
- Add smooth crossfade animation for play/pause button transitions
- Add arc sweep and slide animations for seek buttons (+10/-10s)
- Add touch feedback with semi-transparent circle flash on tap
- Moved inline styles to playerStyles.ts for better maintainability
- Redesigned player controls for better user experience:
- Enhanced skip buttons with rotate animations and semi-transparent backgrounds
- Enlarged center play/pause button with improved visibility
- Optimized touch targets and spacing for better interaction
- Standardized button dimensions and layout
Files changed:
- src/components/player/controls/PlayerControls.tsx
- src/components/player/utils/playerStyles.ts
This update introduces a new SourcesModal in the VideoPlayer component, allowing users to select from available streams. The VideoPlayer now manages stream changes more effectively, including handling pending seeks and updating the current stream URL. Additionally, the PlayerControls component has been updated to include a button for changing the source. Styling improvements have been made for better visual feedback during source changes, enhancing the overall user experience.
This update introduces a close button in the VideoPlayer component for better user control during video loading. Additionally, the StreamsScreen has been enhanced to show loading indicators for individual stream providers, improving the user experience by providing visual feedback during data fetching.