Description

This 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.

![Edit video-provider-example](https://codesandbox.io/s/video-provider-example-zu0hdd?fontsize=14&hidenavigation=1&theme=dark)

Usage

``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 (
    

              controls
        ref={ref}
        src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
      />
      
        
      
    

  );
};