@applicaster/zapp-react-native-ui-components 14.0.0-alpha.8419134002 → 14.0.0-alpha.9848043301

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

@@ -21,87 +21,27 @@ exports[`PlayerWrapper renders inline 1`] = `
         "top": "additive",
       }
     }
-    style={
-      [
-        {
-          "backgroundColor": "transparent",
-        },
-        {
-          "height": 800,
-          "width": 300,
-        },
-        {},
-      ]
-    }
+    style={{}}
   >
     <View
-      additionalData={
-        {
-          "saveArea": true,
-        }
-      }
-      animationType="moveUpComponent"
       style={
         [
           {
-            "flexDirection": "column",
+            "alignSelf": "center",
+            "position": "relative",
+            "zIndex": 200,
           },
+          {},
           {
-            "flex": 1,
+            "aspectRatio": 1.7777777777777777,
+            "height": undefined,
+            "width": "100%",
           },
+          {},
         ]
       }
-    >
-      <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>
+      testID="test-player-container"
+    />
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
 `;
@@ -127,57 +67,27 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
         "top": "additive",
       }
     }
-    style={
-      [
-        {
-          "backgroundColor": "transparent",
-        },
-        {
-          "height": undefined,
-          "width": 300,
-        },
-        {},
-      ]
-    }
+    style={{}}
   >
     <View
-      additionalData={
-        {
-          "saveArea": true,
-        }
-      }
-      animationType="moveUpComponent"
       style={
         [
           {
-            "flexDirection": "column",
+            "alignSelf": "center",
+            "position": "relative",
+            "zIndex": 200,
           },
+          {},
           {
-            "flex": 1,
+            "aspectRatio": 1.7777777777777777,
+            "height": undefined,
+            "width": "100%",
           },
+          {},
         ]
       }
-    >
-      <View
-        style={
-          [
-            {
-              "alignSelf": "center",
-              "position": "relative",
-              "zIndex": 200,
-            },
-            {
-              "aspectRatio": undefined,
-              "height": undefined,
-              "width": "100%",
-            },
-            {},
-            {},
-          ]
-        }
-        testID="test-player-container"
-      />
-    </View>
+      testID="test-player-container"
+    />
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
 `;
@@ -203,103 +113,27 @@ exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
         "top": "additive",
       }
     }
-    style={
-      [
-        {
-          "backgroundColor": "red",
-        },
-        {
-          "height": 800,
-          "width": 300,
-        },
-        {},
-      ]
-    }
+    style={{}}
   >
     <View
-      additionalData={
-        {
-          "saveArea": true,
-        }
-      }
-      animationType="moveUpComponent"
       style={
         [
           {
-            "flexDirection": "row",
+            "alignSelf": "center",
+            "position": "relative",
+            "zIndex": 200,
           },
+          {},
           {
-            "flex": 1,
+            "aspectRatio": 1.7777777777777777,
+            "height": undefined,
+            "width": 195,
           },
+          {},
         ]
       }
-    >
-      <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>
+      testID="test-player-container"
+    />
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
 `;
@@ -325,57 +159,27 @@ exports[`PlayerWrapper renders properly 1`] = `
         "top": "additive",
       }
     }
-    style={
-      [
-        {
-          "backgroundColor": "transparent",
-        },
-        {
-          "height": 800,
-          "width": 300,
-        },
-        {},
-      ]
-    }
+    style={{}}
   >
     <View
-      additionalData={
-        {
-          "saveArea": true,
-        }
-      }
-      animationType="moveUpComponent"
       style={
         [
           {
-            "flexDirection": "column",
+            "alignSelf": "center",
+            "position": "relative",
+            "zIndex": 200,
           },
+          {},
           {
-            "flex": 1,
+            "aspectRatio": 1.7786666666666666,
+            "height": undefined,
+            "width": "100%",
           },
+          {},
         ]
       }
-    >
-      <View
-        style={
-          [
-            {
-              "alignSelf": "center",
-              "position": "relative",
-              "zIndex": 200,
-            },
-            {
-              "aspectRatio": 1.7786666666666666,
-              "height": undefined,
-              "width": "100%",
-            },
-            {},
-            {},
-          ]
-        }
-        testID="test-player-container"
-      />
-    </View>
+      testID="test-player-container"
+    />
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
 `;

package/Components/VideoModal/hooks/index.ts

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

package/Components/VideoModal/utils.ts

