@draftbit/core 47.3.0 → 47.3.1-11ae91.2

package/src/components/AudioPlayer/HeadlessAudioPlayer.tsx

@@ -0,0 +1,180 @@
+import * as React from "react";
+import {
+  Audio,
+  AVPlaybackStatus,
+  InterruptionModeIOS,
+  InterruptionModeAndroid,
+} from "expo-av";
+import {
+  HeadlessAudioPlayerProps,
+  HeadlessAudioPlayerRef,
+} from "./AudioPlayerCommon";
+
+/**
+ * Audio Player component without an interface (UI).
+ * Only handles playing of the audio and provides callbacks and ref functions
+ */
+const HeadlessAudioPlayer = React.forwardRef<
+  HeadlessAudioPlayerRef,
+  HeadlessAudioPlayerProps
+>(
+  (
+    {
+      source,
+      interruptionMode = "lower volume",
+      playsInBackground = false,
+      playsInSilentModeIOS = false,
+      playThroughEarpieceAndroid = false,
+      onPlaybackStatusUpdate: onPlaybackStatusUpdateProp,
+      onPlaybackFinish,
+    },
+    ref
+  ) => {
+    const [currentSound, setCurrentSound] = React.useState<Audio.Sound>();
+    const [isPlaying, setIsPlaying] = React.useState(false);
+
+    const updateAudioMode = React.useCallback(async () => {
+      await Audio.setAudioModeAsync({
+        staysActiveInBackground: playsInBackground,
+        interruptionModeIOS:
+          interruptionMode === "lower volume"
+            ? InterruptionModeIOS.DuckOthers
+            : InterruptionModeIOS.DoNotMix,
+        interruptionModeAndroid:
+          interruptionMode === "lower volume"
+            ? InterruptionModeAndroid.DuckOthers
+            : InterruptionModeAndroid.DoNotMix,
+        playsInSilentModeIOS,
+        playThroughEarpieceAndroid,
+      });
+    }, [
+      interruptionMode,
+      playsInBackground,
+      playsInSilentModeIOS,
+      playThroughEarpieceAndroid,
+    ]);
+
+    const onPlaybackStatusUpdate = (status: AVPlaybackStatus) => {
+      if (status.isLoaded) {
+        onPlaybackStatusUpdateProp?.({
+          isPlaying: status.isPlaying,
+          isLoading: false,
+          isBuffering: status.isBuffering,
+          currentPositionMillis: status.positionMillis || 0,
+          durationMillis: status.durationMillis || 0,
+          bufferedDurationMillis: status.playableDurationMillis || 0,
+          isError: false,
+        });
+
+        if (status.didJustFinish) {
+          onPlaybackFinish?.();
+        }
+
+        setIsPlaying(status.isPlaying);
+      } else if (status.error) {
+        onPlaybackStatusUpdateProp?.({
+          isPlaying: false,
+          isLoading: false,
+          isBuffering: false,
+          currentPositionMillis: 0,
+          durationMillis: 0,
+          bufferedDurationMillis: 0,
+          isError: true,
+          error: status.error,
+        });
+      }
+    };
+
+    const loadAudio = async () => {
+      onPlaybackStatusUpdateProp?.({
+        isPlaying: false,
+        isLoading: true,
+        isBuffering: false,
+        currentPositionMillis: 0,
+        durationMillis: 0,
+        bufferedDurationMillis: 0,
+        isError: false,
+      });
+
+      const { sound } = await Audio.Sound.createAsync(source);
+      setCurrentSound(sound);
+      sound.setOnPlaybackStatusUpdate(onPlaybackStatusUpdate);
+    };
+
+    const togglePlayback = React.useCallback(async () => {
+      //Has to be called everytime a player is played to reconfigure the global Audio config based on each player's configuration
+      await updateAudioMode();
+
+      if (isPlaying) {
+        await currentSound?.pauseAsync();
+      } else {
+        await currentSound?.playAsync();
+      }
+    }, [currentSound, updateAudioMode, isPlaying]);
+
+    const seekToPosition = React.useCallback(
+      async (positionMillis: number) => {
+        await currentSound?.setPositionAsync(positionMillis);
+      },
+      [currentSound]
+    );
+
+    useSourceDeepCompareEffect(() => {
+      loadAudio();
+
+      // Ignore dependency of loadAudio
+    }, [source]);
+
+    React.useEffect(() => {
+      return currentSound
+        ? () => {
+            currentSound.unloadAsync();
+          }
+        : undefined;
+    }, [currentSound]);
+
+    React.useImperativeHandle(
+      ref,
+      () => {
+        return {
+          seekToPosition,
+          togglePlayback,
+        };
+      },
+      [seekToPosition, togglePlayback]
+    );
+
+    return null;
+  }
+);
+
+// The source provided into the AudioPlayer can be of type {uri: "some uri"}
+// In the case that this object is created inline, each rerender provides a new source object because a new object is initialized everytime
+// This creates an issue with being a useEffect dependency
+//
+// This creates variants of useEffect that checks deep equality of 'uri' to determine if dependency changed or not
+// Follows: https://stackoverflow.com/a/54096391
+function sourceDeepCompareEquals(a: any, b: any) {
+  if (a?.uri && b?.uri) {
+    return a.uri === b.uri;
+  }
+  return a === b;
+}
+
+function useSourceDeepCompareMemoize(value: any) {
+  const ref = React.useRef();
+  if (!sourceDeepCompareEquals(value, ref.current)) {
+    ref.current = value;
+  }
+  return ref.current;
+}
+
+function useSourceDeepCompareEffect(
+  callback: React.EffectCallback,
+  dependencies: React.DependencyList
+) {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  React.useEffect(callback, dependencies.map(useSourceDeepCompareMemoize));
+}
+
+export default HeadlessAudioPlayer;

