@applicaster/zapp-react-native-ui-components 13.0.0-alpha.6525006318 → 13.0.0-alpha.6944415045

package/Components/MasterCell/__tests__/__snapshots__/elementMapper.test.js.snap

@@ -10,7 +10,7 @@ exports[`elementMapper renders the nodes 1`] = `
     <ImageContainer
       key="0"
       style={
-        Object {
+        {
           "borderTopLeftRadius": 4,
           "borderTopRightRadius": 4,
           "height": 216,
@@ -22,7 +22,7 @@ exports[`elementMapper renders the nodes 1`] = `
     <View
       key="1"
       style={
-        Object {
+        {
           "height": 30,
           "marginHorizontal": 24,
           "marginTop": 24,
@@ -37,7 +37,7 @@ exports[`elementMapper renders the nodes 1`] = `
         label="Test Entry"
         numberOfLines={1}
         style={
-          Object {
+          {
             "color": "#EFEFEF",
             "fontSize": 26,
             "fontStyle": "normal",
@@ -49,7 +49,7 @@ exports[`elementMapper renders the nodes 1`] = `
     <View
       key="2"
       style={
-        Object {
+        {
           "height": 60,
           "marginHorizontal": 24,
           "marginTop": 10,
@@ -63,7 +63,7 @@ exports[`elementMapper renders the nodes 1`] = `
         label="Summary of the test entry"
         numberOfLines={2}
         style={
-          Object {
+          {
             "color": "#EFEFEF",
             "fontSize": 24,
             "fontStyle": "normal",
@@ -76,7 +76,7 @@ exports[`elementMapper renders the nodes 1`] = `
     <View
       key="3"
       style={
-        Object {
+        {
           "height": 42,
           "margin": 24,
           "width": 56,
@@ -88,7 +88,7 @@ exports[`elementMapper renders the nodes 1`] = `
       <ImageContainer
         key="0"
         style={
-          Object {
+          {
             "height": 42,
             "width": 56,
           }

package/Components/MasterCell/__tests__/__snapshots__/masterCell.test.js.snap

@@ -3,7 +3,7 @@
 exports[`masterCellBuilder when using a custom data adapter renders correctly 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -13,7 +13,7 @@ exports[`masterCellBuilder when using a custom data adapter renders correctly 1`
     key="0"
     skipButtons={false}
     style={
-      Object {
+      {
         "backgroundColor": "#2F2F2F",
         "borderRadius": 4,
         "height": 436,
@@ -22,7 +22,7 @@ exports[`masterCellBuilder when using a custom data adapter renders correctly 1`
       }
     }
     wrapperRef={
-      Object {
+      {
         "current": null,
       }
     }
@@ -33,7 +33,7 @@ exports[`masterCellBuilder when using a custom data adapter renders correctly 1`
 exports[`masterCellBuilder when using custom containerStyle renders correctly 1`] = `
 <View
   style={
-    Object {
+    {
       "backgroundColor": "black",
     }
   }
@@ -42,9 +42,9 @@ exports[`masterCellBuilder when using custom containerStyle renders correctly 1`
     cellUUID="mocked-uuid"
     key="0"
     skipButtons={false}
-    style={Object {}}
+    style={{}}
     wrapperRef={
-      Object {
+      {
         "current": null,
       }
     }
@@ -55,7 +55,7 @@ exports[`masterCellBuilder when using custom containerStyle renders correctly 1`
 exports[`masterCellBuilder when using custom default components renders correctly 1`] = `
 <mockConstructor
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -64,9 +64,9 @@ exports[`masterCellBuilder when using custom default components renders correctl
     cellUUID="mocked-uuid"
     key="0"
     skipButtons={false}
-    style={Object {}}
+    style={{}}
     wrapperRef={
-      Object {
+      {
         "current": null,
       }
     }
@@ -77,7 +77,7 @@ exports[`masterCellBuilder when using custom default components renders correctl
 exports[`masterCellBuilder when using default options can be invoked as a React Component 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -87,7 +87,7 @@ exports[`masterCellBuilder when using default options can be invoked as a React
     key="0"
     skipButtons={false}
     style={
-      Object {
+      {
         "backgroundColor": "#2F2F2F",
         "borderRadius": 4,
         "height": 436,
@@ -96,13 +96,13 @@ exports[`masterCellBuilder when using default options can be invoked as a React
       }
     }
     whoAmI={
-      Object {
+      {
         "contentType": "feed",
         "state": "default",
       }
     }
     wrapperRef={
-      Object {
+      {
         "current": null,
       }
     }
@@ -113,7 +113,7 @@ exports[`masterCellBuilder when using default options can be invoked as a React
       numberOfLines={1}
       skipButtons={false}
       style={
-        Object {
+        {
           "borderTopLeftRadius": 4,
           "borderTopRightRadius": 4,
           "height": 216,
@@ -127,7 +127,7 @@ exports[`masterCellBuilder when using default options can be invoked as a React
       key="1"
       skipButtons={false}
       style={
-        Object {
+        {
           "height": 30,
           "marginHorizontal": 24,
           "marginTop": 24,
@@ -135,7 +135,7 @@ exports[`masterCellBuilder when using default options can be invoked as a React
         }
       }
       wrapperRef={
-        Object {
+        {
           "current": null,
         }
       }
@@ -146,7 +146,7 @@ exports[`masterCellBuilder when using default options can be invoked as a React
         numberOfLines={1}
         skipButtons={false}
         style={
-          Object {
+          {
             "color": "#EFEFEF",
             "fontSize": 26,
             "fontStyle": "normal",
@@ -160,7 +160,7 @@ exports[`masterCellBuilder when using default options can be invoked as a React
       key="2"
       skipButtons={false}
       style={
-        Object {
+        {
           "height": 60,
           "marginHorizontal": 24,
           "marginTop": 10,
@@ -168,7 +168,7 @@ exports[`masterCellBuilder when using default options can be invoked as a React
         }
       }
       wrapperRef={
-        Object {
+        {
           "current": null,
         }
       }
@@ -179,7 +179,7 @@ exports[`masterCellBuilder when using default options can be invoked as a React
         numberOfLines={2}
         skipButtons={false}
         style={
-          Object {
+          {
             "color": "#EFEFEF",
             "fontSize": 24,
             "fontStyle": "normal",
@@ -194,14 +194,14 @@ exports[`masterCellBuilder when using default options can be invoked as a React
       key="3"
       skipButtons={false}
       style={
-        Object {
+        {
           "height": 42,
           "margin": 24,
           "width": 56,
         }
       }
       wrapperRef={
-        Object {
+        {
           "current": null,
         }
       }
@@ -211,7 +211,7 @@ exports[`masterCellBuilder when using default options can be invoked as a React
         key="0"
         skipButtons={false}
         style={
-          Object {
+          {
             "height": 42,
             "width": 56,
           }
@@ -227,24 +227,24 @@ exports[`masterCellBuilder when using default options renders correctly 1`] = `
 <View>
   <Memo(MasterCell)
     item={
-      Object {
-        "author": Object {
+      {
+        "author": {
           "name": "John Doe",
         },
         "id": "A1234",
-        "media_group": Array [
-          Object {
-            "media_item": Array [
-              Object {
+        "media_group": [
+          {
+            "media_item": [
+              {
                 "key": "image_base",
                 "src": "http://urlOfTheImage.net/img.png",
               },
             ],
             "type": "image",
           },
-          Object {
-            "media_item": Array [
-              Object {
+          {
+            "media_item": [
+              {
                 "key": "logo_thumbnail",
                 "src": "http://urlOfTheImage.net/channelLogo.png",
               },
@@ -255,7 +255,7 @@ exports[`masterCellBuilder when using default options renders correctly 1`] = `
         "published": "2019/03/17 02:17:46 +0000",
         "summary": "Summary of the test entry",
         "title": "Test Entry",
-        "type": Object {
+        "type": {
           "value": "feed",
         },
       }
@@ -265,7 +265,7 @@ exports[`masterCellBuilder when using default options renders correctly 1`] = `
 `;
 
 exports[`masterCellBuilder when using default options returns a function 1`] = `
-Object {
+{
   "$$typeof": Symbol(react.memo),
   "compare": null,
   "hasFocusableInside": [Function],

package/Components/MasterCell/hooks/useAsyncRendering/index.ts

@@ -8,7 +8,7 @@ import { MasterCellAsyncRenderManager } from "./MasterCellAsyncRenderManager";
 const layoutMeasure = (viewRef, onMeasure) => {
   viewRef?.measureLayout?.(
     findNodeHandle(viewRef),
-    (x, y, width, height) => {
+    (_x, _y, width, height) => {
       onMeasure({ width, height });
     },
     noop
@@ -16,7 +16,7 @@ const layoutMeasure = (viewRef, onMeasure) => {
 };
 
 const regularMeasure = (viewRef, onMeasure) => {
-  viewRef?.measure?.((x, y, width, height) => {
+  viewRef?.measure?.((_x, _y, width, height) => {
     onMeasure({ width, height });
   });
 };

package/Components/NativeFocusables/{index.js → index.ts}

@@ -1,10 +1,12 @@
 import { requireNativeComponent, View } from "react-native";
 import { isAppleTV } from "@applicaster/zapp-react-native-ui-components/Helpers/Platform";
 
+// @TODO define the types
 export const FocusableGroupNative = isAppleTV()
-  ? requireNativeComponent("FocusableGroupViewModule", null)
+  ? requireNativeComponent<any>("FocusableGroupViewModule")
   : View;
 
+// @TODO define the types
 export const FocusableItemNative = isAppleTV()
-  ? requireNativeComponent("FocusableViewModule", null)
+  ? requireNativeComponent<any>("FocusableViewModule")
   : View;

package/Components/OfflineHandler/__tests__/__snapshots__/index.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`OfflineHandler renders 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
       "position": "relative",
     }
@@ -11,7 +11,7 @@ exports[`OfflineHandler renders 1`] = `
 >
   <View
     style={
-      Object {
+      {
         "bottom": 0,
         "left": 0,
         "position": "absolute",
@@ -32,7 +32,7 @@ exports[`OfflineHandler renders 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        Object {
+        {
           "alignItems": "center",
           "backgroundColor": undefined,
           "flex": 1,
@@ -43,8 +43,8 @@ exports[`OfflineHandler renders 1`] = `
           "position": "absolute",
           "right": 0,
           "top": 0,
-          "transform": Array [
-            Object {
+          "transform": [
+            {
               "translateY": -88,
             },
           ],
@@ -54,7 +54,7 @@ exports[`OfflineHandler renders 1`] = `
     >
       <View
         style={
-          Object {
+          {
             "backgroundColor": undefined,
             "height": 44,
           }
@@ -62,7 +62,7 @@ exports[`OfflineHandler renders 1`] = `
       />
       <Text
         style={
-          Object {
+          {
             "color": undefined,
             "fontFamily": undefined,
             "fontSize": undefined,

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

@@ -2,43 +2,46 @@ import React from "react";
 
 import renderer, { act } from "react-test-renderer";
 
-jest.useFakeTimers();
+jest.useFakeTimers({ legacyFakeTimers: true });
 
-let connectionStatus = false;
-const previousValue = null;
+let mockConnectionStatus = false;
+const mockPreviousValue = null;
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/connection", () => {
   return {
-    useConnectionInfo: jest.fn(() => connectionStatus),
+    useConnectionInfo: jest.fn(() => mockConnectionStatus),
   };
 });
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/utils", () => {
   return {
-    usePrevious: jest.fn(() => previousValue),
+    usePrevious: jest.fn(() => mockPreviousValue),
   };
 });
 
-jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
-  usePickFromState: () => ({
-    plugins: [
-      {
-        name: "offline experience",
-        identifier: "offline-experience",
-        type: "general",
-        module: {
-          useOfflineExperienceConfiguration: () => ({
-            configurationFields: {},
-            localizations: {
-              offline_toast_message: "No internet connection",
-              online_toast_message: "You are back online",
-            },
-          }),
+jest.mock(
+  "@applicaster/zapp-react-native-redux/hooks/usePickFromState",
+  () => ({
+    usePickFromState: () => ({
+      plugins: [
+        {
+          name: "offline experience",
+          identifier: "offline-experience",
+          type: "general",
+          module: {
+            useOfflineExperienceConfiguration: () => ({
+              configurationFields: {},
+              localizations: {
+                offline_toast_message: "No internet connection",
+                online_toast_message: "You are back online",
+              },
+            }),
+          },
         },
-      },
-    ],
-  }),
-}));
+      ],
+    }),
+  })
+);
 
 jest.mock("react-native-safe-area-context", () => ({
   useSafeAreaInsets: () => ({ top: 44 }),
@@ -53,7 +56,7 @@ describe("OfflineHandler", () => {
   });
 
   it("renders Notification mode if component was rendered while online", () => {
-    connectionStatus = true;
+    mockConnectionStatus = true;
 
     let instance;
 

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -35,10 +35,8 @@ import {
   log_warning,
 } from "./logger";
 import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
-import {
-  useSetNavbarState,
-  useTargetScreenData,
-} from "@applicaster/zapp-react-native-utils/reactHooks/screen";
+import { useSetNavbarState } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
+import { useTargetScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useTargetScreenData";
 import {
   PlayerContainerContext,
   PlayerContainerContextProvider,
@@ -382,7 +380,7 @@ const PlayerContainerComponent = (props: Props) => {
     }
   };
 
-  const playerRemoteHandler = (component, event, isLanguageOverlayVisible) => {
+  const playerRemoteHandler = (event, isLanguageOverlayVisible) => {
     const { eventType } = event;
 
     if (!isLanguageOverlayVisible && eventType === "menu") {
@@ -625,12 +623,8 @@ const PlayerContainerComponent = (props: Props) => {
         <PlayerContainerContext.Consumer>
           {(context) => (
             <TVEventHandlerComponent
-              tvEventHandler={(component, event) =>
-                playerRemoteHandler(
-                  component,
-                  event,
-                  context.isLanguageOverlayVisible
-                )
+              tvEventHandler={(_component, event) =>
+                playerRemoteHandler(event, context.isLanguageOverlayVisible)
               }
             >
               <FocusableGroup

package/Components/PlayerContainer/PlayerContainerContext.tsx

@@ -9,11 +9,14 @@ type ContextProps = {
   setIsLanguageOverlayVisible: (isVisible) => void;
   setShowComponentsContainer: (isVisible) => void;
   showComponentsContainer: boolean;
+  setIsSeekBarTouch: (isTouch) => void;
+  isSeekBarTouch: boolean;
 };
 
 export const PlayerContainerContext = createContext({
   ignoreOffsetContainer: false,
   isLanguageOverlayVisible: false,
+  isSeekBarTouch: false,
 } as ContextProps);
 
 type Props = {
@@ -40,6 +43,8 @@ export const PlayerContainerContextProvider = ({
   const [showComponentsContainer, setShowComponentsContainer] =
     React.useState(true);
 
+  const [isSeekBarTouch, setIsSeekBarTouch] = React.useState(false);
+
   const value = React.useMemo(
     () => ({
       ignoreOffsetContainer,
@@ -49,6 +54,8 @@ export const PlayerContainerContextProvider = ({
       setIsLanguageOverlayVisible,
       showComponentsContainer,
       setShowComponentsContainer: inline ? setShowComponentsContainer : null,
+      isSeekBarTouch,
+      setIsSeekBarTouch,
     }),
     [
       ignoreOffsetContainer,
@@ -58,6 +65,8 @@ export const PlayerContainerContextProvider = ({
       setIsLanguageOverlayVisible,
       showComponentsContainer,
       setShowComponentsContainer,
+      isSeekBarTouch,
+      setIsSeekBarTouch,
     ]
   );
 

package/Components/River/RefreshControl.tsx

@@ -9,7 +9,7 @@ import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { useLocalizedStrings } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import { useAnalytics } from "@applicaster/zapp-react-native-utils/analyticsUtils";
 import { useSendAnalyticsEventWithFunction } from "@applicaster/zapp-react-native-utils/analyticsUtils/helpers/hooks";
-import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
+import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useCurrentScreenData";
 import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
 import { useDispatch } from "react-redux";
 import { useShallow } from "zustand/react/shallow";

package/Components/River/TV/index.tsx

@@ -1,4 +1,9 @@
+import { compose } from "ramda";
 import { River as RiverComponent } from "./River";
 import { withTvEventHandler } from "./withTVEventHandler";
+import { withComponentsMapOffsetContext } from "../../../Contexts/ComponentsMapOffsetContext";
 
-export const River = withTvEventHandler(RiverComponent);
+export const River = compose(
+  withTvEventHandler,
+  withComponentsMapOffsetContext
+)(RiverComponent);

package/Components/River/__tests__/__snapshots__/componentsMap.test.js.snap

@@ -3,7 +3,7 @@
 exports[`componentsMap renders renders components map correctly 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -11,7 +11,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
   <View
     onLayout={[Function]}
     style={
-      Object {
+      {
         "flex": 1,
       }
     }
@@ -19,7 +19,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
     <RCTScrollView
       ListFooterComponent={[Function]}
       contentContainerStyle={
-        Object {
+        {
           "paddingBottom": undefined,
           "paddingLeft": undefined,
           "paddingRight": undefined,
@@ -27,22 +27,22 @@ exports[`componentsMap renders renders components map correctly 1`] = `
         }
       }
       data={
-        Array [
-          Object {
+        [
+          {
             "component_type": "hero",
             "id": "A1",
-            "styles": Object {
-              "cell_styles": Array [
+            "styles": {
+              "cell_styles": [
                 "some",
                 "obsolete",
                 "ids",
               ],
             },
           },
-          Object {
+          {
             "component_type": "grid",
             "id": "A2",
-            "styles": Object {
+            "styles": {
               "master_cell_id": "uuid-5678-B",
             },
           },
@@ -66,12 +66,12 @@ exports[`componentsMap renders renders components map correctly 1`] = `
       renderItem={[Function]}
       scrollEventThrottle={16}
       scrollIndicatorInsets={
-        Object {
+        {
           "right": 1,
         }
       }
-      stickyHeaderIndices={Array []}
-      viewabilityConfigCallbackPairs={Array []}
+      stickyHeaderIndices={[]}
+      viewabilityConfigCallbackPairs={[]}
       windowSize={12}
     >
       <View>
@@ -81,7 +81,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
         >
           <View
             style={
-              Object {
+              {
                 "display": "flex",
               }
             }
@@ -89,7 +89,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
             <View
               onLayout={[Function]}
               style={
-                Object {
+                {
                   "flex": 1,
                 }
               }
@@ -104,7 +104,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
         >
           <View
             style={
-              Object {
+              {
                 "display": "none",
               }
             }
@@ -112,7 +112,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
             <View
               onLayout={[Function]}
               style={
-                Object {
+                {
                   "flex": 1,
                 }
               }
@@ -127,7 +127,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
           <View
             renderToHardwareTextureAndroid={true}
             style={
-              Object {
+              {
                 "alignItems": "center",
                 "height": null,
                 "justifyContent": "center",