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

package/Components/FreezeWithCallback/Freeze.tsx

@@ -0,0 +1,31 @@
+import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
+import React, { Suspense, useEffect } from "react";
+import { Suspender } from "./Suspender";
+
+interface Props {
+  freeze: boolean;
+  children: React.ReactNode;
+  placeholder?: React.ReactNode;
+  onRelease?: () => void;
+}
+
+export function Freeze({
+  freeze,
+  children,
+  placeholder = null,
+  onRelease,
+}: Props) {
+  const prevFreeze = usePrevious(freeze);
+
+  useEffect(() => {
+    if (prevFreeze && !freeze && onRelease) {
+      onRelease();
+    }
+  }, [freeze, onRelease, prevFreeze]);
+
+  return (
+    <Suspense fallback={placeholder}>
+      <Suspender freeze={freeze}>{children}</Suspender>
+    </Suspense>
+  );
+}

package/Components/FreezeWithCallback/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2021 Software Mansion
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/Components/FreezeWithCallback/Suspender.tsx

@@ -0,0 +1,17 @@
+import React, { Fragment } from "react";
+
+const infiniteThenable = { then() {} };
+
+export const Suspender = ({
+  freeze,
+  children,
+}: {
+  freeze: boolean;
+  children: React.ReactNode;
+}) => {
+  if (freeze) {
+    throw infiniteThenable;
+  }
+
+  return <Fragment>{children}</Fragment>;
+};

package/Components/FreezeWithCallback/__tests__/index.test.tsx

