@applicaster/quick-brick-player 12.0.0-alpha.4840257570 → 12.0.0-alpha.4885205607

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "12.0.0-alpha.4840257570",
+  "version": "12.0.0-alpha.4885205607",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -36,11 +36,11 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/quick-brick-mobile-transport-controls": "12.0.0-rc.58",
-    "@applicaster/quick-brick-tv-transport-controls": "12.0.0-alpha.4840257570",
-    "@applicaster/zapp-react-native-tvos-app": "12.0.0-alpha.4840257570",
-    "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.4840257570",
-    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.4840257570",
+    "@applicaster/quick-brick-mobile-transport-controls": "12.0.0-rc.96",
+    "@applicaster/quick-brick-tv-transport-controls": "12.0.0-rc.100",
+    "@applicaster/zapp-react-native-tvos-app": "12.0.0-alpha.4885205607",
+    "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.4885205607",
+    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.4885205607",
     "keymirror": "^0.1.1",
     "query-string": "7.1.3",
     "react-native-web-linear-gradient": "1.1.2",

package/src/CellPlayer/Assets/AssetsComponent.tsx

@@ -10,66 +10,76 @@ type Asset = string | undefined;
 const isCurrentPlayer = (playerId) =>
   LiveImageManager.instance.getCurrentlyPlaying()?.playerId === playerId;
 
