@applicaster/zapp-react-native-ui-components 12.0.0-alpha.5471145113 → 12.0.0-alpha.5521005225

package/Components/MasterCell/DefaultComponents/FocusableView/index.tsx

@@ -4,6 +4,7 @@ import { Focusable } from "@applicaster/zapp-react-native-ui-components/Componen
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 import * as R from "ramda";
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
+import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
 
 const { Logger } = getXray();
 
@@ -35,7 +36,9 @@ export function FocusableView({ style, children, item, ...otherProps }: Props) {
 
   const focusableId = getFocusableId(prefixId, suffixId);
 
-  const focused = focusableId === focusedButtonId;
+  const focused =
+    focusableId === focusedButtonId ||
+    toBooleanWithDefaultFalse(otherProps.focused);
 
   const additionalStyles = focused ? focusedStyles : normalStyles;
 

package/Components/MasterCell/DefaultComponents/LiveImage/index.tsx

@@ -108,6 +108,26 @@ const prepareEntry = (entry) => {
     };
   }
 
+  const previewPlayback =
+    entry.extensions?.["brightcove"]?.["preview_playback"];
+
+  if (previewPlayback) {
+    return {
+      ...entry,
+      extensions: {
+        ...entry.extensions,
+        brightcove: {
+          ...entry?.extensions?.["brightcove"],
+          video_id: previewPlayback,
+        },
+      },
+    };
+  }
+
+  if (entry.extensions?.["brightcove"]?.["video_id"]) {
+    return entry;
+  }
+
   const src = entry.content?.src;
 
   if (!src) {

package/Components/MasterCell/DefaultComponents/tv/ButtonContainerView/index.tsx

@@ -7,6 +7,10 @@ import type {
   ContainerProps,
   ContainerChildren,
 } from "./types";
+import {
+  useIsRTL,
+  applyRTLStylesIfNeeded,
+} from "@applicaster/zapp-react-native-utils/localizationUtils";
 
 const HorizontalSeparator = ({ width }: HorizontalSeparatorProps) => (
   <View style={{ width }} />
@@ -17,6 +21,7 @@ export function ButtonContainerView({
   children,
   ...otherProps
 }: ContainerProps) {
+  const isRTL = useIsRTL();
   const horizontalGutter = R.pathOr(0, ["horizontalGutter"], otherProps);
 
   const filteredChildren = useFilterChildren<ContainerChildren>(children);
@@ -26,7 +31,7 @@ export function ButtonContainerView({
   }
 
   return (
-    <View style={style}>
+    <View style={applyRTLStylesIfNeeded(style, isRTL)}>
       {insertBetween(
         (index) => (
           <HorizontalSeparator

package/Components/MasterCell/dataAdapter.ts

@@ -37,14 +37,28 @@ function retrieveData(entry, func, args) {
  */
 
 export function configInflater(
-  entry,
-  { type, style, additionalProps = {}, data = [], elements }
+  entry: any,
+  {
+    type,
+    style,
+    additionalProps = {},
+    data = [],
+    elements,
+  }: {
+    type: any;
+    style: any;
+    additionalProps?: Record<string, any>;
+    data?: Array<{ propName: string; func: Function; args: any[] }>;
+    elements?: any[];
+  }
 ) {
-  const props = R.reduce(
-    (acc, curr) =>
-      R.assoc(curr.propName, retrieveData(entry, curr.func, curr.args), acc),
-    additionalProps,
-    data
+  const props = data.reduce(
+    (acc, curr) => {
+      acc[curr.propName] = retrieveData(entry, curr.func, curr.args);
+
+      return acc;
+    },
+    { ...additionalProps }
   );
 
   let adjustedElements;

package/Components/MasterCell/index.tsx

@@ -52,6 +52,8 @@ export function masterCellBuilder({
   const { View } = componentsMap;
   const elementsBuilder = dataAdapter(cellConfiguration);
 
+  // This is very expensive operation
+  // Keep calls to minimum
   const hasFocusableInside = hasFocusableInsideBuilder(elementsBuilder);
 
   /**
@@ -84,7 +86,7 @@ export function masterCellBuilder({
           entry: item,
           state: getEntryState(state, entryIsSelected),
         }),
-      [state, item, entryIsSelected]
+      [state, item?.id, entryIsSelected] // Assuming that item won't mutate
     );
 
     const wrapperRef = React.useRef(null);

package/Components/MasterCell/utils/__tests__/insertBetween.test.js

@@ -9,4 +9,13 @@ describe("insertBetween", () => {
 
     expect(result).toEqual([1, "|", 2, "|", 3]);
   });
+
+  it("insertBetween", () => {
+    const separator = (index) => `separator:${index}`;
+    const items = [1, 2, 3];
+
+    const result = insertBetween(separator, items);
+
+    expect(result).toEqual([1, "separator:0", 2, "separator:1", 3]);
+  });
 });

package/Components/MasterCell/utils/index.ts

@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo } from "react";
 import * as R from "ramda";
+import validateColor from "validate-color";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 
@@ -52,7 +53,10 @@ function resolveColorForProp(entry, style, colorProp) {
   const colorFromProp = style[colorProp];
   const nestedEntryValue = R.path(colorFromProp.split("."), entry);
 
-  if (nestedEntryValue === undefined) {
+  if (
+    nestedEntryValue === undefined &&
+    !validateColor(colorFromProp.replace(".00", "")) // https://github.com/dreamyguy/validate-color/issues/44
+  ) {
     logWarning(colorFromProp, style, entry, nestedEntryValue);
   }
 

package/Components/Navigator/StackNavigator.tsx

@@ -8,6 +8,8 @@ import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
 
 import { Screen } from "../Screen/TV/index.web";
+import { isLast } from "@applicaster/zapp-react-native-utils/arrayUtils";
+import { ScreenContextProvider } from "../../Contexts/ScreenContext";
 
 type Components = {
   NavBar: React.ComponentType<any>;
@@ -19,25 +21,32 @@ type Props = {
 };
 
 export const StackNavigator = ({ Components }: Props) => {
-  const { mainStack, currentRoute } = useNavigation();
+  const { mainStack } = useNavigation();
 
-  const renderScreen = ({ route, state }) => {
+  const renderScreen = ({ route, state }, index) => {
     const pathAttributes = getPathAttributes({ pathname: route });
 
     if (isEmpty(pathAttributes)) {
       return null;
     }
 
+    // HACK: Adding index to route to avoid conflicts in the navigator.
+    // Startup hooks are all using PUSH navigation action to navigate, but their routes are always like root routes.
+    // This means some hooks can have the same routes, e.g., ["hooks/context-setter", "/hooks/login-plug", "hooks/context-setter"].
+    const routeId = `${route}--${index}`;
+
     return (
       <FocusableGroup
         id={route}
-        preferredFocus={route === currentRoute}
+        preferredFocus={isLast(index, mainStack.length)}
         excludeFromFocusSearching
-        key={route}
+        key={routeId}
       >
         <ScreenDataContext.Provider value={state}>
           <PathnameContext.Provider value={route}>
-            <Screen route={route} Components={Components} />
+            <ScreenContextProvider pathname={route}>
+              <Screen route={route} Components={Components} />
+            </ScreenContextProvider>
           </PathnameContext.Provider>
         </ScreenDataContext.Provider>
       </FocusableGroup>

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -124,6 +124,7 @@ const nativeStyles = {
   playerScreen: {
     flex: 1,
     backgroundColor: "black",
+    overflow: "hidden",
   },
   playerWrapper: {
     flex: 1,
@@ -252,11 +253,7 @@ const PlayerContainerComponent = (props: Props) => {
     }
 
     showNavBar(true);
-
-    // Hack to close player screen on mobile only (tv handles that in InteractionManager)
-    if (!isTV()) {
-      navigator.goBack();
-    }
+    navigator.goBack();
   }, [isModal, navigator.goBack, showNavBar]);
 
   const playEntry = (entry) => navigator.replaceTop(entry, { mode });

package/Components/Screen/TV/index.web.tsx

@@ -1,20 +1,24 @@
 import * as React from "react";
-import { last, pathOr } from "ramda";
+import { last } from "ramda";
 import { View, StyleSheet } from "react-native";
 import {
+  findMenuPlugin,
   getNavigationProps,
   getPathAttributes,
-  resolveNavigationPlugin,
 } from "@applicaster/zapp-react-native-utils/navigationUtils";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
-import { useScreenBackgroundColor } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
+import {
+  useNavbarState,
+  useScreenBackgroundColor,
+} from "@applicaster/zapp-react-native-utils/reactHooks/screen";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
 import { NavBarContainer } from "../../Layout/TV/NavBarContainer";
 import { ScreenResolver } from "../../ScreenResolver";
 import { useInitialFocus, useRestoreFocus } from "./hooks";
+import { isPlayerPlugin } from "@applicaster/zapp-react-native-utils/pluginUtils";
 
 const styles = StyleSheet.create({
   container: {
@@ -36,18 +40,6 @@ type Props = {
   Components: Components;
 };
 
-const getPluginType = pathOr("unknown_plugin_type", [
-  "state",
-  "screen",
-  "plugin_type",
-]);
-
-const isPlayerPlugin = (routeState): boolean =>
-  getPluginType(routeState) === "player";
-
-const isLoginPlugin = (routeState): boolean =>
-  getPluginType(routeState) === "login";
-
 const getActiveRiver = ({
   screenId,
   screenType,
@@ -139,19 +131,14 @@ export const Screen = ({ route, Components }: Props) => {
     fallbackNavigations: navigator.activeRiver.navigations,
   });
 
-  const menuPlugin = resolveNavigationPlugin({
-    category: "menu",
-    navigations,
-    plugins,
-  }) as QuickBrickPlugin;
+  const menuPlugin = findMenuPlugin(navigations, plugins);
 
   const NavBar = (Components.NavBar ||
     menuPlugin.module) as React.ComponentType<any>;
 
   const isPlayer = isPlayerPlugin(routeState);
-  const isLogin = isLoginPlugin(routeState);
 
-  const isNavBarVisible = !isPlayer && !isLogin;
+  const { visible: isNavBarVisible } = useNavbarState();
 
   const screenData =
     screenType === "hooks" || isPlayer
@@ -162,7 +149,6 @@ export const Screen = ({ route, Components }: Props) => {
     <View style={[styles.container, { backgroundColor }]}>
       <NavBarContainer isVisible={isNavBarVisible} onReady={noop}>
         <NavBar
-          groupId={route}
           isVisible={isNavBarVisible}
           menuPlugin={menuPlugin}
           navigationProps={navigationProps}

package/Components/Screen/index.tsx

@@ -11,10 +11,10 @@ import {
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { getComponentModule } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import {
-  getNavigationPropsV2,
-  resolveNavigationPlugin,
+  shouldNavBarDisplayMenu,
+  getNavBarProps,
+  getScreenId,
 } from "@applicaster/zapp-react-native-utils/navigationUtils";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
   useDimensions,
   useRoute,
@@ -25,20 +25,16 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { getNavigationPluginModule } from "@applicaster/zapp-react-native-app/App/Layout/layoutHelpers";
 
-import { ScreenContextProvider } from "../../Contexts/ScreenContext";
 import { RouteManager } from "../RouteManager";
 import { useScreenConfiguration } from "../River/useScreenConfiguration";
 import { useScreenOrientationHandler } from "./orientationHandler";
 
-const getScreenId = (
-  screenData: LegacyNavigationScreenData,
-  fallbackRiver: ZappRiver
-) => {
-  return screenData?.targetScreen
-    ? screenData?.targetScreen?.id ?? fallbackRiver.id
-    : "screen_id" in screenData
-    ? screenData.screen_id
-    : fallbackRiver.id;
+const screenStyles = {
+  flex: 1,
+  paddingTop: 0,
+  // paddingBottom: insets.bottom, // Should be applied directly by UI plugin
+  // paddingLeft: insets.left, // Should be applied directly by UI plugin
+  // paddingRight: insets.right, // Should be applied directly by UI plugin
 };
 
 function colorIsNotTransparent(color) {
@@ -49,9 +45,7 @@ function colorIsNotTransparent(color) {
     R.replace("rgba(", "")
   )(color);
 
-  const alpha = Number(layers?.[3]);
-
-  return alpha > 0;
+  return Number(layers?.[3]) > 0;
 }
 
 function isValidColor(string) {
@@ -71,7 +65,6 @@ export function Screen(_props: Props) {
   // Gets the data for the current screen configuration
   const currentScreenData = useCurrentScreenData();
   const { backgroundColor } = useScreenConfiguration(currentScreenData.id);
-  const insets = useSafeAreaInsets();
 
   const {
     width: screenWidth,
@@ -96,30 +89,12 @@ export function Screen(_props: Props) {
 
   const layoutData = { isTablet, isTabletPortrait, width: screenWidth, height };
 
-  const hasMenu =
-    resolveNavigationPlugin({
-      category: "menu",
-      navigations: currentRiver.navigations,
-      plugins,
-    })?.identifier === "quick_brick_side_menu";
-
-  const navBarProps = React.useMemo<MobileNavBarPluginProps | null>(() => {
-    const props = getNavigationPropsV2({
-      currentRiver,
-      title,
-      category: "nav_bar",
-    });
-
-    if (props) {
-      return {
-        ...props,
-        id: pathname,
-        pathname: pathname,
-      };
-    }
-
-    return null;
-  }, [currentRiver, pathname]);
+  const hasMenu = shouldNavBarDisplayMenu(currentRiver, plugins);
+
+  const navBarProps = React.useMemo<MobileNavBarPluginProps | null>(
+    getNavBarProps(currentRiver, pathname, title),
+    [currentRiver, pathname]
+  );
 
   const NavBar = React.useMemo(
     () =>
@@ -141,16 +116,12 @@ export function Screen(_props: Props) {
 
   const style = React.useMemo(
     () => ({
-      flex: 1,
+      ...screenStyles,
       backgroundColor: isValidColor(backgroundColor)
         ? backgroundColor
         : theme.app_background_color,
-      paddingTop: 0,
-      // paddingBottom: insets.bottom, // Should be applied directly by UI plugin
-      // paddingLeft: insets.left, // Should be applied directly by UI plugin
-      // paddingRight: insets.right, // Should be applied directly by UI plugin
     }),
-    [insets, screenWidth, theme.app_background_color, backgroundColor]
+    [theme.app_background_color, backgroundColor]
   );
 
   const targetScreenData =
@@ -168,19 +139,17 @@ export function Screen(_props: Props) {
       layoutData,
     })
   ) {
-    return null;
+    return <View style={style} />;
   }
 
   return (
-    <ScreenContextProvider pathname={pathname}>
-      <View style={style}>
-        {navBarProps && <NavBar {...navBarProps} hasMenu={hasMenu} />}
-
-        <OfflineFallbackScreen screenData={targetScreenData}>
-          {/* @TODO RouteManager doesn't use props, can they be removed ?  */}
-          <RouteManager pathname={pathname} screenData={screenData} />
-        </OfflineFallbackScreen>
-      </View>
-    </ScreenContextProvider>
+    <View style={style}>
+      {navBarProps && <NavBar {...navBarProps} hasMenu={hasMenu} />}
+
+      <OfflineFallbackScreen screenData={targetScreenData}>
+        {/* @TODO RouteManager doesn't use props, can they be removed ?  */}
+        <RouteManager pathname={pathname} screenData={screenData} />
+      </OfflineFallbackScreen>
+    </View>
   );
 }

package/Components/Screen/navigationHandler.ts

@@ -5,6 +5,11 @@
  * 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/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");
 
@@ -54,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 =
@@ -100,14 +95,14 @@ export function ScreenResolverComponent(props: Props) {
   }
 
   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/Transitioner/Scene.tsx

@@ -1,13 +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;
@@ -53,12 +49,15 @@ export function Scene({
   }, [screenData, isActive]);
 
   const frame = useSafeAreaFrame();
-  const { height, width } = useWindowDimensions();
 
-  // Safe frame takes too long to update,
-  // so we can not rely on it there, and use height and width instead.
   const isAnimating = animating && overlayStyle;
-  const dimensions = isAnimating ? { height, width } : frame;
+
+  const dimensions = isAnimating
+    ? {
+        height: "100%",
+        width: "100%",
+      }
+    : frame;
 
   return (
     <Animated.View
@@ -67,7 +66,9 @@ export function Scene({
     >
       <ScreenDataContext.Provider value={initialScreenData}>
         <PathnameContext.Provider value={pathname}>
-          {children}
+          <ScreenContextProvider pathname={pathname}>
+            {children}
+          </ScreenContextProvider>
         </PathnameContext.Provider>
       </ScreenDataContext.Provider>
       {isAnimating && <Animated.View style={overlayStyle} />}

package/Components/Transitioner/Transitioner.tsx

@@ -166,21 +166,23 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
 
   transitionWithoutAnimation(resetState) {
     const { scenes } = this.state;
-
-    const newState = resetState
-      ? {
-          scenes: [prepareScene(this.props.children)],
-          to: {
-            index: 0,
-          },
-        }
-      : {
-          scenes: R.update(
-            scenes.length - 1,
-            prepareScene(this.props.children),
-            scenes
-          ),
-        };
+    const newScene = prepareScene(this.props.children);
+    const isLastSceneHook = scenes[scenes.length - 1].key.startsWith("/hook");
+
+    let newState;
+
+    if (resetState) {
+      newState = {
+        scenes: [newScene],
+        to: { index: 0 },
+      };
+    } else if (isLastSceneHook || scenes.length === 1) {
+      newState = { scenes: R.update(scenes.length - 1, newScene, scenes) };
+    } else {
+      newState = {
+        scenes: R.compose(R.tail, R.append(newScene))(scenes),
+      };
+    }
 
     this.setState(newState);
   }

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

@@ -22,7 +22,9 @@ exports[`<Scene /> renders correctly 1`] = `
   }
 >
   <ContextProvider>
-    <ContextProvider />
+    <ContextProvider>
+      <ScreenContextProvider />
+    </ContextProvider>
   </ContextProvider>
 </ForwardRef(AnimatedComponentWrapper)>
 `;
@@ -39,14 +41,16 @@ 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={

package/Components/VideoLive/LiveImageManager.ts

@@ -525,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(