@@ -34,6 +34,9 @@ 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()
@@ -43,6 +46,9 @@ 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, { FC, ReactNode, useEffect, useRef, useState } from "react";
-import { Dimensions, View } from "react-native";
+import React, { useEffect, useState, useRef, ReactNode, FC } from "react";
+import { View, Dimensions } 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 = () => {
-    clearInterval(interval);
+    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,
-  FOCUSED_TEXT_COLOR,
-  getColor,
   MAIN_TEXT_COLOR,
-} from "../../../colors";
+  FOCUSED_TEXT_COLOR,
+} from "../../../colors/index";
 
 const Image = "Image";
 const View = "View";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "14.0.0-alpha.8419134002",
+  "version": "14.0.0-alpha.9848043301",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -31,10 +31,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "14.0.0-alpha.8419134002",
-    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.8419134002",
-    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.8419134002",
-    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.8419134002",
+    "@applicaster/applicaster-types": "14.0.0-alpha.9848043301",
+    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.9848043301",
+    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.9848043301",
+    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.9848043301",
     "promise": "^8.3.0",
     "url": "^0.11.0",
     "uuid": "^3.3.2"

package/Components/AudioPlayer/index.tsx

@@ -1,15 +0,0 @@
-import * as React from "react";
-import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
-
-import { AudioPlayerTV } from "./tv";
-import { AudioPlayerMobile } from "./mobile";
-
-import { Props } from "./types";
-
-export function AudioPlayer(props: Props) {
-  if (isTV()) {
-    return <AudioPlayerTV {...props} />;
-  }
-
-  return <AudioPlayerMobile {...props} />;
-}

package/Components/AudioPlayer/mobile/Layout.tsx

@@ -1,66 +0,0 @@
-import React, { useRef } from "react";
-import {
-  View,
-  ImageBackground,
-  Animated,
-  ViewStyle,
-  StyleSheet,
-} from "react-native";
-import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
-
-const THREE_SECONDS = 3000;
-
-const styles = StyleSheet.create({
-  flex: {
-    flex: 1,
-  },
-});
-
-type Props = {
-  backgroundImageSource: { uri: string };
-  style: ViewStyle;
-};
-
-export function AudioPlayerMobileLayout({
-  backgroundImageSource,
-  style,
-}: Props) {
-  const fadeAnimation = useRef(new Animated.Value(0)).current;
-
-  const mainContainerStyles = platformSelect({
-    native: {
-      backgroundColor: "transparent",
-      overflow: "hidden",
-      ...style,
-    },
-  });
-
-  React.useEffect(() => {
-    Animated.timing(fadeAnimation, {
-      toValue: 1,
-      duration: THREE_SECONDS,
-      useNativeDriver: true,
-    }).start();
-  }, []);
-
-  return (
-    <View style={mainContainerStyles} pointerEvents="none">
-      <Animated.View
-        style={[
-          mainContainerStyles,
-          {
-            opacity: fadeAnimation,
-          },
-        ]}
-      >
-        <ImageBackground
-          source={backgroundImageSource}
-          style={styles.flex}
-          resizeMode="cover"
-        >
-          <View style={mainContainerStyles} />
-        </ImageBackground>
-      </Animated.View>
-    </View>
-  );
-}

package/Components/AudioPlayer/mobile/__tests__/audioPlayerMobileLayout.test.js

@@ -1,18 +0,0 @@
-import React from "react";
-import { render } from "@testing-library/react-native";
-
-import { AudioPlayerMobileLayout } from "../Layout";
-
-const audioPlayerLayoutProps = {
-  backgroundImageSource: { uri: "background_image_url" },
-};
-
-describe("<AudioPlayerMobileLayout />", () => {
-  it("renders correctly", () => {
-    const { toJSON } = render(
-      <AudioPlayerMobileLayout {...audioPlayerLayoutProps} />
-    );
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-});

package/Components/AudioPlayer/mobile/index.tsx

@@ -1,18 +0,0 @@
-import * as React from "react";
-import { useBackgroundImage } from "@applicaster/zapp-react-native-utils/audioPlayerUtils";
-
-import { AudioPlayerMobileLayout } from "./Layout";
-import { Props } from "../types";
-
-export function AudioPlayerMobile(props: Props) {
-  const { audio_item, style = {} } = props;
-
-  const backgroundImageSource = useBackgroundImage(audio_item);
-
-  return (
-    <AudioPlayerMobileLayout
-      backgroundImageSource={backgroundImageSource}
-      style={style}
-    />
-  );
-}