@applicaster/quick-brick-player 12.0.0-alpha.7725319213 → 12.0.0-alpha.7921075302

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,10 +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 { 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()
@@ -59,6 +61,7 @@ const styles = StyleSheet.create({
     position: "absolute",
     zIndex: 1,
   },
+  playerSize: { width: "100%", height: "100%" },
 });
 
 const logger = createLogger({
@@ -91,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,
 
@@ -372,6 +375,10 @@ export default class VideoPlayer extends React.Component<
     }
   };
 
+  setPlaybackRate = (rate = 1.0) => {
+    this.setState({ rate });
+  };
+
   getCurrentTime = () => {
     return this.state.currentTime;
   };
@@ -555,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();
@@ -758,7 +785,6 @@ export default class VideoPlayer extends React.Component<
 
   render() {
     const {
-      castAction,
       docked,
       entry,
       fullscreen,
@@ -768,9 +794,14 @@ export default class VideoPlayer extends React.Component<
       isTabletPortrait,
       muted,
       style,
+      castAction,
+      controller,
     } = this.props;
 
-    const { audioTrackId, keyEvent, paused, seek, textTrackId } = this.state;
+    const supportNativeCast = controller.supportNativeCast();
+
+    const { audioTrackId, keyEvent, paused, seek, textTrackId, rate } =
+      this.state;
 
     const isAudioItem =
       entry?.content?.type?.includes?.("audio") ||
@@ -822,26 +853,25 @@ export default class VideoPlayer extends React.Component<
 
     let platformSpecificProps: any = isApplePlatform()
       ? {
-        resizeMode: nativeResizeMode,
-      } : {};
+          resizeMode: nativeResizeMode,
+        }
+      : {};
 
-    const supportsNativeControls = !!this.props.controller?.supportsNativeControls?.();
+    const supportsNativeControls =
+      !!this.props.controller?.supportsNativeControls?.();
 
     const controls = isAppleTV()
-      ? supportsNativeControls && isInlineTV && !this.getPlayNextData()
+      ? supportsNativeControls && !isInlineTV && !this.getPlayNextData()
       : supportsNativeControls && !this.getPlayNextData();
 
+    const shouldUseNativeControls =
+      controls && !docked && !castAction?.state?.connected;
+
     platformSpecificProps = {
       ...platformSpecificProps,
-      controls
+      controls: shouldUseNativeControls,
     };
 
-    console.log("Anton Player render2 ", {
-      platformSpecificProps,
-      isNotInlineTv: !isInlineTV,
-      hasNoPlayNextData: !this.getPlayNextData()
-    });
-
     const pictureInPictureEnabled =
       this.props.pluginConfiguration?.pictureInPictureEnabled;
 
@@ -857,6 +887,7 @@ export default class VideoPlayer extends React.Component<
       nowPlayingEnabled,
       paused,
       seek,
+      rate,
       textTrackId,
       liveSeekingEnabled,
       liveCatchUpEnabled,
@@ -902,22 +933,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,
     };
@@ -976,8 +1002,6 @@ export default class VideoPlayer extends React.Component<
       ? styles.playerContainerTransparent
       : styles.playerContainerBlack;
 
-    console.log("Anton Player render", {screenData, props: this.props, nativeProps});
-
     const isInline = () => {
       if (isTV()) {
         return inline;
@@ -993,7 +1017,7 @@ export default class VideoPlayer extends React.Component<
         !needToShowPlayNextOverlay &&
         this.props.mode !== "PIP";
 
-      if (controls === true) {
+      if (shouldUseNativeControls) {
         return null;
       }
 
@@ -1046,29 +1070,14 @@ export default class VideoPlayer extends React.Component<
     const renderMobilePlayer = () => {
       return isFullScreenAudioPlayer && isAudioItem ? (
         <View style={containerStyle}>
-          {!castAction?.state?.connected && (
+          {(!castAction?.state?.connected || supportNativeCast) && (
             <this.props.PlayerComponent
               ref={this._assignRoot}
               {...nativeEvents}
               {...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}>
@@ -1083,11 +1092,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 && (
@@ -1099,18 +1121,28 @@ export default class VideoPlayer extends React.Component<
                     />
                   )}
 
-                  {!castAction?.state?.connected && (
-                    <this.props.PlayerComponent
-                      ref={this._assignRoot}
-                      {...nativeEvents}
-                      {...nativeProps}
-                      listener={this.props.listener}
+                  {(!castAction?.state?.connected || supportNativeCast) && (
+                    <AnimationComponent
+                      animationType={ComponentAnimationType.player}
+                      additionalData={playerDimensions}
                       style={getStyle(playerDimensions)}
-                      pluginConfiguration={this.getPluginConfiguration()}
-                      controller={this.props.controller}
                     >
-                      {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>