@applicaster/quick-brick-player 12.0.0-rc.5 → 12.0.0-rc.51

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

@@ -1,6 +1,5 @@
 import React from "react";
 import DefaultLayout from "./DefaultLayout";
-import DockedLayout from "./DockedLayout";
 import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
 
 type Dimensions = {
@@ -24,27 +23,30 @@ type LayoutProps = {
     isBuffering: boolean;
   };
   value: GetValue;
+  sleepTimerDate: number;
+  playbackSpeedName: string;
+  playbackSleepName: string;
   configuration: { [key: string]: any };
   onPlaybackButtonPress: () => void;
   onRewindButtonPress: () => void;
   onForwardButtonPress: () => void;
+  onSpeedButtonPress: () => void;
+  onSleepButtonPress: () => void;
   onCloseVideoModal: () => void;
+  cancelSleepTimer: () => void;
   onPlayerSeek: (targetTime: number) => void;
   onSkipStart: () => void;
   onSkipLive: () => void;
   maximiseVideoModal: () => void;
   dimensions: Dimensions;
+  defaultDimensions: Dimensions;
   playNextData: PlayNextData;
+  title: string | number;
+  summary: string | number;
 };
 
 export default function Layout(
   props: LayoutProps
 ): React.ReactElement<LayoutProps> {
-  const { layoutState } = props;
-
-  if (layoutState.docked) {
-    return <DockedLayout {...props} />;
-  }
-
   return <DefaultLayout {...props} />;
 }

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

@@ -4,14 +4,17 @@ import * as React from "react";
 import { 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[]; // Updated to type string[] as it holds hex values
 };
 
