@applicaster/quick-brick-player 14.0.0-rc.8 → 14.0.0-rc.81

package/src/Player/PlayerModal/styles.ts

@@ -0,0 +1,104 @@
+import { useConfiguration } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/utils";
+import {
+  useIsTablet,
+  useNavigation,
+} from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import { useMemo } from "react";
+import { StyleSheet } from "react-native";
+
+export const useBackgroundColor = (): string => {
+  const {
+    modal_background_color: modalBackgroundColor,
+    tablet_landscape_player_container_background_color: tabletBackgroundColor,
+  } = useConfiguration();
+
+  const {
+    videoModalState: { mode },
+  } = useNavigation();
+
+  const isTablet = useIsTablet();
+
+  const theme = useTheme<BaseThemePropertiesMobile>();
+  const isFullscreen = mode === "FULLSCREEN";
+
+  /**
+   * For the new audio player, the background color setting work that way
+   * Layer 0 - modal_background_color
+   * Layer 1 - screen_background_color ( can be combined with layer 0 ), If the parameter is not set, it will be a solid black.
+   * audio_player_background_color is used only in the old player when the background image is not set
+   * modal_background_color is used as the background for player details, and in useBackgroundColor to set a background for a video modal.
+   * If it’s not set, theme?.status_background_color will be used instead
+   *
+   * This hook cover only case with layer 0: modal_background_color, layer 1: screen_background_color is used in the styles.expandedContentContainer
+   *
+   * For the video player, inline player will use tablet_landscape_player_container_background_color as background color, and transparent for fullscreen.
+   * Mobile player will use
+   * modal_background_color as background color.
+   */
+
+  return isTablet
+    ? !isFullscreen
+      ? tabletBackgroundColor
+      : "transparent"
+    : modalBackgroundColor || theme?.status_background_color;
+};
+
+export const useStyles = ({ height }: { height: number }) => {
+  const COLLAPSED_HEIGHT = height;
+
+  const backgroundColor = useBackgroundColor();
+
+  const BG_COLOR_DEFAULT_BLACK = "black";
+  const BG_COLOR_DEFAULT_TRANSPARENT = "transparent";
+
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        modal: {
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: 0,
+          backgroundColor,
+          elevation: 10,
+          zIndex: 100,
+          overflow: "hidden",
+        },
+        modalWrapper: {
+          backgroundColor: BG_COLOR_DEFAULT_BLACK,
+        },
+        collapsedModalBg: {
+          backgroundColor: BG_COLOR_DEFAULT_BLACK,
+        },
+        modalContent: {
+          flex: 1,
+          alignItems: "center",
+        },
+        expandedContentContainer: {
+          justifyContent: "flex-start",
+          backgroundColor: BG_COLOR_DEFAULT_TRANSPARENT,
+          zIndex: 1,
+          flex: 0,
+        },
+        extraContentScrollView: {
+          width: "100%",
+          backgroundColor: BG_COLOR_DEFAULT_TRANSPARENT,
+        },
+        collapsedBarContainer: {
+          ...StyleSheet.absoluteFillObject,
+          height: COLLAPSED_HEIGHT,
+          zIndex: 90,
+          justifyContent: "flex-end",
+        },
+        collapsedBarWrapper: {
+          flex: 1,
+        },
+        flexNone: {
+          ...StyleSheet.absoluteFillObject,
+          flex: -1,
+        },
+      }),
+    [backgroundColor, COLLAPSED_HEIGHT]
+  );
+};

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

@@ -0,0 +1,29 @@
+import { StatusBar, Dimensions } from "react-native";
+
+import {
+  isAndroidPlatform,
+  isAndroidVersionAtLeast,
+} from "@applicaster/zapp-react-native-utils/reactUtils";
+import { isAndroidTablet } from "@applicaster/zapp-react-native-utils/reactHooks/layout/isTablet";
+
+const MIN_SUPPORTED_ANDROID_API = 34;
+
+const isOldAndroidDevice =
+  isAndroidPlatform() &&
+  !isAndroidVersionAtLeast(MIN_SUPPORTED_ANDROID_API) &&
+  !isAndroidTablet();
+
+export const getWindowHeight = (): number => {
+  const windowDimensions = Dimensions.get("window");
+
+  return (
+    windowDimensions.height +
+    (isOldAndroidDevice ? (StatusBar.currentHeight ?? 0) : 0)
+  );
+};
+
+export const getWindowWidth = (): number => {
+  const windowDimensions = Dimensions.get("window");
+
+  return windowDimensions.width;
+};

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;