@applicaster/zapp-react-native-ui-components 12.0.0-rc.98 → 12.0.0-rc.99

package/Components/MasterCell/DefaultComponents/ActionButton.tsx

@@ -53,6 +53,7 @@ export function ActionButton(props: Props) {
   const { item, action, asset, flavour = "flavour_1", cellUUID } = props;
   const actionContext = useActions(action?.identifier);
 
+  // TODO: add subscription API for action availability
   const actionDisabled =
     typeof actionContext?.isActionAvailable === "function" &&
     !actionContext.isActionAvailable(item);
@@ -68,7 +69,7 @@ export function ActionButton(props: Props) {
     if (actionDisabled || !actionContext) return;
 
     setActionState(actionContext.initialEntryState(item));
-  }, [actionDisabled, item?.id]);
+  }, [actionDisabled, item?.id, actionContext]);
 
   const onPress = useCallback(() => {
     actionContext.invokeAction(item, {

package/Components/VideoLive/PlayerLiveImageComponent.tsx

@@ -2,7 +2,7 @@
 //
 import * as React from "react";
 
-import { AppState, AppStateStatus } from "react-native";
+import { AppState, AppStateStatus, View } from "react-native";
 import { TrackedView } from "../TrackedView";
 import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks/layout";
 
@@ -25,8 +25,9 @@ import { PlayerRole } from "@applicaster/zapp-react-native-utils/appUtils/player
 import { getAutoplaySettings } from "./utils";
 import { isString } from "@applicaster/zapp-react-native-utils/stringUtils";
 import { BufferAnimation } from "../PlayerContainer/BufferAnimation";
+import { useEffect } from "react";
 
-const { log_error } = loggerLiveImageComponent;
+const { log_error, log_debug } = loggerLiveImageComponent;
 
 const isMeasurement = (item: ZappEntry) =>
   isString(item.id) && item.id.startsWith("pre-measurement-");
@@ -56,6 +57,7 @@ const PlayerLiveImageComponent = (props: Props) => {
   );
 
   const ref = React.useRef(null);
+  const trackViewRef = React.useRef(null);
 
   /**
    * Debounced setMode function.
@@ -86,6 +88,30 @@ const PlayerLiveImageComponent = (props: Props) => {
     [mode]
   );
 
+  const entryToViewIdMapping = React.useRef({});
+
+  useEffect(() => {
+    const nativeTag = trackViewRef.current?._nativeTag?.toString();
+
+    if (!nativeTag) {
+      return;
+    }
+
+    const prevValue = entryToViewIdMapping.current[nativeTag];
+
+    if (prevValue && prevValue.itemId !== item.id) {
+      if (mode === LiveImageType.Video) {
+        log_debug(
+          "Entry to view association changed, stopping current live image"
+        );
+
+        setMode(LiveImageType.Image);
+      }
+    }
+
+    entryToViewIdMapping.current[nativeTag] = { itemId: item.id };
+  }, [trackViewRef.current, item.id, mode]);
+
   const { screenConfig, playerPluginId } = props;
 
   const liveImageItem: LiveImage = React.useMemo(() => {
@@ -295,28 +321,30 @@ const PlayerLiveImageComponent = (props: Props) => {
       testId={`tracked-view-${playerId}-${item.title}`}
       onPositionUpdated={onPositionUpdated}
     >
-      {isVideoMode && (
-        <Player
-          autoplay={false}
-          ref={_assignRoot}
-          entry={item} // Must be passed first in list
-          style={videoStyles}
-          playerId={playerId}
-          muted={muted}
-          listener={controller?.getListener()}
-          resizeMode={"cover"}
-          {...platformSpecificProps}
-        />
-      )}
-      {
-        <AnimatedInOut
-          visible={isBackgroundImageVisible}
-          animationConfig={overlayFadeIn}
-          staticStyles={style}
-        >
-          <Image {...props} resizeMode="cover" style={style} applyMaxSize />
-        </AnimatedInOut>
-      }
+      <View ref={trackViewRef}>
+        {isVideoMode && (
+          <Player
+            autoplay={false}
+            ref={_assignRoot}
+            entry={item} // Must be passed first in list
+            style={videoStyles}
+            playerId={playerId}
+            muted={muted}
+            listener={controller?.getListener()}
+            resizeMode={"cover"}
+            {...platformSpecificProps}
+          />
+        )}
+        {
+          <AnimatedInOut
+            visible={isBackgroundImageVisible}
+            animationConfig={overlayFadeIn}
+            staticStyles={style}
+          >
+            <Image {...props} resizeMode="cover" style={style} applyMaxSize />
+          </AnimatedInOut>
+        }
+      </View>
     </TrackedView>
   );
 };

package/Components/VideoLive/__tests__/__snapshots__/PlayerLiveImageComponent.test.tsx.snap

@@ -5,33 +5,35 @@ exports[`PlayerLiveImageComponent should render correctly with default props 1`]
   onPositionUpdated={[Function]}
   testId="tracked-view-player1-Test"
 >
-  <View
-    collapsable={false}
-    style={
-      Object {
-        "opacity": 1,
-      }
-    }
-  >
-    <Image
-      applyMaxSize={true}
-      audioMutedByDefault={false}
-      imageKey="image1"
-      item={
+  <View>
+    <View
+      collapsable={false}
+      style={
         Object {
-          "id": "1",
-          "title": "Test",
-          "type": Object {
-            "value": "",
-          },
+          "opacity": 1,
         }
       }
-      onError={[Function]}
-      playerId="player1"
-      resizeMode="cover"
-      screenConfig={Object {}}
-      style={Object {}}
-    />
+    >
+      <Image
+        applyMaxSize={true}
+        audioMutedByDefault={false}
+        imageKey="image1"
+        item={
+          Object {
+            "id": "1",
+            "title": "Test",
+            "type": Object {
+              "value": "",
+            },
+          }
+        }
+        onError={[Function]}
+        playerId="player1"
+        resizeMode="cover"
+        screenConfig={Object {}}
+        style={Object {}}
+      />
+    </View>
   </View>
 </TrackedView>
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.0-rc.98",
+  "version": "12.0.0-rc.99",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -34,10 +34,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.0-rc.98",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.98",
-    "@applicaster/zapp-react-native-redux": "12.0.0-rc.98",
-    "@applicaster/zapp-react-native-utils": "12.0.0-rc.98",
+    "@applicaster/applicaster-types": "12.0.0-rc.99",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.99",
+    "@applicaster/zapp-react-native-redux": "12.0.0-rc.99",
+    "@applicaster/zapp-react-native-utils": "12.0.0-rc.99",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",