@draftbit/core 54.0.4-6c949a.2 → 54.0.4-982952.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "54.0.4-6c949a.2+6c949af",
+  "version": "54.0.4-982952.2+9829524",
   "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-6c949a.2+6c949af",
+    "@draftbit/theme": "^54.0.4-982952.2+9829524",
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
     "@expo/vector-icons": "^15.0.3",
@@ -57,8 +57,9 @@
     "color": "^4.2.3",
     "date-fns": "^4.1.0",
     "dateformat": "^5.0.3",
-    "expo-av": "~16.0.8",
+    "expo-audio": "~1.1.1",
     "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",
@@ -122,5 +123,5 @@
     ],
     "testEnvironment": "node"
   },
-  "gitHead": "6c949afa2c601852d436883343b61091d025d849"
+  "gitHead": "982952444fe6e477d4268d769d270e9674bface6"
 }

package/src/components/DeckSwiper/DeckSwiper.tsx

@@ -25,6 +25,7 @@ export interface DeckSwiperProps<T> {
   keyExtractor?: (item: T) => string;
   renderItem?: ({ item, index }: { item: T; index: number }) => JSX.Element;
   style?: StyleProp<ViewStyle>;
+  className?: string;
 }
 
 const DeckSwiper = React.forwardRef<DeckSwiperRef, DeckSwiperProps<any>>(
@@ -48,6 +49,7 @@ const DeckSwiper = React.forwardRef<DeckSwiperRef, DeckSwiperProps<any>>(
       keyExtractor,
       renderItem,
       style,
+      className,
       children,
     }: React.PropsWithChildren<DeckSwiperProps<T>>,
     ref: React.Ref<DeckSwiperRef>
@@ -146,7 +148,9 @@ const DeckSwiper = React.forwardRef<DeckSwiperRef, DeckSwiperProps<any>>(
      */
 
     return (
-      <View>
+      <View // @ts-ignore
+        className={className}
+      >
         <View style={styles.containerHeightFiller}>{renderFirstCard()}</View>
         <DeckSwiperComponent
           ref={deckSwiperRef}

package/src/components/DeckSwiper/DeckSwiperCard.tsx

@@ -1,16 +1,23 @@
 import React from "react";
-import { View, StyleSheet, StyleProp, ViewStyle } from "react-native";
+import {
+  View,
+  ViewProps,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+} from "react-native";
 import type { ReadTheme } from "@draftbit/theme";
 import { withTheme } from "@draftbit/theme";
 
-export interface DeckSwiperCardProps {
+export interface DeckSwiperCardProps
+  extends Omit<ViewProps, "style" | "children"> {
   style?: StyleProp<ViewStyle>;
   theme: ReadTheme;
 }
 
 const DeckSwiperCard: React.FC<
   React.PropsWithChildren<DeckSwiperCardProps>
-> = ({ style, children, theme }) => (
+> = ({ style, children, theme, ...rest }) => (
   <View
     style={[
       styles.card,
@@ -20,6 +27,7 @@ const DeckSwiperCard: React.FC<
       },
       style,
     ]}
+    {...rest}
   >
     {children}
   </View>

package/src/components/Layout/Spacer.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { View, StyleProp, ViewStyle } from "react-native";
+import { View, ViewProps, StyleProp, ViewStyle } from "react-native";
 
-interface SpacerProps {
+interface SpacerProps extends Omit<ViewProps, "style"> {
   top?: number;
   right?: number;
   left?: number;
@@ -15,6 +15,7 @@ const Spacer: React.FC<SpacerProps> = ({
   bottom = 8,
   left = 8,
   style,
+  ...rest
 }) => {
   return (
     <View
@@ -27,6 +28,7 @@ const Spacer: React.FC<SpacerProps> = ({
           paddingBottom: bottom,
         },
       ]}
+      {...rest}
     />
   );
 };

package/src/components/LottieAnimation.tsx

@@ -25,7 +25,7 @@ const LottieAnimation = forwardRef<LottieView, Props>(
     ref
   ) => {
     return (
-      <View style={style}>
+      <View style={style} {...rest}>
         <LottieView
           ref={ref}
           source={source}
@@ -36,7 +36,6 @@ const LottieAnimation = forwardRef<LottieView, Props>(
           // A specific size is required on mobile, but not on web.
           // This ensures consistent behavior across platforms during preview.
           style={{ width: "100%", height: "100%" }}
-          {...rest}
         />
       </View>
     );

package/src/components/MediaPlayer/AudioPlayer/AudioPlayerCommon.ts

@@ -13,6 +13,7 @@ export interface HeadlessAudioPlayerProps extends MediaPlayerProps {
 }
 
 export interface AudioPlayerInterfaceProps {
+  className?: string;
   style?: StyleProp<ViewStyle & TextStyle>;
   thumbColor?: string;
   completedTrackColor?: string;

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

@@ -21,6 +21,7 @@ const AudioPlayerWithInterface = React.forwardRef<
   (
     {
       style,
+      className,
       thumbColor,
       completedTrackColor,
       remainingTrackColor,
@@ -127,6 +128,8 @@ const AudioPlayerWithInterface = React.forwardRef<
         />
         <View
           testID="audio-player-interface"
+          // @ts-ignore
+          className={className}
           style={[
             {
               backgroundColor: theme.colors.background.base,

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

@@ -1,17 +1,12 @@
 import * as React from "react";
-import {
-  Audio,
-  AVPlaybackStatus,
-  InterruptionModeIOS,
-  InterruptionModeAndroid,
-} from "expo-av";
+import { useAudioPlayer, setAudioModeAsync, AudioStatus } from "expo-audio";
 import { HeadlessAudioPlayerProps } from "./AudioPlayerCommon";
 import {
-  mapToMediaPlayerStatus,
   normalizeBase64Source,
+  useSourceDeepCompareMemoize,
   useSourceDeepCompareEffect,
 } from "../MediaPlayerCommon";
-import type { MediaPlayerRef } from "../MediaPlayerCommon";
+import type { MediaPlayerRef, MediaPlayerStatus } from "../MediaPlayerCommon";
 import MediaPlaybackWrapper from "../MediaPlaybackWrapper";
 
 /**
@@ -36,38 +31,70 @@ const HeadlessAudioPlayer = React.forwardRef<
     },
     ref
   ) => {
-    const [currentSound, setCurrentSound] = React.useState<Audio.Sound>();
+    const stableSource = useSourceDeepCompareMemoize(
+      normalizeBase64Source(source, "audio")
+    );
+    const player = useAudioPlayer(stableSource);
+
     const [isPlaying, setIsPlaying] = React.useState(false);
 
     React.useEffect(() => {
-      if (
-        currentSound &&
-        typeof currentSound?.setIsLoopingAsync === "function"
-      ) {
-        currentSound.setIsLoopingAsync(isLooping);
-      }
-    }, [currentSound, isLooping]);
+      player.loop = isLooping;
+    }, [player, isLooping]);
 
     React.useEffect(() => {
-      if (currentSound && typeof currentSound?.setVolumeAsync === "function") {
-        currentSound.setVolumeAsync(volume);
+      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,
+      });
+    }, []);
+
+    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;
       }
-    }, [currentSound, volume]);
+      player.replace(normalizeBase64Source(source, "audio") as any);
+    }, [source]);
 
     const updateAudioMode = React.useCallback(async () => {
       try {
-        await Audio.setAudioModeAsync({
-          staysActiveInBackground: playsInBackground,
-          interruptionModeIOS:
-            interruptionMode === "lower volume"
-              ? InterruptionModeIOS.DuckOthers
-              : InterruptionModeIOS.DoNotMix,
-          interruptionModeAndroid:
-            interruptionMode === "lower volume"
-              ? InterruptionModeAndroid.DuckOthers
-              : InterruptionModeAndroid.DoNotMix,
-          playsInSilentModeIOS,
-          playThroughEarpieceAndroid,
+        await setAudioModeAsync({
+          shouldPlayInBackground: playsInBackground,
+          interruptionMode:
+            interruptionMode === "lower volume" ? "duckOthers" : "doNotMix",
+          playsInSilentMode: playsInSilentModeIOS,
+          shouldRouteThroughEarpiece: playThroughEarpieceAndroid,
         });
       } catch (e) {
         if ((e as { code?: string })?.code === "E_AUDIO_AUDIOMODE") {
@@ -88,59 +115,44 @@ 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}
-        media={currentSound}
+        player={player}
         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,10 +1,11 @@
 import * as React from "react";
-import type { Playback } from "expo-av/src/AV";
+import type { AudioPlayer } from "expo-audio";
+import type { VideoPlayer } from "expo-video";
 
 import type { MediaPlayerRef } from "./MediaPlayerCommon";
 
 interface MediaPlaybackWrapperProps {
-  media?: Playback;
+  player?: AudioPlayer | VideoPlayer;
   isPlaying?: boolean;
   onTogglePlayback?: () => void;
 }
@@ -15,42 +16,38 @@ interface MediaPlaybackWrapperProps {
 const MediaPlaybackWrapper = React.forwardRef<
   MediaPlayerRef,
   React.PropsWithChildren<MediaPlaybackWrapperProps>
->(({ media, isPlaying, onTogglePlayback, children }, ref) => {
-  const togglePlayback = React.useCallback(async () => {
+>(({ player, isPlaying, onTogglePlayback, children }, ref) => {
+  const togglePlayback = React.useCallback(() => {
     onTogglePlayback?.();
 
     if (isPlaying) {
-      await media?.pauseAsync();
+      player?.pause();
     } else {
-      await media?.playAsync();
+      player?.play();
     }
-  }, [media, isPlaying, onTogglePlayback]);
+  }, [isPlaying, onTogglePlayback]);
 
-  const pause = React.useCallback(async () => {
+  const pause = React.useCallback(() => {
     onTogglePlayback?.();
-    await media?.pauseAsync();
-  }, [media, onTogglePlayback]);
+    player?.pause();
+  }, [player, onTogglePlayback]);
 
-  const play = React.useCallback(async () => {
+  const play = React.useCallback(() => {
     onTogglePlayback?.();
-    await media?.playAsync();
-  }, [media, onTogglePlayback]);
+    player?.play();
+  }, [player, onTogglePlayback]);
 
   const seekToPosition = React.useCallback(
-    async (positionMillis: number) => {
-      await media?.setPositionAsync(positionMillis);
+    (positionMillis: number) => {
+      if (typeof (player as any)?.seekTo === "function") {
+        (player as AudioPlayer).seekTo(positionMillis / 1000);
+      } else if (player) {
+        player.currentTime = positionMillis / 1000;
+      }
     },
-    [media]
+    [player]
   );
 
-  React.useEffect(() => {
-    return media
-      ? () => {
-          media.unloadAsync();
-        }
-      : undefined;
-  }, [media]);
-
   React.useImperativeHandle(
     ref,
     () => ({

package/src/components/MediaPlayer/MediaPlayerCommon.ts

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