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

Applicaster Zapp React Native ui components for the Quick Brick App

import * as R from "ramda";

import {
  isAndroidPlatform,
  platformSelect,
} from "@applicaster/zapp-react-native-utils/reactUtils";
import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks/device";
import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
import { StyleSheet, Dimensions, ViewStyle } from "react-native";
import { DimensionsT } from "./types";

export const useConfiguration = () => {
  const {
    videoModalState: { item },
  } = useNavigation();

  const { rivers, contentTypes, pluginConfigurations } = usePickFromState([
    "rivers",
    "contentTypes",
    "pluginConfigurations",
  ]);

  const targetScreenId = contentTypes?.[item?.type?.value]?.screen_id;
  const targetScreenConfiguration = rivers?.[targetScreenId];

  const pluginConfiguration =
    pluginConfigurations[targetScreenConfiguration?.type]?.configuration_json;

  const playerPluginConfig = playerManager.getPluginConfiguration();

  const config = R.mergeRight(playerPluginConfig, {
    ...targetScreenConfiguration?.general,
    ...targetScreenConfiguration?.styles,
    ...pluginConfiguration,
  });

  const {
    minimised_height = 0,
    minimised_height_tablet = 0,
    modal_background_color,
  } = config;

  const minimisedHeight = useIsTablet()
    ? minimised_height_tablet
    : minimised_height;

  return {
    minimised_height: Number(minimisedHeight),
    modal_background_color,
  };
};

const fullSize = {
  width: "100%",
  height: "100%",
} as const;

export const playerDimensionsHack: ViewStyle = platformSelect({
  android_tv: fullSize,
  amazon: fullSize,
  lg_tv: fullSize,
  samsung_tv: fullSize,
  default: {},
});

const orientationStyles = StyleSheet.create({
  landscape: { flexDirection: "row" },
  portrait: { flexDirection: "column" },
});

export const directionStyles = (isTabletLandscape: boolean): ViewStyle => {
  if (isTabletLandscape) {
    return orientationStyles.landscape;
  }

  return orientationStyles.portrait;
};

export const getScreenAspectRatio = () => {
  const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } =
    Dimensions.get("screen");

  const longEdge = Math.max(SCREEN_WIDTH, SCREEN_HEIGHT);
  const shortEdge = Math.min(SCREEN_WIDTH, SCREEN_HEIGHT);

  return longEdge / shortEdge;
};

export const getEdges = (isTablet: boolean, isInlineModal: boolean) => {
  if (isTablet) {
    return ["top"];
  }

  if (!isInlineModal && isAndroidPlatform()) {
    return [];
  }

  return ["top"];
};

export const getTabletWidth = (
  tabletSidebarWidth: string | undefined,
  dimensions: DimensionsT
) => {
  const { width } = dimensions;

  const sidebarWidthPercentage = Number(tabletSidebarWidth?.replace("%", ""));

  if (tabletSidebarWidth?.includes("%")) {
    return Number(width) * (1 - sidebarWidthPercentage / 100);
  }

  if (Number.isNaN(sidebarWidthPercentage)) {
    return Number(width) * 0.65;
  }

  return Number(width) - sidebarWidthPercentage;
};

export const getTabletSidebarWidth = (
  tabletSidebarWidth: string | undefined,
  dimensions: DimensionsT
) => {
  const { width } = dimensions;

  const sidebarWidthPercentage = Number(tabletSidebarWidth?.replace("%", ""));

  if (tabletSidebarWidth?.includes("%")) {
    return Number(width) * (sidebarWidthPercentage / 100);
  }

  if (Number.isNaN(sidebarWidthPercentage)) {
    return Number(width) * 0.35;
  }

  return sidebarWidthPercentage;
};