@applicaster/quick-brick-player 13.0.0-rc.98 → 13.0.0

package/src/Player/index.tsx

@@ -4,6 +4,8 @@
 import React from "react";
 import * as R from "ramda";
 
+import { flatten } from "@applicaster/zapp-react-native-utils/utils";
+
 import { findNodeHandle, StyleSheet, View } from "react-native";
 import TransportControlsMobile from "@applicaster/quick-brick-mobile-transport-controls";
 import TransportControlsTV from "@applicaster/quick-brick-tv-transport-controls";
@@ -31,7 +33,6 @@ import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
 import { getAllAccessibilityProps } from "@applicaster/zapp-react-native-utils/configurationUtils";
 import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
 import { getTargetScreenDataFromEntry } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useTargetScreenData";
-import { isAppleTV } from "@applicaster/zapp-react-native-ui-components/Helpers/Platform";
 import {
   AnimationComponent,
   ComponentAnimationType,
@@ -40,6 +41,10 @@ import { PlayerAnalyticsManager } from "@applicaster/zapp-react-native-utils/ana
 import { PlayerAnalyticsTrackerI } from "@applicaster/zapp-react-native-utils/analyticsUtils/playerAnalyticsTracker";
 
 import { RNPlayerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/nativePlayerManager";
+import {
+  isAudioItem as isAudioItemUtil,
+  isInlineTV as isInlineTVUtil,
+} from "@applicaster/zapp-react-native-utils/playerUtils";
 
 const styles = StyleSheet.create({
   container: { flex: 1 },
@@ -50,6 +55,7 @@ const styles = StyleSheet.create({
     position: "absolute",
     zIndex: 1,
   },
+  audioPlayerSize: { width: "100%", height: "100%" },
   playerSize: { width: "100%", height: "100%" },
 });
 
@@ -58,6 +64,10 @@ const logger = createLogger({
   subsystem: Subsystem,
 });
 
+const isTvOS = isTvOSPlatform();
+
+const AUDIO_PLAYER_NATIVE_ID = "audio-player-view";
+
 export default class VideoPlayer extends React.Component<
   QuickBrickPlayer.PlayerProps,
   QuickBrickPlayer.NativePlayerState
@@ -74,6 +84,7 @@ export default class VideoPlayer extends React.Component<
   state: QuickBrickPlayer.NativePlayerState = {
     audioTrackId: null,
     textTrackId: null,
+    isCasting: this.props.isCasting,
 
     // TODO: Can be deleted, on controller logic
     isAd: false,
@@ -92,6 +103,8 @@ export default class VideoPlayer extends React.Component<
     // Player state
     currentTime: 0,
     duration: 0,
+
+    nativePlayerIsReady: false,
   };
 
   private _tracker: PlayerAnalyticsTrackerI;
@@ -487,6 +500,9 @@ export default class VideoPlayer extends React.Component<
 
   onVideoFullscreenPlayerDidPresent = () => {
     this.props.listener?.onVideoFullscreenPlayerDidPresent?.();
+
+    // we have to have a signal that player is ready, in order to show audio_player(for example)
+    this.setState({ nativePlayerIsReady: true });
   };
 
   onVideoFullscreenPlayerWillDismiss = () => {
@@ -672,32 +688,57 @@ export default class VideoPlayer extends React.Component<
     }
   };
 
-  childrenWithPlayNext = () => {
-    if (!isTvOSPlatform() || !this.getPlayNextData()) {
-      return this.props.children;
+  childrenWithExtensions = () => {
+    const { docked, entry, children } = this.props;
+
+    if (!isTvOS) {
+      return children;
     }
 
-    // tvos only
-    const { docked, entry } = this.props;
-
-    const children = R.pathOr([], "children", this.props);
-
-    return [
-      ...children,
-      <PlayNextOverlay
-        key="play-next-overlay"
-        item={entry}
-        playerIsDocked={docked}
-        pluginConfiguration={this.getPluginConfiguration()}
-        playerId={this.props.playerId}
-        playNextData={this.getPlayNextData()}
-        setNextVideoPreloadThresholdPercentage={
-          this.props.setNextVideoPreloadThresholdPercentage
-        }
-      />,
-    ];
+    const output = [];
+
+    // audio-player
+    if (isAudioItemUtil(entry)) {
+      const { nativePlayerIsReady } = this.state;
+
+      // we have to wait ready status of native player view, before showing audio_player
+      if (nativePlayerIsReady) {
+        output.push(
+          <View nativeID={AUDIO_PLAYER_NATIVE_ID} key={AUDIO_PLAYER_NATIVE_ID}>
+            {children}
+          </View>
+        );
+      }
+    } else {
+      output.push(children);
+    }
+    // audio-player
+
+    // play-next
+    if (this.getPlayNextData()) {
+      output.push(
+        <PlayNextOverlay
+          key="play-next-overlay"
+          item={entry}
+          playerIsDocked={docked}
+          pluginConfiguration={this.getPluginConfiguration()}
+          playerId={this.props.playerId}
+          playNextData={this.getPlayNextData()}
+          setNextVideoPreloadThresholdPercentage={
+            this.props.setNextVideoPreloadThresholdPercentage
+          }
+        />
+      );
+    }
+    // play-next
+
+    return flatten(output); // prevent possible case with nested array
   };
 
+  get supportNativeCast() {
+    return this.props.controller.supportNativeCast();
+  }
+
   render() {
     const {
       docked,
@@ -710,18 +751,13 @@ export default class VideoPlayer extends React.Component<
       muted,
       style,
       castAction,
-      controller,
       startComponentsAnimation,
     } = this.props;
 
-    const supportNativeCast = controller.supportNativeCast();
-
     const { audioTrackId, keyEvent, paused, seek, textTrackId, rate } =
       this.state;
 
-    const isAudioItem =
-      entry?.content?.type?.includes?.("audio") ||
-      entry?.type?.value?.includes?.("audio");
+    const isAudioItem = isAudioItemUtil(entry);
 
     const getStyle = (dimensions) => {
       const generalStyles = isAudioItem ? styles.audio : styles.video;
@@ -765,7 +801,7 @@ export default class VideoPlayer extends React.Component<
     // TODO: Get screen data more reliable way useCurrentScreenData
     const screenData = getTargetScreenDataFromEntry(this.props.playableItem);
 
-    const isInlineTV = screenData?.ui_components?.length > 0 && isTV();
+    const isInlineTV = isInlineTVUtil(screenData);
 
     let platformSpecificProps: any = isApplePlatform()
       ? {
@@ -776,7 +812,7 @@ export default class VideoPlayer extends React.Component<
     const supportsNativeControls =
       !!this.props.controller?.supportsNativeControls?.();
 
-    const controls = isAppleTV()
+    const controls = isTvOS
       ? (supportsNativeControls && !isInlineTV) || !!this.getPlayNextData()
       : supportsNativeControls && !this.getPlayNextData();
 
@@ -823,7 +859,7 @@ export default class VideoPlayer extends React.Component<
       ),
     };
 
-    if (!isAppleTV()) {
+    if (!isTvOS) {
       // TODO: Move to RN method and remove from props.
       // Causes tvOS bug: native player passes rate on fast seek,
       // RN returns it and it breaks playback.
@@ -995,11 +1031,14 @@ export default class VideoPlayer extends React.Component<
     const backgroundImageKey =
       this.getPluginConfiguration()?.player_preview_image_key;
 
+    const shouldRenderNativePlayer =
+      !this.props.isCasting || this.supportNativeCast;
+
     const renderMobilePlayer = () => {
       return isFullScreenAudioPlayer && isAudioItem ? (
         // Ensure the View remains in the native hierarchy for proper rendering and interaction
         <View collapsable={false} style={containerStyle}>
-          {!castAction?.state?.connected || supportNativeCast ? (
+          {shouldRenderNativePlayer ? (
             <this.props.PlayerComponent
               ref={this._assignRoot}
               {...nativeEvents}
@@ -1051,7 +1090,7 @@ export default class VideoPlayer extends React.Component<
                     />
                   ) : null}
 
-                  {!castAction?.state?.connected || supportNativeCast ? (
+                  {shouldRenderNativePlayer ? (
                     <AnimationComponent
                       animationType={ComponentAnimationType.player}
                       additionalData={{
@@ -1073,7 +1112,7 @@ export default class VideoPlayer extends React.Component<
                         pluginConfiguration={this.getPluginConfiguration()}
                         controller={this.props.controller}
                       >
-                        {this.childrenWithPlayNext()}
+                        {this.props.children}
                       </this.props.PlayerComponent>
                     </AnimationComponent>
                   ) : null}
@@ -1102,6 +1141,14 @@ export default class VideoPlayer extends React.Component<
     const renderTVPlayer = () => {
       return (
         <View style={this.takeParentStyle} testID={"player-view"}>
+          {isAudioItem && (isInlineTV || !isTvOS) ? (
+            <AudioPlayer
+              style={getStyle(styles.audioPlayerSize)}
+              audio_item={entry}
+              plugin_configuration={this.getPluginConfiguration()}
+            />
+          ) : null}
+
           <this.props.PlayerComponent
             ref={this._assignRoot}
             {...nativeEvents}
@@ -1111,11 +1158,11 @@ export default class VideoPlayer extends React.Component<
             pluginConfiguration={this.getPluginConfiguration()}
             controller={this.props.controller}
           >
-            {this.childrenWithPlayNext()}
+            {!isInlineTV && this.childrenWithExtensions()}
           </this.props.PlayerComponent>
 
           {renderTransportControls(this.takeParentStyle)}
-          {!isTvOSPlatform() && (
+          {!isTvOS && (
             <PlayNextOverlay
               item={entry}
               playerIsDocked={docked}

package/src/QuickBrickPlayer.tsx

@@ -5,6 +5,7 @@ import Player from "./Player";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useIsCasting } from "./Player/hooks/useIsCasting";
 
 const CHROMECAST_IDENTIFIER = "quick-brick-chromecast-action";
 
@@ -24,6 +25,7 @@ const QuickBrickPlayerComponent = (
   }, [props.PlayerComponent]);
 
   const castAction = useActions(CHROMECAST_IDENTIFIER);
+  const isCasting = useIsCasting();
 
   const isModal = Boolean(props?.isModal);
   const isScreenDisabled = !controller?.isFullScreenSupported() || !isModal;
@@ -48,6 +50,7 @@ const QuickBrickPlayerComponent = (
       {...props}
       ref={ref}
       castAction={!props?.disableCastAction && castAction}
+      isCasting={isCasting}
       PlayerComponent={props.PlayerComponent}
       openPiP={openPiP}
       closePiP={closePiP}

package/src/Player/AudioLayer/LinearGradient/LinearGradientProxy.ts

@@ -1,3 +0,0 @@
-import LinearGradient from "react-native-linear-gradient";
-
-export default LinearGradient;

package/src/Player/AudioLayer/LinearGradient/LinearGradientProxy.web.ts

@@ -1,3 +0,0 @@
-const WebLinearGradient = require("react-native-web-linear-gradient").default;
-
-export default WebLinearGradient;

package/src/Player/AudioLayer/LinearGradient/index.ts

@@ -1 +0,0 @@
-export { default } from "./LinearGradientProxy";

package/src/Player/AudioLayer/MagicBG/index.tsx

@@ -1,155 +0,0 @@
-/* eslint-disable react/prop-types */
-import * as React from "react";
-import { Animated, StyleSheet, View } from "react-native";
-import LinearGradient from "../LinearGradient";
-import { getDominantColor, getPalettes } from "../../../utils/utils";
-import { useEffect } from "react";
-
-type MagicBGProps = {
-  children: React.ReactNode;
-  image: string;
-  fallbackUrl?: string;
-  defaultColor: string;
-  colors: string[];
-};
-
-const defaultColors = {
-  overlay: "rgba(0, 0, 0, 0.35)",
-  defaultGradientStart: "rgba(0, 0, 0, 0.25)",
-  defaultGradientEnd: "rgba(0, 0, 0, 0)",
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  fullScreenOverlay: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: defaultColors.overlay,
-  },
-  gradientOverlay: {
-    position: "absolute",
-    bottom: 0,
-    left: 0,
-    right: 0,
-    height: "100%",
-  },
-});
-
-const fetchPaletteAndDominantColor = async (imageUrl: string) => {
-  const palette = await getPalettes(imageUrl);
-
-  const colors = palette.map(
-    (color: { r: number; g: number; b: number }) =>
-      `rgb(${color.r}, ${color.g}, ${color.b})`
-  );
-
-  const dominant = await getDominantColor(imageUrl);
-  const dominantColor = `rgb(${dominant.r}, ${dominant.g}, ${dominant.b})`;
-
-  return { gradientColors: colors.slice(0, 2).reverse(), dominantColor };
-};
-
-export const MagicBG: React.FC<MagicBGProps> = ({
-  children,
-  image,
-  fallbackUrl = "",
-  colors = [],
-  defaultColor,
-}) => {
-  const [dominantColor, setDominantColor] =
-    React.useState<string>(defaultColor);
-
-  const [gradientColors, setGradientColors] = React.useState<string[]>([
-    defaultColors.defaultGradientStart,
-    defaultColors.defaultGradientEnd,
-  ]);
-
-  const [backgroundColorAnim] = React.useState(new Animated.Value(0)); // from 0 to 1
-  const [gradientOpacityAnim] = React.useState(new Animated.Value(0)); // from 0 to 1
-
-  useEffect(() => {
-    const animateColors = () => {
-      Animated.timing(backgroundColorAnim, {
-        toValue: 1,
-        duration: 500,
-        useNativeDriver: false,
-      }).start();
-
-      Animated.timing(gradientOpacityAnim, {
-        toValue: 1,
-        duration: 500,
-        useNativeDriver: false,
-      }).start();
-    };
-
-    const fetchColors = async () => {
-      if (colors && colors.length > 0) {
-        setGradientColors(colors.slice(0, 2));
-        setDominantColor(colors[0]);
-        animateColors();
-      } else if (image) {
-        try {
-          const { gradientColors, dominantColor } =
-            await fetchPaletteAndDominantColor(image);
-
-          setGradientColors(gradientColors);
-          setDominantColor(dominantColor);
-          animateColors();
-        } catch (error) {
-          try {
-            const { gradientColors, dominantColor } =
-              await fetchPaletteAndDominantColor(fallbackUrl);
-
-            setGradientColors(gradientColors);
-            setDominantColor(dominantColor);
-            animateColors();
-          } catch {
-            setGradientColors([
-              defaultColors.defaultGradientStart,
-              defaultColors.defaultGradientEnd,
-            ]);
-
-            setDominantColor(defaultColor);
-          }
-        }
-      } else {
-        setGradientColors([
-          defaultColors.defaultGradientStart,
-          defaultColors.defaultGradientEnd,
-        ]);
-
-        setDominantColor(defaultColor);
-      }
-    };
-
-    fetchColors();
-  }, []);
-
-  const interpolatedBackgroundColor = backgroundColorAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: ["black", dominantColor],
-  });
-
-  return (
-    <Animated.View
-      style={[
-        styles.container,
-        { backgroundColor: interpolatedBackgroundColor },
-      ]}
-    >
-      <View style={styles.fullScreenOverlay} />
-
-      <Animated.View
-        style={[styles.gradientOverlay, { opacity: gradientOpacityAnim }]}
-      >
-        <LinearGradient
-          colors={gradientColors}
-          style={StyleSheet.absoluteFill}
-        />
-      </Animated.View>
-
-      {children}
-    </Animated.View>
-  );
-};

package/src/utils/utils.ts

@@ -1,25 +0,0 @@
-import RNColorThief from "@applicaster/react-native-color-thief";
-import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
-
-const { log_error } = createLogger({
-  subsystem: "UIComponent",
-  category: "MagicBackground",
-});
-
-export const getDominantColor = async (imageUrl: string): Promise<any> => {
-  try {
-    return await RNColorThief.getColor(imageUrl, 1, false);
-  } catch (error) {
-    log_error("Failed to get the dominant color", { error });
-    throw error;
-  }
-};
-
-export const getPalettes = async (imageUrl: string): Promise<any> => {
-  try {
-    return await RNColorThief.getPalette(imageUrl, 3, 1, true);
-  } catch (error) {
-    log_error("Failed to get the palette", { error });
-    throw error;
-  }
-};