@applicaster/zapp-react-native-ui-components/Components/VideoModal/hooks/useModalSize.ts

Applicaster Zapp React Native ui components for the Quick Brick App

import * as React from "react";
import { useIsTabletLandscape } from "@applicaster/zapp-react-native-utils/reactHooks/device/useMemoizedIsTablet";
import {
  addOrientationChangeListener,
  ORIENTATIONS,
  ORIENTATIONS_BUILDER,
  removeOrientationChangeListener,
} from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";

import { getXray } from "@applicaster/zapp-react-native-utils/logger";
import { useSafeAreaFrame } from "react-native-safe-area-context";

const { Logger } = getXray();

const logger = new Logger(
  "hooks",
  "zapp-react-native-ui-components/Components/VideoModal"
);

type Size = {
  width: number | string;
  height: number | string;
};

const MODAL_SIZE_FOR_LANDSCAPE: Size = {
  width: "100%",
  height: "100%",
};

export const useModalSize = (): Size => {
  const frame = useSafeAreaFrame();

  const [modalSize, setModalSize] = React.useState<Size>({
    width: frame.width,
    height: frame.height,
  });

  const setNewModalSize = React.useCallback((newSize, log) => {
    setModalSize((oldSize) => {
      if (
        oldSize.height === newSize.height &&
        oldSize.width === newSize.width
      ) {
        return oldSize;
      }

      return newSize;
    });

    logger.debug({
      message: log,
    });
  }, []);

  const isTabletLandscape = useIsTabletLandscape();

  React.useEffect(() => {
    const listener = addOrientationChangeListener(
      ({ fromOrientation, toOrientation, physicalChange }) => {
        if (isTabletLandscape) {
          return;
        }

        if (physicalChange) {
          return;
        }

        const from = ORIENTATIONS_BUILDER.toString(fromOrientation);

        const to = ORIENTATIONS_BUILDER.toString(toOrientation);

        const logData = {
          from,
          to,
          physicalChange,
        };

        logger.debug({
          message: `useModalSize: from: ${from}, to: ${to}`,
          data: logData,
        });

        const isLandscape =
          toOrientation === ORIENTATIONS.landscapeLeft ||
          toOrientation === ORIENTATIONS.landscapeRight ||
          toOrientation === ORIENTATIONS.landscapeSensor;

        setNewModalSize(
          isLandscape
            ? MODAL_SIZE_FOR_LANDSCAPE
            : { width: frame.width, height: frame.height },
          `useModalSize: set modal size ${
            isLandscape ? "landscape" : "portrait"
          } for orientation: ${to}`
        );
      }
    );

    return () => {
      removeOrientationChangeListener(listener);
    };
  }, []);

  return modalSize;
};