@applicaster/zapp-react-native-ui-components 13.0.0-alpha.6714678893 → 13.0.0-alpha.7100577251

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/MasterCellAsyncRenderManager.ts

@@ -16,13 +16,13 @@ export class MasterCellAsyncRenderManager {
   }
 
   public emitAsyncElementRegistrate = () => {
-    this.asyncElementRegistrate$.next();
+    this.asyncElementRegistrate$.next(null);
 
     return this.decrementAsyncElementRegistrationCount;
   };
 
   public emitAsyncElementLayout = () => {
-    this.asyncElementLayout$.next();
+    this.asyncElementLayout$.next(null);
   };
 
   public decrementAsyncElementRegistrationCount = () => {

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/MasterCell/utils/index.ts

@@ -103,7 +103,7 @@ export const useFilterChildren = <
       item: any;
       pluginIdentifier: string;
     };
-  }
+  },
 >(
   children: T[]
 ): T[] => {

package/Components/ModalComponent/Header/index.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { View, StyleSheet, LayoutChangeEvent } from "react-native";
+import { LayoutChangeEvent, StyleSheet, View } from "react-native";
 import { Title, TitleProps } from "./Title";
 import { CloseButton, CloseButtonProps } from "./CloseButton";
 import { getCloseButtonProps, getTitleProps } from "./utils";
@@ -60,8 +60,8 @@ export function ModalHeader(props: Props) {
           width: width - buttonsContainerWidth,
         }}
       >
-        {title && <Title {...titleProps} />}
-        {summary && <Title {...summaryProps} />}
+        {title ? <Title {...titleProps} /> : null}
+        {summary ? <Title {...summaryProps} /> : null}
       </View>
       <View style={{ width: buttonsContainerWidth }}>
         <CloseButton {...closeButtonProps} />

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/PlayerImageBackground/index.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from "react";
+import React, { PropsWithChildren, useEffect, useState } from "react";
 import { ImageBackground, View } from "react-native";
 
 import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
@@ -12,6 +12,7 @@ import {
 type Props = PropsWithChildren<{
   entry: ZappEntry;
   style?: { [K: string]: any };
+  docked?: boolean;
   imageStyle?: { [K: string]: any };
   imageKey?: string;
   defaultImageDimensions?: { [K: string]: any };
@@ -23,6 +24,7 @@ const PlayerImageBackgroundComponent = ({
   entry,
   children,
   style,
+  docked,
   imageStyle,
   imageKey,
   defaultImageDimensions,
@@ -34,8 +36,22 @@ const PlayerImageBackgroundComponent = ({
 
   const { playerAnimationState } = useModalAnimationContext();
 
+  const [lastNonNullAnimationState, setLastNonNullAnimationState] =
+    useState(playerAnimationState);
+
+  useEffect(() => {
+    if (playerAnimationState !== null) {
+      setLastNonNullAnimationState(playerAnimationState);
+    }
+  }, [playerAnimationState]);
+
   if (!source) return <>{children}</>;
 
+  const imageBackgroundStyle =
+    lastNonNullAnimationState !== PlayerAnimationStateEnum.minimize && !docked
+      ? defaultImageDimensions
+      : imageSize;
+
   return (
     <View
       style={
@@ -45,13 +61,17 @@ const PlayerImageBackgroundComponent = ({
       }
     >
       <AnimationComponent
-        style={style}
+        style={
+          playerAnimationState === PlayerAnimationStateEnum.maximaze
+            ? defaultImageDimensions
+            : style
+        }
         animationType={ComponentAnimationType.player}
         additionalData={defaultImageDimensions}
       >
         <ImageBackground
           resizeMode="cover"
-          style={imageSize}
+          style={imageBackgroundStyle}
           imageStyle={imageStyle}
           source={source}
         >