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

Applicaster Zapp React Native ui components for the Quick Brick App

import * as React from "react";
import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
import { withTimeout$ } from "@applicaster/zapp-react-native-utils/idleUtils";

import { showDetails } from "./utils";

const TIMEOUT = 1000; // ms

type Props = { isInline: boolean; isDocked: boolean; isPip: boolean };

/**
 * Custom hook to determine whether to show player details with a delay.
 *
 * @param {Object} params - The parameters object.
 * @param {boolean} params.isInline - Indicates if the player is inline.
 * @param {boolean} params.isDocked - Indicates if the player is docked.
 * @param {boolean} params.isPip - Indicates if the player is in PIP mode.
 * @returns {boolean} - Returns true if player details should be shown, otherwise false.
 */
export const useDelayedPlayerDetails = ({
  isInline,
  isDocked,
  isPip,
}: Props): boolean => {
  const [shouldShowDetails, setShouldShowDetails] = React.useState(false);

  const isTablet = useIsTablet();

  React.useEffect(() => {
    const subscription = withTimeout$(TIMEOUT).subscribe({
      next: () => {
        setShouldShowDetails(() => {
          return showDetails({
            isMobile: !isTablet,
            isInline,
            isDocked,
            isPip,
          });
        });
      },
    });

    return () => {
      subscription.unsubscribe();
    };
  }, [isDocked, isTablet, isInline, isPip]);

  return shouldShowDetails;
};