+const liveImageButtonsListenerKey = "live-image-buttons";
+
 const usePlayPauseListeners = (playerId, player, asset, setImageUri) =>
   useEffect(() => {
     if (playerId && player) {
-      if (player.playerState.isReadyToPlay) {
-        if (player.playerState.isPaused) {
-          setImageUri(asset.active);
-        } else {
-          setImageUri(asset.inactive);
-        }
+      setImageUri(null);
+
+      return;
+    }
+
+    if (player.playerState.isReadyToPlay) {
+      if (player.playerState.isPaused) {
+        setImageUri(asset.active);
+      } else {
+        setImageUri(asset.inactive);
       }
+    }
 
-      return player.addListener({
-        id: "live-image-buttons",
-        listener: {
-          onPlayerResume: () => {
-            setImageUri(asset.inactive);
-          },
-          onPlayerPause: () => {
-            setImageUri(asset.active);
-          },
-          onPlayerClose: () => {
-            setImageUri(null);
-          },
-          onLoad() {
-            setImageUri(asset.inactive);
-          },
+    return player.addListener({
+      id: liveImageButtonsListenerKey,
+      listener: {
+        onPlayerResume: () => {
+          setImageUri(asset.inactive);
         },
-      });
-    }
+        onPlayerPause: () => {
+          setImageUri(asset.active);
+        },
+        onPlayerClose: () => {
+          setImageUri(null);
+        },
+        onLoad() {
+          setImageUri(asset.inactive);
+        },
+      },
+    });
   }, [player, playerId, asset]);
 
 const useMuteUnmuteListeners = (playerId, player, asset, setImageUri) =>
   useEffect(() => {
-    if (playerId && player) {
-      // active action = muted, inactive = unmuted
-      return player.addListener({
-        id: "live-image-buttons",
-        listener: {
-          onPlayerMute: () => {
-            if (isCurrentPlayer(playerId)) {
-              setImageUri(asset.active);
-            }
-          },
-          onPlayerUnmute: () => {
-            if (isCurrentPlayer(playerId)) {
-              setImageUri(asset.inactive);
-            }
-          },
-          onLoad() {
-            setImageUri(player?.getIsMuted() ? asset.active : asset.inactive);
-          },
-          onPlayerClose: () => {
-            setImageUri(null);
-          },
-          onVideoEnd: () => {
-            setImageUri(null);
-          },
-        },
-      });
+    if (!player || !playerId) {
+      setImageUri(null);
+
+      return;
     }
+
+    // active action = muted, inactive = unmuted
+    return player.addListener({
+      id: liveImageButtonsListenerKey,
+      listener: {
+        onPlayerMute: () => {
+          if (isCurrentPlayer(playerId)) {
+            setImageUri(asset.active);
+          }
+        },
+        onPlayerUnmute: () => {
+          if (isCurrentPlayer(playerId)) {
+            setImageUri(asset.inactive);
+          }
+        },
+        onLoad() {
+          setImageUri(player?.getIsMuted() ? asset.active : asset.inactive);
+        },
+        onPlayerClose: () => {
+          setImageUri(null);
+        },
+        onVideoEnd: () => {
+          setImageUri(null);
+        },
+      },
+    });
   }, [player, playerId, asset]);
 
 const useListeners = MUTED_USAGE

package/src/CellPlayer/ContextProvider.tsx

@@ -21,7 +21,7 @@ const playActionCallback = (player) => {
   }
 };
 
-const invokeAction = () => {
+const invokeAction = (_item: ZappEntry, _object) => {
   const actionCallback = MUTED_USAGE ? muteActionCallback : playActionCallback;
   // We only allow one player to be present at a time
   const player = LiveImageManager.instance.getCurrentlyPlaying()?.player;
@@ -29,6 +29,54 @@ const invokeAction = () => {
   actionCallback(player);
 };
 
+// Not exported because currently the is no way
+// to subscribe to the action availability change.
+// We currently return a null state to disable the action.
+// eslint-disable-next-line unused-imports/no-unused-vars
+const isActionAvailable = (item: ZappEntry) => {
+  return (
+    LiveImageManager.instance.getCurrentlyPlaying()?.getPlayer().entry.id ===
+    item.id
+  );
+};
+
+const addListener = (
+  entryId: string,
+  listener: CellActionStateListenerFunction
+) => {
+  const callback = (event: Record<string, any>) => {
+    if (event.entry?.id !== entryId) {
+      return;
+    }
+
+    const player = LiveImageManager.instance.getCurrentlyPlaying()?.getPlayer();
+
+    if (!player || player.entry?.id !== entryId) {
+      listener(null);
+
+      return;
+    }
+
+    const actionState = MUTED_USAGE ? player.getIsMuted() : player.isPaused();
+
+    listener({
+      state: actionState ? 1 : 0,
+      label: "",
+      asset: AssetComponent,
+    });
+  };
+
+  return LiveImageManager.instance.addListener({
+    id: `cell-player-${entryId}`,
+    listener: {
+      onEnd: callback,
+      onStart: callback,
+      onError: callback,
+      onDestroy: callback,
+    },
+  });
+};
+
 const emptyState = [];
 
 const initialEntryState = () => ({
@@ -46,6 +94,7 @@ export function ContextProvider(Component: ReactComponent<any>) {
         state: emptyState,
         invokeAction,
         initialEntryState,
+        addListener,
       }),
       [invokeAction, initialEntryState]
     );

package/src/Player/AudioLayer/AudioPlayerWrapper.tsx

@@ -388,6 +388,7 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
         <AnimationComponent
           animationType={ComponentAnimationType.moveUpComponent}
           additionalData={{ saveArea: true }}
+          style={Styles.playerContainer}
         >
           <AnimatedScrollModal>
             <View style={Styles.playerContainer} onLayout={onLayout}>

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

@@ -419,6 +419,7 @@ export default function DefaultLayout(props: LayoutProps) {
                   startTimestamp={startTimestamp}
                   endTimestamp={endTimestamp}
                   isDateBasedLiveContent={isDateBasedLiveContent}
+                  onSkipLive={onSkipLive}
                 />
 
                 {showCounter && timeLeft >= 0 && (

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

@@ -117,7 +117,6 @@ const playerDimensionsStyle = (
 });
 
 const animatedContainerStyle = (docked: boolean): ViewStyle => ({
-  top: docked ? 2 : null,
   position: "absolute",
   width: "100%",
   zIndex: docked ? 1 : -1,
@@ -245,17 +244,19 @@ export default function DockedLayout(props: LayoutProps) {
         animatedContainerStyle(isActiveGesture || layoutState.docked),
       ]}
     >
-      {!playerState.isLive && layoutState.docked && (
-        <ProgressBar
-          content={entry}
-          value={value}
-          visible={visible}
-          layoutState={layoutState}
-          onPlayerSeek={onPlayerSeek}
-          playerState={playerState}
-          docked
-        />
-      )}
+      {!playerState.isLive &&
+        (layoutState.docked || startComponentsAnimation) && (
+          <ProgressBar
+            content={entry}
+            value={value}
+            visible={visible}
+            layoutState={layoutState}
+            onPlayerSeek={onPlayerSeek}
+            playerState={playerState}
+            startComponentsAnimation={startComponentsAnimation}
+            docked
+          />
+        )}
 
       <View style={styles.content}>
         <View

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

@@ -1,7 +1,6 @@
-// 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";
@@ -11,7 +10,7 @@ type MagicBGProps = {
   image: string;
   fallbackUrl?: string;
   defaultColor: string;
-  colors: string[]; // Updated to type string[] as it holds hex values
+  colors: string[];
 };
 
 const defaultColors = {
@@ -66,31 +65,46 @@ export const MagicBG: React.FC<MagicBGProps> = ({
     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 () => {
-      // 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
+        setGradientColors(colors.slice(0, 2));
+        setDominantColor(colors[0]);
+        animateColors();
       } else if (image) {
-        // If no colors, try fetching from image
         try {
           const { gradientColors, dominantColor } =
             await fetchPaletteAndDominantColor(image);
 
           setGradientColors(gradientColors);
           setDominantColor(dominantColor);
+          animateColors();
         } catch (error) {
-          // If image fetch fails, try fallback URL
           try {
             const { gradientColors, dominantColor } =
               await fetchPaletteAndDominantColor(fallbackUrl);
 
             setGradientColors(gradientColors);
             setDominantColor(dominantColor);
+            animateColors();
           } catch {
-            // If everything fails, use default color
             setGradientColors([
               defaultColors.defaultGradientStart,
               defaultColors.defaultGradientEnd,
@@ -100,7 +114,6 @@ export const MagicBG: React.FC<MagicBGProps> = ({
           }
         }
       } else {
-        // If no image or colors, use default color
         setGradientColors([
           defaultColors.defaultGradientStart,
           defaultColors.defaultGradientEnd,
@@ -113,11 +126,30 @@ export const MagicBG: React.FC<MagicBGProps> = ({
     fetchColors();
   }, []);
 
+  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/Utils/Utils.ts

@@ -22,6 +22,10 @@ export const addQueryParam = (
   return `${urlWithoutQuery}?${updatedQueryString}`;
 };
 
-export const isValidDate = (dateString: string): boolean => {
-  return dateString.trim() !== "" && dayjs.utc(dateString).isValid();
+export const isValidDate = (dateString: string | undefined): boolean => {
+  return (
+    typeof dateString === "string" &&
+    dateString.trim() !== "" &&
+    dayjs.utc(dateString).isValid()
+  );
 };

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";
 
@@ -42,15 +42,7 @@ import {
   AnimationComponent,
   ComponentAnimationType,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
-
-const RNPlayerManager = {
-  QuickBrickPlayerPlugin: isApplePlatform()
-    ? NativeModules.PlayerModule
-    : NativeModules.QuickBrickDefaultPlayerModule,
-  KalturaPlayerPlugin: isApplePlatform()
-    ? NativeModules.KalturaPlayerModule
-    : NativeModules.QBKalturaPlayerModule,
-};
+import { RNPlayerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/nativePlayerManager";
 
 const styles = StyleSheet.create({
   container: { flex: 1 },
@@ -120,8 +112,6 @@ export default class VideoPlayer extends React.Component<
   }
 
   componentWillUnmount() {
-    this.stopBackgroundPlayback();
-
     this.playbackStarted = false;
     this.handleAnalyticEvent(GENERAL_EVENT.session_end);
     this.onPlayerClosed();
@@ -166,6 +156,11 @@ export default class VideoPlayer extends React.Component<
     }
   }
 
+  // For close button
+  public closeNativePlayer = () => {
+    this.stopBackgroundPlayback();
+  };
+
   getPlayNextData = () => this.props.playNextData as PlayNextData;
 
   /**
@@ -340,11 +335,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) => {
     const { trackType, id, language } = selected || {};
 
     const isOff = language === "Off";
@@ -862,7 +853,7 @@ export default class VideoPlayer extends React.Component<
       !!this.props.controller?.supportsNativeControls?.();
 
     const controls = isAppleTV()
-      ? supportsNativeControls && !isInlineTV && !this.getPlayNextData()
+      ? (supportsNativeControls && !isInlineTV) || !!this.getPlayNextData()
       : supportsNativeControls && !this.getPlayNextData();
 
     const shouldUseNativeControls =
@@ -998,7 +989,13 @@ export default class VideoPlayer extends React.Component<
       ...androidLifecyclePiPEvents,
     };
 
-    const needToShowPlayNextOverlay = this.getPlayNextData() && !docked;
+    const needToShowPlayNextOverlay =
+      isTV() && this.getPlayNextData() && !docked;
+
+    const needToShowDefaultControls = !(
+      (controls && !castAction?.state?.connected) ||
+      this.getPlayNextData()
+    );
 
     const playerContainerStyles = isApplePlatform()
       ? styles.playerContainerBlack
@@ -1040,7 +1037,7 @@ export default class VideoPlayer extends React.Component<
           extraInfoText={castAction?.state?.friendlyStatus}
           controlsAlwaysVisible={castAction?.state?.connected}
           playNextData={this.getPlayNextData()}
-          nativeControls={!!controls}
+          needToShowDefaultControls={needToShowDefaultControls}
         />
       ) : null;
     };