@draftbit/core 54.0.4-11e01d.2 → 54.0.4-6c949a.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "54.0.4-11e01d.2+11e01d6",
+  "version": "54.0.4-6c949a.2+6c949af",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/src/index.d.ts",
@@ -42,7 +42,7 @@
   "homepage": "https://github.com/draftbit/react-native-jigsaw#readme",
   "dependencies": {
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/theme": "^54.0.4-11e01d.2+11e01d6",
+    "@draftbit/theme": "^54.0.4-6c949a.2+6c949af",
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
     "@expo/vector-icons": "^15.0.3",
@@ -57,9 +57,8 @@
     "color": "^4.2.3",
     "date-fns": "^4.1.0",
     "dateformat": "^5.0.3",
-    "expo-audio": "~1.1.1",
+    "expo-av": "~16.0.8",
     "expo-image": "~3.0.11",
-    "expo-video": "~3.0.16",
     "lodash.isequal": "^4.5.0",
     "lodash.isnumber": "^3.0.3",
     "lodash.omit": "^4.5.0",
@@ -123,5 +122,5 @@
     ],
     "testEnvironment": "node"
   },
-  "gitHead": "11e01d6ca5cc2e0e1cdeca926659e65fbe55cca2"
+  "gitHead": "6c949afa2c601852d436883343b61091d025d849"
 }

package/src/components/MediaPlayer/AudioPlayer/HeadlessAudioPlayer.tsx

@@ -1,12 +1,17 @@
 import * as React from "react";
-import { useAudioPlayer, setAudioModeAsync, AudioStatus } from "expo-audio";
+import {
+  Audio,
+  AVPlaybackStatus,
+  InterruptionModeIOS,
+  InterruptionModeAndroid,
+} from "expo-av";
 import { HeadlessAudioPlayerProps } from "./AudioPlayerCommon";
 import {
+  mapToMediaPlayerStatus,
   normalizeBase64Source,
-  useSourceDeepCompareMemoize,
   useSourceDeepCompareEffect,
 } from "../MediaPlayerCommon";
