AudioPlayer updates (#667)

* Refactored AudioPlayer to have a 'headless' mode

* Fixed issue with source as useEffect dependandancy

* Fixed type of style prop in audio player

* Moved AudioPlayer into core

* Allowed more customization to player interface + updated default style to use theme colors

* Removed inline styles from audio player

* Updated name of thumbColor prop

* Added @expo/vector-icons dependancy to core

* Change audio player default colors

* Rplace touchable highlight with pressable

* Added error handling to failed setting of audio mode

Author: YoussefHenna

example/src/AudioPlayerExample.tsx

@@ -1,62 +1,114 @@
 import React from "react";
 import { Text } from "react-native";
-import { AudioPlayer, ScreenContainer } from "@draftbit/ui";
+import { AudioPlayer, ButtonSolid } from "@draftbit/ui";
+import type { AudioPlayerRef } from "@draftbit/ui";
+import Section, { Container } from "./Section";
 
 export default function AudioPlayerExample() {
+  const audioPlayerRef = React.useRef<AudioPlayerRef>(null);
+  const [headlessState, setHeadlessState] = React.useState<object>();
+
   return (
-    <ScreenContainer hasSafeArea={false} scrollable={false}>
-      <Text> Local asset value </Text>
-      <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}
-        playsInBackground
-        interruptionMode="stop"
-      />
-      <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",
-        }}
-      />
-    </ScreenContainer>
+    <Container style={{}}>
+      <Section style={{}} title="Default styling">
+        <AudioPlayer
+          source={require("./assets/loop.wav")}
+          playsInBackground
+          interruptionMode="stop"
+        />
+      </Section>
+      <Section style={{}} title="Custom styling">
+        <AudioPlayer
+          style={{
+            backgroundColor: "#eee",
+            borderRadius: 24,
+            borderWidth: 0,
+            fontWeight: "bold",
+            height: 40,
+            width: "80%",
+          }}
+          source={require("./assets/loop.wav")}
+          sliderColor="red"
+          completedTrackColor="white"
+          remainingTrackColor="#999999"
+          togglePlaybackIconSize={18}
+          togglePlaybackIconColor="green"
+          playsInBackground
+          interruptionMode="stop"
+        />
+        <AudioPlayer
+          style={{
+            backgroundColor: "#333",
+            padding: 8,
+            borderWidth: 0,
+            borderRadius: 4,
+            color: "#fff",
+            marginTop: 10,
+          }}
+          source={require("./assets/loop.wav")}
+          sliderColor="white"
+          completedTrackColor="white"
+          remainingTrackColor="#dedede"
+          togglePlaybackIconSize={18}
+          togglePlaybackIconColor="#fff"
+        />
+        <AudioPlayer
+          style={{ width: 50, marginTop: 10 }}
+          source={require("./assets/loop.wav")}
+          playsInBackground
+          interruptionMode="stop"
+          hideDuration
+          hideSlider
+        />
+        <AudioPlayer
+          style={{ width: 150, marginTop: 10 }}
+          source={require("./assets/loop.wav")}
+          playsInBackground
+          interruptionMode="stop"
+          hideSlider
+        />
+      </Section>
+      <Section style={{}} title="Local asset value">
+        <AudioPlayer
+          source={require("./assets/loop.wav")}
+          playsInBackground
+          interruptionMode="stop"
+        />
+      </Section>
+      <Section style={{}} title="Remote value">
+        <AudioPlayer
+          source={{
+            uri: "https://static.draftbit.com/audio/intro-to-draftbit-audio.mp3",
+          }}
+        />
+      </Section>
+      <Section style={{}} title="Headless">
+        <AudioPlayer
+          ref={audioPlayerRef}
+          source={{
+            uri: "https://static.draftbit.com/audio/intro-to-draftbit-audio.mp3",
+          }}
+          mode="headless"
+          onPlaybackStatusUpdate={(state) => {
+            setHeadlessState(state);
+          }}
+        />
+        <ButtonSolid
+          title="Toggle playback headless"
+          onPress={() => {
+            audioPlayerRef?.current?.togglePlayback();
+          }}
+        />
+        <ButtonSolid
+          title="Seek headless to 30 second mark"
+          onPress={() => {
+            audioPlayerRef?.current?.seekToPosition(30000);
+          }}
+        />
+        <Text>{`Current headless state: ${JSON.stringify(
+          headlessState
+        )}`}</Text>
+      </Section>
+    </Container>
   );
 }

packages/core/package.json

@@ -45,9 +45,11 @@
     "@react-native-community/slider": "4.2.4",
     "@react-native-picker/picker": "2.4.8",
     "@shopify/flash-list": "1.3.1",
+    "@expo/vector-icons": "^13.0.0",
     "color": "^3.1.2",
     "date-fns": "^2.16.1",
     "dateformat": "^3.0.3",
+    "expo-av": "~13.0.3",
     "lodash.isnumber": "^3.0.3",
     "lodash.omit": "^4.5.0",
     "lodash.tonumber": "^4.0.3",

packages/core/src/components/AudioPlayer/AudioPlayerCommon.ts

@@ -0,0 +1,44 @@
+import { AVPlaybackSource } from "expo-av";
+import { StyleProp, ViewStyle, TextStyle } from "react-native";
+import type { Theme } from "../../styles/DefaultTheme";
+
+export type AudioInterruptionMode = "lower volume" | "stop";
+
+export interface AudioPlayerStatus {
+  isPlaying: boolean;
+  isLoading: boolean;
+  isBuffering: boolean;
+  currentPositionMillis: number;
+  durationMillis: number;
+  bufferedDurationMillis: number;
+  isError: boolean;
+  error?: string;
+}
+
+export interface HeadlessAudioPlayerRef {
+  seekToPosition: (positionMillis: number) => void;
+  togglePlayback: () => void;
+}
+
+export interface HeadlessAudioPlayerProps {
+  onPlaybackStatusUpdate?: (status: AudioPlayerStatus) => void;
+  onPlaybackFinish?: () => void;
+  source: AVPlaybackSource;
+  interruptionMode?: AudioInterruptionMode;
+  playsInBackground?: boolean;
+  playsInSilentModeIOS?: boolean;
+  playThroughEarpieceAndroid?: boolean;
+}
+
+export interface AudioPlayerInterfaceProps {
+  style?: StyleProp<ViewStyle & TextStyle>;
+  thumbColor?: string;
+  completedTrackColor?: string;
+  remainingTrackColor?: string;
+  togglePlaybackIconSize?: number;
+  togglePlaybackIconColor?: string;
+  hidePlaybackIcon?: boolean;
+  hideDuration?: boolean;
+  hideSlider?: boolean;
+  theme: Theme;
+}