@applicaster/zapp-react-native-ui-components 14.0.0-alpha.5621117258 → 14.0.0-alpha.6242515303

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

@@ -21,27 +21,87 @@ exports[`PlayerWrapper renders inline 1`] = `
         "top": "additive",
       }
     }
-    style={{}}
+    style={
+      [
+        {
+          "backgroundColor": "transparent",
+        },
+        {
+          "height": 800,
+          "width": 300,
+        },
+        {},
+      ]
+    }
   >
     <View
+      additionalData={
+        {
+          "saveArea": true,
+        }
+      }
+      animationType="moveUpComponent"
       style={
         [
           {
-            "alignSelf": "center",
-            "position": "relative",
-            "zIndex": 200,
+            "flexDirection": "column",
           },
-          {},
           {
-            "aspectRatio": 1.7777777777777777,
-            "height": undefined,
-            "width": "100%",
+            "flex": 1,
           },
-          {},
         ]
       }
-      testID="test-player-container"
-    />
+    >
+      <View
+        style={
+          [
+            {
+              "alignSelf": "center",
+              "position": "relative",
+              "zIndex": 200,
+            },
+            {
+              "aspectRatio": 1.7777777777777777,
+              "height": undefined,
+              "width": "100%",
+            },
+            {},
+            {},
+          ]
+        }
+        testID="test-player-container"
+      />
+      <View
+        animationType="componentFade"
+        style={
+          {
+            "flex": 1,
+          }
+        }
+      >
+        <View
+          configuration={
+            {
+              "tablet_landscape_player_container_background_color": "red",
+              "tablet_landscape_sidebar_width": "35%",
+            }
+          }
+          entry={
+            {
+              "id": "test",
+            }
+          }
+          isTablet={false}
+          isTabletLandscape={false}
+          style={
+            {
+              "flex": 1,
+              "paddingTop": 20,
+            }
+          }
+        />
+      </View>
+    </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
 `;
@@ -67,27 +127,57 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
         "top": "additive",
       }
     }
-    style={{}}
+    style={
+      [
+        {
+          "backgroundColor": "transparent",
+        },
+        {
+          "height": undefined,
+          "width": 300,
+        },
+        {},
+      ]
+    }
   >
     <View
+      additionalData={
+        {
+          "saveArea": true,
+        }
+      }
+      animationType="moveUpComponent"
       style={
         [
           {
-            "alignSelf": "center",
-            "position": "relative",
-            "zIndex": 200,
+            "flexDirection": "column",
           },
-          {},
           {
-            "aspectRatio": 1.7777777777777777,
-            "height": undefined,
-            "width": "100%",
+            "flex": 1,
           },
-          {},
         ]
       }
