@applicaster/quick-brick-player 13.0.0-alpha.1486614302 → 13.0.0-alpha.1503493274

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "13.0.0-alpha.1486614302",
+  "version": "13.0.0-alpha.1503493274",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -35,11 +35,11 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/quick-brick-mobile-transport-controls": "13.0.0-alpha.1486614302",
-    "@applicaster/quick-brick-tv-transport-controls": "13.0.0-rc.56",
-    "@applicaster/zapp-react-native-tvos-app": "13.0.0-alpha.1486614302",
-    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.1486614302",
-    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.1486614302",
+    "@applicaster/quick-brick-mobile-transport-controls": "13.0.0-rc.124",
+    "@applicaster/quick-brick-tv-transport-controls": "13.0.0-alpha.1503493274",
+    "@applicaster/zapp-react-native-tvos-app": "13.0.0-alpha.1503493274",
+    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.1503493274",
+    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.1503493274",
     "query-string": "7.1.3",
     "react-native-web-linear-gradient": "1.1.2",
     "shaka-player": "4.3.5",
@@ -52,7 +52,6 @@
     "@applicaster/applicaster-types": "*",
     "@applicaster/blur": "*",
     "@applicaster/quick-brick-xray": "*",
-    "@applicaster/react-native-color-thief": "*",
     "@applicaster/zapp-pipes-v2-client": "*",
     "@applicaster/zapp-react-dom-ui-components": "*",
     "@applicaster/zapp-react-native-redux": "*",

package/src/Player/AudioLayer/AudioDescription.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Text, TextStyle } from "react-native";
+import { StyleSheet, Text, TextStyle, View } from "react-native";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 type AudioDescriptionProps = {
@@ -10,84 +10,125 @@ type AudioDescriptionProps = {
     docked: boolean;
     isModal: boolean;
   };
+  maxWidth?: number;
   value: GetValue;
 };
 
-const titleStyles = (value: GetValue, prefix: string): TextStyle => ({
-  textAlign: "left",
-  color: value(`${prefix}title_color`),
-  alignSelf: "center",
-  paddingBottom: 5,
-  lineHeight:
-    Number(
-      platformSelect({
-        ios: value(`${prefix}title_lineheight_ios`),
-        android: value(`${prefix}title_lineheight_android`),
-      })
-    ) || 18,
-  letterSpacing:
-    Number(
-      platformSelect({
-        ios: value(`${prefix}title_letterspacing_ios`),
-        android: value(`${prefix}title_letterspacing_android`),
-      })
-    ) || 0,
-  fontSize:
-    Number(
-      platformSelect({
-        ios: value(`${prefix}title_fontsize_ios`),
-        android: value(`${prefix}title_fontsize_android`),
-      })
-    ) || 16,
-  fontFamily: platformSelect({
-    ios: value(`${prefix}title_font_ios`),
-    android: value(`${prefix}title_font_android`),
-  }),
-});
+const TITLE_PADDING_BOTTOM = 5;
+const TITLE_LINES = 2;
+const SUBTITLE_LINES = 1;
 
