@draftbit/core 48.5.5-ee2f75.2 → 48.5.6

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

@@ -1,142 +1,142 @@
-import * as React from "react";
-import {
-  Audio,
-  AVPlaybackStatus,
-  InterruptionModeIOS,
-  InterruptionModeAndroid,
-} from "expo-av";
-import { HeadlessAudioPlayerProps } from "./AudioPlayerCommon";
-import { MediaPlayerRef, mapToMediaPlayerStatus } from "../MediaPlayerCommon";
-import MediaPlaybackWrapper from "../MediaPlaybackWrapper";
-
-/**
- * Audio Player component without an interface (UI).
- * Only handles playing of the audio and provides callbacks and ref functions
- */
-const HeadlessAudioPlayer = React.forwardRef<
-  MediaPlayerRef,
-  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 () => {
-      try {
-        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) {
-        console.error(
-          "Failed to set audio mode. interruptionMode, playsInBackground, playsInSilentModeIOS, playThroughEarpieceAndroid might not be set. Failed with",
-          e
-        );
-      }
-    }, [
-      interruptionMode,
-      playsInBackground,
-      playsInSilentModeIOS,
-      playThroughEarpieceAndroid,
-    ]);
-
-    const onPlaybackStatusUpdate = (status: AVPlaybackStatus) => {
-      const mappedStatus = mapToMediaPlayerStatus(status);
-      onPlaybackStatusUpdateProp?.(mappedStatus);
-
-      if (status.isLoaded) {
-        if (status.didJustFinish) {
-          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
-      updateAudioMode();
-    };
-
-    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);
-    };
-
-    useSourceDeepCompareEffect(() => {
-      loadAudio();
-
-      // Ignore dependency of loadAudio
-    }, [source]);
-
-    return (
-      <MediaPlaybackWrapper
-        ref={ref}
-        isPlaying={isPlaying}
-        media={currentSound}
-        onTogglePlayback={onTogglePlayback}
-      />
-    );
-  }
-);
-
-// 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;
+import * as React from "react";
+import {
+  Audio,
+  AVPlaybackStatus,
+  InterruptionModeIOS,
+  InterruptionModeAndroid,
+} from "expo-av";
+import { HeadlessAudioPlayerProps } from "./AudioPlayerCommon";
+import { MediaPlayerRef, mapToMediaPlayerStatus } from "../MediaPlayerCommon";
+import MediaPlaybackWrapper from "../MediaPlaybackWrapper";
+
+/**
+ * Audio Player component without an interface (UI).
+ * Only handles playing of the audio and provides callbacks and ref functions
+ */
+const HeadlessAudioPlayer = React.forwardRef<
+  MediaPlayerRef,
+  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 () => {
+      try {
+        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) {
+        console.error(
+          "Failed to set audio mode. interruptionMode, playsInBackground, playsInSilentModeIOS, playThroughEarpieceAndroid might not be set. Failed with",
+          e
+        );
+      }
+    }, [
+      interruptionMode,
+      playsInBackground,
+      playsInSilentModeIOS,
+      playThroughEarpieceAndroid,
+    ]);
+
+    const onPlaybackStatusUpdate = (status: AVPlaybackStatus) => {
+      const mappedStatus = mapToMediaPlayerStatus(status);
+      onPlaybackStatusUpdateProp?.(mappedStatus);
+
+      if (status.isLoaded) {
+        if (status.didJustFinish) {
+          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
+      updateAudioMode();
+    };
+
+    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);
+    };
+
+    useSourceDeepCompareEffect(() => {
+      loadAudio();
+
+      // Ignore dependency of loadAudio
+    }, [source]);
+
+    return (
+      <MediaPlaybackWrapper
+        ref={ref}
+        isPlaying={isPlaying}
+        media={currentSound}
+        onTogglePlayback={onTogglePlayback}
+      />
+    );
+  }
+);
+
+// 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/MediaPlayer/AudioPlayer/index.tsx

@@ -1,30 +1,30 @@
-import * as React from "react";
-import { withTheme } from "../../../theming";
-import {
-  AudioPlayerInterfaceProps,
-  HeadlessAudioPlayerProps,
-} from "./AudioPlayerCommon";
-import HeadlessAudioPlayer from "./HeadlessAudioPlayer";
-import AudioPlayerWithInterface from "./AudioPlayerWithInterface";
-import { MediaPlayerRef } from "../MediaPlayerCommon";
-
-interface AudioPlayerProps {
-  mode?: "interface" | "headless";
-}
-
-const AudioPlayer = React.forwardRef<
-  MediaPlayerRef,
-  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 { MediaPlayerRef as AudioPlayerRef } from "../MediaPlayerCommon";
+import * as React from "react";
+import { withTheme } from "../../../theming";
+import {
+  AudioPlayerInterfaceProps,
+  HeadlessAudioPlayerProps,
+} from "./AudioPlayerCommon";
+import HeadlessAudioPlayer from "./HeadlessAudioPlayer";
+import AudioPlayerWithInterface from "./AudioPlayerWithInterface";
+import { MediaPlayerRef } from "../MediaPlayerCommon";
+
+interface AudioPlayerProps {
+  mode?: "interface" | "headless";
+}
+
+const AudioPlayer = React.forwardRef<
+  MediaPlayerRef,
+  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 { MediaPlayerRef as AudioPlayerRef } from "../MediaPlayerCommon";

