@applicaster/zapp-react-native-ui-components 12.0.0-rc.20 → 12.0.0-rc.22

package/Components/MasterCell/SharedUI/CollapsibleTextContainer/index.ts

@@ -50,13 +50,17 @@ export const CollapsibleTextContainer = ({
         func: (data) => {
           const value = getValue("background_color");
 
-          // check if value is a reference to an extension
-          if (value.startsWith("extensions")) {
-            return pathOr(value, value.split("."), data);
-          } else {
-            // return default value
-            return additionalStyles.backgroundColor;
+          const valueFromData = pathOr(value, value.split("."), data);
+
+          if (
+            valueFromData &&
+            (valueFromData.startsWith("#") || valueFromData.startsWith("rgba("))
+          ) {
+            return valueFromData;
           }
+
+          // return default value
+          return additionalStyles.backgroundColor;
         },
         propName: "backgroundColor",
       },

package/Components/VideoLive/LiveImageManager.ts

@@ -6,6 +6,7 @@ import {
 import { setUserCellPlayerMutedPreference } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/userCellPlayerMutedPreference";
 import { loggerLiveImageManager } from "./loggerHelper";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { Component } from "react";
 
 const { log_debug, log_info, log_error } = loggerLiveImageManager;
 
@@ -36,7 +37,8 @@ type Position = {
 type LiveImageProps = {
   player: Player;
   playerId: string;
-  setMode: (type: LiveImageType) => void;
+  setMode?: (type: LiveImageType) => void;
+  component: Component;
   // TODO: ...primary, powerCell, tvGallery, etc.
   // type: string;
 };
@@ -164,7 +166,7 @@ export class LiveImageManager implements PlayerLifecycleListener {
 
     // Fake close event, because we unmount native view
     item.player?.onPlayerClose();
-    item.setMode(LiveImageType.Image);
+    item.setMode?.(LiveImageType.Image);
 
     if (item === this.currentlyPlaying) {
       this.currentlyPlaying = null;
@@ -191,8 +193,7 @@ export class LiveImageManager implements PlayerLifecycleListener {
     }
 
     this.currentlyPlaying = item;
-
-    item.setMode(LiveImageType.Video);
+    item.setMode?.(LiveImageType.Video);
 
     if (item.player.playerState.isReadyToPlay) {
       item.player.play();
@@ -209,7 +210,7 @@ export class LiveImageManager implements PlayerLifecycleListener {
     this.pauseItem(item);
   };
 
-  public onLiveImageCompleted = (item: LiveImage) => {
+  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
   };
@@ -255,7 +256,6 @@ export class LiveImageManager implements PlayerLifecycleListener {
 
   onPrimaryPlayerClosed = () => {
     const playerItem = this.findNextPlayableItem();
-
     log_info("onPrimaryPlayerClosed: starting to play visible live-image");
 
     this.currentlyPlaying = null;
@@ -374,7 +374,7 @@ export class LiveImageManager implements PlayerLifecycleListener {
 
       // TODO: ...Maybe player some other item
     } else {
-      item.setMode(LiveImageType.Image);
+      item.setMode?.(LiveImageType.Image);
     }
 
     // Prevent receiving onEnd event from both `close` and `end` player events
@@ -390,12 +390,25 @@ export class LiveImageManager implements PlayerLifecycleListener {
   };
 
   onLiveImageError = (item: LiveImage, error: Error) => {
-    item.setMode(LiveImageType.Image);
+    item.setMode?.(LiveImageType.Image);
 
     const currentItem = this.currentlyPlaying;
 
+    log_debug(
+      `onLiveImageError: error: ${error.message}, live-image ${playerInfo(
+        item.player
+      )}, currentPlayingId: ${
+        this.currentlyPlaying?.playerId
+      }, primaryPlayerId: ${this.primaryPlayer?.playerId}`
+    );
+
     if (currentItem === item) {
       this.currentlyPlaying = null;
+
+      log_debug(
+        `onLiveImageError: currentitem: ${currentItem.playerId} was removed`
+      );
+
       // TODO: ...Maybe player some other item
     }
 
@@ -461,12 +474,13 @@ export class LiveImage implements QuickBrickPlayer.SharedPlayerCallBacks {
   };
 
   readonly playerId: string;
+  readonly component: Component;
 
   constructor(props: LiveImageProps) {
     this.player = props.player;
     this.setMode = props.setMode;
     this.playerId = this.player.playerId;
-
+    this.component = props.component;
     this.player.addListener({ id: "live-image", listener: this });
   }
 

package/Components/VideoLive/PlayerLiveImageComponent.tsx

@@ -1,7 +1,6 @@
 // /// <reference types="@applicaster/applicaster-types" />
 //
 import * as React from "react";
-import * as R from "ramda";
 
 import { AppState, AppStateStatus } from "react-native";
 import { TrackedView } from "../TrackedView";
@@ -9,7 +8,6 @@ import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks/l
 
 import { playerFactory } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/playerFactory";
 
-import { BufferAnimation } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/BufferAnimation";
 import {
   isApplePlatform,
   isTV,
@@ -26,6 +24,7 @@ import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerM
 import { PlayerRole } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/conts";
 import { getAutoplaySettings } from "./utils";
 import { isString } from "@applicaster/zapp-react-native-utils/stringUtils";
+import { BufferAnimation } from "../PlayerContainer/BufferAnimation";
 
 const { log_error } = loggerLiveImageComponent;
 
@@ -55,70 +54,66 @@ const PlayerLiveImageComponent = (props: Props) => {
     isTV() ? false : getUserCellPlayerMutedPreference(props.audioMutedByDefault)
   );
 
-  const [PlayerViewComponent, setPlayerViewComponent] = React.useState(null);
-  const Player: any = PlayerViewComponent || BufferAnimation;
-
   const ref = React.useRef(null);
 
-  const liveImageItem: LiveImage = React.useMemo(() => {
-    /**
-     * Debounced setMode function.
-     *
-     * Sets to video with a 1sec delay. Set to image happens immediately and cancels the timeout.
-     *
-     * @param type video or image
-     */
-    const setModeDebounced = (type: LiveImageType) => {
-      if (type === LiveImageType.Video) {
-        if (type === mode) {
-          return;
-        }
-
-        timeoutRef.current = setTimeout(() => {
-          setMode(type);
-        }, 1000) as unknown as NodeJS.Timeout;
-      } else {
-        if (timeoutRef.current) {
-          clearTimeout(timeoutRef.current);
-          timeoutRef.current = null;
-        }
+  /**
+   * Debounced setMode function.
+   *
+   * Sets to video with a 1sec delay. Set to image happens immediately and cancels the timeout.
+   *
+   * @param type video or image
+   */
+  const setModeDebounced = React.useCallback((type: LiveImageType) => {
+    if (type === LiveImageType.Video) {
+      if (type === mode) {
+        return;
+      }
 
+      timeoutRef.current = setTimeout(() => {
         setMode(type);
+      }, 1000) as unknown as NodeJS.Timeout;
+    } else {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
       }
-    };
 
+      setMode(type);
+    }
+  }, [mode]);
+
+  const { screenConfig, playerPluginId } = props;
+
+  const liveImageItem: LiveImage = React.useMemo(() => {
     const playerFactoryItem = playerFactory({
       player: ref,
-      listener: props as Record<string, any>,
       playerId,
       autoplay: false,
       entry: item,
-      muted,
-      playerPluginId: props?.playerPluginId,
-      screenConfig: props?.screenConfig,
+      muted, // Initial muted state, not needed in dependencies
+      playerPluginId: playerPluginId,
+      screenConfig: screenConfig,
       playerRole: PlayerRole.Cell,
     });
 
-    const Component = playerFactoryItem?.Component;
-
-    if (!R.isNil(Component) && Component !== PlayerViewComponent) {
-      setPlayerViewComponent(Component);
-    }
-
     if (playerFactoryItem) {
       return new LiveImage({
         playerId,
         player: playerFactoryItem.controller,
-        setMode: setModeDebounced,
+        component: playerFactoryItem?.Component
       });
     } else {
       throw new Error("Player factory item is null");
     }
-  }, [playerId, item?.id]);
+  }, [playerId, item, playerPluginId, screenConfig]);
+
+  React.useEffect(() => {
+    liveImageItem.setMode = setModeDebounced;
+  }, [setModeDebounced, liveImageItem]);
 
   const { start, end } = React.useMemo(
     () => getAutoplaySettings(item),
-    [item?.id]
+    [item]
   );
 
   const controller = liveImageItem.getPlayer();
@@ -145,14 +140,14 @@ const PlayerLiveImageComponent = (props: Props) => {
     const unregister = LiveImageManager.instance.register(liveImageItem);
 
     return () => {
-      unregister();
-
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
         timeoutRef.current = null;
       }
+
+      unregister();
     };
-  }, [liveImageItem, item, timeoutRef.current]);
+  }, [item, liveImageItem]);
 
   React.useEffect(() => {
     if (!player) {
@@ -244,7 +239,7 @@ const PlayerLiveImageComponent = (props: Props) => {
 
   const onPositionUpdated = React.useCallback(
     (data) => {
-      const normalizedRect = (rect) => {
+      const normalizedRect = (rect: {left: number, right: number, top: number, bottom: number }) => {
         if (!rect) {
           return null;
         }
@@ -275,7 +270,7 @@ const PlayerLiveImageComponent = (props: Props) => {
         LiveImageManager.instance.checkPlayerPosition(liveImageItem);
       }
     },
-    [liveImageItem, item?.id, playerId, dimensions]
+    [liveImageItem, dimensions]
   );
 
   const platformSpecificProps = isApplePlatform()
@@ -286,6 +281,7 @@ const PlayerLiveImageComponent = (props: Props) => {
   const isVideoMode = mode === LiveImageType.Video;
   const isBackgroundImageVisible = isImageMode || !isReadyToPlay;
   const videoStyles = { ...style, position: "absolute", zIndex: -100 };
+  const Player: any = liveImageItem.component || BufferAnimation;
 
   return (
     <TrackedView

package/package.json

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