@applicaster/quick-brick-player 12.0.0-rc.13 → 12.0.0-rc.130

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "12.0.0-rc.13",
+  "version": "12.0.0-rc.130",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -36,12 +36,13 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/quick-brick-mobile-transport-controls": "12.0.0-rc.11",
-    "@applicaster/quick-brick-tv-transport-controls": "11.0.0-rc.133",
-    "@applicaster/zapp-react-native-tvos-app": "12.0.0-rc.13",
-    "@applicaster/zapp-react-native-ui-components": "12.0.0-rc.13",
-    "@applicaster/zapp-react-native-utils": "12.0.0-rc.13",
+    "@applicaster/quick-brick-mobile-transport-controls": "12.0.0-rc.118",
+    "@applicaster/quick-brick-tv-transport-controls": "12.0.0-rc.112",
+    "@applicaster/zapp-react-native-tvos-app": "12.0.0-rc.130",
+    "@applicaster/zapp-react-native-ui-components": "12.0.0-rc.130",
+    "@applicaster/zapp-react-native-utils": "12.0.0-rc.130",
     "keymirror": "^0.1.1",
+    "query-string": "7.1.3",
     "react-native-web-linear-gradient": "1.1.2",
     "shaka-player": "4.3.5",
     "typeface-montserrat": "^0.0.54",

package/src/CellPlayer/Assets/AssetsComponent.tsx

@@ -1,74 +1,85 @@
 import React, { useEffect, useState } from "react";
-import { Image, StyleSheet, View } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
 import { MUTED_USAGE } from "../const";
 import { LiveImageManager } from "@applicaster/zapp-react-native-ui-components/Components/VideoLive/LiveImageManager";
+import { QBImage as Image } from "@applicaster/zapp-react-native-ui-components/Components/Image";
 
 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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { memo } from "react";
 import { LiveImageManager } from "@applicaster/zapp-react-native-ui-components/Components/VideoLive/LiveImageManager";
 
 import { Context } from "./Context";
@@ -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 = () => ({
@@ -38,7 +86,7 @@ const initialEntryState = () => ({
 });
 
 export function ContextProvider(Component: ReactComponent<any>) {
-  return function DefaultPlayerProvider({
+  return memo(function DefaultPlayerProvider({
     children,
   }: CellActionContextProviderProps) {
     const contextValue = React.useMemo(
@@ -46,6 +94,7 @@ export function ContextProvider(Component: ReactComponent<any>) {
         state: emptyState,
         invokeAction,
         initialEntryState,
+        addListener,
       }),
       [invokeAction, initialEntryState]
     );
@@ -55,5 +104,5 @@ export function ContextProvider(Component: ReactComponent<any>) {
         <Component>{children}</Component>
       </Context.Provider>
     );
-  };
+  });
 }

package/src/Player/AudioLayer/AudioDescription.tsx

@@ -3,7 +3,8 @@ import { Text, TextStyle, View } from "react-native";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 type AudioDescriptionProps = {
-  content: ZappEntry;
+  title: string | number;
+  summary: string | number;
   layoutState: {
     inline: boolean;
     docked: boolean;
@@ -78,8 +79,7 @@ const summaryStyles = (value: GetValue, prefix: string): TextStyle => ({
 });
 
 export const AudioDescription = (props: AudioDescriptionProps) => {
-  const { content, layoutState, value } = props;
-  const { title, summary } = content;
+  const { title, summary, layoutState, value } = props;
   const prefix = layoutState.docked ? "docked_player_" : "";
 
   return (