-const colors = {
+const defaultColors = {
   overlay: "rgba(0, 0, 0, 0.35)",
   defaultGradientStart: "rgba(0, 0, 0, 0.25)",
   defaultGradientEnd: "rgba(0, 0, 0, 0)",
@@ -23,7 +26,7 @@ const styles = StyleSheet.create({
   },
   fullScreenOverlay: {
     ...StyleSheet.absoluteFillObject,
-    backgroundColor: colors.overlay,
+    backgroundColor: defaultColors.overlay,
   },
   gradientOverlay: {
     position: "absolute",
@@ -34,47 +37,81 @@ const styles = StyleSheet.create({
   },
 });
 
+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), 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[]>([
-    colors.defaultGradientStart,
-    colors.defaultGradientEnd,
+    defaultColors.defaultGradientStart,
+    defaultColors.defaultGradientEnd,
   ]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const fetchColors = async () => {
-      if (image) {
+      // Check if colors are provided and not empty
+      if (colors && colors.length > 0) {
+        // Use provided colors for gradient and dominant color
+        setGradientColors(colors.slice(0, 2)); // First 2 colors for gradient
+        setDominantColor(colors[0]); // First color as dominant
+      } else if (image) {
+        // If no colors, try fetching from image
         try {
-          const palette = await getPalettes(image);
-
-          const colors = palette.map(
-            (color: { r: number; g: number; b: number }) =>
-              `rgb(${color.r}, ${color.g}, ${color.b})`
-          );
-
-          setGradientColors(colors.slice(0, 2));
+          const { gradientColors, dominantColor } =
+            await fetchPaletteAndDominantColor(image);
 
-          const dominant = await getDominantColor(image);
-          setDominantColor(`rgb(${dominant.r}, ${dominant.g}, ${dominant.b})`);
+          setGradientColors(gradientColors);
+          setDominantColor(dominantColor);
         } catch (error) {
-          setGradientColors([
-            colors.defaultGradientStart,
-            colors.defaultGradientEnd,
-          ]);
+          // If image fetch fails, try fallback URL
+          try {
+            const { gradientColors, dominantColor } =
+              await fetchPaletteAndDominantColor(fallbackUrl);
 
-          setDominantColor(defaultColor);
+            setGradientColors(gradientColors);
+            setDominantColor(dominantColor);
+          } catch {
+            // If everything fails, use default color
+            setGradientColors([
+              defaultColors.defaultGradientStart,
+              defaultColors.defaultGradientEnd,
+            ]);
+
+            setDominantColor(defaultColor);
+          }
         }
+      } else {
+        // If no image or colors, use default color
+        setGradientColors([
+          defaultColors.defaultGradientStart,
+          defaultColors.defaultGradientEnd,
+        ]);
+
+        setDominantColor(defaultColor);
       }
     };
 
     fetchColors();
-  }, [image, defaultColor]);
+  }, []);
 
   return (
     <View style={[styles.container, { backgroundColor: dominantColor }]}>

package/src/Player/AudioLayer/utils.ts

@@ -0,0 +1,33 @@
+import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
+import { parseJsonIfNeeded } from "@applicaster/zapp-react-native-utils/functionUtils";
+
+export const NAMESPACE = "audio-player";
+
+export async function loadItemsFromStorage(key: string) {
+  const storedItems = await localStorage.getItem(key, NAMESPACE);
+
+  return parseJsonIfNeeded(storedItems) || null;
+}
+
+export const hasDatePassed = (timestamp: number) => {
+  // Get the current date and time
+  const currentDate = new Date();
+
+  // Compare the current date's timestamp with the given timestamp
+  return currentDate.getTime() > timestamp;
+};
+
+export const formatSpeed = (value: number) => {
+  let formattedValue = value.toString();
+
+  // If the value ends with ".0", remove it
+  if (formattedValue.endsWith(".0")) {
+    formattedValue = formattedValue.slice(0, -2);
+  }
+
+  // Replace "." with "_"
+  formattedValue = formattedValue.replace(".", "_");
+
+  // Return the formatted string with "speed_" prefix
+  return `speed_${formattedValue}`;
+};

package/src/Player/Utils/Utils.ts

@@ -1,3 +1,5 @@
+import queryString from "query-string";
+
 export const toTypeString = (obj) => {
   switch (typeof obj) {
     case "object":
@@ -19,3 +21,24 @@ export const stringsOnlyObject = (obj) => {
 
   return strObj;
 };
+
+export const getLiveUrl = (url: string) => {
+  // Use the replace method with a regular expression to replace all instances of subClass with livePage
+  return url.replace(new RegExp("subClass", "g"), "livePage");
+};
+
+export const addQueryParam = (
+  baseUrl: string,
+  paramName: string,
+  paramValue: string | number
+) => {
+  const [urlWithoutQuery, query] = baseUrl.split("?");
+
+  const parsedQuery = queryString.parse(query);
+
+  parsedQuery[paramName] = paramValue.toString();
+
+  const updatedQueryString = queryString.stringify(parsedQuery);
+
+  return `${urlWithoutQuery}?${updatedQueryString}`;
+};

package/src/Player/Utils/index.tsx

@@ -1,3 +1 @@
-export * from "./AssetsHelper";
-
 export * from "./Utils";

package/src/Player/index.tsx

@@ -36,6 +36,12 @@ import { AudioPlayerWrapper } from "./AudioLayer/AudioPlayerWrapper";
 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,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
 const RNPlayerManager = {
   QuickBrickPlayerPlugin: isApplePlatform()
@@ -55,6 +61,7 @@ const styles = StyleSheet.create({
     position: "absolute",
     zIndex: 1,
   },
+  playerSize: { width: "100%", height: "100%" },
 });
 
 const logger = createLogger({
@@ -87,7 +94,7 @@ export default class VideoPlayer extends React.Component<
     // TODO: Can be deleted, on controller logic
     paused: false,
     piped: false,
-    rate: 1,
+    rate: 1.0,
     // TODO: Hack for analytics, must br removed
     resume: null,
 
@@ -368,6 +375,10 @@ export default class VideoPlayer extends React.Component<
     }
   };
 
+  setPlaybackRate = (rate = 1.0) => {
+    this.setState({ rate });
+  };
+
   getCurrentTime = () => {
     return this.state.currentTime;
   };
@@ -551,6 +562,26 @@ export default class VideoPlayer extends React.Component<
     this.props.listener?.onPlayerDetached?.(nativeEvent);
   };
 
+  onVideoFullscreenPlayerDidDismiss = () => {
+    this.props.listener?.onVideoFullscreenPlayerDidDismiss?.();
+  };
+
+  onVideoFullscreenPlayerDidPresent = () => {
+    this.props.listener?.onVideoFullscreenPlayerDidPresent?.();
+  };
+
+  onVideoFullscreenPlayerWillDismiss = () => {
+    this.props.listener?.onVideoFullscreenPlayerWillDismiss?.();
+  };
+
+  onVideoFullscreenPlayerWillPresent = () => {
+    this.props.listener?.onVideoFullscreenPlayerWillPresent?.();
+  };
+
+  onPlayerClose = () => {
+    this.props.listener?.onPlayerClose?.();
+  };
+
   onPiPEnter = () => {
     this.setState({ piped: true });
     this.props.openPiP();
@@ -755,7 +786,6 @@ export default class VideoPlayer extends React.Component<
   render() {
     const {
       castAction,
-      controls,
       docked,
       entry,
       fullscreen,
@@ -767,7 +797,8 @@ export default class VideoPlayer extends React.Component<
       style,
     } = this.props;
 
-    const { audioTrackId, keyEvent, paused, seek, textTrackId } = this.state;
+    const { audioTrackId, keyEvent, paused, seek, textTrackId, rate } =
+      this.state;
 
     const isAudioItem =
       entry?.content?.type?.includes?.("audio") ||
@@ -812,17 +843,31 @@ export default class VideoPlayer extends React.Component<
     const liveCatchUpEnabled =
       this.props.pluginConfiguration?.liveCatchUpEnabled;
 
-    const hideNativeControls = isTV()
-      ? { controls: !this.getPlayNextData() }
-      : {};
+    // TODO: Get screen data more reliable way useCurrentScreenData
+    const screenData = getTargetScreenDataFromEntry(this.props.playableItem);
+
+    const isInlineTV = screenData?.ui_components?.length > 0 && isTV();
 
-    const platformSpecificProps = isApplePlatform()
+    let platformSpecificProps: any = isApplePlatform()
       ? {
-          ...hideNativeControls,
           resizeMode: nativeResizeMode,
         }
       : {};
 
+    const supportsNativeControls =
+      !!this.props.controller?.supportsNativeControls?.();
+
+    const controls = isAppleTV()
+      ? supportsNativeControls && !isInlineTV && !this.getPlayNextData()
+      : supportsNativeControls && !this.getPlayNextData();
+
+    const shouldUseNativeControls = controls && !docked;
+
+    platformSpecificProps = {
+      ...platformSpecificProps,
+      controls: shouldUseNativeControls,
+    };
+
     const pictureInPictureEnabled =
       this.props.pluginConfiguration?.pictureInPictureEnabled;
 
@@ -830,7 +875,6 @@ export default class VideoPlayer extends React.Component<
       entry, // Must be passed first in list
       ...platformSpecificProps,
       audioTrackId,
-      controls,
       docked,
       enableAutoAudioTrackSelection,
       fullscreen, // TODO: Check fullscreen params not crash
@@ -839,6 +883,7 @@ export default class VideoPlayer extends React.Component<
       nowPlayingEnabled,
       paused,
       seek,
+      rate,
       textTrackId,
       liveSeekingEnabled,
       liveCatchUpEnabled,
@@ -884,22 +929,17 @@ export default class VideoPlayer extends React.Component<
       onVideoEnd: this.onVideoEnd, // complete
       onVideoError: this.onVideoError, // error
       onVideoProgress: this.onVideoProgress,
-      onVideoFullscreenPlayerDidDismiss: this.unHandledEvent(
-        "onVideoFullscreenPlayerDidPresent"
-      ),
-      onVideoFullscreenPlayerDidPresent: this.unHandledEvent(
-        "onVideoFullscreenPlayerDidPresent"
-      ),
-      onVideoFullscreenPlayerWillDismiss: this.unHandledEvent(
-        "onVideoFullscreenPlayerWillDismiss"
-      ),
-      onVideoFullscreenPlayerWillPresent: this.unHandledEvent(
-        "onVideoFullscreenPlayerWillPresent"
-      ),
+      onVideoFullscreenPlayerDidDismiss: this.onVideoFullscreenPlayerDidDismiss,
+      onVideoFullscreenPlayerDidPresent: this.onVideoFullscreenPlayerDidPresent,
+      onVideoFullscreenPlayerWillDismiss:
+        this.onVideoFullscreenPlayerWillDismiss,
+      onVideoFullscreenPlayerWillPresent:
+        this.onVideoFullscreenPlayerWillPresent,
       onVideoLoad: this.onVideoLoad,
       onVideoLoadStart: this.unHandledEvent("onVideoLoadStart"),
       onVideoBuffer: this.onVideoBuffer,
       onPlaybackStalled: this.onPlaybackStalled,
+      onPlayerClose: this.onPlayerClose,
       onPlayerAttached: this.onPlayerAttached,
       onPlayerDetached: this.onPlayerDetached,
     };
@@ -973,7 +1013,7 @@ export default class VideoPlayer extends React.Component<
         !needToShowPlayNextOverlay &&
         this.props.mode !== "PIP";
 
-      if (controls === true) {
+      if (shouldUseNativeControls) {
         return null;
       }
 
@@ -1005,10 +1045,12 @@ export default class VideoPlayer extends React.Component<
       inline,
       docked,
       isModal,
+      pip: this.state.piped,
       layoutState: {
         inline,
         docked,
         isModal,
+        pip: this.state.piped,
       },
       configuration: this.getPluginConfiguration(),
       fullscreen: fullscreen,
@@ -1031,22 +1073,7 @@ export default class VideoPlayer extends React.Component<
               {...nativeProps}
             />
           )}
-          <AudioPlayerWrapper {...sharedWrapperViewProps}>
-            <View>
-              {
-                <PlayNextOverlay
-                  item={entry}
-                  playerIsDocked={docked}
-                  pluginConfiguration={this.getPluginConfiguration()}
-                  playerId={this.props.playerId}
-                  playNextData={this.getPlayNextData()}
-                  setNextVideoPreloadThresholdPercentage={
-                    this.props.setNextVideoPreloadThresholdPercentage
-                  }
-                />
-              }
-            </View>
-          </AudioPlayerWrapper>
+          <AudioPlayerWrapper {...sharedWrapperViewProps} />
         </View>
       ) : (
         <PlayerWrapper {...sharedWrapperViewProps}>
@@ -1061,11 +1088,24 @@ export default class VideoPlayer extends React.Component<
               <View style={styles.container}>
                 <View style={[playerContainerStyles, playerDimensions]}>
                   {isAudioItem && (
-                    <AudioPlayer
-                      style={playerDimensions}
-                      audio_item={entry}
-                      plugin_configuration={this.getPluginConfiguration()}
-                    />
+                    <AnimationComponent
+                      animationType={ComponentAnimationType.player}
+                      additionalData={{
+                        ...playerDimensions,
+                        inlineAudioPlayer: true,
+                      }}
+                      style={getStyle(playerDimensions)}
+                    >
+                      <AudioPlayer
+                        style={
+                          isTV()
+                            ? getStyle(playerDimensions)
+                            : styles.playerSize
+                        }
+                        audio_item={entry}
+                        plugin_configuration={this.getPluginConfiguration()}
+                      />
+                    </AnimationComponent>
                   )}
 
                   {shouldRenderBackground && (
@@ -1078,16 +1118,27 @@ export default class VideoPlayer extends React.Component<
                   )}
 
                   {!castAction?.state?.connected && (
-                    <this.props.PlayerComponent
-                      ref={this._assignRoot}
-                      {...nativeEvents}
-                      {...nativeProps}
-                      listener={this.props.listener}
+                    <AnimationComponent
+                      animationType={ComponentAnimationType.player}
+                      additionalData={playerDimensions}
                       style={getStyle(playerDimensions)}
-                      pluginConfiguration={this.getPluginConfiguration()}
                     >
-                      {this.childrenWithPlayNext()}
-                    </this.props.PlayerComponent>
+                      <this.props.PlayerComponent
+                        ref={this._assignRoot}
+                        {...nativeEvents}
+                        {...nativeProps}
+                        listener={this.props.listener}
+                        style={
+                          isTV()
+                            ? getStyle(playerDimensions)
+                            : styles.playerSize
+                        }
+                        pluginConfiguration={this.getPluginConfiguration()}
+                        controller={this.props.controller}
+                      >
+                        {this.childrenWithPlayNext()}
+                      </this.props.PlayerComponent>
+                    </AnimationComponent>
                   )}
                 </View>
 
@@ -1121,6 +1172,7 @@ export default class VideoPlayer extends React.Component<
             listener={this.props.listener}
             style={this.takeParentStyle}
             pluginConfiguration={this.getPluginConfiguration()}
+            controller={this.props.controller}
           >
             {this.childrenWithPlayNext()}
           </this.props.PlayerComponent>