package/src/components/AudioPlayer/index.js

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { withTheme } from "../../theming";
+import HeadlessAudioPlayer from "./HeadlessAudioPlayer";
+import AudioPlayerWithInterface from "./AudioPlayerWithInterface";
+const AudioPlayer = React.forwardRef(({ mode = "interface", ...rest }, ref) => {
+    switch (mode) {
+        case "headless":
+            return React.createElement(HeadlessAudioPlayer, { ref: ref, ...rest });
+        case "interface":
+            //@ts-ignore Typescript unable to handle nested passing of theme
+            return React.createElement(AudioPlayerWithInterface, { ref: ref, ...rest });
+    }
+});
+export default withTheme(AudioPlayer);
+//# sourceMappingURL=index.js.map

package/src/components/AudioPlayer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAM1C,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AACxD,OAAO,wBAAwB,MAAM,4BAA4B,CAAC;AAMlE,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAGlC,CAAC,EAAE,IAAI,GAAG,WAAW,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE;IACzC,QAAQ,IAAI,EAAE;QACZ,KAAK,UAAU;YACb,OAAO,oBAAC,mBAAmB,IAAC,GAAG,EAAE,GAAG,KAAM,IAAI,GAAI,CAAC;QACrD,KAAK,WAAW;YACd,gEAAgE;YAChE,OAAO,oBAAC,wBAAwB,IAAC,GAAG,EAAE,GAAG,KAAM,IAAI,GAAI,CAAC;KAC3D;AACH,CAAC,CAAC,CAAC;AAEH,eAAe,SAAS,CAAC,WAAW,CAAC,CAAC"}

package/src/components/AudioPlayer/index.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { withTheme } from "../../theming";
+import {
+  AudioPlayerInterfaceProps,
+  HeadlessAudioPlayerProps,
+  HeadlessAudioPlayerRef,
+} from "./AudioPlayerCommon";
+import HeadlessAudioPlayer from "./HeadlessAudioPlayer";
+import AudioPlayerWithInterface from "./AudioPlayerWithInterface";
+
+interface AudioPlayerProps {
+  mode?: "interface" | "headless";
+}
+
+const AudioPlayer = React.forwardRef<
+  HeadlessAudioPlayerRef,
+  AudioPlayerProps & AudioPlayerInterfaceProps & HeadlessAudioPlayerProps
+>(({ mode = "interface", ...rest }, ref) => {
+  switch (mode) {
+    case "headless":
+      return <HeadlessAudioPlayer ref={ref} {...rest} />;
+    case "interface":
+      //@ts-ignore Typescript unable to handle nested passing of theme
+      return <AudioPlayerWithInterface ref={ref} {...rest} />;
+  }
+});
+
+export default withTheme(AudioPlayer);
+
+export { HeadlessAudioPlayerRef as AudioPlayerRef } from "./AudioPlayerCommon";

package/src/index.js

@@ -39,6 +39,7 @@ export { BottomSheet } from "./components/BottomSheet";
 export { YoutubePlayer } from "./components/YoutubePlayer";
 export { Table, TableRow, TableCell } from "./components/Table";
 export { SwipeableItem, SwipeableItemButton, SwipeableList, } from "./components/SwipeableItem";
+export { default as AudioPlayer, } from "./components/AudioPlayer";
 /* Deprecated: Fix or Delete!  */
 export { default as DatePicker } from "./components/DatePicker/DatePicker";
 export { default as Picker } from "./components/Picker/Picker";

package/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"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"}

package/src/index.tsx

@@ -70,6 +70,11 @@ export {
   SwipeableList,
 } from "./components/SwipeableItem";
 
+export {
+  default as AudioPlayer,
+  AudioPlayerRef,
+} from "./components/AudioPlayer";
+
 /* Deprecated: Fix or Delete!  */
 export { default as DatePicker } from "./components/DatePicker/DatePicker";
 export { default as Picker } from "./components/Picker/Picker";