workaround aspect-ratio safari

workaround aspect-ratio safari

import { useRef, useEffect, useState } from "react";

export default function Test() {
  const [height, setHeight] = useState(0);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (ref.current) {
      setHeight((ref.current.clientWidth * 16) / 9);
    }
  }, [ref]);

  return (
    <div className="flex items-center justify-center w-screen h-screen bg-green-400">
      <div
        style={{ height: `${height}px` }}
        ref={ref}
        className="w-96 rounded-md shadow-md bg-green-700"
      />
    </div>
  );

  return (
    <div className="flex items-center justify-center w-screen h-screen bg-green-400">
      <div
        style={{ aspectRatio: "9/16" }}
        className="w-96 rounded-md shadow-md bg-green-700"
      />
    </div>
  );
}

const _targetsParam=new Map()
const _resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    const width =
      (entry.contentBoxSize
        ?(entry.contentBoxSize[0]
            ?entry.contentBoxSize[0]
            :entry.contentBoxSize
        ).inlineSize
        :entry.contentRect.width
      )
    const {setHeight, WHratio} = _targetsParam.get(entry.target)
    setHeight(width / WHratio)
  }
  console.log('Size changed');
});
const useHeightOnAspectRatio = (WHratio) => {
  const [height, setHeight] = useState(0);
  const oldRef=useRef(null)
  const ref = useCallback(node => {
    if (oldRef.current != null){
      const node=oldRef.current
      _resizeObserver.unobserve(node);
      _targetsParam.delete(node)
    }
    if (node != null) {
      _targetsParam.set(node, {setHeight, WHratio})
      _resizeObserver.observe(node);
      oldRef.current=node
    }
  }, []);
  return [height, ref]
}