@playkit-js/dynamic-watermark/src/services/dom/observeSize.ts

kaltura-player-js dynamic watermark

const getDPR = () => {
  return Math.max(
    0.5,
    Math.min(4, devicePixelRatio * (visualViewport?.scale ?? 1)),
  );
};

const getSizes = ({ width, height }: { width: number; height: number }) => {
  const dpr = getDPR();

  return {
    css: { width, height },
    device: { width: width * dpr, height: height * dpr },
    scale: dpr,
  };
};

export const observeSize = (
  root: HTMLElement,
  callback: (size: {
    device: { width: number; height: number };
    css: { width: number; height: number };
    scale: number;
  }) => void,
) => {
  const observer = new ResizeObserver((entries) => {
    for (const entry of entries) {
      const width = entry.contentBoxSize[0].inlineSize;
      const height = entry.contentBoxSize[0].blockSize;

      callback(getSizes({ width, height }));
    }
  });

  observer.observe(root);

  const handleVisualViewportResize = () => {
    callback(getSizes(root.getBoundingClientRect()));
  };

  visualViewport?.addEventListener('resize', handleVisualViewportResize);

  return {
    initialSize: getSizes(root.getBoundingClientRect()),
    disconnect: () => {
      observer.disconnect();
      visualViewport?.removeEventListener('resize', handleVisualViewportResize);
    },
  };
};