Optimize useEffect hooks in the VideoPlayer component

[tanmay4l]

PR Fixes:

VideoPlayer component, there were multiple useEffect hooks being used for different purposes, such as initializing the video player, updating the player's state based on props or query parameters, handling video progress, and cleanup. Having multiple useEffect hooks can lead to code duplication, increased complexity, and potential performance issues.

To address this, we refactored the code to use a single useEffect hook that combines all the necessary logic and functionality. By consolidating the logic into a single hook, we achieved the following benefits:

1. Code Simplification: Instead of managing multiple useEffect hooks with different dependencies, we now have a single hook that encapsulates all the necessary logic. This makes the code easier to read, understand, and maintain.

2. Improved Performance: By combining all the logic into a single useEffect hook, we ensure that the effect is only running when one of its dependencies changes. This can potentially improve performance by reducing unnecessary re-renders and computations.

By optimizing the useEffect hooks in the VideoPlayer component, we've improved the code quality, readability, and potentially the performance of the component. This refactoring demonstrates a commitment to writing clean, maintainable, and efficient code.

Checklist before requesting a review

• [x] I have performed a self-review of my code
• [x] I assure there is no similar/duplicate pull request regarding same issue