@applicaster/zapp-react-native-ui-components 12.0.0-rc.1 → 12.0.0-rc.100

package/Components/Screen/navigationHandler.ts

@@ -1,85 +1,3 @@
-import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
-
-/**
- * This function helps to decide wether the navbar should be presented on the screen
- * based on route and / or screen Data
- *
- * Currently the scenarios include
- * - players => false
- * - search screen plugin => false
- * - hooks with `showNavBar: true` or `presentFullScreen` not set to true, defaults to no navbar for hook screens
- * - screens with `allow_screen_plugin_presentation` in general property => false
- *
- * @param {String} route current route of the screen
- * @param {Object} screenData payload associated with the currently presented screen
- * @returns {Boolean}
- */
-export function isNavBarVisible(
-  route,
-  screenData,
-  showNavBar,
-  canGoBack,
-  videoModalState: QuickBrickVideoModalState | null = null
-) {
-  /* screenData is not actual navigator.data
-   * or navigator.screenData,
-   * but navigator.data.screen */
-  if (route.includes("playable")) {
-    return false;
-  }
-
-  if (
-    videoModalState?.mode === "FULLSCREEN" &&
-    videoModalState?.visible === true
-  ) {
-    return false;
-  }
-
-  if (screenData?.type === "qb_search_screen" && !isTV()) {
-    return false;
-  }
-
-  /* Match if screen is Hook */
-  if (route.startsWith("/hooks/")) {
-    const module = screenData?.module;
-
-    if (module?.presentFullScreen) {
-      return false;
-    }
-
-    return module?.showNavBar ?? false;
-  }
-
-  if (screenData?.hookPlugin) {
-    const hookPlugin = screenData?.hookPlugin?.module;
-
-    return (
-      hookPlugin?.showNavBar || hookPlugin?.presentFullScreen !== true || false
-    );
-  }
-
-  if (
-    screenData?.general?.allow_screen_plugin_presentation ||
-    screenData?.general?.hide_app_nav_bar
-  ) {
-    return false;
-  }
-
-  const hideSecondaryLevel = screenData?.navigations?.some(
-    (navigation) => navigation.styles?.hide_secondary_level_menu
-  );
-
-  if (canGoBack && hideSecondaryLevel) {
-    return false;
-  }
-
-  if (typeof showNavBar === "boolean" && !showNavBar) {
-    return false;
-  }
-
-  return true;
-}
-
 /**
  * This function helps to decide wether the menu should be presented on the screen
  * based on route and / or screen Data
@@ -87,6 +5,11 @@ export function isNavBarVisible(
  * is similar to the navbar, except that it covers scenarios where only the navbar (and not)
  * the menu, will be hidden
  *
+ * - playable screens
+ * - qb_search_screen
+ * - screen hooks that specify showNavBar or presentFullScreen
+ * - screens or nested screens that have allow_screen_plugin_presentation set to true
+ *
  * @param {String} route current route of the screen
  * @param {Object} screenData payload associated with the currently presented screen
  * @returns {Boolean}

package/Components/Screen/orientationHandler.ts

@@ -8,7 +8,7 @@ import {
 
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { findPluginByType } from "@applicaster/zapp-react-native-utils/pluginUtils";
-import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks/device/useIsTablet";
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { ZappHookModalContext } from "../../Contexts";
 import { HookModalContextT } from "../../Contexts/ZappHookModalContext";
 

package/Components/ScreenResolver/index.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
-import * as R from "ramda";
-import { useDispatch } from "react-redux";
+import { path, prop } from "ramda";
 import {
   findPluginByType,
   findPluginByIdentifier,
@@ -15,7 +14,6 @@ import { componentsLogger } from "../../Helpers/logger";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useScreenAnalytics } from "@applicaster/zapp-react-native-utils/analyticsUtils/helpers/hooks";
-import { setAppStateHasFinishedTransitioning } from "@applicaster/zapp-react-native-redux/appState";
 
 const logger = componentsLogger.addSubsystem("ScreenResolver");
 
@@ -32,12 +30,13 @@ type Props = {
     nextFocusLeft?: React.Ref<any>;
     nextFocusUp?: React.Ref<any>;
   };
+  groupId?: string;
 };
 
 export function ScreenResolverComponent(props: Props) {
   useScreenAnalytics(props);
 
-  const { screenType, screenId, screenData } = props;
+  const { screenType, screenId, screenData, groupId } = props;
 
   const { hookPlugin } = screenData || {};
 
@@ -53,11 +52,8 @@ export function ScreenResolverComponent(props: Props) {
 
   const [, setScreenContext] = ZappPipesScreenContext.useZappPipesContext();
 
-  const dispatch = useDispatch();
-
   React.useEffect(() => {
     setScreenContext(rivers[screenId]);
-    dispatch(setAppStateHasFinishedTransitioning());
   }, [screenId]);
 
   const ScreenPlugin =
@@ -81,6 +77,7 @@ export function ScreenResolverComponent(props: Props) {
         item={screenData}
         mode={mode === "PIP" ? "PIP" : "FULLSCREEN"}
         isModal={false}
+        groupId={groupId}
       />
     );
   }
@@ -91,21 +88,21 @@ export function ScreenResolverComponent(props: Props) {
         <HookRenderer
           screenData={screenData}
           focused={props.focused}
-          parentFocus={props.parentFocus}
+          parentFocus={props.parentFocus as ParentFocus}
         />
       )
     );
   }
 
   const ScreenComponent =
-    R.path(["module", "Component"], ScreenPlugin) ||
-    R.prop("module", ScreenPlugin) ||
-    R.prop("Component", ScreenPlugin) ||
+    path(["module", "Component"], ScreenPlugin) ||
+    prop("module", ScreenPlugin) ||
+    prop("Component", ScreenPlugin) ||
     ScreenPlugin;
 
   const configuration =
-    R.prop("configuration", ScreenPlugin) ||
-    R.prop("__plugin_configuration", ScreenComponent);
+    prop("configuration", ScreenPlugin) ||
+    prop("__plugin_configuration", ScreenComponent);
 
   if (ScreenComponent) {
     return (

package/Components/Tabs/TV/styles.ts

@@ -78,7 +78,7 @@ export const getStyles = (config): Partial<TVTabsStyles> => {
         },
         tvos: {
           marginTop: -1,
-        }
+        },
       }),
     },
     tabsBackground: {

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/Transitioner/Scene.tsx

@@ -1,12 +1,9 @@
 import React from "react";
-import {
-  Animated,
-  useWindowDimensions,
-  ViewProps,
-  ViewStyle,
-} from "react-native";
+import { Animated, ViewProps, ViewStyle } from "react-native";
 import { useSafeAreaFrame } from "react-native-safe-area-context";
 import { PathnameContext } from "../../Contexts/PathnameContext";
+import { ScreenDataContext } from "../../Contexts/ScreenDataContext";
+import { ScreenContextProvider } from "../../Contexts/ScreenContext";
 
 type Props = {
   children: any;
@@ -16,6 +13,8 @@ type Props = {
   animating: boolean;
   contentStyle: ViewStyle;
   pathname: string;
+  isActive: boolean;
+  screenData: NavigationScreenData;
 };
 
 /**
@@ -38,34 +37,41 @@ export function Scene({
   animating,
   contentStyle,
   pathname,
+  isActive = false,
+  screenData,
 }: Props) {
+  const [initialScreenData, setInitialScreenData] = React.useState(screenData);
+
+  React.useLayoutEffect(() => {
+    if (isActive) {
+      setInitialScreenData(screenData);
+    }
+  }, [screenData, isActive]);
+
   const frame = useSafeAreaFrame();
-  const { height, width } = useWindowDimensions();
 
-  if (overlayStyle && animating) {
-    // Safe frame takes too long to update,
-    // so we can not rely on it there, and use height and width instead.
-    return (
-      <Animated.View
-        pointerEvents={pointerEvents}
-        style={[style, contentStyle, { height, width }]}
-      >
-        <PathnameContext.Provider value={pathname}>
-          {children}
-        </PathnameContext.Provider>
-        <Animated.View style={overlayStyle} />
-      </Animated.View>
-    );
-  }
+  const isAnimating = animating && overlayStyle;
+
+  const dimensions = isAnimating
+    ? {
+        height: "100%",
+        width: "100%",
+      }
+    : frame;
 
   return (
     <Animated.View
       pointerEvents={pointerEvents}
-      style={[style, contentStyle, frame]}
+      style={[style, contentStyle, dimensions]}
     >
-      <PathnameContext.Provider value={pathname}>
-        {children}
-      </PathnameContext.Provider>
+      <ScreenDataContext.Provider value={initialScreenData}>
+        <PathnameContext.Provider value={pathname}>
+          <ScreenContextProvider pathname={pathname}>
+            {children}
+          </ScreenContextProvider>
+        </PathnameContext.Provider>
+      </ScreenDataContext.Provider>
+      {isAnimating && <Animated.View style={overlayStyle} />}
     </Animated.View>
   );
 }

package/Components/Transitioner/Transitioner.tsx

@@ -4,10 +4,7 @@ import * as R from "ramda";
 
 import { AnimationManager } from "./AnimationManager";
 import { Scene } from "./Scene";
-import {
-  getScreenOrientation,
-  isOrientationCompatible,
-} from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
+
 import {
   getSceneByRoute,
   shouldSkipAnimationForPreviousWebViewScene,
@@ -277,33 +274,25 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
   // so only a single scene should be rendered,
   // instead of dangerous nulls or duplicates.
   renderSingleScene({ scenes, to }) {
-    const { contentStyle, layoutData } = this.props;
-    const screenData = scenes[to.index]?.children?.props?.screenData;
-
-    const orientation = getScreenOrientation({
-      screenData,
-      layoutData,
-    });
+    const { contentStyle } = this.props;
+    const screenData = this.props.children.props.screenData;
+    const pathname = scenes[to.index].key;
 
-    // We prevent rendering of the screen until UI is actually rotated to screen desired orientation.
-    // This saves unnecessary re-renders and user will not see distorted aspect screen.
     return (
       <View style={styles.container}>
-        {scenes[to.index] &&
-          isOrientationCompatible({
-            orientation,
-            layoutData,
-          }) && (
-            <Scene
-              {...{ style: to.style }}
-              pathname={scenes[to.index].key}
-              contentStyle={contentStyle}
-              key={scenes[to.index].key}
-              screenUniqueId={scenes[to.index].screenUniqueId}
-            >
-              {scenes[to.index].children}
-            </Scene>
-          )}
+        {scenes[to.index] && (
+          <Scene
+            {...{ style: to.style }}
+            pathname={pathname}
+            isActive={pathname === this.props.navigator.currentRoute}
+            contentStyle={contentStyle}
+            key={scenes[to.index].key}
+            screenUniqueId={scenes[to.index].screenUniqueId}
+            screenData={screenData}
+          >
+            {scenes[to.index].children}
+          </Scene>
+        )}
       </View>
     );
   }
@@ -319,12 +308,14 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
       <Scene
         key={scenes[from.index].key}
         pathname={scenes[from.index].key}
+        isActive={scenes[from.index].key === this.props.navigator.currentRoute}
         style={from.style}
         pointerEvents="none"
         overlayStyle={from.overlayStyle}
         animating={this.state.animating}
         contentStyle={contentStyle}
         screenUniqueId={scenes[from.index].screenUniqueId}
+        screenData={scenes[from.index].children.props.screenData}
       >
         {scenes[from.index].children}
       </Scene>
@@ -333,12 +324,14 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
     const toScene = scenes[to.index] && (
       <Scene
         pathname={scenes[to.index].key}
+        isActive={scenes[to.index].key === this.props.navigator.currentRoute}
         key={scenes[to.index].key}
         style={to.style}
         overlayStyle={to.overlayStyle}
         animating={this.state.animating}
         contentStyle={contentStyle}
         screenUniqueId={scenes[to.index].screenUniqueId}
+        screenData={this.props.children.props.screenData}
       >
         {scenes[to.index].children}
       </Scene>

package/Components/Transitioner/__tests__/__snapshots__/Scene.test.js.snap

@@ -21,7 +21,11 @@ exports[`<Scene /> renders correctly 1`] = `
     ]
   }
 >
-  <ContextProvider />
+  <ContextProvider>
+    <ContextProvider>
+      <ScreenContextProvider />
+    </ContextProvider>
+  </ContextProvider>
 </ForwardRef(AnimatedComponentWrapper)>
 `;
 
@@ -37,13 +41,17 @@ exports[`<Scene /> renders the overlay while animating 1`] = `
         "paddingBottom": 49,
       },
       Object {
-        "height": 1334,
-        "width": 750,
+        "height": "100%",
+        "width": "100%",
       },
     ]
   }
 >
-  <ContextProvider />
+  <ContextProvider>
+    <ContextProvider>
+      <ScreenContextProvider />
+    </ContextProvider>
+  </ContextProvider>
   <ForwardRef(AnimatedComponentWrapper)
     style={
       Object {

package/Components/Transitioner/__tests__/__snapshots__/transitioner.test.js.snap

@@ -10,6 +10,7 @@ exports[`<TransitionerComponent /> renders correctly 1`] = `
   }
 >
   <Scene
+    isActive={true}
     screenUniqueId="mocked-uuid"
   >
     <View

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(