@applicaster/zapp-react-native-ui-components 12.0.0-rc.17 → 12.0.0-rc.19

package/Components/GeneralContentScreen/GeneralContentScreen.tsx

@@ -52,13 +52,13 @@ export const GeneralContentScreen = ({
       React.useState(actionsInitialStateSetters.length === 0);
 
     useEffect(() => {
-      log_info(
-        `ScreenContainer: starting to check river action provider ready, current status: ${riverActionProvidersReady}`,
-        { actionsInitialStateSetters }
-      );
-
       if (!riverActionProvidersReady) {
         if (actionsInitialStateSetters.length > 0) {
+          log_info(
+            "ScreenContainer: starting to check river action providers to initialize",
+            { actionsInitialStateSetters }
+          );
+
           allSettled(actionsInitialStateSetters).finally(() => {
             log_info(
               "ScreenContainer: action provider ready, completed. Starting to present screen"

package/Components/HandlePlayable/HandlePlayable.tsx

@@ -104,7 +104,7 @@ export function HandlePlayable({
   const [Player, playerModuleProperties] = getPlayer(item, state);
 
   const { module: CastPlugin } =
-    findPluginByIdentifier(CHROMECAST_PLUGIN_ID, state.plugins) || {};
+    findPluginByIdentifier(CHROMECAST_PLUGIN_ID, state.plugins, true) || {};
 
   const [playable, setPlayable] =
     React.useState<Nullable<PlayableComponent>>(null);

package/Components/TrackedView/index.tsx

@@ -17,9 +17,12 @@ type TrackedViewProps = {
 export const TrackedView = memo(function TrackedView(props: TrackedViewProps) {
   const children = props.children;
 
-  const onPositionUpdated = useCallback((event: TrackedViewNativeProps) => {
-    props?.onPositionUpdated(event.nativeEvent);
-  }, []);
+  const onPositionUpdated = useCallback(
+    (event: TrackedViewNativeProps) => {
+      props.onPositionUpdated(event.nativeEvent);
+    },
+    [props.onPositionUpdated]
+  );
 
   if (isTV()) {
     return <View {...(props as any)}>{children}</View>;

package/Components/VideoLive/LiveImageManager.ts

@@ -209,6 +209,11 @@ export class LiveImageManager implements PlayerLifecycleListener {
     this.pauseItem(item);
   };
 
+  public onLiveImageCompleted = (item: LiveImage) => {
+    // TODO: Notify listeners that player has died
+    // Do not try look for new playable, otherwise you will restart video finish to play
+  };
+
   public muteAll = () => {
     log_debug("muteAll");
 
@@ -235,6 +240,14 @@ export class LiveImageManager implements PlayerLifecycleListener {
     const playerItem = this.findNextPlayableItem();
 
     if (playerItem) {
+      if (!playerItem.isFullyVisible) {
+        log_error(
+          `checkPlayerPosition: trying to start playback currently invisible item: ${playerInfo(
+            playerItem.player
+          )}`
+        );
+      }
+
       // Will also check if it's item that already playing
       this.playLiveImage(playerItem);
     }

package/Components/VideoLive/PlayerLiveImageComponent.tsx

@@ -80,6 +80,7 @@ const PlayerLiveImageComponent = (props: Props) => {
       } else {
         if (timeoutRef.current) {
           clearTimeout(timeoutRef.current);
+          timeoutRef.current = null;
         }
 
         setMode(type);
@@ -127,6 +128,10 @@ const PlayerLiveImageComponent = (props: Props) => {
     ref.current = component;
   };
 
+  const onLiveImageCompleted = React.useCallback(() => {
+    LiveImageManager.instance.onLiveImageCompleted(liveImageItem);
+  }, [liveImageItem]);
+
   const onStop = React.useCallback(() => {
     LiveImageManager.instance.pauseLiveImage(liveImageItem);
   }, [liveImageItem]);
@@ -144,9 +149,10 @@ const PlayerLiveImageComponent = (props: Props) => {
 
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
       }
     };
-  }, [liveImageItem, item]);
+  }, [liveImageItem, item, timeoutRef.current]);
 
   React.useEffect(() => {
     if (!player) {
@@ -178,11 +184,12 @@ const PlayerLiveImageComponent = (props: Props) => {
           setMuted(false);
         },
         onPlayerClose: () => {
+          onLiveImageCompleted();
           setIsReady(false);
         },
       },
     });
-  }, [player, onStop]);
+  }, [player, onStop, onLiveImageCompleted, start, end]);
 
   React.useEffect(() => {
     const subscription = AppState.addEventListener(
@@ -233,40 +240,43 @@ const PlayerLiveImageComponent = (props: Props) => {
         };
       }
     }
-  }, [liveImageItem]);
+  }, [liveImageItem, playerId, controller]);
 
-  const onPositionUpdated = (data) => {
-    const normalizedRect = (rect) => {
-      if (!rect) {
-        return null;
-      }
+  const onPositionUpdated = React.useCallback(
+    (data) => {
+      const normalizedRect = (rect) => {
+        if (!rect) {
+          return null;
+        }
 
-      const { left, right, top, bottom } = rect;
+        const { left, right, top, bottom } = rect;
 
-      return {
-        left: left / dimensions.width,
-        right: right / dimensions.width,
-        top: top / dimensions.height,
-        bottom: bottom / dimensions.height,
-        centerX: (left + right) / 2 / dimensions.width,
-        centerY: (top + bottom) / 2 / dimensions.height,
+        return {
+          left: left / dimensions.width,
+          right: right / dimensions.width,
+          top: top / dimensions.height,
+          bottom: bottom / dimensions.height,
+          centerX: (left + right) / 2 / dimensions.width,
+          centerY: (top + bottom) / 2 / dimensions.height,
+        };
       };
-    };
 
-    liveImageItem.position = normalizedRect(data.rect);
+      liveImageItem.position = normalizedRect(data.rect);
 
-    const newIsFullyVisible = !!data.rect;
+      const newIsFullyVisible = !!data.rect;
 
-    if (liveImageItem.isFullyVisible !== newIsFullyVisible) {
-      liveImageItem.isFullyVisible = newIsFullyVisible;
+      if (liveImageItem.isFullyVisible !== newIsFullyVisible) {
+        liveImageItem.isFullyVisible = newIsFullyVisible;
 
-      liveImageItem.isFullyVisible
-        ? LiveImageManager.instance.onViewportEnter(liveImageItem)
-        : LiveImageManager.instance.onViewportLeave(liveImageItem);
-    } else {
-      LiveImageManager.instance.checkPlayerPosition(liveImageItem);
-    }
-  };
+        liveImageItem.isFullyVisible
+          ? LiveImageManager.instance.onViewportEnter(liveImageItem)
+          : LiveImageManager.instance.onViewportLeave(liveImageItem);
+      } else {
+        LiveImageManager.instance.checkPlayerPosition(liveImageItem);
+      }
+    },
+    [liveImageItem, item?.id, playerId, dimensions]
+  );
 
   const platformSpecificProps = isApplePlatform()
     ? { hideNativeControls: true, controls: false }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.0-rc.17",
+  "version": "12.0.0-rc.19",
   "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.17",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.17",
-    "@applicaster/zapp-react-native-redux": "12.0.0-rc.17",
-    "@applicaster/zapp-react-native-utils": "12.0.0-rc.17",
+    "@applicaster/applicaster-types": "12.0.0-rc.19",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.19",
+    "@applicaster/zapp-react-native-redux": "12.0.0-rc.19",
+    "@applicaster/zapp-react-native-utils": "12.0.0-rc.19",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",