@applicaster/zapp-react-native-ui-components 12.0.0-rc.12 → 12.0.0-rc.120

package/Components/VideoLive/LiveImageManager.ts

@@ -6,10 +6,15 @@ 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;
 
-export type LiveImageManagerEvent = "onEnd" | "onStart" | "onError";
+export type LiveImageManagerEvent =
+  | "onEnd"
+  | "onStart"
+  | "onError"
+  | "onDestroy";
 
 export type LiveImageManagerListenerData = {
   id: string;
@@ -36,7 +41,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;
 };
@@ -100,6 +106,16 @@ export class LiveImageManager implements PlayerLifecycleListener {
     }
 
     this.items = this.items.filter((i) => i !== item);
+
+    this.invokeListenersUpdate({
+      callbackName: "onDestroy",
+      event: {
+        item,
+        playerId: this.currentlyPlaying?.playerId,
+        primaryPlayerId: this.primaryPlayer?.playerId,
+        entry: item.getPlayer().getEntry(),
+      },
+    });
   };
 
   public onViewportEnter = (item: LiveImage) => {
@@ -164,7 +180,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 +207,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,6 +224,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 +255,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);
     }
@@ -242,7 +270,6 @@ export class LiveImageManager implements PlayerLifecycleListener {
 
   onPrimaryPlayerClosed = () => {
     const playerItem = this.findNextPlayableItem();
-
     log_info("onPrimaryPlayerClosed: starting to play visible live-image");
 
     this.currentlyPlaying = null;
@@ -338,6 +365,7 @@ export class LiveImageManager implements PlayerLifecycleListener {
         item,
         playerId: this.currentlyPlaying?.playerId,
         primaryPlayerId: this.primaryPlayer?.playerId,
+        entry: item.getPlayer().getEntry(),
       },
     });
   };
@@ -356,12 +384,12 @@ export class LiveImageManager implements PlayerLifecycleListener {
     // TODO: This branch was used when we had play button to toggle replay.
     //  Now we mute button instead but we keep it just in case.
     if (IS_ALLOWED_REPLAY && !isTV() && isCurrentItemEnded) {
-      this.currentlyPlaying.player.seekTo(0);
-      this.currentlyPlaying.player.pause();
+      this.currentlyPlaying?.player.seekTo(0);
+      this.currentlyPlaying?.player.pause();
 
       // 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
@@ -372,15 +400,31 @@ export class LiveImageManager implements PlayerLifecycleListener {
           item,
           playerId: this.currentlyPlaying?.playerId,
           primaryPlayerId: this.primaryPlayer?.playerId,
+          entry: item.getPlayer().getEntry(),
         },
       });
   };
 
   onLiveImageError = (item: LiveImage, error: Error) => {
-    item.setMode(LiveImageType.Image);
+    item.setMode?.(LiveImageType.Image);
 
-    if (this.currentlyPlaying === item) {
+    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
     }
 
@@ -389,8 +433,9 @@ export class LiveImageManager implements PlayerLifecycleListener {
       event: {
         item,
         error,
-        playerId: this.currentlyPlaying?.playerId,
-        primaryPlayerId: this.primaryPlayer?.playerId,
+        playerId: currentItem?.playerId,
+        primaryPlayerId: currentItem?.playerId,
+        entry: item.getPlayer().getEntry(),
       },
     });
   };
@@ -446,12 +491,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 });
   }
 
@@ -479,6 +525,16 @@ export class LiveImage implements QuickBrickPlayer.SharedPlayerCallBacks {
     LiveImageManager.instance.onLiveImageError(this, error);
   };
 