@@ -0,0 +1,170 @@
+import React, { Dispatch, useEffect, useState } from "react";
+import {
+  act,
+  create,
+  ReactTestRenderer,
+  ReactTestRendererJSON,
+} from "react-test-renderer";
+import { FreezeWithCallback } from "../index";
+
+const SimpleContent = () => <div />;
+
+interface InnerProps {
+  value: number;
+}
+// eslint-disable-next-line unused-imports/no-unused-vars
+const Inner = ({ value }: InnerProps) => <div />;
+
+interface TestSubscriber {
+  renderCount: number;
+  subscription: Dispatch<number>;
+}
+
+function createSubscriberComponent(): [React.FC, TestSubscriber] {
+  const testState: TestSubscriber = {
+    renderCount: 0,
+    subscription: () => {},
+  };
+
+  const Subscriber: React.FC = () => {
+    const [value, setValue] = useState(0);
+
+    useEffect(() => {
+      testState.subscription = setValue;
+    }, []);
+
+    testState.renderCount += 1;
+
+    return <Inner value={value} />;
+  };
+
+  return [Subscriber, testState];
+}
+
+interface ContainerProps {
+  freeze: boolean;
+  children: React.ReactNode;
+}
+
+const Container = ({ freeze, children }: ContainerProps) => (
+  <FreezeWithCallback freeze={freeze}>{children}</FreezeWithCallback>
+);
+
+function setupTest(initialFreeze: boolean = false) {
+  let testRenderer: ReactTestRenderer | undefined;
+  const [Subscriber, subscriberState] = createSubscriberComponent();
+
+  act(() => {
+    testRenderer = create(
+      <Container freeze={initialFreeze}>
+        <Subscriber />
+      </Container>
+    );
+  });
+
+  return {
+    testRenderer,
+    testInstance: testRenderer?.root,
+    subscriberState,
+    updateFreeze: (freeze: boolean) => {
+      act(() =>
+        testRenderer?.update(
+          <Container freeze={freeze}>
+            <Subscriber />
+          </Container>
+        )
+      );
+    },
+  };
+}
+
+describe("FreezeWithCallback", () => {
+  test("Renders stuff not frozen", () => {
+    const testRenderer = create(
+      <Container freeze={false}>
+        <SimpleContent />
+      </Container>
+    );
+
+    expect(testRenderer.root.findByType(SimpleContent)).toBeTruthy();
+  });
+
+  test("Does not render stuff when frozen", () => {
+    const testRenderer = create(
+      <Container freeze>
+        <SimpleContent />
+      </Container>
+    );
+
+    expect(testRenderer.root.findAllByType(SimpleContent)).toHaveLength(0);
+  });
+
+  test("Stuff is gone after freeze", () => {
+    const testRenderer = create(
+      <Container freeze={false}>
+        <SimpleContent />
+      </Container>
+    );
+
+    expect(testRenderer.root.findByType(SimpleContent)).toBeTruthy();
+
+    act(() =>
+      testRenderer.update(
+        <Container freeze>
+          <SimpleContent />
+        </Container>
+      )
+    );
+
+    expect(testRenderer.toJSON()).toBe(null);
+  });
+
+  test("Updates work when not frozen", () => {
+    const { testInstance, subscriberState } = setupTest();
+
+    expect(testInstance?.findByType(Inner).props.value).toEqual(0);
+    act(() => subscriberState.subscription(1));
+    expect(testInstance?.findByType(Inner).props.value).toEqual(1);
+    expect(subscriberState.renderCount).toBe(2);
+  });
+
+  test("Updates does not propagate when frozen", () => {
+    const { testInstance, subscriberState, updateFreeze } = setupTest();
+
+    expect(testInstance?.findByType(Inner).props.value).toEqual(0);
+    updateFreeze(true);
+    act(() => subscriberState.subscription(1));
+    expect(testInstance?.findByType(Inner).props.value).toEqual(0);
+    expect(subscriberState.renderCount).toBe(1);
+  });
+
+  test("State persists after defrost", () => {
+    const { testInstance, subscriberState, updateFreeze, testRenderer } =
+      setupTest();
+
+    expect(testInstance?.findByType(Inner).props.value).toEqual(0);
+    act(() => subscriberState.subscription(1));
+    expect(testInstance?.findByType(Inner).props.value).toEqual(1);
+
+    updateFreeze(true);
+    expect(testRenderer?.toJSON()).toBe(null);
+
+    updateFreeze(false);
+    expect((testRenderer?.toJSON() as ReactTestRendererJSON).type).toBe("div");
+    expect(testInstance?.findByType(Inner).props.value).toEqual(1);
+  });
+
+  test("Update propagate after defrost", () => {
+    const { testInstance, subscriberState, updateFreeze } = setupTest();
+
+    updateFreeze(true);
+    act(() => subscriberState.subscription(1));
+    act(() => subscriberState.subscription(2));
+    act(() => subscriberState.subscription(3));
+    expect(testInstance?.findByType(Inner).props.value).toEqual(0);
+
+    updateFreeze(false);
+    expect(testInstance?.findByType(Inner).props.value).toEqual(3);
+    expect(subscriberState.renderCount).toBe(2);
+  });
+});

package/Components/FreezeWithCallback/index.tsx

@@ -0,0 +1,3 @@
+import { Freeze } from "./Freeze";
+
+export const FreezeWithCallback = Freeze;

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

@@ -117,9 +117,6 @@ export const BorderContainerView = (props: Props) => {
     children,
   } = props;
 
