@applicaster/zapp-react-native-ui-components 12.0.0-alpha.4462655310 → 12.0.0-alpha.4484269996

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

@@ -42,9 +42,14 @@ exports[`PlayerWrapper renders inline 1`] = `
       }
       animationType="moveUpComponent"
       style={
-        Object {
-          "flexDirection": "column",
-        }
+        Array [
+          Object {
+            "flexDirection": "column",
+          },
+          Object {
+            "flex": 1,
+          },
+        ]
       }
     >
       <View
@@ -67,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>
@@ -120,9 +147,14 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
       }
       animationType="moveUpComponent"
       style={
-        Object {
-          "flexDirection": "column",
-        }
+        Array [
+          Object {
+            "flexDirection": "column",
+          },
+          Object {
+            "flex": 1,
+          },
+        ]
       }
     >
       <View
@@ -148,6 +180,7 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
         style={
           Object {
             "flex": 1,
+            "paddingTop": 20,
           }
         }
       />
@@ -198,9 +231,14 @@ exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
       }
       animationType="moveUpComponent"
       style={
-        Object {
-          "flexDirection": "row",
-        }
+        Array [
+          Object {
+            "flexDirection": "row",
+          },
+          Object {
+            "flex": 1,
+          },
+        ]
       }
     >
       <View
@@ -239,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>
@@ -292,9 +352,14 @@ exports[`PlayerWrapper renders properly 1`] = `
       }
       animationType="moveUpComponent"
       style={
-        Object {
-          "flexDirection": "column",
-        }
+        Array [
+          Object {
+            "flexDirection": "column",
+          },
+          Object {
+            "flex": 1,
+          },
+        ]
       }
     >
       <View