+  onVideoError = (error: Error) => {
+    log_error(
+      `onVideoError: live-image, fail to play, switching back to image. error: ${
+        error?.message
+      }, ${playerInfo(this.player)}`
+    );
+
+    LiveImageManager.instance.onLiveImageError(this, error);
+  };
+
   onVideoEnd = (_event) => {
     log_info(
       `onVideoEnd: live-image, video completed, switching back to image, ${playerInfo(

package/Components/VideoLive/PlayerLiveImageComponent.tsx

@@ -1,22 +1,20 @@
 // /// <reference types="@applicaster/applicaster-types" />
 //
 import * as React from "react";
-import * as R from "ramda";
 
-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";
 
 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,
 } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
 import { getUserCellPlayerMutedPreference } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/userCellPlayerMutedPreference";
-import { PlayerImageBackground } from "../PlayerImageBackground";
+import Image from "@applicaster/zapp-react-native-ui-components/Components/MasterCell/DefaultComponents/Image";
 import { LiveImage, LiveImageManager, LiveImageType } from "./LiveImageManager";
 
 import { AnimatedInOut } from "@applicaster/zapp-react-native-ui-components/Components/AnimatedInOut";
@@ -25,12 +23,14 @@ import { loggerLiveImageComponent } from "./loggerHelper";
 import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
 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";
+import { useEffect } from "react";
 
-const { log_error } = loggerLiveImageComponent;
+const { log_error, log_debug } = loggerLiveImageComponent;
 
-const isMeasurement = (item) => {
-  return item.id.startsWith("pre-measurement-");
-};
+const isMeasurement = (item: ZappEntry) =>
+  isString(item.id) && item.id.startsWith("pre-measurement-");
 
 type Props = {
   item: ZappEntry;
@@ -40,12 +40,13 @@ type Props = {
   imageKey?: string;
   screenConfig: Record<string, any>;
   audioMutedByDefault?: boolean;
+  uri: string; // cover image url
 };
 
 const PlayerLiveImageComponent = (props: Props) => {
   const dimensions = useDimensions("screen", { fullDimensions: true });
 
-  const { item, style, playerId, imageKey } = props;
+  const { item, style, playerId } = props;
 
   const timeoutRef = React.useRef<NodeJS.Timeout | null>(null);
   const [mode, setMode] = React.useState(LiveImageType.Image);
@@ -55,20 +56,18 @@ 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) => {
+  const trackViewRef = React.useRef(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;
@@ -80,45 +79,69 @@ const PlayerLiveImageComponent = (props: Props) => {
       } else {
         if (timeoutRef.current) {
           clearTimeout(timeoutRef.current);
+          timeoutRef.current = null;
         }
 
         setMode(type);
       }
-    };
+    },
+    [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(() => {
     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]);
 
-  const { start, end } = React.useMemo(
-    () => getAutoplaySettings(item),
-    [item?.id]
-  );
+  React.useEffect(() => {
+    liveImageItem.setMode = setModeDebounced;
+  }, [setModeDebounced, liveImageItem]);
+
+  const { start, end } = React.useMemo(() => getAutoplaySettings(item), [item]);
 
   const controller = liveImageItem.getPlayer();
   const player = usePlayer(playerId);
@@ -127,6 +150,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]);
@@ -140,13 +167,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]);
+  }, [item, liveImageItem]);
 
   React.useEffect(() => {
     if (!player) {
@@ -178,11 +206,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 +262,48 @@ const PlayerLiveImageComponent = (props: Props) => {
         };
       }
     }
-  }, [liveImageItem]);
-
-  const onPositionUpdated = (data) => {
-    const normalizedRect = (rect) => {
-      if (!rect) {
-        return null;
-      }
+  }, [liveImageItem, playerId, controller]);
+
+  const onPositionUpdated = React.useCallback(
+    (data) => {
+      const normalizedRect = (rect: {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+      }) => {
+        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, dimensions]
+  );
 
   const platformSpecificProps = isApplePlatform()
     ? { hideNativeControls: true, controls: false }
@@ -276,38 +313,38 @@ 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;
 
+  // TODO: nice to have - resolve imageKey when imageUrl is not provided
   return (
     <TrackedView
       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}
-        >
-          <PlayerImageBackground
-            entry={item}
-            style={style}
-            imageKey={imageKey}
+      <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>
-      }
+        )}
+        {
+          <AnimatedInOut
+            visible={isBackgroundImageVisible}
+            animationConfig={overlayFadeIn}
+            staticStyles={style}
+          >
+            <Image {...props} resizeMode="cover" style={style} applyMaxSize />
+          </AnimatedInOut>
+        }
+      </View>
     </TrackedView>
   );
 };

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

@@ -3,7 +3,14 @@ import * as React from "react";
 import { render } from "@testing-library/react-native";
 import * as PlayerFactory from "@applicaster/zapp-react-native-utils/appUtils/playerManager/playerFactory";
 import { Player } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/player";
+import { ThemeContext } from "@applicaster/zapp-react-native-utils/theme";
+import * as navigationHooks from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+
 import { PlayerLiveImage } from "../PlayerLiveImageComponent";
+import * as useNavigationHooks from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
+
+import { Provider } from "react-redux";
+import configureStore from "redux-mock-store";
 
 const seekTo = jest.fn();
 
@@ -16,6 +23,27 @@ jest.mock(
   })
 );
 
+jest
+  .spyOn(useNavigationHooks, "useNavigation")
+  .mockImplementation(() => ({ videoModalState: { visible: false } }));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
+
+const mockStore = configureStore();
+
+const store = mockStore({ appData: {} });
+
+const Wrapper = ({ children }: { children: React.ReactChildren }) => (
+  /* @ts-ignore */
+  <Provider store={store}>
+    <ThemeContext.Provider
+      value={{ themes: { myTheme: {} }, selectedThemeId: "myTheme" }}
+    >
+      {children}
+    </ThemeContext.Provider>
+  </Provider>
+);
+
 describe("PlayerLiveImageComponent", () => {
   const defaultProps = {
     item: { id: "1", title: "Test", type: { value: "" } },
@@ -36,10 +64,16 @@ describe("PlayerLiveImageComponent", () => {
       controller: new Player({}),
       Component: () => null,
     }));
+
+    jest.spyOn(navigationHooks, "useIsScreenActive").mockReturnValue(true);
   });
 
   it("should render correctly with default props", () => {
-    const component = render(<PlayerLiveImage {...defaultProps} />);
+    const component = render(
+      <Wrapper>
+        <PlayerLiveImage {...defaultProps} />
+      </Wrapper>
+    );
 
     expect(component.toJSON()).toMatchSnapshot();
   });
@@ -53,7 +87,11 @@ describe("PlayerLiveImageComponent", () => {
       },
     };
 
-    render(<PlayerLiveImage {...props} />);
+    render(
+      <Wrapper>
+        <PlayerLiveImage {...props} />
+      </Wrapper>
+    );
 
     // TODO: implement this test
   });
@@ -67,7 +105,11 @@ describe("PlayerLiveImageComponent", () => {
       },
     };
 
-    render(<PlayerLiveImage {...props} />);
+    render(
+      <Wrapper>
+        <PlayerLiveImage {...props} />
+      </Wrapper>
+    );
 
     // TODO: implement this test
   });