@applicaster/zapp-react-native-ui-components 14.0.0-rc.2 → 14.0.0-rc.4

package/Components/AudioPlayer/Artwork.tsx

@@ -1,5 +1,16 @@
 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;
@@ -9,25 +20,19 @@ type Props = {
     backgroundColor: string;
     backgroundImage: string;
     isRTL: boolean;
+    artworkBorderRadius: Option<number>;
   };
 };
 
-const containerStyles = {
-  marginHorizontal: 24,
-};
-
-const imageStyles = {
-  width: 400,
-  height: 400,
-};
+export function Artwork({ srcImage, config }: Props) {
+  const borderRadius = toNumberWithDefaultZero(config.artworkBorderRadius);
 
-export function Artwork({ srcImage }: Props) {
   return (
-    <View style={containerStyles}>
+    <View style={styles.container}>
       <Image
         fadeDuration={0}
         source={{ uri: srcImage }}
-        style={imageStyles}
+        style={[styles.image, { borderRadius }]}
         resizeMode="cover"
       />
     </View>

package/Components/AudioPlayer/AudioPlayer.tsx

@@ -72,6 +72,7 @@ export function AudioPlayer(props: Props) {
     const artworkAspectRatio = getProp("audio_player_artwork_aspect_ratio");
     const channelIcon = getProp("audio_player_channel_icon");
     const rtlFlag = getProp("audio_player_rtl");
+    const artworkBorderRadius = getProp("audio_player_artwork_border_radius");
 
     const audioPlayerBackgroundImageDefaultColor = getProp(
       "audio_player_background_image_default_color"
@@ -154,6 +155,7 @@ export function AudioPlayer(props: Props) {
       artworkAspectRatio,
       channelIcon,
       audioPlayerBackgroundImageDefaultColor,
+      artworkBorderRadius,
     };
   }, [getProp]);
 

package/Components/AudioPlayer/AudioPlayerLayout.tsx

@@ -14,6 +14,7 @@ type Props = {
     backgroundColor: string;
     backgroundImage: string;
     isRTL: boolean;
+    artworkBorderRadius: Option<number>;
   };
   children: React.ReactNode;
   style: ViewStyle;
@@ -40,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,
@@ -97,8 +97,8 @@ export function AudioPlayerLayout({ artwork, config, children, style }: Props) {
 
   const backgroundImgStyles = platformSelect({
     tvos: {
-      width: 1920,
-      height: 1080,
+      width: "100%",
+      height: "100%",
       alignItems: "center",
       justifyContent: "center",
     },

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

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

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -6,12 +6,15 @@ import * as R from "ramda";
 import uuid from "uuid/v4";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
 import {
-  isApplePlatform,
   isTV,
   platformSelect,
   isAndroidTVPlatform,
+  isTvOSPlatform,
 } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { isAudioItem } from "@applicaster/zapp-react-native-utils/playerUtils";
+import {
+  isAudioItem,
+  isInlineTV as isInlineTVUtil,
+} from "@applicaster/zapp-react-native-utils/playerUtils";
 
 import { TVEventHandlerComponent } from "@applicaster/zapp-react-native-tvos-ui-components/Components/TVEventHandlerComponent";
 import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
@@ -22,7 +25,7 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 import { PlayerStateContext } from "../../Contexts/PlayerStateContext";
-import { isAppleTV } from "../../Helpers/Platform";
+
 import {
   QUICK_BRICK_EVENTS,
   QuickBrickEvent,
@@ -97,6 +100,11 @@ const focusableBottomContainerId = "player-container-bottom";
 
 const isAndroidTV = isAndroidTVPlatform();
 
+const isTvOS = isTvOSPlatform();
+
+// height for container with additional content below player
+const INLINE_CONTAINER_CONTENT_HEIGHT = 400;
+
 const withBorderHack = () => {
   if (isAndroidTV) {
     /* @HACK: see GH#7269 */
@@ -126,7 +134,7 @@ const webStyles = {
     flex: "initial",
   },
   inlineRiver: {
-    height: 400,
+    height: INLINE_CONTAINER_CONTENT_HEIGHT,
   },
 };
 
@@ -144,7 +152,7 @@ const nativeStyles = {
     flex: 1,
   },
   inlineRiver: {
-    height: 400,
+    height: INLINE_CONTAINER_CONTENT_HEIGHT,
   },
 };
 
@@ -164,12 +172,11 @@ const renderApplePlayer = ({
   videoStyle,
   playNextData,
 }) => {
-  const { title, summary } = item || {};
-
-  if (!isAppleTV() || !player) {
+  if (!isTvOS || !player) {
     return null;
   }
 
+  // render audio_player for tvos
   if (isAudioContent) {
     return (
       <AudioPlayer
@@ -183,6 +190,8 @@ const renderApplePlayer = ({
     return null;
   }
 
+  const { title, summary } = item || {};
+
   return (
     <ProgramInfo
       title={title}
@@ -193,21 +202,6 @@ const renderApplePlayer = ({
   );
 };
 
-const renderRestPlayers = ({ item, showAudioPlayer, pluginConfiguration }) => {
-  if (isApplePlatform()) {
-    return null;
-  }
-
-  return (
-    showAudioPlayer && (
-      <AudioPlayer
-        audio_item={item}
-        plugin_configuration={pluginConfiguration}
-      />
-    )
-  );
-};
-
 const PlayerContainerComponent = (props: Props) => {
   const {
     Player,
@@ -337,7 +331,7 @@ const PlayerContainerComponent = (props: Props) => {
 
       setState({ error: errorObj });
 
-      if (!isAppleTV()) {
+      if (!isTvOS) {
         setTimeout(() => {
           close();
         }, 800);
@@ -568,10 +562,7 @@ const PlayerContainerComponent = (props: Props) => {
 
   const uri = item?.content ? item.content?.src : null;
 
-  const isInlineTV =
-    screenData?.ui_components &&
-    screenData?.ui_components?.length > 0 &&
-    isTV();
+  const isInlineTV = isInlineTVUtil(screenData);
 
   const inline =
     [VideoModalMode.MAXIMIZED, VideoModalMode.MINIMIZED].includes(mode) ||
@@ -626,12 +617,6 @@ const PlayerContainerComponent = (props: Props) => {
     playNextData,
   };
 
-  const restPlayerProps = {
-    item,
-    showAudioPlayer: isAudioContent,
-    pluginConfiguration,
-  };
-
   return (
     <PlayerStateContext.Provider value={value}>
       <PlayerContainerContextProvider
@@ -707,8 +692,6 @@ const PlayerContainerComponent = (props: Props) => {
                       </Player>
                     </PlayerFocusableWrapperView>
 
-                    {renderRestPlayers(restPlayerProps)}
-
                     {state.error ? <ErrorDisplay error={state.error} /> : null}
                   </View>
                   {/* Components container */}
@@ -732,7 +715,7 @@ const PlayerContainerComponent = (props: Props) => {
                             screenId={screenData.id}
                             key={item.id}
                             groupId={FocusableGroupMainContainerId}
-                            cellTapAction={(event) => onCellTap(event)}
+                            cellTapAction={onCellTap}
                             extraAnchorPointYOffset={-600}
                             isScreenWrappedInContainer={true}
                             containerHeight={styles.inlineRiver.height}

package/package.json

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