@applicaster/quick-brick-player 12.0.0-rc.8 → 12.0.0-rc.80

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

@@ -1,17 +1,19 @@
-// Disabling for now as lint can't recognise typescript definition here
 /* eslint-disable react/prop-types */
 import * as React from "react";
-import { StyleSheet, View } from "react-native";
+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 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 +25,7 @@ const styles = StyleSheet.create({
   },
   fullScreenOverlay: {
     ...StyleSheet.absoluteFillObject,
-    backgroundColor: colors.overlay,
+    backgroundColor: defaultColors.overlay,
   },
   gradientOverlay: {
     position: "absolute",
@@ -34,53 +36,120 @@ 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(() => {
-    const fetchColors = async () => {
-      if (image) {
-        try {
-          const palette = await getPalettes(image);
+  const [backgroundColorAnim] = React.useState(new Animated.Value(0)); // from 0 to 1
+  const [gradientOpacityAnim] = React.useState(new Animated.Value(0)); // from 0 to 1
 
-          const colors = palette.map(
-            (color: { r: number; g: number; b: number }) =>
-              `rgb(${color.r}, ${color.g}, ${color.b})`
-          );
+  useEffect(() => {
+    const animateColors = () => {
+      Animated.timing(backgroundColorAnim, {
+        toValue: 1,
+        duration: 500,
+        useNativeDriver: false,
+      }).start();
 
-          setGradientColors(colors.slice(0, 2));
+      Animated.timing(gradientOpacityAnim, {
+        toValue: 1,
+        duration: 500,
+        useNativeDriver: false,
+      }).start();
+    };
 
-          const dominant = await getDominantColor(image);
-          setDominantColor(`rgb(${dominant.r}, ${dominant.g}, ${dominant.b})`);
+    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) {
-          setGradientColors([
-            colors.defaultGradientStart,
-            colors.defaultGradientEnd,
-          ]);
+          try {
+            const { gradientColors, dominantColor } =
+              await fetchPaletteAndDominantColor(fallbackUrl);
+
+            setGradientColors(gradientColors);
+            setDominantColor(dominantColor);
+            animateColors();
+          } catch {
+            setGradientColors([
+              defaultColors.defaultGradientStart,
+              defaultColors.defaultGradientEnd,
+            ]);
 
-          setDominantColor(defaultColor);
+            setDominantColor(defaultColor);
+          }
         }
+      } else {
+        setGradientColors([
+          defaultColors.defaultGradientStart,
+          defaultColors.defaultGradientEnd,
+        ]);
+
+        setDominantColor(defaultColor);
       }
     };
 
     fetchColors();
-  }, [image, defaultColor]);
+  }, []);
+
+  const interpolatedBackgroundColor = backgroundColorAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["black", dominantColor],
+  });
 
   return (
-    <View style={[styles.container, { backgroundColor: dominantColor }]}>
+    <Animated.View
+      style={[
+        styles.container,
+        { backgroundColor: interpolatedBackgroundColor },
+      ]}
+    >
       <View style={styles.fullScreenOverlay} />
-      <LinearGradient colors={gradientColors} style={styles.gradientOverlay} />
+
+      <Animated.View
+        style={[styles.gradientOverlay, { opacity: gradientOpacityAnim }]}
+      >
+        <LinearGradient
+          colors={gradientColors}
+          style={StyleSheet.absoluteFill}
+        />
+      </Animated.View>
+
       {children}
-    </View>
+    </Animated.View>
   );
 };

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,21 +1,31 @@
-export const toTypeString = (obj) => {
-  switch (typeof obj) {
-    case "object":
-      return obj instanceof Date ? obj.toISOString() : JSON.stringify(obj); // object, null
-    case "undefined":
-      return "";
-    default:
-      // boolean, number, string
-      return obj.toString();
-  }
+import queryString from "query-string";
+import { dayjs } from "@applicaster/zapp-react-native-utils/dateUtils";
+
+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 stringsOnlyObject = (obj) => {
-  const strObj = {};
+export const addQueryParam = (
+  baseUrl: string,
+  paramName: string,
+  paramValue: string | number
+) => {
+  const [urlWithoutQuery, query] = baseUrl.split("?");
+
+  const parsedQuery = queryString.parse(query);
+
+  parsedQuery[paramName] = paramValue.toString();
 
-  Object.keys(obj).forEach((x) => {
-    strObj[x] = toTypeString(obj[x]);
-  });
+  const updatedQueryString = queryString.stringify(parsedQuery);
+
+  return `${urlWithoutQuery}?${updatedQueryString}`;
+};
 
-  return strObj;
+export const isValidDate = (dateString: string | undefined): boolean => {
+  return (
+    typeof dateString === "string" &&
+    dateString.trim() !== "" &&
+    dayjs.utc(dateString).isValid()
+  );
 };

package/src/Player/Utils/index.tsx

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

package/src/Player/index.tsx

@@ -4,7 +4,7 @@
 import React from "react";
 import * as R from "ramda";
 
-import { findNodeHandle, NativeModules, StyleSheet, View } from "react-native";
+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";
 
@@ -36,15 +36,13 @@ 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";
-
-const RNPlayerManager = {
-  QuickBrickPlayerPlugin: isApplePlatform()
-    ? NativeModules.PlayerModule
-    : NativeModules.QuickBrickDefaultPlayerModule,
-  KalturaPlayerPlugin: isApplePlatform()
-    ? NativeModules.KalturaPlayerModule
-    : NativeModules.QBKalturaPlayerModule,
-};
+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";
+import { RNPlayerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/nativePlayerManager";
 
 const styles = StyleSheet.create({
   container: { flex: 1 },
@@ -55,6 +53,7 @@ const styles = StyleSheet.create({
     position: "absolute",
     zIndex: 1,
   },
+  playerSize: { width: "100%", height: "100%" },
 });
 
 const logger = createLogger({
@@ -87,7 +86,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,
 
@@ -113,8 +112,6 @@ export default class VideoPlayer extends React.Component<
   }
 
   componentWillUnmount() {
-    this.stopBackgroundPlayback();
-
     this.playbackStarted = false;
     this.handleAnalyticEvent(GENERAL_EVENT.session_end);
     this.onPlayerClosed();
@@ -159,6 +156,11 @@ export default class VideoPlayer extends React.Component<
     }
   }
 
+  // For close button
+  public closeNativePlayer = () => {
+    this.stopBackgroundPlayback();
+  };
+
   getPlayNextData = () => this.props.playNextData as PlayNextData;
 
   /**
@@ -337,7 +339,7 @@ export default class VideoPlayer extends React.Component<
    * Sets either subtitle language, or audio language if we have a selected a new locale.
    * If no locale is set it defaults to system language for audio, and leaves subtitles unaltered.
    */
-  setLanguage = (selected = null) => {
+  selectTrack = (selected = null) => {
     const { trackType, id, language } = selected || {};
 
     const isOff = language === "Off";
@@ -368,6 +370,10 @@ export default class VideoPlayer extends React.Component<
     }
   };
 
+  setPlaybackRate = (rate = 1.0) => {
+    this.setState({ rate });
+  };
+
   getCurrentTime = () => {
     return this.state.currentTime;
   };
@@ -551,6 +557,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();
@@ -754,8 +780,6 @@ export default class VideoPlayer extends React.Component<
 
   render() {
     const {
-      castAction,
-      controls,
       docked,
       entry,
       fullscreen,
@@ -765,9 +789,15 @@ export default class VideoPlayer extends React.Component<
       isTabletPortrait,
       muted,
       style,
+      castAction,
+      controller,
+      startComponentsAnimation,
     } = 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") ||
@@ -812,17 +842,35 @@ 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 &&
+      !startComponentsAnimation &&
+      !docked &&
+      !castAction?.state?.connected;
+
+    platformSpecificProps = {
+      ...platformSpecificProps,
+      controls: shouldUseNativeControls,
+    };
+
     const pictureInPictureEnabled =
       this.props.pluginConfiguration?.pictureInPictureEnabled;
 
@@ -830,7 +878,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 +886,7 @@ export default class VideoPlayer extends React.Component<
       nowPlayingEnabled,
       paused,
       seek,
+      rate,
       textTrackId,
       liveSeekingEnabled,
       liveCatchUpEnabled,
@@ -884,22 +932,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 +1016,7 @@ export default class VideoPlayer extends React.Component<
         !needToShowPlayNextOverlay &&
         this.props.mode !== "PIP";
 
-      if (controls === true) {
+      if (shouldUseNativeControls) {
         return null;
       }
 
@@ -992,6 +1035,7 @@ export default class VideoPlayer extends React.Component<
           extraInfoText={castAction?.state?.friendlyStatus}
           controlsAlwaysVisible={castAction?.state?.connected}
           playNextData={this.getPlayNextData()}
+          nativeControls={!!controls}
         />
       ) : null;
     };
@@ -1005,10 +1049,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,
@@ -1024,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}>
@@ -1061,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 && (
@@ -1077,17 +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()}
                     >
-                      {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 +1176,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>