-import type { MediaPlayerRef, MediaPlayerStatus } from "../MediaPlayerCommon";
+import type { MediaPlayerRef } from "../MediaPlayerCommon";
 import MediaPlaybackWrapper from "../MediaPlaybackWrapper";
 
 /**
@@ -31,70 +36,38 @@ const HeadlessAudioPlayer = React.forwardRef<
     },
     ref
   ) => {
-    const stableSource = useSourceDeepCompareMemoize(
-      normalizeBase64Source(source, "audio")
-    );
-    const player = useAudioPlayer(stableSource);
-
+    const [currentSound, setCurrentSound] = React.useState<Audio.Sound>();
     const [isPlaying, setIsPlaying] = React.useState(false);
 
     React.useEffect(() => {
-      player.loop = isLooping;
-    }, [player, isLooping]);
-
-    React.useEffect(() => {
-      player.volume = volume;
-    }, [player, volume]);
-
-    // Emit loading state immediately
-    React.useEffect(() => {
-      onPlaybackStatusUpdateProp?.({
-        isPlaying: false,
-        isLoading: true,
-        isBuffering: false,
-        currentPositionMillis: 0,
-        durationMillis: 0,
-        bufferedDurationMillis: 0,
-        isError: false,
-      });
-    }, []);
+      if (
+        currentSound &&
+        typeof currentSound?.setIsLoopingAsync === "function"
+      ) {
+        currentSound.setIsLoopingAsync(isLooping);
+      }
+    }, [currentSound, isLooping]);
 
     React.useEffect(() => {
-      const subscription = player.addListener(
-        "playbackStatusUpdate",
-        (status) => {
-          const mappedStatus = mapToMediaPlayerStatus(status);
-          onPlaybackStatusUpdateProp?.(mappedStatus);
-
-          if (status.isLoaded) {
-            if (status.didJustFinish && !isLooping) {
-              onPlaybackFinish?.();
-            }
-            setIsPlaying(status.playing);
-          }
-        }
-      );
-      return () => subscription.remove();
-    }, []);
-
-    // Replace source when it changes (deep comparison on URI to avoid unnecessary reloads)
-    const isFirstSourceRender = React.useRef(true);
-    useSourceDeepCompareEffect(() => {
-      if (isFirstSourceRender.current) {
-        isFirstSourceRender.current = false;
-        return;
+      if (currentSound && typeof currentSound?.setVolumeAsync === "function") {
+        currentSound.setVolumeAsync(volume);
       }
-      player.replace(normalizeBase64Source(source, "audio") as any);
-    }, [source]);
+    }, [currentSound, volume]);
 
     const updateAudioMode = React.useCallback(async () => {
       try {
-        await setAudioModeAsync({
-          shouldPlayInBackground: playsInBackground,
-          interruptionMode:
-            interruptionMode === "lower volume" ? "duckOthers" : "doNotMix",
-          playsInSilentMode: playsInSilentModeIOS,
-          shouldRouteThroughEarpiece: playThroughEarpieceAndroid,
+        await Audio.setAudioModeAsync({
+          staysActiveInBackground: playsInBackground,
+          interruptionModeIOS:
+            interruptionMode === "lower volume"
+              ? InterruptionModeIOS.DuckOthers
+              : InterruptionModeIOS.DoNotMix,
+          interruptionModeAndroid:
+            interruptionMode === "lower volume"
+              ? InterruptionModeAndroid.DuckOthers
+              : InterruptionModeAndroid.DoNotMix,
+          playsInSilentModeIOS,
+          playThroughEarpieceAndroid,
         });
       } catch (e) {
         if ((e as { code?: string })?.code === "E_AUDIO_AUDIOMODE") {
@@ -115,44 +88,59 @@ const HeadlessAudioPlayer = React.forwardRef<
       playThroughEarpieceAndroid,
     ]);
 
+    const onPlaybackStatusUpdate = (status: AVPlaybackStatus) => {
+      const mappedStatus = mapToMediaPlayerStatus(status);
+      onPlaybackStatusUpdateProp?.(mappedStatus);
+
+      if (status.isLoaded) {
+        if (status.didJustFinish) {
+          if (isLooping) {
+            return;
+          }
+          onPlaybackFinish?.();
+        }
+        setIsPlaying(status.isPlaying);
+      }
+    };
+
     const onTogglePlayback = () => {
-      // Has to be called everytime a player is played to reconfigure the global Audio config based on each player's configuration
+      //Has to be called everytime a player is played to reconfigure the global Audio config based on each player's configuration
       updateAudioMode();
     };
 
+    const loadAudio = async () => {
+      onPlaybackStatusUpdateProp?.({
+        isPlaying: false,
+        isLoading: true,
+        isBuffering: false,
+        currentPositionMillis: 0,
+        durationMillis: 0,
+        bufferedDurationMillis: 0,
+        isError: false,
+      });
+
+      const finalSource = await normalizeBase64Source(source, "audio");
+
+      const { sound } = await Audio.Sound.createAsync(finalSource);
+      setCurrentSound(sound);
+      sound.setOnPlaybackStatusUpdate(onPlaybackStatusUpdate);
+    };
+
+    useSourceDeepCompareEffect(() => {
+      loadAudio();
+
+      // Ignore dependency of loadAudio
+    }, [source]);
+
     return (
       <MediaPlaybackWrapper
         ref={ref}
         isPlaying={isPlaying}
-        player={player}
+        media={currentSound}
         onTogglePlayback={onTogglePlayback}
       />
     );
   }
 );
 
-export function mapToMediaPlayerStatus(status: AudioStatus): MediaPlayerStatus {
-  if (status.isLoaded) {
-    return {
-      isPlaying: status.playing,
-      isLoading: false,
-      isBuffering: status.isBuffering,
-      currentPositionMillis: status.currentTime * 1000,
-      durationMillis: status.duration * 1000,
-      bufferedDurationMillis: status.duration * 1000,
-      isError: false,
-    };
-  }
-
-  return {
-    isPlaying: false,
-    isLoading: true,
-    isBuffering: false,
-    currentPositionMillis: 0,
-    durationMillis: 0,
-    bufferedDurationMillis: 0,
-    isError: false,
-  };
-}
-
 export default HeadlessAudioPlayer;

package/src/components/MediaPlayer/MediaPlaybackWrapper.tsx

@@ -1,11 +1,10 @@
 import * as React from "react";
-import type { AudioPlayer } from "expo-audio";
-import type { VideoPlayer } from "expo-video";
+import type { Playback } from "expo-av/src/AV";
 
 import type { MediaPlayerRef } from "./MediaPlayerCommon";
 
 interface MediaPlaybackWrapperProps {
-  player?: AudioPlayer | VideoPlayer;
+  media?: Playback;
   isPlaying?: boolean;
   onTogglePlayback?: () => void;
 }
@@ -16,38 +15,42 @@ interface MediaPlaybackWrapperProps {
 const MediaPlaybackWrapper = React.forwardRef<
   MediaPlayerRef,
   React.PropsWithChildren<MediaPlaybackWrapperProps>
->(({ player, isPlaying, onTogglePlayback, children }, ref) => {
-  const togglePlayback = React.useCallback(() => {
+>(({ media, isPlaying, onTogglePlayback, children }, ref) => {
+  const togglePlayback = React.useCallback(async () => {
     onTogglePlayback?.();
 
     if (isPlaying) {
-      player?.pause();
+      await media?.pauseAsync();
     } else {
-      player?.play();
+      await media?.playAsync();
     }
-  }, [isPlaying, onTogglePlayback]);
+  }, [media, isPlaying, onTogglePlayback]);
 
-  const pause = React.useCallback(() => {
+  const pause = React.useCallback(async () => {
     onTogglePlayback?.();
-    player?.pause();
-  }, [player, onTogglePlayback]);
+    await media?.pauseAsync();
+  }, [media, onTogglePlayback]);
 
-  const play = React.useCallback(() => {
+  const play = React.useCallback(async () => {
     onTogglePlayback?.();
-    player?.play();
-  }, [player, onTogglePlayback]);
+    await media?.playAsync();
+  }, [media, onTogglePlayback]);
 
   const seekToPosition = React.useCallback(
-    (positionMillis: number) => {
-      if (typeof (player as any)?.seekTo === "function") {
-        (player as AudioPlayer).seekTo(positionMillis / 1000);
-      } else if (player) {
-        player.currentTime = positionMillis / 1000;
-      }
+    async (positionMillis: number) => {
+      await media?.setPositionAsync(positionMillis);
     },
-    [player]
+    [media]
   );
 
+  React.useEffect(() => {
+    return media
+      ? () => {
+          media.unloadAsync();
+        }
+      : undefined;
+  }, [media]);
+
   React.useImperativeHandle(
     ref,
     () => ({

package/src/components/MediaPlayer/MediaPlayerCommon.ts

@@ -1,5 +1,4 @@
-import { AudioSource } from "expo-audio";
-import { VideoSource } from "expo-video";
+import { AVPlaybackSource, AVPlaybackStatus } from "expo-av";
 import { v4 as uuid } from "uuid";
 import { Platform } from "react-native";
 import React from "react";
@@ -25,7 +24,34 @@ export interface MediaPlayerRef {
 export interface MediaPlayerProps {
   onPlaybackStatusUpdate?: (status: MediaPlayerStatus) => void;
   onPlaybackFinish?: () => void;
-  source: AudioSource | VideoSource;
+  source: AVPlaybackSource;
+}
+
+export function mapToMediaPlayerStatus(
+  status: AVPlaybackStatus
+): MediaPlayerStatus {
+  if (status.isLoaded) {
+    return {
+      isPlaying: status.isPlaying,
+      isLoading: false,
+      isBuffering: status.isBuffering,
+      currentPositionMillis: status.positionMillis || 0,
+      durationMillis: status.durationMillis || 0,
+      bufferedDurationMillis: status.playableDurationMillis || 0,
+      isError: false,
+    };
+  }
+
+  return {
+    isPlaying: false,
+    isLoading: false,
+    isBuffering: false,
+    currentPositionMillis: 0,
+    durationMillis: 0,
+    bufferedDurationMillis: 0,
+    isError: true,
+    error: status.error,
+  };
 }
 
 const URL_REGEX =
@@ -34,14 +60,14 @@ const URL_REGEX =
 /**
  * Base64 strings are not playable on iOS and needs to be saved to a file before playing
  */
-export function normalizeBase64Source(
-  source: AudioSource | VideoSource,
+export async function normalizeBase64Source(
+  source: AVPlaybackSource,
   type: "audio" | "video"
-): AudioSource | VideoSource {
+): Promise<AVPlaybackSource> {
   const uri: string | undefined = (source as any)?.uri;
 
   if (Platform.OS === "ios" && uri && !uri.match(URL_REGEX)) {
-    const { File, Paths } = require("expo-file-system");
+    const { File, Paths } = await import("expo-file-system");
 
     const defaultMimeType = type === "audio" ? "wav" : "mp4";
     const mimeType = uri.startsWith(`data:${type}/`)
@@ -74,7 +100,7 @@ function sourceDeepCompareEquals(a: any, b: any) {
   return a === b;
 }
 
-export function useSourceDeepCompareMemoize(value: any) {
+function useSourceDeepCompareMemoize(value: any) {
   const ref = React.useRef<any>(undefined);
   if (!sourceDeepCompareEquals(value, ref.current)) {
     ref.current = value;