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

Applicaster Zapp React Native ui components for the Quick Brick App

import * as React from "react";
import { StyleSheet, ViewStyle } from "react-native";
import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
import { playerDimensionsHack } from "./utils";
import { getTabletWidth } from "@applicaster/zapp-react-native-utils/playerUtils";
import {
  getBaseDimensions,
  calculateAspectRatio,
  getPlayerDimensions,
  getContainerDimensions,
} from "./playerWrapperUtils";

export const defaultStyles = StyleSheet.create({
  playerContainer: { position: "relative", alignSelf: "center", zIndex: 200 },
});

export const useStyle = ({
  style,
  inline,
  isModal,
  isTabletPortrait,
  configuration,
  pip,
}) => {
  const isTablet = useIsTablet();

  const isInlineModal = inline && isModal;

  const isTabletLandscape = !isTV() && isTablet && !isTabletPortrait;

  const tabletWidth = getTabletWidth(
    configuration.tablet_landscape_sidebar_width,
    style
  );

  const baseDimensions: ViewStyle = React.useMemo(
    () => getBaseDimensions(isInlineModal, isTabletLandscape, tabletWidth),
    [isInlineModal, isTabletLandscape, tabletWidth]
  );

  const aspectRatio = React.useMemo(
    () => calculateAspectRatio(isInlineModal, pip),
    // ignoring insets - only initial needed
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [isInlineModal, pip]
  );

  return React.useMemo(() => {
    const playerDimensions: ViewStyle = getPlayerDimensions(
      baseDimensions,
      aspectRatio
    );

    const containerDimensions: ViewStyle = getContainerDimensions(
      baseDimensions,
      aspectRatio
    );

    const childrenStyles = {
      ...playerDimensions,
      ...playerDimensionsHack,
    };

    return StyleSheet.create({
      containerDimensions,
      childrenStyles,
    });
  }, [baseDimensions, aspectRatio]);
};