audio player props and styling options (#529)

gunjankothari · bluerssen · web-flow · commit bc20c3d26038 · 2022-12-15T15:41:39.000-06:00
* audio player props and styling options

* typo correction

* audio player props and styling options

* Shrink Names To Fit in Properties Panel

* updated default colors

* Try without cache

* Try new builder bob version

* Try Try again

* Update yarn.lock

Co-authored-by: Brian Luerssen &lt;brian@draftbit.com&gt;
Co-authored-by: Brian Luerssen &lt;bluerssen@users.noreply.github.com&gt;
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -17,20 +17,11 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 16.16
+          node-version: 16.18
           registry-url: https://registry.npmjs.org/
 
-      # With lerna/workspaces, the cache is at the monorepo level.
-      - name: Restore node_modules cache
-        uses: actions/cache@v3
-        id: yarn-cache # use this to check for `cache-hit`
-        with:
-          path: "node_modules"
-          key: node_modules-${{ hashFiles('yarn.lock') }}
-
       - name: Install Dependencies
-        if: steps.yarn-cache.outputs.cache-hit != 'true'
-        run: yarn install --frozen-lockfile
+        run: yarn install
 
       - name: Type Check
         run: yarn typescript
diff --git a/example/src/AudioPlayerExample.tsx b/example/src/AudioPlayerExample.tsx
@@ -6,9 +6,51 @@ export default function AudioPlayerExample() {
   return (
     <ScreenContainer hasSafeArea={false} scrollable={false}>
       <Text> Local asset value </Text>
-      <AudioPlayer source={require("./assets/loop.wav")} />
+      <AudioPlayer
+        style={{
+          backgroundColor: "#eee",
+          paddingLeft: 8,
+          paddingRight: 8,
+          paddingTop: 8,
+          paddingBottom: 8,
+          borderRadius: 24,
+          marginBottom: 20,
+          fontWeight: "bold",
+          height: 40,
+          width: "80%",
+        }}
+        source={require("./assets/loop.wav")}
+        sliderColor="red"
+        completedTrackColor="white"
+        remainingTrackColor="#999999"
+        playSize={18}
+      />
+      <AudioPlayer
+        style={{
+          backgroundColor: "#333",
+          padding: 8,
+          margin: 8,
+          marginBottom: 20,
+          borderRadius: 4,
+          color: "#fff",
+        }}
+        source={require("./assets/loop.wav")}
+        sliderColor="white"
+        completedTrackColor="white"
+        remainingTrackColor="#dedede"
+        playSize={18}
+        playColor="#fff"
+      />
       <Text> Remote value </Text>
       <AudioPlayer
+        style={{
+          paddingLeft: 20,
+          paddingRight: 20,
+          paddingTop: 8,
+          paddingBottom: 8,
+          color: "red",
+          fontSize: 14,
+        }}
         source={{
           uri: "https://static.draftbit.com/audio/intro-to-draftbit-audio.mp3",
         }}
diff --git a/package.json b/package.json
@@ -46,13 +46,13 @@
     "husky": ">=6",
     "jest": "^26.6.3",
     "json-server": "^0.16.3",
-    "lerna": "^5.1.4",
+    "lerna": "^5.6.2",
     "lint-staged": ">=13",
     "node-fetch": "^2.6.1",
     "patch-package": "^6.4.7",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.7.1",
-    "react-native-builder-bob": "^0.18.3",
+    "react-native-builder-bob": "^0.20.3",
     "rimraf": "^3.0.2",
     "ts-node": "^10.0.0",
     "typescript": "~4.7.4",
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -70,8 +70,18 @@
     "source": "src",
     "output": "lib",
     "targets": [
-      "commonjs",
-      "module",
+      [
+        "commonjs",
+        {
+          "sourceMaps": false
+        }
+      ],
+      [
+        "module",
+        {
+          "sourceMaps": false
+        }
+      ],
       [
         "typescript",
         {
diff --git a/packages/core/src/mappings/AudioPlayer.ts b/packages/core/src/mappings/AudioPlayer.ts
@@ -3,14 +3,34 @@ import {
   COMPONENT_TYPES,
   FORM_TYPES,
   PROP_TYPES,
+  StylesPanelSections,
+  createColorProp,
+  createNumberProp,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
   name: "Audio Player",
   tag: "AudioPlayer",
   description: "Given a source URL, plays sounds & audio!",
   category: COMPONENT_TYPES.media,
-  layout: {},
+  stylesPanelSections: [
+    StylesPanelSections.Typography,
+    StylesPanelSections.Background,
+    StylesPanelSections.Borders,
+    StylesPanelSections.Size,
+    StylesPanelSections.MarginsAndPaddings,
+    StylesPanelSections.Position,
+  ],
+  layout: {
+    backgroundColor: "#eee",
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingTop: 8,
+    paddingBottom: 8,
+    borderRadius: 24,
+    flexDirection: "row",
+    alignItems: "center",
+  },
   props: {
     source: {
       group: GROUPS.data,
@@ -23,5 +43,25 @@ export const SEED_DATA = {
       formType: FORM_TYPES.sourceUrl,
       propType: PROP_TYPES.OBJECT,
     },
+    sliderColor: createColorProp({
+      label: "Thumb Color",
+      defaultValue: "strong",
+    }),
+    completedTrackColor: createColorProp({
+      label: "Completed Track Color",
+      defaultValue: "background",
+    }),
+    remainingTrackColor: createColorProp({
+      label: "Remaining Track Color",
+      defaultValue: "light",
+    }),
+    trackThumbSize: createNumberProp({
+      label: "Thumb Size",
+      defaultValue: 24,
+    }),
+    playIconColor: createColorProp({
+      label: "Play Icon Color",
+      defaultValue: "strong",
+    }),
   },
 };
diff --git a/packages/maps/package.json b/packages/maps/package.json
@@ -48,8 +48,18 @@
     "source": "src",
     "output": "lib",
     "targets": [
-      "commonjs",
-      "module",
+      [
+        "commonjs",
+        {
+          "sourceMaps": false
+        }
+      ],
+      [
+        "module",
+        {
+          "sourceMaps": false
+        }
+      ],
       [
         "typescript",
         {
diff --git a/packages/native/package.json b/packages/native/package.json
@@ -51,8 +51,18 @@
     "source": "src",
     "output": "lib",
     "targets": [
-      "commonjs",
-      "module",
+      [
+        "commonjs",
+        {
+          "sourceMaps": false
+        }
+      ],
+      [
+        "module",
+        {
+          "sourceMaps": false
+        }
+      ],
       [
         "typescript",
         {
diff --git a/packages/native/src/components/AudioPlayer.tsx b/packages/native/src/components/AudioPlayer.tsx
@@ -1,11 +1,27 @@
 import * as React from "react";
-import { Text, View, StyleSheet, TouchableHighlight } from "react-native";
+import {
+  Text,
+  View,
+  TouchableHighlight,
+  StyleProp,
+  StyleSheet,
+} from "react-native";
 import { Audio, AVPlaybackStatus, AVPlaybackSource } from "expo-av";
 import { AntDesign } from "@expo/vector-icons";
 import Slider from "@react-native-community/slider";
 
 import type { Sound } from "expo-av/build/Audio/Sound";
 
+interface Props {
+  source: AVPlaybackSource;
+  style?: StyleProp<any>;
+  sliderColor?: string;
+  completedTrackColor?: string;
+  remainingTrackColor?: string;
+  playSize?: number;
+  playColor?: string;
+}
+
 function formatDuration(duration: number) {
   if (duration === 0 || duration === 1) return "00:00";
 
@@ -24,17 +40,59 @@ function formatDuration(duration: number) {
   return renderedMinutes + ":" + renderedSeconds;
 }
 
-export default function AudioPlayer({ source }: { source: AVPlaybackSource }) {
+export default function AudioPlayer({
+  source,
+  style = {},
+  sliderColor = "black",
+  completedTrackColor = "black",
+  remainingTrackColor = "black",
+  playSize = 24,
+  playColor = "black",
+}: Props) {
   const [sound, setSound] = React.useState<Sound>();
   const [playing, setPlay] = React.useState(false);
   const [loading, setLoading] = React.useState(false);
-  const [durationMillis, setDurationMillis] = React.useState(1);
+  const [durationMillis, setDurationMillis] = React.useState<
+    number | undefined
+  >(1);
   const [isDraggingSlider, setIsDraggingSlider] = React.useState(false);
   const [sliderPositionMillis, setSliderPositionMillis] = React.useState(0);
 
+  const {
+    color,
+    fontFamily,
+    fontWeight,
+    fontSize,
+    lineHeight,
+    letterSpacing,
+    textTransform,
+    textAlign,
+    textDecorationLine,
+    textDecorationColor,
+    textDecorationStyle,
+    ...viewStyles
+  } = StyleSheet.flatten(style || {});
+
+  const textStyles = {
+    color,
+    fontFamily,
+    fontWeight,
+    fontSize,
+    lineHeight,
+    letterSpacing,
+    textTransform,
+    textAlign,
+    textDecorationLine,
+    textDecorationColor,
+    textDecorationStyle,
+  };
+
   const onPlaybackStatusUpdate = async (status: AVPlaybackStatus) => {
     if (status.isLoaded) {
-      if (status.isPlaying && !isDraggingSlider) {
+      if (durationMillis !== status?.durationMillis) {
+        setDurationMillis(status?.durationMillis || 1);
+      }
+      if (status.isPlaying) {
         setSliderPositionMillis(status.positionMillis);
       }
 
@@ -120,19 +178,19 @@ export default function AudioPlayer({ source }: { source: AVPlaybackSource }) {
   const iconName = loading ? "loading1" : !sound || !playing ? "play" : "pause";
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, viewStyles]}>
       <TouchableHighlight onPress={playSound} style={{ marginRight: 8 }}>
-        <AntDesign name={iconName} size={24} />
+        <AntDesign name={iconName} size={playSize} color={playColor} />
       </TouchableHighlight>
-      <Text style={{ marginRight: 8 }}>
-        {formatDuration(sliderPositionMillis || 0)} /{" "}
+      <Text style={{ marginRight: 8, ...textStyles }}>
+        {formatDuration(sliderPositionMillis ?? 0)} /{" "}
         {formatDuration(durationMillis || 0)}
       </Text>
       <Slider
         style={{ flex: 1 }}
-        minimumTrackTintColor="#333"
-        maximumTrackTintColor="#000000"
-        thumbTintColor="black"
+        minimumTrackTintColor={completedTrackColor}
+        maximumTrackTintColor={remainingTrackColor}
+        thumbTintColor={sliderColor}
         minimumValue={0}
         value={sliderPositionMillis}
         maximumValue={durationMillis}
@@ -145,10 +203,6 @@ export default function AudioPlayer({ source }: { source: AVPlaybackSource }) {
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: "#eee",
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    borderRadius: 24,
     flexDirection: "row",
     alignItems: "center",
   },
diff --git a/packages/types/package.json b/packages/types/package.json
@@ -40,8 +40,18 @@
     "source": "src",
     "output": "lib",
     "targets": [
-      "commonjs",
-      "module",
+      [
+        "commonjs",
+        {
+          "sourceMaps": false
+        }
+      ],
+      [
+        "module",
+        {
+          "sourceMaps": false
+        }
+      ],
       [
         "typescript",
         {
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -51,8 +51,18 @@
     "source": "src",
     "output": "lib",
     "targets": [
-      "commonjs",
-      "module",
+      [
+        "commonjs",
+        {
+          "sourceMaps": false
+        }
+      ],
+      [
+        "module",
+        {
+          "sourceMaps": false
+        }
+      ],
       [
         "typescript",
         {
diff --git a/packages/web-maps/package.json b/packages/web-maps/package.json
diff --git a/patches/react-native-builder-bob+0.18.3.patch b/patches/react-native-builder-bob+0.18.3.patch
diff --git a/yarn.lock b/yarn.lock
