Audio Background playback + Min/Max Date in DatePicker (46.12.6) (#656)

YoussefHenna · web-flow · commit 41d2045ae033 · 2023-04-18T13:25:02.000+02:00
* Added support for setting audio mode config of expo-av

* Renamings to audio player to make things clearer

* Added min/max date props to date picker

* v46.12.6

* Updated react-native-shadow version

* Update function name 'initAudioMode' -&gt; 'updateAudioMode'
diff --git a/example/package.json b/example/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@draftbit/example",
   "description": "Example app for @draftbit/ui",
-  "version": "46.12.5",
+  "version": "46.12.6",
   "private": true,
   "main": "__generated__/AppEntry.js",
   "scripts": {
@@ -15,8 +15,8 @@
     "clean:modules": "rimraf node_modules"
   },
   "dependencies": {
-    "@draftbit/maps": "46.12.5",
-    "@draftbit/ui": "46.12.5",
+    "@draftbit/maps": "46.12.6",
+    "@draftbit/ui": "46.12.6",
     "@expo/dev-server": "0.1.120",
     "@expo/webpack-config": "^0.17.0",
     "@react-navigation/drawer": "^5.7.7",
diff --git a/example/src/AudioPlayerExample.tsx b/example/src/AudioPlayerExample.tsx
@@ -24,6 +24,8 @@ export default function AudioPlayerExample() {
         completedTrackColor="white"
         remainingTrackColor="#999999"
         playSize={18}
+        playsInBackground
+        interruptionMode="stop"
       />
       <AudioPlayer
         style={{
diff --git a/example/src/DatePickerExample.js b/example/src/DatePickerExample.js
@@ -108,30 +108,38 @@ function DatePickerExample({ theme }) {
           onDateChange={setDate3}
           defaultValue={new Date(DATE_STRING)}
         />
+
+        <DatePicker
+          label="Date with minimum and maximum"
+          placeholder="Select a date..."
+          type="solid"
+          minimumDate={new Date("April 10, 2023")}
+          maximumDate={new Date("May 10, 2023")}
+        />
       </Section>
       <Section title="Styled">
         <DatePicker
-          label={'Date'}
-          mode={'date'}
+          label={"Date"}
+          mode={"date"}
           style={{
-            backgroundColor: 'red',
-            fontFamily: 'AbrilFatface_400Regular',
+            backgroundColor: "red",
+            fontFamily: "AbrilFatface_400Regular",
             fontSize: 22,
             paddingBottom: 16,
             paddingTop: 16,
           }}
           date={date2}
           onDateChange={setDate2}
           defaultValue={new Date(DATE_STRING)}
-          leftIconMode={'inset'}
-          type={'solid'}
+          leftIconMode={"inset"}
+          type={"solid"}
         />
         <DatePicker
-          label={'Date'}
-          mode={'time'}
+          label={"Date"}
+          mode={"time"}
           style={{
-            backgroundColor: 'black',
-            fontFamily: 'AbrilFatface_400Regular',
+            backgroundColor: "black",
+            fontFamily: "AbrilFatface_400Regular",
             fontSize: 26,
             color: `white`,
             paddingBottom: 16,
@@ -141,12 +149,12 @@ function DatePickerExample({ theme }) {
           onDateChange={setDate3}
           defaultValue={new Date(DATE_STRING)}
           labelSize={26}
-          labelColor={'blue'}
-          borderColor={'blue'}
-          borderColorActive={'green'}
-          leftIconMode={'inset'}
-          type={'underline'}
-      />
+          labelColor={"blue"}
+          borderColor={"blue"}
+          borderColorActive={"green"}
+          leftIconMode={"inset"}
+          type={"underline"}
+        />
       </Section>
     </Container>
   );
diff --git a/lerna.json b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "46.12.5",
+  "version": "46.12.6",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "packages": ["packages/*", "example"],
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "46.12.5",
+  "version": "46.12.6",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -41,7 +41,7 @@
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/types": "46.12.5",
+    "@draftbit/types": "46.12.6",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "@react-native-community/slider": "4.2.3",
@@ -59,7 +59,7 @@
     "react-native-modal-datetime-picker": "^13.0.0",
     "react-native-pager-view": "5.4.24",
     "react-native-reanimated": "~2.9.1",
-    "react-native-shadow-2": "^7.0.6",
+    "react-native-shadow-2": "^7.0.7",
     "react-native-svg": "12.3.0",
     "react-native-swipe-list-view": "^3.2.9",
     "react-native-tab-view": "^3.4.0",
diff --git a/packages/core/src/components/DatePicker/DatePicker.tsx b/packages/core/src/components/DatePicker/DatePicker.tsx
@@ -57,6 +57,8 @@ type Props = {
   borderColor?: string;
   borderColorActive?: string;
   autoDismissKeyboard?: boolean;
+  minimumDate?: Date;
+  maximumDate?: Date;
 } & IconSlot &
   TextInputProps;
 
@@ -96,6 +98,8 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
   borderColor: inputBorderColor,
   borderColorActive: inputBorderColorActive,
   autoDismissKeyboard = true,
+  minimumDate,
+  maximumDate,
   ...props
 }) => {
   const [value, setValue] = React.useState<any>(date || defaultValue);
@@ -527,6 +531,8 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
                 mode={mode}
                 isVisible={pickerVisible}
                 toggleVisibility={toggleVisibility}
+                minimumDate={minimumDate}
+                maximumDate={maximumDate}
                 onChange={(_event: any, data: any) => {
                   toggleVisibility();
                   setValue(data);
diff --git a/packages/core/src/components/DatePicker/DatePickerComponent.tsx b/packages/core/src/components/DatePicker/DatePickerComponent.tsx
@@ -8,6 +8,8 @@ const DatePickerComponent: React.FC<React.PropsWithChildren<Props>> = ({
   value,
   onChange,
   mode,
+  minimumDate,
+  maximumDate,
   toggleVisibility,
 }) => {
   return Platform.OS === "ios" || Platform.OS === "android" ? (
@@ -16,6 +18,8 @@ const DatePickerComponent: React.FC<React.PropsWithChildren<Props>> = ({
       mode={mode}
       isVisible={true}
       display={Platform.OS === "ios" ? "spinner" : "default"}
+      minimumDate={minimumDate}
+      maximumDate={maximumDate}
       onCancel={() => {
         console.log("Picker cancelled before selecting anything.");
         toggleVisibility();
@@ -30,6 +34,8 @@ const DatePickerComponent: React.FC<React.PropsWithChildren<Props>> = ({
       mode={mode}
       onChange={onChange}
       display={"default"}
+      minimumDate={minimumDate}
+      maximumDate={maximumDate}
     />
   );
 };
diff --git a/packages/core/src/components/DatePicker/DatePickerComponent.web.tsx b/packages/core/src/components/DatePicker/DatePickerComponent.web.tsx
@@ -17,6 +17,8 @@ const DatePickerComponent: React.FC<Props & { theme: typeof Theme }> = ({
   mode,
   toggleVisibility,
   isVisible,
+  minimumDate,
+  maximumDate,
   theme,
 }) => {
   const internalTheme = createMuiTheme({
@@ -50,6 +52,8 @@ const DatePickerComponent: React.FC<Props & { theme: typeof Theme }> = ({
           onClose={() => toggleVisibility()}
           variant="dialog"
           TextFieldComponent={() => null}
+          minDate={minimumDate}
+          maxDate={maximumDate}
         />
       </ThemeProvider>
     </MuiPickersUtilsProvider>
diff --git a/packages/core/src/components/DatePicker/DatePickerComponentType.ts b/packages/core/src/components/DatePicker/DatePickerComponentType.ts
@@ -6,5 +6,7 @@ export interface DatePickerComponentProps {
   mode: "date" | "time" | "datetime";
   toggleVisibility: () => void;
   isVisible?: boolean;
+  minimumDate?: Date;
+  maximumDate?: Date;
   theme?: typeof theme;
 }
diff --git a/packages/maps/package.json b/packages/maps/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/maps",
-  "version": "46.12.5",
+  "version": "46.12.6",
   "description": "Map Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -39,8 +39,8 @@
   },
   "homepage": "https://github.com/draftbit/react-native-jigsaw#readme",
   "dependencies": {
-    "@draftbit/types": "46.12.5",
-    "@draftbit/web-maps": "46.12.5",
+    "@draftbit/types": "46.12.6",
+    "@draftbit/web-maps": "46.12.6",
     "react-native-maps": "0.31.1"
   },
   "react-native-builder-bob": {
diff --git a/packages/native/package.json b/packages/native/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/native",
-  "version": "46.12.5",
+  "version": "46.12.6",
   "description": "Draftbit UI Components that Depend on Native Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -39,7 +39,7 @@
   },
   "homepage": "https://github.com/draftbit/react-native-jigsaw#readme",
   "dependencies": {
-    "@draftbit/types": "46.12.5",
+    "@draftbit/types": "46.12.6",
     "@expo/vector-icons": "^13.0.0",
     "@react-native-community/datetimepicker": "6.2.0",
     "@react-native-community/slider": "4.2.3",
diff --git a/packages/native/src/components/AudioPlayer.tsx b/packages/native/src/components/AudioPlayer.tsx
@@ -6,14 +6,26 @@ import {
   StyleProp,
   StyleSheet,
 } from "react-native";
-import { Audio, AVPlaybackStatus, AVPlaybackSource } from "expo-av";
+import {
+  Audio,
+  AVPlaybackStatus,
+  AVPlaybackSource,
+  InterruptionModeIOS,
+  InterruptionModeAndroid,
+} 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";
 
+type AudioInterruptionMode = "lower volume" | "stop";
+
 interface Props {
   source: AVPlaybackSource;
+  interruptionMode?: AudioInterruptionMode;
+  playsInBackground?: boolean;
+  playsInSilentModeIOS?: boolean;
+  playThroughEarpieceAndroid?: boolean;
   style?: StyleProp<any>;
   sliderColor?: string;
   completedTrackColor?: string;
@@ -42,6 +54,10 @@ function formatDuration(duration: number) {
 
 export default function AudioPlayer({
   source,
+  interruptionMode = "lower volume",
+  playsInBackground = false,
+  playsInSilentModeIOS = false,
+  playThroughEarpieceAndroid = false,
   style = {},
   sliderColor = "black",
   completedTrackColor = "black",
@@ -50,8 +66,8 @@ export default function AudioPlayer({
   playColor = "black",
 }: Props) {
   const [sound, setSound] = React.useState<Sound>();
-  const [playing, setPlay] = React.useState(false);
-  const [loading, setLoading] = React.useState(false);
+  const [isPlaying, setIsPlaying] = React.useState(false);
+  const [isLoading, setIsLoading] = React.useState(false);
   const [durationMillis, setDurationMillis] = React.useState<
     number | undefined
   >(1);
@@ -87,6 +103,22 @@ export default function AudioPlayer({
     textDecorationStyle,
   };
 
+  const updateAudioMode = async () => {
+    await Audio.setAudioModeAsync({
+      staysActiveInBackground: playsInBackground,
+      interruptionModeIOS:
+        interruptionMode === "lower volume"
+          ? InterruptionModeIOS.DuckOthers
+          : InterruptionModeIOS.DoNotMix,
+      interruptionModeAndroid:
+        interruptionMode === "lower volume"
+          ? InterruptionModeAndroid.DuckOthers
+          : InterruptionModeAndroid.DoNotMix,
+      playsInSilentModeIOS,
+      playThroughEarpieceAndroid,
+    });
+  };
+
   const onPlaybackStatusUpdate = async (status: AVPlaybackStatus) => {
     if (status.isLoaded) {
       if (durationMillis !== status?.durationMillis) {
@@ -98,7 +130,7 @@ export default function AudioPlayer({
 
       if (status.didJustFinish) {
         setSound(undefined);
-        setPlay(false);
+        setIsPlaying(false);
         setSliderPositionMillis(0);
 
         if (sound) {
@@ -123,11 +155,11 @@ export default function AudioPlayer({
   }, [sound]);
 
   async function loadAudio() {
-    setLoading(true);
+    setIsLoading(true);
 
     const { sound: s, status } = await Audio.Sound.createAsync(source);
     setSound(s);
-    setLoading(false);
+    setIsLoading(false);
     setOnPlaybackStatusUpdate();
 
     if (status.isLoaded && status.durationMillis) {
@@ -137,19 +169,22 @@ export default function AudioPlayer({
     s.setOnPlaybackStatusUpdate(onPlaybackStatusUpdate);
 
     await s.playAsync();
-    setPlay(true);
+    setIsPlaying(true);
   }
 
-  async function playSound() {
-    if (sound && playing) {
+  async function togglePlayback() {
+    //Has to be called everytime a player is played to reconfigure the global Audio config based on each player's configuration
+    await updateAudioMode();
+
+    if (sound && isPlaying) {
       await sound.pauseAsync();
-      setPlay(false);
+      setIsPlaying(false);
       return;
     }
 
-    if (sound && !playing) {
+    if (sound && !isPlaying) {
       await sound.playAsync();
-      setPlay(true);
+      setIsPlaying(true);
       return;
     }
 
@@ -175,11 +210,15 @@ export default function AudioPlayer({
     }
   };
 
-  const iconName = loading ? "loading1" : !sound || !playing ? "play" : "pause";
+  const iconName = isLoading
+    ? "loading1"
+    : !sound || !isPlaying
+    ? "play"
+    : "pause";
 
   return (
     <View style={[styles.container, viewStyles]}>
-      <TouchableHighlight onPress={playSound} style={{ marginRight: 8 }}>
+      <TouchableHighlight onPress={togglePlayback} style={{ marginRight: 8 }}>
         <AntDesign name={iconName} size={playSize} color={playColor} />
       </TouchableHighlight>
       <Text style={{ marginRight: 8, ...textStyles }}>
diff --git a/packages/types/package.json b/packages/types/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/types",
-  "version": "46.12.5",
+  "version": "46.12.6",
   "description": "Shared constants and types between native and core components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
diff --git a/packages/ui/package.json b/packages/ui/package.json
diff --git a/packages/web-maps/package.json b/packages/web-maps/package.json
diff --git a/patches/react-native-shadow-2+7.0.6.patch b/patches/react-native-shadow-2+7.0.6.patch
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "version": "46.12.5",`
	`2`	`+ "version": "46.12.6",`
`3`	`3`	`"npmClient": "yarn",`
`4`	`4`	`"useWorkspaces": true,`
`5`	`5`	`"packages": ["packages/*", "example"],`
Original file line number	Diff line number	Diff line change
`@@ -6,5 +6,7 @@ export interface DatePickerComponentProps {`
`6`	`6`	`mode: "date" \| "time" \| "datetime";`
`7`	`7`	`toggleVisibility: () => void;`
`8`	`8`	`isVisible?: boolean;`
	`9`	`+ minimumDate?: Date;`
	`10`	`+ maximumDate?: Date;`
`9`	`11`	`theme?: typeof theme;`
`10`	`12`	`}`