-      testID="test-player-container"
-    />
+    >
+      <View
+        style={
+          [
+            {
+              "alignSelf": "center",
+              "position": "relative",
+              "zIndex": 200,
+            },
+            {
+              "aspectRatio": undefined,
+              "height": undefined,
+              "width": "100%",
+            },
+            {},
+            {},
+          ]
+        }
+        testID="test-player-container"
+      />
+    </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
 `;
@@ -113,27 +203,103 @@ exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
         "top": "additive",
       }
     }
-    style={{}}
+    style={
+      [
+        {
+          "backgroundColor": "red",
+        },
+        {
+          "height": 800,
+          "width": 300,
+        },
+        {},
+      ]
+    }
   >
     <View
+      additionalData={
+        {
+          "saveArea": true,
+        }
+      }
+      animationType="moveUpComponent"
       style={
         [
           {
-            "alignSelf": "center",
-            "position": "relative",
-            "zIndex": 200,
+            "flexDirection": "row",
           },
-          {},
           {
-            "aspectRatio": 1.7777777777777777,
-            "height": undefined,
-            "width": 195,
+            "flex": 1,
           },
-          {},
         ]
       }
-      testID="test-player-container"
-    />
+    >
+      <View
+        style={
+          [
+            {
+              "alignSelf": "center",
+              "position": "relative",
+              "zIndex": 200,
+            },
+            {
+              "aspectRatio": 1.7777777777777777,
+              "height": undefined,
+              "width": 195,
+            },
+            {},
+            {},
+          ]
+        }
+        testID="test-player-container"
+      >
+        <View
+          additionalData={
+            {
+              "disableAnimatedComponent": false,
+              "resetAnimationValue": undefined,
+              "useLayoutMeasure": true,
+            }
+          }
+          animationType="moveUpComponent"
+          style={
+            {
+              "flex": 1,
+            }
+          }
+        />
+      </View>
+      <View
+        animationType="componentFade"
+        style={
+          {
+            "flex": 1,
+          }
+        }
+      >
+        <View
+          configuration={
+            {
+              "tablet_landscape_player_container_background_color": "red",
+              "tablet_landscape_sidebar_width": "35%",
+            }
+          }
+          entry={
+            {
+              "id": "test",
+            }
+          }
+          isTablet={true}
+          isTabletLandscape={true}
+          style={
+            {
+              "flex": 1,
+              "paddingTop": 20,
+            }
+          }
+        />
+      </View>
+    </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
 `;
@@ -159,27 +325,57 @@ exports[`PlayerWrapper renders properly 1`] = `
         "top": "additive",
       }
     }
-    style={{}}
+    style={
+      [
+        {
+          "backgroundColor": "transparent",
+        },
+        {
+          "height": 800,
+          "width": 300,
+        },
+        {},
+      ]
+    }
   >
     <View
+      additionalData={
+        {
+          "saveArea": true,
+        }
+      }
+      animationType="moveUpComponent"
       style={
         [
           {
-            "alignSelf": "center",
-            "position": "relative",
-            "zIndex": 200,
+            "flexDirection": "column",
           },
-          {},
           {
-            "aspectRatio": 1.7786666666666666,
-            "height": undefined,
-            "width": "100%",
+            "flex": 1,
           },
-          {},
         ]
       }
-      testID="test-player-container"
-    />
+    >
+      <View
+        style={
+          [
+            {
+              "alignSelf": "center",
+              "position": "relative",
+              "zIndex": 200,
+            },
+            {
+              "aspectRatio": 1.7786666666666666,
+              "height": undefined,
+              "width": "100%",
+            },
+            {},
+            {},
+          ]
+        }
+        testID="test-player-container"
+      />
+    </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
 `;

package/Components/VideoModal/hooks/__tests__/useDelayedPlayerDetails.test.ts

@@ -1,19 +1,9 @@
 import { renderHook } from "@testing-library/react-hooks";
 import { useDelayedPlayerDetails } from "../useDelayedPlayerDetails";
