@applicaster/zapp-react-native-utils/reactHooks/videoModal/hooks/useChangeOrientation.ts

Applicaster Zapp React Native utilities package

import * as React from "react";

import {
  addOrientationChangeListener,
  removeOrientationChangeListener,
  ORIENTATIONS_BUILDER,
  ORIENTATIONS,
} from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";

import { skipIf, shouldHandleOrientationChange } from "../utils";

import { getXray } from "@applicaster/zapp-react-native-utils/logger";
const { Logger } = getXray();

type Props = {
  isPortrait: boolean;
  onTransitToPortrait: () => void;
  onTransitToLandscape: () => void;
  skipAllEffects: boolean;
  docked: boolean;
};

export const logger = new Logger(
  "hooks",
  "zapp-react-native-utils/reactHooks/videoModal"
);

export const useChangeOrientation = ({
  isPortrait,
  onTransitToPortrait,
  onTransitToLandscape,
  skipAllEffects,
  docked,
}: Props) => {
  const onOrientationChange = React.useCallback(
    (orientationChangeEvent) => {
      const { fromOrientation, toOrientation, physicalChange } =
        orientationChangeEvent;

      const from = ORIENTATIONS_BUILDER.toString(fromOrientation);

      const to = ORIENTATIONS_BUILDER.toString(toOrientation);

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

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

      if (
        shouldHandleOrientationChange({
          isPortrait,
          docked,
          skipAllEffects,
          ...orientationChangeEvent,
        })
      ) {
        const isLandscape =
          toOrientation === ORIENTATIONS.landscapeLeft ||
          toOrientation === ORIENTATIONS.landscapeRight ||
          toOrientation === ORIENTATIONS.landscapeSensor;

        if (isLandscape) {
          onTransitToLandscape();
        } else {
          onTransitToPortrait();
        }

        logger.debug({
          message: `useChangeOrientation: ${
            isLandscape ? "onTransitToLandscape" : "onTransitToPortrait"
          }, to: ${to}`,
          data: logData,
        });
      }
    },

    [isPortrait, docked, skipAllEffects]
  );

  React.useEffect(
    skipIf(skipAllEffects, () => {
      const listener = addOrientationChangeListener(onOrientationChange);

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