-const summaryStyles = (value: GetValue, prefix: string): TextStyle => ({
-  textAlign: "left",
-  color: value(`${prefix}subtitle_color`),
-  alignSelf: "center",
-  lineHeight:
-    Number(
-      platformSelect({
-        ios: value(`${prefix}subtitle_lineheight_ios`),
-        android: value(`${prefix}subtitle_lineheight_android`),
-      })
-    ) || 18,
-  letterSpacing:
-    Number(
-      platformSelect({
-        ios: value(`${prefix}subtitle_letterspacing_ios`),
-        android: value(`${prefix}subtitle_letterspacing_android`),
-      })
-    ) || 0,
-  fontSize:
-    Number(
-      platformSelect({
-        ios: value(`${prefix}subtitle_fontsize_ios`),
-        android: value(`${prefix}subtitle_fontsize_android`),
-      })
-    ) || 13,
-  fontFamily: platformSelect({
-    ios: value(`${prefix}subtitle_font_ios`),
-    android: value(`${prefix}subtitle_font_android`),
-  }),
+const styles = StyleSheet.create({
+  wrapper: {
+    width: "100%",
+    alignSelf: "center",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  titleText: {
+    textAlign: "center",
+    alignSelf: "center",
+    paddingBottom: TITLE_PADDING_BOTTOM,
+  },
+  summaryText: {
+    textAlign: "left",
+    alignSelf: "center",
+  },
 });
 
+const getTitleStyles = (value: GetValue, prefix: string) =>
+  ({
+    color: value(`${prefix}title_color`),
+    lineHeight:
+      Number(
+        platformSelect({
+          ios: value(`${prefix}title_lineheight_ios`),
+          android: value(`${prefix}title_lineheight_android`),
+        })
+      ) || 18,
+    letterSpacing:
+      Number(
+        platformSelect({
+          ios: value(`${prefix}title_letterspacing_ios`),
+          android: value(`${prefix}title_letterspacing_android`),
+        })
+      ) || 0,
+    fontSize:
+      Number(
+        platformSelect({
+          ios: value(`${prefix}title_fontsize_ios`),
+          android: value(`${prefix}title_fontsize_android`),
+        })
+      ) || 16,
+    fontFamily: platformSelect({
+      ios: value(`${prefix}title_font_ios`),
+      android: value(`${prefix}title_font_android`),
+    }),
+  }) as const;
+
+const getSummaryStyles = (value: GetValue, prefix: string): TextStyle =>
+  ({
+    color: value(`${prefix}subtitle_color`),
+    lineHeight:
+      Number(
+        platformSelect({
+          ios: value(`${prefix}subtitle_lineheight_ios`),
+          android: value(`${prefix}subtitle_lineheight_android`),
+        })
+      ) || 18,
+    letterSpacing:
+      Number(
+        platformSelect({
+          ios: value(`${prefix}subtitle_letterspacing_ios`),
+          android: value(`${prefix}subtitle_letterspacing_android`),
+        })
+      ) || 0,
+    fontSize:
+      Number(
+        platformSelect({
+          ios: value(`${prefix}subtitle_fontsize_ios`),
+          android: value(`${prefix}subtitle_fontsize_android`),
+        })
+      ) || 13,
+    fontFamily: platformSelect({
+      ios: value(`${prefix}subtitle_font_ios`),
+      android: value(`${prefix}subtitle_font_android`),
+    }),
+  }) as const;
+
+const getHeight = (titleLineHeight: number, subtitleLineHeight) =>
+  titleLineHeight * TITLE_LINES + subtitleLineHeight + TITLE_PADDING_BOTTOM;
+
 export const AudioDescription = (props: AudioDescriptionProps) => {
-  const { title, summary, layoutState, value } = props;
+  const { title, summary, layoutState, value, maxWidth } = props;
   const prefix = layoutState.docked ? "docked_player_" : "";
 
+  const summaryStyles = getSummaryStyles(value, prefix);
+  const titleStyles = getTitleStyles(value, prefix);
+
+  const height = getHeight(titleStyles.lineHeight, summaryStyles.lineHeight);
+
   return (
-    <>
-      <Text style={titleStyles(value, prefix)} numberOfLines={1}>
+    <View
+      style={[
+        styles.wrapper,
+        {
+          maxWidth: Math.max(maxWidth, 320),
+          height,
+        },
+      ]}
+    >
+      <Text style={[styles.titleText, titleStyles]} numberOfLines={TITLE_LINES}>
         {title}
       </Text>
-      <Text style={summaryStyles(value, prefix)} numberOfLines={1}>
-        {summary}
-      </Text>
-    </>
+      {summary ? (
+        <Text
+          style={[styles.summaryText, summaryStyles]}
+          numberOfLines={SUBTITLE_LINES}
+        >
+          {summary}
+        </Text>
+      ) : null}
+    </View>
   );
 };