diff --git a/src/components/OavVideoStream.tsx b/src/components/OavVideoStream.tsx index 5ab63d6..4781cf7 100644 --- a/src/components/OavVideoStream.tsx +++ b/src/components/OavVideoStream.tsx @@ -7,30 +7,7 @@ import { useParsedPvConnection, } from "../pv/util"; import React from "react"; - -export const useContainerDimensions = ( - ref: React.MutableRefObject, -) => { - const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 }); - React.useEffect(() => { - const getDimensions = () => ({ - width: ref.current?.offsetWidth || 0, - height: ref.current?.offsetWidth || 0, - }); - const handleResize = () => { - setDimensions(getDimensions()); - }; - if (ref.current) { - setDimensions(getDimensions()); - } - window.addEventListener("resize", handleResize); - return () => { - window.removeEventListener("resize", handleResize); - }; - }, [ref]); - - return dimensions; -}; +import { useContainerDimensions } from "./OavVideoStreamHelper"; /* * A viewer which allows overlaying a crosshair (takes numbers which could be the values from a react useState hook) diff --git a/src/components/OavVideoStreamHelper.ts b/src/components/OavVideoStreamHelper.ts new file mode 100644 index 0000000..284d5dc --- /dev/null +++ b/src/components/OavVideoStreamHelper.ts @@ -0,0 +1,25 @@ +import { useState, useEffect } from "react"; + +export const useContainerDimensions = ( + ref: React.MutableRefObject, +) => { + const [dimensions, setDimensions] = useState({ width: 0, height: 0 }); + useEffect(() => { + const getDimensions = () => ({ + width: ref.current?.offsetWidth || 0, + height: ref.current?.offsetWidth || 0, + }); + const handleResize = () => { + setDimensions(getDimensions()); + }; + if (ref.current) { + setDimensions(getDimensions()); + } + window.addEventListener("resize", handleResize); + return () => { + window.removeEventListener("resize", handleResize); + }; + }, [ref]); + + return dimensions; +};