package/src/components/MediaPlayer/MediaPlaybackWrapper.tsx

@@ -1,68 +1,68 @@
-import * as React from "react";
-import type { Playback } from "expo-av/src/AV";
-
-import { MediaPlayerRef } from "./MediaPlayerCommon";
-
-interface MediaPlaybackWrapperProps {
-  media?: Playback;
-  isPlaying?: boolean;
-  onTogglePlayback?: () => void;
-}
-
-/**
- * Wrapper component that handles common media playback operations that is reusable with audio and video players
- */
-const MediaPlaybackWrapper = React.forwardRef<
-  MediaPlayerRef,
-  React.PropsWithChildren<MediaPlaybackWrapperProps>
->(({ media, isPlaying, onTogglePlayback, children }, ref) => {
-  const togglePlayback = React.useCallback(async () => {
-    onTogglePlayback?.();
-
-    if (isPlaying) {
-      await media?.pauseAsync();
-    } else {
-      await media?.playAsync();
-    }
-  }, [media, isPlaying, onTogglePlayback]);
-
-  const pause = React.useCallback(async () => {
-    onTogglePlayback?.();
-    await media?.pauseAsync();
-  }, [media, onTogglePlayback]);
-
-  const play = React.useCallback(async () => {
-    onTogglePlayback?.();
-    await media?.playAsync();
-  }, [media, onTogglePlayback]);
-
-  const seekToPosition = React.useCallback(
-    async (positionMillis: number) => {
-      await media?.setPositionAsync(positionMillis);
-    },
-    [media]
-  );
-
-  React.useEffect(() => {
-    return media
-      ? () => {
-          media.unloadAsync();
-        }
-      : undefined;
-  }, [media]);
-
-  React.useImperativeHandle(
-    ref,
-    () => ({
-      seekToPosition,
-      togglePlayback,
-      pause,
-      play,
-    }),
-    [seekToPosition, togglePlayback, pause, play]
-  );
-
-  return <>{children}</>;
-});
-
-export default MediaPlaybackWrapper;
+import * as React from "react";
+import type { Playback } from "expo-av/src/AV";
+
+import { MediaPlayerRef } from "./MediaPlayerCommon";
+
+interface MediaPlaybackWrapperProps {
+  media?: Playback;
+  isPlaying?: boolean;
+  onTogglePlayback?: () => void;
+}
+
+/**
+ * Wrapper component that handles common media playback operations that is reusable with audio and video players
+ */
+const MediaPlaybackWrapper = React.forwardRef<
+  MediaPlayerRef,
+  React.PropsWithChildren<MediaPlaybackWrapperProps>
+>(({ media, isPlaying, onTogglePlayback, children }, ref) => {
+  const togglePlayback = React.useCallback(async () => {
+    onTogglePlayback?.();
+
+    if (isPlaying) {
+      await media?.pauseAsync();
+    } else {
+      await media?.playAsync();
+    }
+  }, [media, isPlaying, onTogglePlayback]);
+
+  const pause = React.useCallback(async () => {
+    onTogglePlayback?.();
+    await media?.pauseAsync();
+  }, [media, onTogglePlayback]);
+
+  const play = React.useCallback(async () => {
+    onTogglePlayback?.();
+    await media?.playAsync();
+  }, [media, onTogglePlayback]);
+
+  const seekToPosition = React.useCallback(
+    async (positionMillis: number) => {
+      await media?.setPositionAsync(positionMillis);
+    },
+    [media]
+  );
+
+  React.useEffect(() => {
+    return media
+      ? () => {
+          media.unloadAsync();
+        }
+      : undefined;
+  }, [media]);
+
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      seekToPosition,
+      togglePlayback,
+      pause,
+      play,
+    }),
+    [seekToPosition, togglePlayback, pause, play]
+  );
+
+  return <>{children}</>;
+});
+
+export default MediaPlaybackWrapper;

package/src/components/MediaPlayer/MediaPlayerCommon.ts

@@ -1,52 +1,52 @@
-import { AVPlaybackSource, AVPlaybackStatus } from "expo-av";
-
-export interface MediaPlayerStatus {
-  isPlaying: boolean;
-  isLoading: boolean;
-  isBuffering: boolean;
-  currentPositionMillis: number;
-  durationMillis: number;
-  bufferedDurationMillis: number;
-  isError: boolean;
-  error?: string;
-}
-
-export interface MediaPlayerRef {
-  seekToPosition: (positionMillis: number) => void;
-  togglePlayback: () => void;
-  pause: () => void;
-  play: () => void;
-}
-
-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,
-  };
-}
+import { AVPlaybackSource, AVPlaybackStatus } from "expo-av";
+
+export interface MediaPlayerStatus {
+  isPlaying: boolean;
+  isLoading: boolean;
+  isBuffering: boolean;
+  currentPositionMillis: number;
+  durationMillis: number;
+  bufferedDurationMillis: number;
+  isError: boolean;
+  error?: string;
+}
+
+export interface MediaPlayerRef {
+  seekToPosition: (positionMillis: number) => void;
+  togglePlayback: () => void;
+  pause: () => void;
+  play: () => void;
+}
+
+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,
+  };
+}