-import { withTimeout$ } from "@applicaster/zapp-react-native-utils/idleUtils";
-import { showDetails } from "../utils";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 
-jest.mock("@applicaster/zapp-react-native-utils/idleUtils", () => ({
-  withTimeout$: jest.fn(),
-}));
-
-jest.mock("../utils", () => ({
-  showDetails: jest.fn(),
-}));
-
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
-  useIsTablet: jest.fn(),
+  useIsTablet: jest.fn().mockReturnValue(false),
 }));
 
 describe("useDelayedPlayerDetails", () => {
@@ -21,69 +11,41 @@ describe("useDelayedPlayerDetails", () => {
     jest.clearAllMocks();
   });
 
-  it("should return false initially", () => {
-    (withTimeout$ as jest.Mock).mockReturnValue({
-      subscribe: jest.fn().mockReturnValue({ unsubscribe: jest.fn() }),
-    });
-
+  it("should return true initially", () => {
     const { result } = renderHook(() =>
       useDelayedPlayerDetails({ isInline: true, isDocked: false, isPip: false })
     );
 
-    expect(result.current).toBe(false);
+    expect(result.current).toBe(true);
   });
 
-  it("should return true if showDetails returns true", () => {
-    (withTimeout$ as jest.Mock).mockReturnValue({
-      subscribe: (callback) => {
-        callback.next();
-
-        return { unsubscribe: jest.fn() };
-      },
-    });
-
-    (showDetails as jest.Mock).mockReturnValue(true);
-    (useIsTablet as jest.Mock).mockReturnValue(false);
-
+  it("should return false when isPip is true", () => {
     const { result } = renderHook(() =>
-      useDelayedPlayerDetails({ isInline: true, isDocked: false, isPip: false })
+      useDelayedPlayerDetails({ isInline: true, isDocked: true, isPip: true })
     );
 
-    expect(result.current).toBe(true);
+    expect(result.current).toBe(false);
   });
 
-  it("should return false if showDetails returns false", () => {
-    (withTimeout$ as jest.Mock).mockReturnValue({
-      subscribe: (callback) => {
-        callback.next();
-
-        return { unsubscribe: jest.fn() };
-      },
-    });
-
-    (showDetails as jest.Mock).mockReturnValue(false);
-    (useIsTablet as jest.Mock).mockReturnValue(false);
-
+  it("should return false when isDocked is true", () => {
     const { result } = renderHook(() =>
-      useDelayedPlayerDetails({ isInline: true, isDocked: false, isPip: false })
+      useDelayedPlayerDetails({ isInline: true, isDocked: true, isPip: false })
     );
 
     expect(result.current).toBe(false);
   });
 
-  it("should unsubscribe on unmount", () => {
-    const unsubscribeMock = jest.fn();
+  it("should return true for tablet regardless of other flags", () => {
+    (useIsTablet as jest.Mock).mockReturnValue(true);
 
-    (withTimeout$ as jest.Mock).mockReturnValue({
-      subscribe: jest.fn().mockReturnValue({ unsubscribe: unsubscribeMock }),
-    });
-
-    const { unmount } = renderHook(() =>
-      useDelayedPlayerDetails({ isInline: true, isDocked: false, isPip: false })
+    const { result } = renderHook(() =>
+      useDelayedPlayerDetails({
+        isInline: false,
+        isDocked: false,
+        isPip: false,
+      })
     );
 
-    unmount();
-
-    expect(unsubscribeMock).toHaveBeenCalled();
+    expect(result.current).toBe(true);
   });
 });

package/Components/VideoModal/hooks/index.ts

@@ -1,3 +1,5 @@
+export { useBackgroundColor } from "./useBackgroundColor";
+
 export { useDelayedPlayerDetails } from "./useDelayedPlayerDetails";
 
 export { useInitialPlayerState } from "./useInitialPlayerState";

package/Components/VideoModal/hooks/useBackgroundColor.ts

@@ -0,0 +1,10 @@
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import { useConfiguration } from "../utils";
+
+export const useBackgroundColor = (): string => {
+  const { modal_background_color: modalBackgroundColor } = useConfiguration();
+
+  const theme = useTheme<BaseThemePropertiesMobile>();
+
+  return modalBackgroundColor || theme?.status_background_color;
+};

package/Components/VideoModal/hooks/useDelayedPlayerDetails.ts

@@ -1,13 +1,23 @@
-import * as React from "react";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
-import { withTimeout$ } from "@applicaster/zapp-react-native-utils/idleUtils";
 
 import { showDetails } from "./utils";
 
-const TIMEOUT = 100; // ms
-
 type Props = { isInline: boolean; isDocked: boolean; isPip: boolean };
 
+const showPlayerDetails = (
+  isInline: boolean,
+  isDocked: boolean,
+  isPip: boolean,
+  isTablet: boolean
+) => {
+  return showDetails({
+    isMobile: !isTablet,
+    isInline,
+    isDocked,
+    isPip,
+  });
+};
+
 /**
  * Custom hook to determine whether to show player details with a delay.
  *
@@ -22,28 +32,7 @@ export const useDelayedPlayerDetails = ({
   isDocked,
   isPip,
 }: Props): boolean => {
-  const [shouldShowDetails, setShouldShowDetails] = React.useState(false);
-
   const isTablet = useIsTablet();
 
-  React.useEffect(() => {
-    const subscription = withTimeout$(TIMEOUT).subscribe({
-      next: () => {
-        setShouldShowDetails(() => {
-          return showDetails({
-            isMobile: !isTablet,
-            isInline,
-            isDocked,
-            isPip,
-          });
-        });
-      },
-    });
-
-    return () => {
-      subscription.unsubscribe();
-    };
-  }, [isDocked, isTablet, isInline, isPip]);
-
-  return shouldShowDetails;
+  return showPlayerDetails(isInline, isDocked, isPip, isTablet);
 };

package/Components/VideoModal/utils.ts

@@ -34,9 +34,6 @@ export const useConfiguration = () => {
     minimised_height = 0,
     minimised_height_tablet = 0,
     modal_background_color,
-    tablet_landscape_player_container_background_color,
-    screen_background_color,
-    audio_player_background_color,
   } = config;
 
   const minimisedHeight = useIsTablet()
@@ -46,9 +43,6 @@ export const useConfiguration = () => {
   return {
     minimised_height: Number(minimisedHeight),
     modal_background_color,
-    tablet_landscape_player_container_background_color,
-    audio_player_background_color,
-    screen_background_color,
   };
 };
 

package/Components/Viewport/VisibilitySensor/VisibilitySensor.tsx

@@ -4,8 +4,8 @@ which helps in detecting whether a given component is visible within the viewpor
 It is useful for implementing lazy loading or triggering specific actions when a component comes into view.
 */
 
-import React, { useEffect, useState, useRef, ReactNode, FC } from "react";
-import { View, Dimensions } from "react-native";
+import React, { FC, ReactNode, useEffect, useRef, useState } from "react";
+import { Dimensions, View } from "react-native";
 import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 
@@ -78,7 +78,7 @@ const VisibilitySensorComponent: FC<Props> = ({
   };
 
   const stopWatching = () => {
-    interval = clearInterval(interval);
+    clearInterval(interval);
   };
 
   const isInViewPort = () => {

package/Components/default-cell-renderer/viewTrees/tv/DefaultCell/index.ts

@@ -1,10 +1,10 @@
 import {
-  getColor,
   ACTIVE_COLOR,
   BACKGROUND_COLOR,
-  MAIN_TEXT_COLOR,
   FOCUSED_TEXT_COLOR,
-} from "../../../colors/index";
+  getColor,
+  MAIN_TEXT_COLOR,
+} from "../../../colors";
 
 const Image = "Image";
 const View = "View";

package/index.d.ts

@@ -24,7 +24,6 @@ type GeneralContentScreenProps = {
   } & Record<string, any>;
   focused?: boolean;
   parentFocus?: ParentFocus;
-  extraOffset?: number;
   containerHeight?: number;
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "14.0.0-alpha.5621117258",
+  "version": "14.0.0-alpha.6242515303",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,14 +27,11 @@
     "url": "https://github.com/applicaster/quickbrick/issues"
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
-  "devDependencies": {
-    "redux-mock-store": "^1.5.3"
-  },
   "dependencies": {
-    "@applicaster/applicaster-types": "14.0.0-alpha.5621117258",
-    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.5621117258",
-    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.5621117258",
-    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.5621117258",
+    "@applicaster/applicaster-types": "14.0.0-alpha.6242515303",
+    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.6242515303",
+    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.6242515303",
+    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.6242515303",
     "promise": "^8.3.0",
     "url": "^0.11.0",
     "uuid": "^3.3.2"