@applicaster/quick-brick-player 14.0.0-rc.9 → 14.0.0-rc.91

package/src/Player/PlayerModal/utils/index.ts

@@ -0,0 +1,111 @@
+import { StyleSheet, Dimensions, ViewStyle } from "react-native";
+
+import {
+  isAndroidPlatform,
+  isAndroidVersionAtLeast,
+  isTV,
+} from "@applicaster/zapp-react-native-utils/reactUtils";
+import { useIsTablet as getIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
+
+const SAFE_AREA_BREAKING_API_VERSION = 35;
+
+export const isOldAndroidDevice =
+  isAndroidPlatform() &&
+  !isAndroidVersionAtLeast(SAFE_AREA_BREAKING_API_VERSION);
+
+export const getWindowHeight = (
+  isTablet: boolean,
+  landscape: boolean
+): number => {
+  const windowDimensions = Dimensions.get("window");
+
+  if (isTablet && landscape) {
+    return windowDimensions.height;
+  }
+
+  if (windowDimensions.width > windowDimensions.height) {
+    return windowDimensions.width;
+  }
+
+  return windowDimensions.height;
+};
+
+export const getScreenHeight = (): number => {
+  const screenDimensions = Dimensions.get("screen");
+
+  return screenDimensions.height;
+};
+
+export const getWindowWidth = (
+  isTablet: boolean,
+  landscape: boolean
+): number => {
+  const windowDimensions = Dimensions.get("window");
+
+  if (isTablet && landscape) {
+    return windowDimensions.width;
+  }
+
+  if (windowDimensions.width > windowDimensions.height) {
+    return windowDimensions.height;
+  }
+
+  return windowDimensions.width;
+};
+
+const getIsTabletLandscape = (isTabletPortrait: boolean): boolean => {
+  return !isTV() && getIsTablet() && !isTabletPortrait;
+};
+
+export const getInsetsOffset = (
+  insets: { top: number; bottom: number },
+  isTabletPortrait: boolean
+): number => {
+  const isTabletLandscape = getIsTabletLandscape(isTabletPortrait);
+
+  return getIsTablet() && isTabletLandscape
+    ? isOldAndroidDevice
+      ? insets.top / 2
+      : 0
+    : insets.top / 2;
+};
+
+const orientationStyles = StyleSheet.create({
+  landscape: { flexDirection: "row" },
+  portrait: { flexDirection: "column" },
+});
+
+export const directionStyles = (isTabletPortrait: boolean): ViewStyle => {
+  const isTabletLandscape = getIsTabletLandscape(isTabletPortrait);
+
+  return isTabletLandscape
+    ? orientationStyles.landscape
+    : orientationStyles.portrait;
+};
+
+export const getScaledPos = (
+  height,
+  vidHeight,
+  minimisedHeight,
+  isTabletPortrait
+) => {
+  const isTabletLandscape = getIsTabletLandscape(isTabletPortrait);
+
+  const SCALE_FACTOR = minimisedHeight / vidHeight; // Scale factor for expanded content
+
+  return (
+    ((isTabletLandscape ? height : vidHeight) - vidHeight * SCALE_FACTOR) / 2
+  );
+};
+
+export const getExtraContentPadding = (insets: {
+  top: number;
+  bottom: number;
+}): ViewStyle => {
+  const isTablet = getIsTablet(); // not a hook, just a utility function
+
+  return {
+    paddingTop: isTablet ? insets.top : 0,
+    paddingBottom: insets.bottom,
+  };
+};

package/src/Player/PlayerView/GenericTVPlayerView.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { PlayNextOverlay } from "../PlayNextOverlay";
+import { GenericTVPlayerViewProps } from "./types";
+import { AudioPlayer } from "@applicaster/zapp-react-native-ui-components/Components/AudioPlayer";
+
+export const GenericTVPlayerView: React.FC<GenericTVPlayerViewProps> = ({
+  children,
+  type,
+  PlayerComponent,
+  pluginConfiguration,
+  playerProps,
+  playNextProps,
+  audioPlayerProps,
+  transportControls,
+  entry,
+}) => {
+  return (
+    <>
+      {type === "audio" ? (
+        <AudioPlayer
+          audio_item={entry}
+          plugin_configuration={pluginConfiguration}
+          {...audioPlayerProps}
+        />
+      ) : null}
+      <PlayerComponent
+        pluginConfiguration={pluginConfiguration}
+        {...playerProps}
+      >
+        {children}
+      </PlayerComponent>
+      {transportControls}
+      {playNextProps.playNextData ? (
+        <PlayNextOverlay
+          item={entry}
+          pluginConfiguration={pluginConfiguration}
+          {...playNextProps}
+        />
+      ) : null}
+    </>
+  );
+};

package/src/Player/PlayerView/TVPlayerView.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { isTvOSPlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { TvOSPlayerView } from "./TvOSPlayerView";
+import { GenericTVPlayerView } from "./GenericTVPlayerView";
+import {
+  GenericTVPlayerViewProps,
+  TvOSPlayerViewProps,
+  TVPlayerViewProps,
+} from "./types";
+
+const isTvOS = isTvOSPlatform();
+
+const shouldRenderTvOSPlayerView = (
+  isTvOS: boolean,
+  inline: boolean
+): boolean => {
+  return isTvOS && !inline;
+};
+
+export const TVPlayerView: React.FC<TVPlayerViewProps> = (props) => {
+  return shouldRenderTvOSPlayerView(isTvOS, props.inline) ? (
+    <TvOSPlayerView {...(props as TvOSPlayerViewProps)} />
+  ) : (
+    <GenericTVPlayerView {...(props as GenericTVPlayerViewProps)} />
+  );
+};

package/src/Player/PlayerView/TvOSPlayerView.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { View } from "react-native";
+import { PlayNextOverlay } from "../PlayNextOverlay";
+import { TvOSPlayerViewProps } from "./types";
+
+const AUDIO_PLAYER_NATIVE_ID = "audio-player-view";
+
+export const TvOSPlayerView: React.FC<TvOSPlayerViewProps> = ({
+  children,
+  type,
+  PlayerComponent,
+  pluginConfiguration,
+  playerProps,
+  playNextProps,
+  nativePlayerIsReady,
+  transportControls,
+  entry,
+  inline,
+}) => {
+  return (
+    <>
+      <PlayerComponent
+        pluginConfiguration={pluginConfiguration}
+        {...playerProps}
+      >
+        {!inline ? (
+          <>
+            {type === "audio" && nativePlayerIsReady ? (
+              <View
+                nativeID={AUDIO_PLAYER_NATIVE_ID}
+                key={AUDIO_PLAYER_NATIVE_ID}
+              >
+                {children}
+              </View>
+            ) : (
+              children
+            )}
+            {playNextProps.playNextData ? (
+              <PlayNextOverlay
+                item={entry}
+                pluginConfiguration={pluginConfiguration}
+                {...playNextProps}
+              />
+            ) : null}
+          </>
+        ) : null}
+      </PlayerComponent>
+      {transportControls}
+    </>
+  );
+};

package/src/Player/PlayerView/types.ts

@@ -0,0 +1,41 @@
+import { ReactNode, ComponentType } from "react";
+import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
+import { ViewStyle } from "react-native";
+
+export interface PlayNextOverlayProps {
+  playerIsDocked: boolean;
+  playerId?: string;
+  playNextData: PlayNextData;
+  setNextVideoPreloadThresholdPercentage: (percentage: number) => void;
+}
+
+export interface PlayerComponentProps {
+  ref: React.Ref<any>;
+  listener: Record<string, any>;
+  style: ViewStyle;
+}
+
+export interface AudioPlayerProps {
+  style: ViewStyle;
+}
+
+export interface PlayerViewBaseProps {
+  children?: ReactNode;
+  type: "audio" | "video";
+  entry: ZappEntry;
+  pluginConfiguration: Record<string, any>;
+  PlayerComponent: ComponentType<any>;
+  playerProps: PlayerComponentProps;
+  playNextProps: PlayNextOverlayProps;
+  audioPlayerProps: AudioPlayerProps;
+  transportControls?: ReactNode;
+  inline?: boolean;
+}
+
+export interface TvOSPlayerViewProps extends PlayerViewBaseProps {
+  nativePlayerIsReady: boolean;
+}
+
+export type GenericTVPlayerViewProps = PlayerViewBaseProps;
+
+export type TVPlayerViewProps = TvOSPlayerViewProps | GenericTVPlayerViewProps;