@applicaster/zapp-react-native-ui-components 14.0.0-alpha.2345544020 → 14.0.0-alpha.4748018412

package/Components/AudioPlayer/Artwork.tsx

@@ -1,7 +1,17 @@
 import React from "react";
-import { View, Image } from "react-native";
+import { View, Image, StyleSheet } from "react-native";
 import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
 
+const styles = StyleSheet.create({
+  container: {
+    marginHorizontal: 24,
+  },
+  image: {
+    width: 400,
+    height: 400,
+  },
+});
+
 type Props = {
   srcImage: string;
   config?: {
@@ -14,24 +24,15 @@ type Props = {
   };
 };
 
-const containerStyles = {
-  marginHorizontal: 24,
-};
-
-const imageStyles = {
-  width: 400,
-  height: 400,
-};
-
 export function Artwork({ srcImage, config }: Props) {
   const borderRadius = toNumberWithDefaultZero(config.artworkBorderRadius);
 
   return (
-    <View style={containerStyles}>
+    <View style={styles.container}>
       <Image
         fadeDuration={0}
         source={{ uri: srcImage }}
-        style={{ ...imageStyles, borderRadius }}
+        style={[styles.image, { borderRadius }]}
         resizeMode="cover"
       />
     </View>

package/Components/AudioPlayer/AudioPlayerLayout.tsx

@@ -41,17 +41,16 @@ export function AudioPlayerLayout({ artwork, config, children, style }: Props) {
 
   const mainContainerStyles = platformSelect({
     tvos: {
-      width: 1920,
-      height: 1080,
+      width: "100%",
+      height: "100%",
       alignItems: "center",
       justifyContent: "center",
       flexDirection: directionStyles(isRTL).flexDirection,
       backgroundColor: backgroundColorStyle,
     },
     android_tv: {
-      position: "absolute",
-      width: 1920,
-      height: 1080,
+      width: "100%",
+      height: "100%",
       alignItems: "center",
       justifyContent: "center",
       flexDirection: directionStyles(isRTL).flexDirection,

package/Components/AudioPlayer/Runtime.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { View, Text, ViewStyle, TextStyle } from "react-native";
+import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { directionStyles } from "./helpers";
 
 type Props = {
@@ -31,7 +32,7 @@ const textStyles = ({
 }) => ({
   color: summaryColor,
   opacity: 0.8,
-  fontSize: runTimeFontSize ? Number(runTimeFontSize) : 20,
+  fontSize: toNumberWithDefault(20, runTimeFontSize),
   fontFamily: runTimeFontFamily || null,
   ...directionStyles(isRTL),
 });

package/Components/AudioPlayer/Summary.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { View, Text, TextStyle } from "react-native";
+import { View, Text, TextStyle, StyleSheet } from "react-native";
+import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
 
 type Props = {
   config: {
@@ -14,11 +15,13 @@ type Props = {
   summary: string | number;
 };
 
-const containerStyles = {
-  width: 600,
-  height: 80,
-  marginBottom: 30,
-};
+const styles = StyleSheet.create({
+  container: {
+    width: 600,
+    height: 80,
+    marginBottom: 30,
+  },
+});
 
 const textStyles = ({
   summaryColor,
@@ -26,8 +29,8 @@ const textStyles = ({
   summaryFontFamily,
   summaryFontSize,
 }) => ({
-  textAlign: (isRTL ? "left" : "right") as TextStyle["textAlign"],
-  fontSize: summaryFontSize ? Number(summaryFontSize) : 20,
+  textAlign: (isRTL ? "right" : "left") as TextStyle["textAlign"],
+  fontSize: toNumberWithDefault(20, summaryFontSize),
   color: summaryColor,
   fontWeight: "600" as TextStyle["fontWeight"],
   opacity: 0.8,
@@ -36,7 +39,7 @@ const textStyles = ({
 
 export function Summary({ summary, config }: Props) {
   return (
-    <View style={containerStyles}>
+    <View style={styles.container}>
       <Text style={textStyles(config)} numberOfLines={2}>
         {summary}
       </Text>

package/Components/AudioPlayer/Title.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { View, Text, TextStyle } from "react-native";
+import { View, Text, TextStyle, StyleSheet } from "react-native";
+import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
 
 type Props = {
   config: {
@@ -14,15 +15,17 @@ type Props = {
   title: string | number;
 };
 
-const containerStyles = {
-  width: 600,
-  height: 100,
-  marginBottom: 12,
-};
+const styles = StyleSheet.create({
+  container: {
+    width: 600,
+    height: 100,
+    marginBottom: 12,
+  },
+});
 
 const textStyles = ({ titleColor, isRTL, titleFontFamily, titleFontSize }) => ({
-  textAlign: (isRTL ? "left" : "right") as TextStyle["textAlign"],
-  fontSize: titleFontSize ? Number(titleFontSize) : 38,
+  textAlign: (isRTL ? "right" : "left") as TextStyle["textAlign"],
+  fontSize: toNumberWithDefault(38, titleFontSize),
   fontWeight: "600" as TextStyle["fontWeight"],
   color: titleColor,
   fontFamily: titleFontFamily || null,
@@ -30,7 +33,7 @@ const textStyles = ({ titleColor, isRTL, titleFontFamily, titleFontSize }) => ({
 
 export function Title({ title, config }: Props) {
   return (
-    <View style={containerStyles}>
+    <View style={styles.container}>
       <Text style={textStyles(config)} numberOfLines={2}>
         {title}
       </Text>

package/Components/AudioPlayer/__tests__/__snapshots__/Runtime.test.js.snap

@@ -20,7 +20,7 @@ exports[`<Runtime /> LTR renders correctly 1`] = `
         "fontSize": 20,
         "justifyContent": "flex-start",
         "opacity": 0.8,
-        "textAlign": "right",
+        "textAlign": "left",
       }
     }
   >
@@ -49,7 +49,7 @@ exports[`<Runtime /> RTL renders correctly 1`] = `
         "fontSize": 20,
         "justifyContent": "flex-end",
         "opacity": 0.8,
-        "textAlign": "left",
+        "textAlign": "right",
       }
     }
   >

package/Components/AudioPlayer/__tests__/__snapshots__/artWork.test.js.snap

@@ -17,11 +17,15 @@ exports[`<Artwork /> renders correctly 1`] = `
       }
     }
     style={
-      {
-        "borderRadius": 0,
-        "height": 400,
-        "width": 400,
-      }
+      [
+        {
+          "height": 400,
+          "width": 400,
+        },
+        {
+          "borderRadius": 0,
+        },
+      ]
     }
   />
 </View>

package/Components/AudioPlayer/__tests__/__snapshots__/summary.test.js.snap

@@ -19,7 +19,7 @@ exports[`<Summary /> renders correctly 1`] = `
         "fontSize": 20,
         "fontWeight": "600",
         "opacity": 0.8,
-        "textAlign": "left",
+        "textAlign": "right",
       }
     }
   >

package/Components/AudioPlayer/__tests__/__snapshots__/title.test.js.snap

@@ -18,7 +18,7 @@ exports[`<Title /> renders correctly 1`] = `
         "fontFamily": null,
         "fontSize": 38,
         "fontWeight": "600",
-        "textAlign": "left",
+        "textAlign": "right",
       }
     }
   >

package/Components/AudioPlayer/helpers.tsx

@@ -26,14 +26,14 @@ export function getPropertyFromEntryOrConfig({ entry, plugin_configuration }) {
 const LTR = {
   flexDirection: "row",
   justifyContent: "flex-start",
-  textAlign: "right",
+  textAlign: "left",
   alignItems: "flex-end",
 };
 
 const RTL = {
   flexDirection: "row-reverse",
   justifyContent: "flex-end",
-  textAlign: "left",
+  textAlign: "right",
   alignItems: "flex-start",
 };
 

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -281,8 +281,8 @@ function ComponentsMapComponent(props: Props) {
             scrollIndicatorInsets={scrollIndicatorInsets}
             extraData={feed}
             stickyHeaderIndices={stickyHeaderIndices}
-            onLayout={handleOnLayout}
             removeClippedSubviews={isAndroid}
+            onLayout={handleOnLayout}
             initialNumToRender={3}
             maxToRenderPerBatch={10}
             windowSize={12}
@@ -303,10 +303,6 @@ function ComponentsMapComponent(props: Props) {
             onMomentumScrollEnd={_onMomentumScrollEnd}
             onScrollEndDrag={_onScrollEndDrag}
             scrollEventThrottle={16}
-            maintainVisibleContentPosition={{
-              minIndexForVisible: 0,
-              autoscrollToTopThreshold: 10,
-            }}
             {...scrollViewExtraProps}
           />
         </ViewportTracker>

package/Components/River/RiverItem.tsx

@@ -39,6 +39,10 @@ function getFeedUrl(feed: ZappFeed, index: number) {
   }
 }
 
+const isNextIndex = (index, readyIndex) => {
+  return readyIndex + 1 >= index;
+};
+
 /**
  * useLoadingState for RiverItemComponent
  * takes currentIndex and loadingState as arguments
@@ -48,24 +52,20 @@ const useLoadingState = (
   loadingState: RiverItemType["loadingState"]
 ) => {
   const [readyToBeDisplayed, setReadyToBeDisplayed] = React.useState(
-    loadingState.getValue().index + 1 >= currentIndex
+    isNextIndex(currentIndex, loadingState.getValue().index)
   );
 
   useEffect(() => {
     const subscription = loadingState.subscribe(({ index }) => {
-      if (index + 1 >= currentIndex) {
+      if (isNextIndex(currentIndex, index)) {
         setReadyToBeDisplayed(true);
       }
     });
 
-    if (loadingState.getValue().index + 1 >= currentIndex) {
-      setReadyToBeDisplayed(true);
-    }
-
     return () => {
       subscription.unsubscribe();
     };
-  }, [loadingState, currentIndex]);
+  }, [currentIndex]);
 
   return readyToBeDisplayed;
 };
@@ -151,7 +151,7 @@ function RiverItemComponent(props: RiverItemType) {
       component={item}
       componentIndex={index}
       onLoadFailed={onLoadFailed}
-      onLoadFinished={() => onLoadFinished(index)} // Keeping it here to don't break the plugins.
+      onLoadFinished={() => onLoadFinished(index)}
       groupId={groupId}
       feedUrl={feedUrl}
       isLast={isLast}

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

@@ -135,12 +135,6 @@ exports[`componentsMap renders renders components map correctly 1`] = `
       getItemCount={[Function]}
       initialNumToRender={3}
       keyExtractor={[Function]}
-      maintainVisibleContentPosition={
-        {
-          "autoscrollToTopThreshold": 10,
-          "minIndexForVisible": 0,
-        }
-      }
       maxToRenderPerBatch={10}
       onContentSizeChange={[Function]}
       onLayout={[Function]}

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "14.0.0-alpha.2345544020",
+  "version": "14.0.0-alpha.4748018412",
   "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.2345544020",
-    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.2345544020",
-    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.2345544020",
-    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.2345544020",
+    "@applicaster/applicaster-types": "14.0.0-alpha.4748018412",
+    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.4748018412",
+    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.4748018412",
+    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.4748018412",
     "promise": "^8.3.0",
     "url": "^0.11.0",
     "uuid": "^3.3.2"