{"size": 790, "ext": "js", "max_stars_repo_path": "packages/dsi-logo-maker/utils/drawLoopHook.js", "max_stars_repo_name": "manyone-cph/mechanic", "max_stars_repo_stars_event_min_datetime": "2020-08-06T13:29:57.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-30T16:54:13.000Z", "max_issues_repo_path": "packages/dsi-logo-maker/utils/drawLoopHook.js", "max_issues_repo_name": "manyone-cph/mechanic", "max_issues_repo_issues_event_min_datetime": "2020-08-06T11:51:55.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-24T16:15:10.000Z", "max_forks_repo_path": "packages/dsi-logo-maker/utils/drawLoopHook.js", "max_forks_repo_name": "manyone-cph/mechanic", "max_forks_repo_forks_event_min_datetime": "2021-09-24T20:13:12.000Z", "max_forks_repo_forks_event_max_datetime": "2022-02-02T09:53:21.000Z"}
{"max_stars_count": 130, "max_issues_count": 91, "max_forks_count": 2, "avg_line_length": 23.2352941176, "max_line_length": 53, "alphanum_fraction": 0.6050632911}
import { useState, useEffect, useRef } from "react";

export const useDrawLoop = (isPlaying, duration) => {
  const raf = useRef();
  const starttime = useRef();
  const [runtime, setRuntime] = useState(0);

  useEffect(() => {
    cancelAnimationFrame(raf.current);
    if (!isPlaying) {
      return;
    }

    const draw = t => {
      const timestamp = t || new Date().getTime();
      if (!starttime.current) {
        starttime.current = timestamp;
      }
      setRuntime(timestamp - starttime.current);
      if (duration > timestamp - starttime.current) {
        raf.current = requestAnimationFrame(draw);
      }
    };

    raf.current = requestAnimationFrame(draw);

    return () => {
      cancelAnimationFrame(raf.current);
    };
  }, [isPlaying]);

  return runtime;
};
