React state manager for videos
npm install video-providerThis is a provider, which listens to specific events of element and updates corresponding states.
It helps you render your UI based on states and not worry about any triggering changes.

``tsx
import { useContext, useRef } from "react";
import { VideoProvider, VideoContext } from "video-provider";
const Page = () => {
// Using these states will rerender your component on change
const {
now,
duration,
paused,
muted,
volume,
play,
pause,
mute,
setVolume
} = useContext(VideoContext);
return (
Time {now.toFixed()}:{duration.toFixed()}
Player is {paused ? "paused" : "playing"}
Sound is {muted ? "muted" : "not muted"}
Volume is {volume * 100}%
type="number"
placeholder="Volume"
onInput={(e) => {
const newVolume = Number(e.currentTarget.value) / 100;
if (newVolume > 1) return setVolume(1);
if (newVolume < 0) return setVolume(0);
setVolume(newVolume);
}}
/>
export const App = () => {
const ref = useRef(null);
return (