@@ -320,6 +385,7 @@ exports[`PlayerWrapper renders properly 1`] = `
         style={
           Object {
             "flex": 1,
+            "paddingTop": 20,
           }
         }
       />

package/Components/VideoModal/hooks/useModalSize.ts

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { Dimensions } from "react-native";
 import { useIsTabletLandscape } from "@applicaster/zapp-react-native-utils/reactHooks/device/useMemoizedIsTablet";
 import {
   addOrientationChangeListener,
@@ -9,11 +8,10 @@ import {
 } from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
 
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
+import { useSafeAreaFrame } from "react-native-safe-area-context";
 
 const { Logger } = getXray();
 
-const { width: WIDTH, height: HEIGHT } = Dimensions.get("window");
-
 const logger = new Logger(
   "hooks",
   "zapp-react-native-ui-components/Components/VideoModal"
@@ -24,20 +22,18 @@ type Size = {
   height: number | string;
 };
 
-const MODAL_SIZE_FOR_PORTRAIT: Size = {
-  width: WIDTH,
-  height: HEIGHT,
-};
-
 const MODAL_SIZE_FOR_LANDSCAPE: Size = {
   width: "100%",
   height: "100%",
 };
 
 export const useModalSize = (): Size => {
-  const [modalSize, setModalSize] = React.useState<Size>(
-    MODAL_SIZE_FOR_PORTRAIT
-  );
+  const frame = useSafeAreaFrame();
+
+  const [modalSize, setModalSize] = React.useState<Size>({
+    width: frame.width,
+    height: frame.height,
+  });
 
   const setNewModalSize = React.useCallback((newSize, log) => {
     setModalSize((oldSize) => {
@@ -90,7 +86,9 @@ export const useModalSize = (): Size => {
           toOrientation === ORIENTATIONS.landscapeSensor;
 
         setNewModalSize(
-          isLandscape ? MODAL_SIZE_FOR_LANDSCAPE : MODAL_SIZE_FOR_PORTRAIT,
+          isLandscape
+            ? MODAL_SIZE_FOR_LANDSCAPE
+            : { width: frame.width, height: frame.height },
           `useModalSize: set modal size ${
             isLandscape ? "landscape" : "portrait"
           } for orientation: ${to}`

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/Contexts/FocusableGroupContext/FocusableGroupContext.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+
+export const FocusableGroupContext = React.createContext<string | null>(null);

package/Contexts/FocusableGroupContext/FocusableGroupContextProvider.tsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { FocusableGroupContext } from "./FocusableGroupContext";
+
+type ProviderArgs = {
+  id: string;
+  children: React.ReactNode;
+};
+
+export const FocusableGroupContextProvider = ({
+  id,
+  children,
+}: ProviderArgs) => (
+  <FocusableGroupContext.Provider value={id}>
+    {children}
+  </FocusableGroupContext.Provider>
+);

package/Contexts/FocusableGroupContext/__tests__/FocusableGroupContextProvider.test.tsx

@@ -0,0 +1,22 @@
+import React, { useContext } from "react";
+import { Text } from "react-native";
+import { render } from "@testing-library/react-native";
+import { FocusableGroupContextProvider, FocusableGroupContext } from "../";
+
+const MockComponent = () => {
+  const focusableContext = useContext(FocusableGroupContext) || "default";
+
+  return <Text testID={focusableContext} />;
+};
+
+describe("FocusableGroupContextProvider", () => {
+  it("should provide focusable context to the wrapped component", () => {
+    const { getByTestId } = render(
+      <FocusableGroupContextProvider id="testId">
+        <MockComponent />
+      </FocusableGroupContextProvider>
+    );
+
+    expect(getByTestId("testId")).toBeTruthy();
+  });
+});

package/Contexts/FocusableGroupContext/__tests__/withFocusableContext.test.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Text } from "react-native";
+import { render } from "@testing-library/react-native";
+import { withFocusableContext } from "../withFocusableContext";
+import { FocusableGroupContext } from "../FocusableGroupContext";
+
+const MockComponent = ({ groupId }: { groupId: string }) => (
+  <Text testID={groupId} />
+);
+
+const WrappedComponent = withFocusableContext(MockComponent);
+
+describe("withFocusableContext HOC", () => {
+  it("should provide focusable context to the wrapped component", () => {
+    const { getByTestId } = render(<WrappedComponent />, {
+      // eslint-disable-next-line react/display-name
+      wrapper: ({ children }: { children: React.ReactElement }) => (
+        <FocusableGroupContext.Provider value="test">
+          {children}
+        </FocusableGroupContext.Provider>
+      ),
+    });
+
+    expect(getByTestId("test")).toBeTruthy();
+  });
+});

package/Contexts/FocusableGroupContext/index.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { FocusableGroupContext } from "./FocusableGroupContext";
+import { FocusableGroupContextProvider } from "./FocusableGroupContextProvider";
+
+export { FocusableGroupContext, FocusableGroupContextProvider };
+
+export const useGroupId = () => React.useContext(FocusableGroupContext);

package/Contexts/FocusableGroupContext/withFocusableContext.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { FocusableGroupContext } from "./FocusableGroupContext";
+
+export const withFocusableContext = (Component) => {
+  // eslint-disable-next-line react/display-name
+  return ({ groupId, ...props }: Record<string, any>) => (
+    <FocusableGroupContext.Consumer>
+      {(groupIdContext: string) => {
+        // eslint-disable-next-line react/display-name
+        const propsGroupId = groupId || null;
+        const providedGroupId = propsGroupId || groupIdContext;
+
+        return <Component {...props} groupId={providedGroupId} />;
+      }}
+    </FocusableGroupContext.Consumer>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.0-alpha.4462655310",
+  "version": "12.0.0-alpha.4484269996",
   "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.4462655310",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.4462655310",
-    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.4462655310",
-    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.4462655310",
+    "@applicaster/applicaster-types": "12.0.0-alpha.4484269996",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.4484269996",
+    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.4484269996",
+    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.4484269996",
     "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]);
-};