React Video Player Controls

This challenge asks you to build a basic video player with essential controls using React and TypeScript. Creating interactive video players is a common requirement in web applications, and this exercise will test your understanding of React state management, event handling, and component composition. The goal is to provide a functional and responsive video playback experience.

Problem Description

You are tasked with creating a React component that displays a video and provides standard playback controls: Play/Pause, Volume Control, and Seek Bar. The component should manage the video's playback state (playing/paused) and volume level. The seek bar should visually represent the video's progress and allow the user to jump to different points in the video.

What needs to be achieved:

• A React component that renders a <video> element.
• Play/Pause button that toggles the video's playback state.
• A volume slider that controls the video's volume (0-1).
• A progress bar (seek bar) that visually represents the video's current playback position and allows the user to seek to different points in the video.
• Display the current time and total duration of the video.

Key Requirements:

• The component must be written in TypeScript.
• The component should manage its own state for:
  • isPlaying: Boolean indicating whether the video is playing.
  • volume: Number between 0 and 1 representing the volume level.
  • currentTime: Number representing the current playback time in seconds.
  • duration: Number representing the total duration of the video in seconds.
• The seek bar should update visually as the video plays.
• Clicking on the seek bar should update the currentTime of the video.
• The component should handle video loading and errors gracefully.

Expected Behavior:

• The video should load and play when the component mounts.
• The Play/Pause button should toggle the video's playback state.
• The volume slider should adjust the video's volume.
• The seek bar should accurately reflect the video's progress.
• Seeking to a specific point on the seek bar should update the video's playback position.
• Time display should accurately reflect current and total video time.

Edge Cases to Consider:

• Video loading errors (e.g., invalid video URL).
• Video playback errors.
• Video duration being zero.
• Volume being set outside the 0-1 range.
• Seeking beyond the video's duration.

Examples

Example 1:

Input:  videoSrc = "https://example.com/video.mp4" (valid video URL)
Output: A video player with Play/Pause, Volume Control, and Seek Bar, playing the video.
Explanation: The component successfully loads and plays the video, and the controls function as expected.

Example 2:

Input: videoSrc = "https://example.com/invalid_video.mp4" (invalid video URL)
Output: A video player displaying an error message indicating that the video could not be loaded. The controls are disabled.
Explanation: The component handles the video loading error gracefully and informs the user.

Example 3:

Input: videoSrc = "https://example.com/short_video.mp4" (video with short duration)
Output: A video player with a seek bar that accurately reflects the short duration of the video. Seeking to the end of the video should immediately pause the video.
Explanation: The component correctly handles videos with varying durations, including short videos.

Constraints

• The video URL must be a valid, accessible URL.
• The component should be responsive and work well on different screen sizes.
• The seek bar should be visually clear and easy to use.
• The component should be reasonably performant, avoiding unnecessary re-renders.
• The component should not rely on external libraries beyond React and TypeScript.

Notes

• Consider using React's useState hook for managing the component's state.
• The <video> element's events (e.g., timeupdate, volumechange, ended) are crucial for updating the component's state and the seek bar.
• Think about how to handle the case where the video's duration is not immediately available. You might need to use the loadedmetadata event.
• Focus on creating a functional and user-friendly video player. Styling is secondary to functionality in this challenge.
• Error handling is important. Provide feedback to the user if the video fails to load or play.