useMediaTimer

Description

The useMediaTimer hook is designed to manage an internal timer from @react-instastories/base using HTML media controls. This hook allows synchronization between a media element (like a <video> or <audio>) and the base timer context, ensuring that the media playback state and the timer state are kept in sync. Hook returns TimerContext values.

Usage

import { useMediaTimer } from "@react-instastories/external";
 
import React from "react";
 
function MediaContent() {
  const ref = React.useRef<HTMLVideoElement>(null);
  const timer = useMediaTimer(ref.current);
 
  return (
    <video ref={ref} autoPlay={true}>
      <source src="path/to/video.mp3" type="video/mp4" />
    </video>
  );
}

Demo

useInteractive useKeyboardMovement