-  const borderStyleForMissingBorder =
-    style?.borderWidth === 0 || !style?.borderColor ? { borderRadius: 0 } : {};
-
   const padding =
     borderPosition === "outside"
       ? {
@@ -131,10 +128,7 @@ export const BorderContainerView = (props: Props) => {
       : {};
 
   return (
-    <View
-      {...props}
-      style={[style, styles.container, borderStyleForMissingBorder]}
-    >
+    <View pointerEvents="box-none" {...props} style={[style, styles.container]}>
       <Border style={style} padding={padding} borderPosition={borderPosition} />
       {children}
     </View>

package/Components/MasterCell/DefaultComponents/ImageBorderContainer/index.ts

@@ -0,0 +1,71 @@
+import { ImageStyle } from "react-native";
+
+import {
+  getImageContainerMarginStyles,
+  ifElseFocusedSelected,
+} from "@applicaster/zapp-react-native-utils/cellUtils";
+import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
+
+export const ImageBorderContainer = ({
+  value,
+  state,
+  imageStyles,
+}: {
+  value: (key: string) => string;
+  state: CellState;
+  imageStyles: ImageStyle;
+}) => {
+  const imageMargins = getImageContainerMarginStyles({ value });
+
+  return {
+    type: "BorderContainerView",
+    style: {
+      position: "absolute",
+      // Image border now separated from the image, so cell padding affects the border position
+      marginTop:
+        toNumberWithDefaultZero(imageMargins.marginTop) +
+        toNumberWithDefaultZero(value("cell_padding_top")),
+      marginLeft:
+        toNumberWithDefaultZero(imageMargins.marginLeft) +
+        toNumberWithDefaultZero(value("cell_padding_left")),
+      marginRight:
+        toNumberWithDefaultZero(imageMargins.marginRight) +
+        toNumberWithDefaultZero(value("cell_padding_right")),
+      marginBottom:
+        toNumberWithDefaultZero(imageMargins.marginBottom) +
+        toNumberWithDefaultZero(value("cell_padding_bottom")),
+      zIndex: 1,
+      borderWidth: value("image_border_size"),
+      borderColor: ifElseFocusedSelected(
+        state,
+        value("image_focused_border_color"),
+        value("image_selected_border_color"),
+        value("image_focused_selected_border_color"),
+        value("image_border_color")
+      ),
+      borderRadius: toNumberWithDefaultZero(value("image_corner_radius")),
+    },
+    additionalProps: {
+      pointerEvents: "none",
+      borderPosition: value("image_border_position"),
+      borderPaddingTop: toNumberWithDefaultZero(
+        value("image_border_padding_top")
+      ),
+      borderPaddingRight: toNumberWithDefaultZero(
+        value("image_border_padding_right")
+      ),
+      borderPaddingBottom: toNumberWithDefaultZero(
+        value("image_border_padding_bottom")
+      ),
+      borderPaddingLeft: toNumberWithDefaultZero(
+        value("image_border_padding_left")
+      ),
+    },
+    elements: [
+      {
+        type: "View",
+        style: imageStyles,
+      },
+    ],
+  };
+};

package/Components/MasterCell/DefaultComponents/index.ts

@@ -15,6 +15,7 @@ import { BorderContainerView } from "./BorderContainerView";
 import { CellBadge } from "./CellBadge";
 import { TvActionButtons } from "./tv/TvActionButtons";
 import { ButtonContainerView } from "./tv/ButtonContainerView";
+import { ImageBorderContainer } from "./ImageBorderContainer";
 
 export const defaultComponents = {
   View,
@@ -28,6 +29,7 @@ export const defaultComponents = {
   ProgressBar,
   Toggle,
   LiveImage,
+  ImageBorderContainer,
   BorderContainerView,
   DynamicBadge,
   SecondaryImage,

package/Components/MasterCell/SharedUI/ProgressBar/hooks/useFillInPercent.ts

@@ -5,6 +5,7 @@ import * as R from "ramda";
 
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 import { normalizeProgressValue } from "./utils";
+import { useIsScreenActive } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 const ACTION_NAME = "continue-watching";
 const DEFAULT_FILL = 0;
@@ -27,6 +28,7 @@ const getProgressValue = (
 
 export const useFillInPercent = (entry: ZappEntry): number => {
   const action = useActions(ACTION_NAME);
+  const isActive = useIsScreenActive();
 
   const [fillInPercent, setFillInPercent] =
     React.useState<number>(DEFAULT_FILL);
@@ -39,6 +41,10 @@ export const useFillInPercent = (entry: ZappEntry): number => {
   }, []);
 
   React.useEffect(() => {
+    if (!isActive) {
+      return;
+    }
+
     // refresh progress in UI when it was changed in CW
     const unsubscribe = action?.addDataSourceListener?.(() => {
       getProgressValue(action, entry, (progress) => {
@@ -49,7 +55,7 @@ export const useFillInPercent = (entry: ZappEntry): number => {
     return () => {
       unsubscribe?.();
     };
-  }, []);
+  }, [isActive]);
 
   return fillInPercent;
 };

package/Components/MasterCell/index.tsx

@@ -76,8 +76,8 @@ export function masterCellBuilder({
     const selectedState = screen?.selectedEntry;
 
     const entryIsSelected = React.useMemo(
-      () => selectedState?.id === item?.id,
-      [selectedState?.id]
+      () => !!(selectedState?.id && selectedState?.id === item?.id),
+      [selectedState?.id, item?.id]
     );
 
     const elements = React.useMemo(

package/Components/Screen/TV/hooks/index.ts

@@ -1,3 +1 @@
 export { useInitialFocus } from "./useInitialFocus";
-
-export { useRestoreFocus } from "./useRestoreFocus";

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

@@ -1,12 +1,15 @@
-import * as React from "react";
+import React from "react";
 import { last } from "ramda";
-import { View, StyleSheet } from "react-native";
+import { StyleSheet, View } from "react-native";
 import {
   findMenuPlugin,
   getNavigationProps,
   getPathAttributes,
 } from "@applicaster/zapp-react-native-utils/navigationUtils";
-import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+import {
+  useIsScreenActive,
+  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 {
@@ -17,8 +20,10 @@ import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/he
 
 import { NavBarContainer } from "../../Layout/TV/NavBarContainer";
 import { ScreenResolver } from "../../ScreenResolver";
-import { useInitialFocus, useRestoreFocus } from "./hooks";
+import { useInitialFocus } from "./hooks";
 import { isPlayerPlugin } from "@applicaster/zapp-react-native-utils/pluginUtils";
+import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils";
+import { FreezeWithCallback } from "../../FreezeWithCallback";
 
 const styles = StyleSheet.create({
   container: {
@@ -103,7 +108,6 @@ export const Screen = ({ route, Components }: Props) => {
   const backgroundColor = useScreenBackgroundColor(screenId);
 
   useInitialFocus();
-  useRestoreFocus();
 
   const activeRiver = getActiveRiver({
     screenId,
@@ -145,21 +149,30 @@ export const Screen = ({ route, Components }: Props) => {
       ? routeState?.state?.entry
       : routeState?.state?.screen;
 
+  const isScreenActive = useIsScreenActive();
+
   return (
-    <View style={[styles.container, { backgroundColor }]}>
-      <NavBarContainer isVisible={isNavBarVisible} onReady={noop}>
-        <NavBar
-          isVisible={isNavBarVisible}
-          menuPlugin={menuPlugin}
-          navigationProps={navigationProps}
+    <FreezeWithCallback
+      freeze={!isScreenActive}
+      onRelease={() => {
+        focusManager.setInitialFocus();
+      }}
+    >
+      <View style={[styles.container, { backgroundColor }]}>
+        <NavBarContainer isVisible={isNavBarVisible} onReady={noop}>
+          <NavBar
+            isVisible={isNavBarVisible}
+            menuPlugin={menuPlugin}
+            navigationProps={navigationProps}
+          />
+        </NavBarContainer>
+        <ScreenResolver
+          screenType={screenType}
+          screenId={screenId}
+          screenData={screenData}
+          groupId={route}
         />
-      </NavBarContainer>
-      <ScreenResolver
-        screenType={screenType}
-        screenId={screenId}
-        screenData={screenData}
-        groupId={route}
-      />
-    </View>
+      </View>
+    </FreezeWithCallback>
   );
 };

package/Components/Screen/__tests__/Screen.test.tsx

@@ -99,14 +99,6 @@ jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
   }),
 }));
 
-const {
-  ORIENTATIONS,
-} = require("@applicaster/zapp-react-native-utils/appUtils/orientationHelper");
-
-const {
-  useCurrentScreenData,
-} = require("@applicaster/zapp-react-native-utils/reactHooks/screen");
-
 const {
   allowedOrientationsForScreen,
   getOrientation,
@@ -158,45 +150,4 @@ describe("<Screen Component />", () => {
       expect(wrapper.toJSON()).toMatchSnapshot();
     });
   });
-
-  it("invokes the orientation hook when the route changes", () => {
-    act(() => {
-      wrapper = create(<Screen {...screenProps} />);
-    });
-
-    // @ts-ignore
-    useCurrentScreenData.mockReturnValue({
-      id: "player-testId",
-      general: { screen_orientation: ORIENTATIONS.landscapeSensor },
-      plugin_type: "player",
-    });
-
-    act(() => {
-      wrapper.update(
-        <Screen
-          {...screenProps}
-          pathname="/playable"
-          screenData={{
-            id: "player-testId",
-            general: { screen_orientation: ORIENTATIONS.landscapeSensor },
-            plugin_type: "player",
-          }}
-        />
-      );
-    });
-
-    useCurrentScreenData.mockReturnValue({
-      id: "player-testId",
-      general: { screen_orientation: ORIENTATIONS.landscapeSensor },
-    });
-
-    act(() => {
-      wrapper.update(<Screen {...screenProps} />);
-    });
-
-    expect(allowedOrientationsForScreen).toHaveBeenNthCalledWith(
-      1,
-      ORIENTATIONS.landscapeSensor
-    );
-  });
 });

package/Components/Screen/index.tsx

@@ -1,6 +1,5 @@
 /// <reference types="@applicaster/applicaster-types" />
 import React from "react";
-import * as R from "ramda";
 import { View } from "react-native";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import {
@@ -27,7 +26,7 @@ import { getNavigationPluginModule } from "@applicaster/zapp-react-native-app/Ap
 
 import { RouteManager } from "../RouteManager";
 import { useScreenConfiguration } from "../River/useScreenConfiguration";
-import { useScreenOrientationHandler } from "./orientationHandler";
+import { isValidColor } from "./utils";
 
 const screenStyles = {
   flex: 1,
@@ -37,21 +36,6 @@ const screenStyles = {
   // paddingRight: insets.right, // Should be applied directly by UI plugin
 };
 
-function colorIsNotTransparent(color) {
-  const layers = R.compose(
-    R.map(R.trim),
-    R.split(","),
-    R.replace(")", ""),
-    R.replace("rgba(", "")
-  )(color);
-
-  return Number(layers?.[3]) > 0;
-}
-
-function isValidColor(string) {
-  return string && string !== "transparent" && colorIsNotTransparent(string);
-}
-
 type Props = {
   pathname: unknown;
   screenData: unknown;
@@ -127,8 +111,6 @@ export function Screen(_props: Props) {
   const targetScreenData =
     currentScreenData || (screenData as any)?.targetScreen || screenData;
 
-  useScreenOrientationHandler({ screenData: targetScreenData });
-
   const orientation = useGetScreenOrientation(targetScreenData);
 
   // We prevent rendering of the screen until UI is actually rotated to screen desired orientation.

package/Components/Screen/navigationHandler.ts

@@ -26,9 +26,7 @@ export function isMenuVisible(route, screenData) {
   if (screenData?.hookPlugin) {
     const hookPlugin = screenData?.hookPlugin?.module;
 
-    return (
-      hookPlugin?.showNavBar || hookPlugin?.presentFullScreen !== true || false
-    );
+    return hookPlugin?.showNavBar || hookPlugin?.presentFullScreen !== true;
   }
 
   if (

package/Components/Screen/orientationHandler.ts

@@ -1,14 +1,16 @@
 import React, { useLayoutEffect } from "react";
+
 import {
   allowedOrientationsForScreen,
   ORIENTATIONS,
   getOrientation,
   useGetScreenOrientation,
 } from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
-
+import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
 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";
+
 import { ZappHookModalContext } from "../../Contexts";
 import { HookModalContextT } from "../../Contexts/ZappHookModalContext";
 
@@ -79,14 +81,23 @@ export function useNewOrientationForScreenData({
         screenOrientation;
 }
 
-export function useScreenOrientationHandler({
-  screenData,
-}: OrientationHookArgs) {
+type Props = {
+  screenData: {
+    screen: {};
+  };
+  isActive: boolean;
+};
+
+export function useScreenOrientationHandler({ screenData, isActive }: Props) {
   const { isHooksExecutionInProgress } = React.useContext<HookModalContextT>(
     ZappHookModalContext.ReactContext
   );
 
-  const newOrientation = useNewOrientationForScreenData({ screenData });
+  const prevIsActive = usePrevious(isActive);
+
+  const newOrientation = useNewOrientationForScreenData({
+    screenData: screenData.screen,
+  });
 
   useLayoutEffect(() => {
     // Null means screen does not have orientation preference, so we can skip rotate
@@ -100,12 +111,12 @@ export function useScreenOrientationHandler({
       return;
     }
 
-    if (newOrientation !== current) {
+    if (!prevIsActive && isActive && newOrientation !== current) {
       current = newOrientation;
 
       setOrientation(newOrientation);
     }
-  }, [newOrientation, isHooksExecutionInProgress]);
+  }, [newOrientation, isHooksExecutionInProgress, prevIsActive, isActive]);
 }
 
 export function useOrientationHandler({ screenData }: OrientationHookArgs) {

package/Components/Screen/utils.ts

@@ -0,0 +1,16 @@
+import { map, split, replace, compose, trim } from "ramda";
+
+function colorIsNotTransparent(color) {
+  const layers = compose(
+    map(trim),
+    split(","),
+    replace(")", ""),
+    replace("rgba(", "")
+  )(color);
+
+  return Number(layers?.[3]) > 0;
+}
+
+export function isValidColor(string) {
+  return string && string !== "transparent" && colorIsNotTransparent(string);
+}

package/Components/Transitioner/Scene.tsx

@@ -1,6 +1,9 @@
 import React from "react";
 import { Animated, ViewProps, ViewStyle } from "react-native";
 import { useSafeAreaFrame } from "react-native-safe-area-context";
+
+import { useScreenOrientationHandler } from "@applicaster/zapp-react-native-ui-components/Components/Screen/orientationHandler";
+
 import { PathnameContext } from "../../Contexts/PathnameContext";
 import { ScreenDataContext } from "../../Contexts/ScreenDataContext";
 import { ScreenContextProvider } from "../../Contexts/ScreenContext";
@@ -42,6 +45,11 @@ export function Scene({
 }: Props) {
   const [initialScreenData, setInitialScreenData] = React.useState(screenData);
 
+  useScreenOrientationHandler({
+    screenData,
+    isActive,
+  });
+
   React.useLayoutEffect(() => {
     if (isActive) {
       setInitialScreenData(screenData);
@@ -49,13 +57,12 @@ export function Scene({
   }, [screenData, isActive]);
 
   const frame = useSafeAreaFrame();
-
   const isAnimating = animating && overlayStyle;
 
   const dimensions = isAnimating
     ? {
-        height: "100%",
         width: "100%",
+        height: "100%",
       }
     : frame;
 

package/Components/Transitioner/Transitioner.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View } from "react-native";
-import * as R from "ramda";
+import { update, compose, tail, append, take, identity } from "ramda";
 
 import { AnimationManager } from "./AnimationManager";
 import { Scene } from "./Scene";
@@ -46,7 +46,7 @@ function prepareScene(children) {
  */
 function scenesForBackTransition(props: SceneProps, { scenes }) {
   return scenes.length > 1
-    ? R.identity(scenes)
+    ? identity(scenes)
     : [prepareScene(props.children), scenes[0]];
 }
 
@@ -110,7 +110,7 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
   pushTransitionStart() {
     this.setState(
       {
-        scenes: R.append(prepareScene(this.props.children), this.state.scenes),
+        scenes: append(prepareScene(this.props.children), this.state.scenes),
         ...this.animationManager.stateForAction(this.state, NAV_ACTION_PUSH),
       },
       () => {
@@ -177,10 +177,10 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
         to: { index: 0 },
       };
     } else if (isLastSceneHook || scenes.length === 1) {
-      newState = { scenes: R.update(scenes.length - 1, newScene, scenes) };
+      newState = { scenes: update(scenes.length - 1, newScene, scenes) };
     } else {
       newState = {
-        scenes: R.compose(R.tail, R.append(newScene))(scenes),
+        scenes: compose(tail, append(newScene))(scenes),
       };
     }
 
@@ -225,7 +225,10 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
         this.shouldSkipAnimationForRoute(previousRoute) ||
         this.shouldSkipAnimationForRoute(currentRoute)
       ) {
-        return this.transitionWithoutAnimation();
+        // we are going back, in this case we need to have only one scene using resetState
+        const resetState = isGoingBack ? true : undefined;
+
+        return this.transitionWithoutAnimation(resetState);
       }
 
       switch (this.props.navigator.previousAction) {
@@ -268,7 +271,7 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
   backTransitionEnd(stepsBack) {
     this.setState({
       animating: false,
-      scenes: R.take(this.state.scenes.length - stepsBack, this.state.scenes),
+      scenes: take(this.state.scenes.length - stepsBack, this.state.scenes),
     });
   }
 
@@ -284,7 +287,7 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
       <View style={styles.container}>
         {scenes[to.index] && (
           <Scene
-            {...{ style: to.style }}
+            {...{ style: to?.style || {} }}
             pathname={pathname}
             isActive={pathname === this.props.navigator.currentRoute}
             contentStyle={contentStyle}

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

@@ -16,6 +16,13 @@ jest.mock("react-native-safe-area-context", () => ({
   })),
 }));
 
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/Screen/orientationHandler",
+  () => ({
+    useScreenOrientationHandler: jest.fn(),
+  })
+);
+
 const { Scene } = require("../Scene");
 
 const wrapper = shallow(

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

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

package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx

@@ -200,7 +200,23 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
       videoModalState.mode === "MINIMIZED" &&
       videoModalState.previousMode === "MAXIMIZED"
     ) {
-      resetPlayerAnimationState();
+      // set animation to the minimize values if moving from the player to another screen
+      if (playerAnimationState === null) {
+        setScrollModalAnimatedValue(
+          translateYOffset,
+          modalSnapPoints[1],
+          setLastSnap
+        );
+
+        resetScrollAnimatedValues(
+          lastScrollY,
+          lastScrollYValue,
+          dragScrollY,
+          dragVideoPlayerY
+        );
+      } else {
+        resetPlayerAnimationState();
+      }
     }
 
     if (
@@ -349,7 +365,12 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
 };
 
 export const AnimatedScrollModal = ({ children }: Props) => {
-  const Component = !isTV() ? AnimatedScrollModalComponent : React.Fragment;
+  const {
+    videoModalState: { visible },
+  } = useNavigation();
+
+  const Component =
+    !isTV() && visible ? AnimatedScrollModalComponent : React.Fragment;
 
   return <Component>{children}</Component>;
 };

package/Components/VideoModal/ModalAnimation/AnimatedVideoPlayerComponent.tsx

@@ -155,7 +155,11 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
 };
 
 export const AnimatedVideoPlayerComponent = ({ children }: Props) => {
-  const Component = !isTV() ? AnimatedVideoPlayer : React.Fragment;
+  const {
+    videoModalState: { visible },
+  } = useNavigation();
+
+  const Component = !isTV() && visible ? AnimatedVideoPlayer : React.Fragment;
 
   return <Component>{children}</Component>;
 };

package/Components/VideoModal/ModalAnimation/AnimationComponent.tsx

@@ -309,6 +309,23 @@ export const AnimationView = ({
     }
   }, [additionalData, screenWidth]);
 
+  React.useEffect(() => {
+    if (
+      videoModalState.mode === "MINIMIZED" &&
+      videoModalState.previousMode === "MAXIMIZED"
+    ) {
+      // set animation to the minimize values if moving from the player to another screen
+      if (playerAnimationState === null) {
+        const value = getAnimationValue(
+          animationType,
+          PlayerAnimationStateEnum.minimize
+        ).toValue;
+
+        animatedValue.setValue(value);
+      }
+    }
+  }, [videoModalState]);
+
   React.useEffect(() => {
     if (
       playerAnimationState === PlayerAnimationStateEnum.minimize &&

package/Components/VideoModal/__tests__/__snapshots__/PlayerWrapper.test.tsx.snap

@@ -72,12 +72,34 @@ exports[`PlayerWrapper renders inline 1`] = `
         testID="test-player-container"
       />
       <View
+        animationType="componentFade"
         style={
           Object {
             "flex": 1,
           }
         }
-      />
+      >
+        <View
+          configuration={
+            Object {
+              "tablet_landscape_player_container_background_color": "red",
+              "tablet_landscape_sidebar_width": "35%",
+            }
+          }
+          entry={
+            Object {
+              "id": "test",
+            }
+          }
+          isTabletLandscape={false}
+          style={
+            Object {
+              "flex": 1,
+              "paddingTop": 20,
+            }
+          }
+        />
+      </View>
     </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
@@ -158,6 +180,7 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
         style={
           Object {
             "flex": 1,
+            "paddingTop": 20,
           }
         }
       />
@@ -254,12 +277,34 @@ exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
         />
       </View>
       <View
+        animationType="componentFade"
         style={
           Object {
             "flex": 1,
           }
         }
-      />
+      >
+        <View
+          configuration={
+            Object {
+              "tablet_landscape_player_container_background_color": "red",
+              "tablet_landscape_sidebar_width": "35%",
+            }
+          }
+          entry={
+            Object {
+              "id": "test",
+            }
+          }
+          isTabletLandscape={true}
+          style={
+            Object {
+              "flex": 1,
+              "paddingTop": 20,
+            }
+          }
+        />
+      </View>
     </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
@@ -340,6 +385,7 @@ exports[`PlayerWrapper renders properly 1`] = `
         style={
           Object {
             "flex": 1,
+            "paddingTop": 20,
           }
         }
       />

package/Components/ZappFrameworkComponents/BarView/BarView.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { View, StyleSheet } from "react-native";
+import { StyleSheet } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
 
 import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import CloseButton from "./Buttons/CloseButton";
@@ -44,11 +45,11 @@ const BarView = ({ screenStyles, barState = defaultState }: Props) => {
   );
 
   return (
-    <View style={[style.view, isRTL ? style.rtlStyle : {}]}>
+    <SafeAreaView style={[style.view, isRTL ? style.rtlStyle : {}]}>
       {backButton}
       <BarTitle title={barState.title} screenStyles={screenStyles} />
       {closeButton}
-    </View>
+    </SafeAreaView>
   );
 };
 

package/Components/default-cell-renderer/__tests__/__snapshots__/defaultCellRenderer.test.tsx.snap

@@ -16,9 +16,9 @@ exports[`DefaultCellRenderer returns a react component and it renders correctly
     store={null}
     style={
       Object {
-        "backgroundColor": "#CCC",
+        "backgroundColor": "transparent",
         "margin": 12,
-        "opacity": 0.6,
+        "opacity": 1,
         "width": 169,
       }
     }
@@ -105,7 +105,7 @@ exports[`DefaultCellRenderer returns a react component for LG TVs 1`] = `
       store={null}
       style={
         Object {
-          "backgroundColor": "rgba(252,70,27,1.0)",
+          "backgroundColor": "rgba(47,47,47,1.0)",
           "borderRadius": 4,
           "flex": 1,
           "overflow": "hidden",
@@ -238,7 +238,7 @@ exports[`DefaultCellRenderer returns a react component for Samsung TVs 1`] = `
       store={null}
       style={
         Object {
-          "backgroundColor": "rgba(252,70,27,1.0)",
+          "backgroundColor": "rgba(47,47,47,1.0)",
           "borderRadius": 4,
           "flex": 1,
           "overflow": "hidden",

package/package.json

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

package/Components/Screen/TV/hooks/useRestoreFocus.ts

@@ -1,22 +0,0 @@
-import * as React from "react";
-import { isNil } from "ramda";
-import { useIsScreenActive } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
-import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
-import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
-
-export const useRestoreFocus = (): void => {
-  const isScreenActive = useIsScreenActive();
-  const previousIsScreenActive = usePrevious(isScreenActive);
-
-  React.useEffect(() => {
-    if (isNil(previousIsScreenActive)) {
-      // it's initial mounting of the screen, do nothing here
-      return;
-    }
-
-    if (!previousIsScreenActive && isScreenActive) {
-      // restore focus when we go back from next screen
-      focusManager.setInitialFocus();
-    }
-  }, [previousIsScreenActive, isScreenActive]);
-};