React Video Player Controls

Build a set of essential controls for a functional video player using React and TypeScript. This challenge focuses on creating an interactive user interface that allows users to play, pause, seek, and control the volume of a video. A well-designed video player is crucial for any media-rich application, and mastering these fundamental controls is a key step in front-end development.

Problem Description

You are tasked with creating a React component that wraps a native HTML5 <video> element and provides a set of user-friendly controls. The component should manage the video's playback state and respond to user interactions with the controls.

Key Requirements:

1. Video Element Integration: The component must render an HTML5 <video> element. You will need to handle the src attribute of the video. For simplicity, assume the video source will be provided as a prop.
2. Play/Pause Button:
   • A button that toggles between playing and pausing the video.
   • The button's appearance (icon or text) should indicate the current state (e.g., "Play" when paused, "Pause" when playing).
3. Progress Bar (Seek Bar):
   • A visual representation of the video's current playback progress.
   • The progress bar should update dynamically as the video plays.
   • Users should be able to click or drag on the progress bar to seek to a specific point in the video.
4. Time Display:
   • Display the current playback time (e.g., 00:30) and the total duration of the video (e.g., 02:15).
   • The format should be MM:SS (or H:MM:SS if the video is longer than an hour).
5. Volume Control:
   • A slider (e.g., an <input type="range">) to control the video's volume.
   • The volume slider should range from 0 to 1 (representing 0% to 100%).
   • Users should be able to adjust the volume using the slider.
6. Full-Screen Button (Optional but Recommended):
   • A button to toggle the video player into and out of full-screen mode.

Expected Behavior:

• When the component mounts, the video should be loaded but not playing.
• Clicking the play button starts the video, and the button changes to a pause icon.
• Clicking the pause button stops the video, and the button changes to a play icon.
• As the video plays, the progress bar should fill accordingly, and the current time display should update.
• Clicking on the progress bar should jump the video to that specific time.
• Adjusting the volume slider should change the video's audio level.

Edge Cases to Consider:

• Video Loading: What happens while the video is buffering? (For this challenge, you can assume the video loads quickly or ignore buffering states).
• Video End: What should happen when the video finishes playing? (Consider resetting to the beginning or pausing).
• Initial State: Ensure all controls are in a sensible default state when the player first renders.

Examples

Example 1: Initial State

• Input: A React component VideoPlayer receiving a videoSrc prop: "https://www.example.com/my-video.mp4"
• Output:
  • The <video> element is rendered with src="https://www.example.com/my-video.mp4".
  • The play/pause button displays a "Play" icon.
  • The time display shows 00:00 / 02:15 (assuming video duration is 2 minutes and 15 seconds).
  • The progress bar is empty.
  • The volume slider is at its default position (e.g., 100%).
• Explanation: The player is ready to be controlled but is in its initial, unplayed state.

Example 2: Video Playing

• Input: The VideoPlayer component from Example 1, after the play button has been clicked and 30 seconds have elapsed.
• Output:
  • The video is playing.
  • The play/pause button displays a "Pause" icon.
  • The time display shows 00:30 / 02:15.
  • The progress bar is approximately 1/5th full (30 seconds / 135 seconds).
• Explanation: The user has initiated playback, and the controls reflect the current state of the video.

Example 3: Seeking

• Input: The VideoPlayer component from Example 2. The user clicks on the progress bar at the halfway mark (representing 1 minute and 7.5 seconds).
• Output:
  • The video playback jumps to approximately 1 minute and 7.5 seconds.
  • The play/pause button remains "Pause".
  • The time display shows 01:07 / 02:15.
  • The progress bar is now half full.
• Explanation: The user has interacted with the seek bar to move to a different point in the video.

Constraints

• The video player component should be implemented using React functional components and TypeScript.
• You should use the native HTML5 <video> element. Avoid using third-party video player libraries for the core functionality.
• State management should be handled within the VideoPlayer component itself.
• The video source (videoSrc prop) will always be a valid URL string.
• Assume the video metadata (like duration) will be available.

Notes

• You'll need to leverage the ref API in React to access and control the underlying <video> element.
• Listen to events on the <video> element such as timeupdate, loadedmetadata, play, pause, and volumechange to keep your UI in sync.
• For the time display, you'll need a helper function to format seconds into MM:SS or H:MM:SS.
• Consider using SVG icons for play/pause buttons for a cleaner look, but simple text labels are also acceptable.
• For the full-screen functionality, you will likely need to use the Fullscreen API (though this can be complex and might be considered an advanced addition for this challenge).