@draftbit/core 48.1.1-bfaf07.2 → 48.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "48.1.1-bfaf07.2+bfaf07d",
+  "version": "48.2.0",
   "description": "Core (non-native) Components",
   "main": "lib/src/index.js",
   "types": "lib/src/index.d.ts",
@@ -41,7 +41,7 @@
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/types": "^48.1.1-bfaf07.2+bfaf07d",
+    "@draftbit/types": "48.2.0",
     "@expo/vector-icons": "^13.0.0",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
@@ -97,5 +97,5 @@
     ],
     "testEnvironment": "node"
   },
-  "gitHead": "bfaf07de3571ebdad09f600b5775ee2ec7ccbefa"
+  "gitHead": "607fd3f8eee06a6def15d3709c263c3e5fb7ea3f"
 }

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

@@ -0,0 +1,25 @@
+import { StyleProp, ViewStyle, TextStyle } from "react-native";
+import type { Theme } from "../../../styles/DefaultTheme";
+import { MediaPlayerProps } from "../MediaPlayerCommon";
+
+export type AudioInterruptionMode = "lower volume" | "stop";
+
+export interface HeadlessAudioPlayerProps extends MediaPlayerProps {
+  interruptionMode?: AudioInterruptionMode;
+  playsInBackground?: boolean;
+  playsInSilentModeIOS?: boolean;
+  playThroughEarpieceAndroid?: boolean;
+}
+
+export interface AudioPlayerInterfaceProps {
+  style?: StyleProp<ViewStyle & TextStyle>;
+  thumbColor?: string;
+  completedTrackColor?: string;
+  remainingTrackColor?: string;
+  togglePlaybackIconSize?: number;
+  togglePlaybackIconColor?: string;
+  hidePlaybackIcon?: boolean;
+  hideDuration?: boolean;
+  hideSlider?: boolean;
+  theme: Theme;
+}

package/src/components/{AudioPlayer → MediaPlayer/AudioPlayer}/AudioPlayerWithInterface.js

@@ -1,10 +1,10 @@
 import * as React from "react";
 import { Text, View, StyleSheet } from "react-native";
 import { AntDesign } from "@expo/vector-icons";
-import { withTheme } from "../../theming";
+import { withTheme } from "../../../theming";
 import Slider from "@react-native-community/slider";
 import HeadlessAudioPlayer from "./HeadlessAudioPlayer";
-import Pressable from "../Pressable";
+import Pressable from "../../Pressable";
 /**
  * Built on top of HeadlessAudioPlayer to provide a simple interface for playing audio
  */
@@ -72,7 +72,7 @@ const AudioPlayerWithInterface = React.forwardRef(({ style, theme, thumbColor =
     }
     return (React.createElement(React.Fragment, null,
         React.createElement(HeadlessAudioPlayer, { ...rest, ref: headlessAudioPlayerRef, onPlaybackStatusUpdate: onPlaybackStatusUpdate, onPlaybackFinish: onPlaybackFinish }),
-        React.createElement(View, { style: [
+        React.createElement(View, { testID: "audio-player-interface", style: [
                 {
                     backgroundColor: theme.colors.background,
                     borderColor: theme.colors.divider,
@@ -80,9 +80,9 @@ const AudioPlayerWithInterface = React.forwardRef(({ style, theme, thumbColor =
                 styles.container,
                 viewStyles,
             ] },
-            !hidePlaybackIcon && (React.createElement(Pressable, { onPress: () => { var _a; return (_a = headlessAudioPlayerRef.current) === null || _a === void 0 ? void 0 : _a.togglePlayback(); }, style: styles.spacingEnd },
+            !hidePlaybackIcon && (React.createElement(Pressable, { testID: "audio-player-playback-icon", onPress: () => { var _a; return (_a = headlessAudioPlayerRef.current) === null || _a === void 0 ? void 0 : _a.togglePlayback(); }, style: styles.spacingEnd },
                 React.createElement(AntDesign, { name: iconName, size: togglePlaybackIconSize, color: togglePlaybackIconColor }))),
-            !hideDuration && (React.createElement(Text, { style: [
+            !hideDuration && (React.createElement(Text, { testID: "audio-player-duration", style: [
                     { color: theme.colors.strong },
                     styles.spacingEnd,
                     { ...textStyles },
@@ -91,7 +91,7 @@ const AudioPlayerWithInterface = React.forwardRef(({ style, theme, thumbColor =
                 " /",
                 " ",
                 formatDuration(durationMillis || 0))),
-            !hideSlider && (React.createElement(Slider, { style: styles.slider, minimumTrackTintColor: completedTrackColor, maximumTrackTintColor: remainingTrackColor, thumbTintColor: thumbColor, minimumValue: 0, value: sliderPositionMillis, maximumValue: durationMillis, onValueChange: onSliderChange, onSlidingComplete: onSlidingComplete })))));
+            !hideSlider && (React.createElement(Slider, { testID: "audio-player-slider", style: styles.slider, minimumTrackTintColor: completedTrackColor, maximumTrackTintColor: remainingTrackColor, thumbTintColor: thumbColor, minimumValue: 0, value: sliderPositionMillis, maximumValue: durationMillis, onValueChange: onSliderChange, onSlidingComplete: onSlidingComplete })))));
 });
 const styles = StyleSheet.create({
     container: {

package/src/components/MediaPlayer/AudioPlayer/AudioPlayerWithInterface.js.map

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

package/src/components/{AudioPlayer → MediaPlayer/AudioPlayer}/AudioPlayerWithInterface.tsx

@@ -1,22 +1,21 @@
 import * as React from "react";
 import { Text, View, StyleSheet } from "react-native";
 import { AntDesign } from "@expo/vector-icons";
-import { withTheme } from "../../theming";
+import { withTheme } from "../../../theming";
 import Slider from "@react-native-community/slider";
 import HeadlessAudioPlayer from "./HeadlessAudioPlayer";
 import {
   AudioPlayerInterfaceProps,
-  AudioPlayerStatus,
   HeadlessAudioPlayerProps,
-  HeadlessAudioPlayerRef,
 } from "./AudioPlayerCommon";
-import Pressable from "../Pressable";
+import Pressable from "../../Pressable";
+import { MediaPlayerRef, MediaPlayerStatus } from "../MediaPlayerCommon";
 
 /**
  * Built on top of HeadlessAudioPlayer to provide a simple interface for playing audio
  */
 const AudioPlayerWithInterface = React.forwardRef<
-  HeadlessAudioPlayerRef,
+  MediaPlayerRef,
   AudioPlayerInterfaceProps & HeadlessAudioPlayerProps
 >(
   (
@@ -44,12 +43,11 @@ const AudioPlayerWithInterface = React.forwardRef<
     >(1);
     const [isDraggingSlider, setIsDraggingSlider] = React.useState(false);
     const [sliderPositionMillis, setSliderPositionMillis] = React.useState(0);
-    const newHeadlessAudioPlayerRef =
-      React.useRef<HeadlessAudioPlayerRef>(null);
+    const newHeadlessAudioPlayerRef = React.useRef<MediaPlayerRef>(null);
 
     // Use the provided ref or default to new ref when not provided
     const headlessAudioPlayerRef = ref
-      ? (ref as React.RefObject<HeadlessAudioPlayerRef>)
+      ? (ref as React.RefObject<MediaPlayerRef>)
       : newHeadlessAudioPlayerRef;
 
     const {
@@ -81,7 +79,7 @@ const AudioPlayerWithInterface = React.forwardRef<
       textDecorationStyle,
     };
 
-    const onPlaybackStatusUpdate = (status: AudioPlayerStatus) => {
+    const onPlaybackStatusUpdate = (status: MediaPlayerStatus) => {
       setIsLoading(status.isLoading);
       setDurationMillis(status.durationMillis);
       setSliderPositionMillis(status.currentPositionMillis);
@@ -128,6 +126,7 @@ const AudioPlayerWithInterface = React.forwardRef<
           onPlaybackFinish={onPlaybackFinish}
         />
         <View
+          testID="audio-player-interface"
           style={[
             {
               backgroundColor: theme.colors.background,
@@ -139,6 +138,7 @@ const AudioPlayerWithInterface = React.forwardRef<
         >
           {!hidePlaybackIcon && (
             <Pressable
+              testID="audio-player-playback-icon"
               onPress={() => headlessAudioPlayerRef.current?.togglePlayback()}
               style={styles.spacingEnd}
             >
@@ -151,6 +151,7 @@ const AudioPlayerWithInterface = React.forwardRef<
           )}
           {!hideDuration && (
             <Text
+              testID="audio-player-duration"
               style={[
                 { color: theme.colors.strong },
                 styles.spacingEnd,
@@ -163,6 +164,7 @@ const AudioPlayerWithInterface = React.forwardRef<
           )}
           {!hideSlider && (
             <Slider
+              testID="audio-player-slider"
               style={styles.slider}
               minimumTrackTintColor={completedTrackColor}
               maximumTrackTintColor={remainingTrackColor}

package/src/components/{AudioPlayer → MediaPlayer/AudioPlayer}/HeadlessAudioPlayer.js

@@ -1,5 +1,7 @@
 import * as React from "react";
 import { Audio, InterruptionModeIOS, InterruptionModeAndroid, } from "expo-av";
+import { 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
@@ -31,33 +33,18 @@ const HeadlessAudioPlayer = React.forwardRef(({ source, interruptionMode = "lowe
         playThroughEarpieceAndroid,
     ]);
     const onPlaybackStatusUpdate = (status) => {
+        const mappedStatus = mapToMediaPlayerStatus(status);
+        onPlaybackStatusUpdateProp === null || onPlaybackStatusUpdateProp === void 0 ? void 0 : onPlaybackStatusUpdateProp(mappedStatus);
         if (status.isLoaded) {
-            onPlaybackStatusUpdateProp === null || onPlaybackStatusUpdateProp === void 0 ? void 0 : 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 === null || onPlaybackFinish === void 0 ? void 0 : onPlaybackFinish();
             }
             setIsPlaying(status.isPlaying);
         }
-        else if (status.error) {
-            onPlaybackStatusUpdateProp === null || onPlaybackStatusUpdateProp === void 0 ? void 0 : onPlaybackStatusUpdateProp({
-                isPlaying: false,
-                isLoading: false,
-                isBuffering: false,
-                currentPositionMillis: 0,
-                durationMillis: 0,
-                bufferedDurationMillis: 0,
-                isError: true,
-                error: status.error,
-            });
-        }
+    };
+    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 === null || onPlaybackStatusUpdateProp === void 0 ? void 0 : onPlaybackStatusUpdateProp({
@@ -73,37 +60,11 @@ const HeadlessAudioPlayer = React.forwardRef(({ source, interruptionMode = "lowe
         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 === null || currentSound === void 0 ? void 0 : currentSound.pauseAsync());
-        }
-        else {
-            await (currentSound === null || currentSound === void 0 ? void 0 : currentSound.playAsync());
-        }
-    }, [currentSound, updateAudioMode, isPlaying]);
-    const seekToPosition = React.useCallback(async (positionMillis) => {
-        await (currentSound === null || currentSound === void 0 ? void 0 : 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;
+    return (React.createElement(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

package/src/components/MediaPlayer/AudioPlayer/HeadlessAudioPlayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeadlessAudioPlayer.js","sourceRoot":"","sources":["HeadlessAudioPlayer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,KAAK,EAEL,mBAAmB,EACnB,uBAAuB,GACxB,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAkB,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAC9E,OAAO,oBAAoB,MAAM,yBAAyB,CAAC;AAE3D;;;GAGG;AACH,MAAM,mBAAmB,GAAG,KAAK,CAAC,UAAU,CAI1C,CACE,EACE,MAAM,EACN,gBAAgB,GAAG,cAAc,EACjC,iBAAiB,GAAG,KAAK,EACzB,oBAAoB,GAAG,KAAK,EAC5B,0BAA0B,GAAG,KAAK,EAClC,sBAAsB,EAAE,0BAA0B,EAClD,gBAAgB,GACjB,EACD,GAAG,EACH,EAAE;IACF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,EAAe,CAAC;IACtE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExD,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,EAAE;QACnD,IAAI;YACF,MAAM,KAAK,CAAC,iBAAiB,CAAC;gBAC5B,uBAAuB,EAAE,iBAAiB;gBAC1C,mBAAmB,EACjB,gBAAgB,KAAK,cAAc;oBACjC,CAAC,CAAC,mBAAmB,CAAC,UAAU;oBAChC,CAAC,CAAC,mBAAmB,CAAC,QAAQ;gBAClC,uBAAuB,EACrB,gBAAgB,KAAK,cAAc;oBACjC,CAAC,CAAC,uBAAuB,CAAC,UAAU;oBACpC,CAAC,CAAC,uBAAuB,CAAC,QAAQ;gBACtC,oBAAoB;gBACpB,0BAA0B;aAC3B,CAAC,CAAC;SACJ;QAAC,OAAO,CAAC,EAAE;YACV,OAAO,CAAC,KAAK,CACX,+IAA+I,EAC/I,CAAC,CACF,CAAC;SACH;IACH,CAAC,EAAE;QACD,gBAAgB;QAChB,iBAAiB;QACjB,oBAAoB;QACpB,0BAA0B;KAC3B,CAAC,CAAC;IAEH,MAAM,sBAAsB,GAAG,CAAC,MAAwB,EAAE,EAAE;QAC1D,MAAM,YAAY,GAAG,sBAAsB,CAAC,MAAM,CAAC,CAAC;QACpD,0BAA0B,aAA1B,0BAA0B,uBAA1B,0BAA0B,CAAG,YAAY,CAAC,CAAC;QAE3C,IAAI,MAAM,CAAC,QAAQ,EAAE;YACnB,IAAI,MAAM,CAAC,aAAa,EAAE;gBACxB,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,EAAI,CAAC;aACtB;YACD,YAAY,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;SAChC;IACH,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,2HAA2H;QAC3H,eAAe,EAAE,CAAC;IACpB,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,KAAK,IAAI,EAAE;QAC3B,0BAA0B,aAA1B,0BAA0B,uBAA1B,0BAA0B,CAAG;YAC3B,SAAS,EAAE,KAAK;YAChB,SAAS,EAAE,IAAI;YACf,WAAW,EAAE,KAAK;YAClB,qBAAqB,EAAE,CAAC;YACxB,cAAc,EAAE,CAAC;YACjB,sBAAsB,EAAE,CAAC;YACzB,OAAO,EAAE,KAAK;SACf,CAAC,CAAC;QAEH,MAAM,EAAE,KAAK,EAAE,GAAG,MAAM,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QACxD,eAAe,CAAC,KAAK,CAAC,CAAC;QACvB,KAAK,CAAC,yBAAyB,CAAC,sBAAsB,CAAC,CAAC;IAC1D,CAAC,CAAC;IAEF,0BAA0B,CAAC,GAAG,EAAE;QAC9B,SAAS,EAAE,CAAC;QAEZ,iCAAiC;IACnC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,CACL,oBAAC,oBAAoB,IACnB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,YAAY,EACnB,gBAAgB,EAAE,gBAAgB,GAClC,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,4EAA4E;AAC5E,2IAA2I;AAC3I,0DAA0D;AAC1D,EAAE;AACF,kHAAkH;AAClH,gDAAgD;AAChD,SAAS,uBAAuB,CAAC,CAAM,EAAE,CAAM;IAC7C,IAAI,CAAA,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,GAAG,MAAI,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,GAAG,CAAA,EAAE;QACpB,OAAO,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,CAAC;KACxB;IACD,OAAO,CAAC,KAAK,CAAC,CAAC;AACjB,CAAC;AAED,SAAS,2BAA2B,CAAC,KAAU;IAC7C,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC;IAC3B,IAAI,CAAC,uBAAuB,CAAC,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC,EAAE;QAChD,GAAG,CAAC,OAAO,GAAG,KAAK,CAAC;KACrB;IACD,OAAO,GAAG,CAAC,OAAO,CAAC;AACrB,CAAC;AAED,SAAS,0BAA0B,CACjC,QAA8B,EAC9B,YAAkC;IAElC,uDAAuD;IACvD,KAAK,CAAC,SAAS,CAAC,QAAQ,EAAE,YAAY,CAAC,GAAG,CAAC,2BAA2B,CAAC,CAAC,CAAC;AAC3E,CAAC;AAED,eAAe,mBAAmB,CAAC"}

package/src/components/{AudioPlayer → MediaPlayer/AudioPlayer}/HeadlessAudioPlayer.tsx

@@ -5,17 +5,16 @@ import {
   InterruptionModeIOS,
   InterruptionModeAndroid,
 } from "expo-av";
-import {
-  HeadlessAudioPlayerProps,
-  HeadlessAudioPlayerRef,
-} from "./AudioPlayerCommon";
+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<
-  HeadlessAudioPlayerRef,
+  MediaPlayerRef,
   HeadlessAudioPlayerProps
 >(
   (
@@ -62,36 +61,22 @@ const HeadlessAudioPlayer = React.forwardRef<
     ]);
 
     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,
-        });
+      const mappedStatus = mapToMediaPlayerStatus(status);
+      onPlaybackStatusUpdateProp?.(mappedStatus);
 
+      if (status.isLoaded) {
         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 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,
@@ -108,50 +93,20 @@ const HeadlessAudioPlayer = React.forwardRef<
       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 (
+      <MediaPlaybackWrapper
+        ref={ref}
+        isPlaying={isPlaying}
+        media={currentSound}
+        onTogglePlayback={onTogglePlayback}
+      />
     );
-
-    return null;
   }
 );
 

package/{lib/src/components → src/components/MediaPlayer}/AudioPlayer/index.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { withTheme } from "../../theming";
+import { withTheme } from "../../../theming";
 import HeadlessAudioPlayer from "./HeadlessAudioPlayer";
 import AudioPlayerWithInterface from "./AudioPlayerWithInterface";
 const AudioPlayer = React.forwardRef(({ mode = "interface", ...rest }, ref) => {

package/src/components/MediaPlayer/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,kBAAkB,CAAC;AAK7C,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AACxD,OAAO,wBAAwB,MAAM,4BAA4B,CAAC;AAOlE,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 → MediaPlayer/AudioPlayer}/index.tsx

@@ -1,19 +1,19 @@
 import * as React from "react";
-import { withTheme } from "../../theming";
+import { withTheme } from "../../../theming";
 import {
   AudioPlayerInterfaceProps,
   HeadlessAudioPlayerProps,
-  HeadlessAudioPlayerRef,
 } from "./AudioPlayerCommon";
 import HeadlessAudioPlayer from "./HeadlessAudioPlayer";
 import AudioPlayerWithInterface from "./AudioPlayerWithInterface";
+import { MediaPlayerRef } from "../MediaPlayerCommon";
 
 interface AudioPlayerProps {
   mode?: "interface" | "headless";
 }
 
 const AudioPlayer = React.forwardRef<
-  HeadlessAudioPlayerRef,
+  MediaPlayerRef,
   AudioPlayerProps & AudioPlayerInterfaceProps & HeadlessAudioPlayerProps
 >(({ mode = "interface", ...rest }, ref) => {
   switch (mode) {
@@ -27,4 +27,4 @@ const AudioPlayer = React.forwardRef<
 
 export default withTheme(AudioPlayer);
 
-export { HeadlessAudioPlayerRef as AudioPlayerRef } from "./AudioPlayerCommon";
+export { MediaPlayerRef as AudioPlayerRef } from "../MediaPlayerCommon";

package/src/components/MediaPlayer/MediaPlaybackWrapper.js

@@ -0,0 +1,32 @@
+import * as React from "react";
+/**
+ * Wrapper component that handles common media playback operations that is reusable with audio and video players
+ */
+const MediaPlaybackWrapper = React.forwardRef(({ media, isPlaying, onTogglePlayback, children }, ref) => {
+    const togglePlayback = React.useCallback(async () => {
+        onTogglePlayback === null || onTogglePlayback === void 0 ? void 0 : onTogglePlayback();
+        if (isPlaying) {
+            await (media === null || media === void 0 ? void 0 : media.pauseAsync());
+        }
+        else {
+            await (media === null || media === void 0 ? void 0 : media.playAsync());
+        }
+    }, [media, isPlaying, onTogglePlayback]);
+    const seekToPosition = React.useCallback(async (positionMillis) => {
+        await (media === null || media === void 0 ? void 0 : media.setPositionAsync(positionMillis));
+    }, [media]);
+    React.useEffect(() => {
+        return media
+            ? () => {
+                media.unloadAsync();
+            }
+            : undefined;
+    }, [media]);
+    React.useImperativeHandle(ref, () => ({
+        seekToPosition,
+        togglePlayback,
+    }), [seekToPosition, togglePlayback]);
+    return React.createElement(React.Fragment, null, children);
+});
+export default MediaPlaybackWrapper;
+//# sourceMappingURL=MediaPlaybackWrapper.js.map

package/src/components/MediaPlayer/MediaPlaybackWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaPlaybackWrapper.js","sourceRoot":"","sources":["MediaPlaybackWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B;;GAEG;AACH,MAAM,oBAAoB,GAAG,KAAK,CAAC,UAAU,CAG3C,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,EAAE;IAC1D,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,EAAE;QAClD,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,EAAI,CAAC;QAErB,IAAI,SAAS,EAAE;YACb,MAAM,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,UAAU,EAAE,CAAA,CAAC;SAC3B;aAAM;YACL,MAAM,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,SAAS,EAAE,CAAA,CAAC;SAC1B;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAEzC,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CACtC,KAAK,EAAE,cAAsB,EAAE,EAAE;QAC/B,MAAM,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,gBAAgB,CAAC,cAAc,CAAC,CAAA,CAAC;IAChD,CAAC,EACD,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,OAAO,KAAK;YACV,CAAC,CAAC,GAAG,EAAE;gBACH,KAAK,CAAC,WAAW,EAAE,CAAC;YACtB,CAAC;YACH,CAAC,CAAC,SAAS,CAAC;IAChB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,KAAK,CAAC,mBAAmB,CACvB,GAAG,EACH,GAAG,EAAE,CAAC,CAAC;QACL,cAAc;QACd,cAAc;KACf,CAAC,EACF,CAAC,cAAc,EAAE,cAAc,CAAC,CACjC,CAAC;IAEF,OAAO,0CAAG,QAAQ,CAAI,CAAC;AACzB,CAAC,CAAC,CAAC;AAEH,eAAe,oBAAoB,CAAC"}

package/src/components/MediaPlayer/MediaPlaybackWrapper.tsx

@@ -0,0 +1,56 @@
+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 seekToPosition = React.useCallback(
+    async (positionMillis: number) => {
+      await media?.setPositionAsync(positionMillis);
+    },
+    [media]
+  );
+
+  React.useEffect(() => {
+    return media
+      ? () => {
+          media.unloadAsync();
+        }
+      : undefined;
+  }, [media]);
+
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      seekToPosition,
+      togglePlayback,
+    }),
+    [seekToPosition, togglePlayback]
+  );
+
+  return <>{children}</>;
+});
+
+export default MediaPlaybackWrapper;

package/src/components/MediaPlayer/MediaPlayerCommon.js

@@ -0,0 +1,24 @@
+export function mapToMediaPlayerStatus(status) {
+    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,
+    };
+}
+//# sourceMappingURL=MediaPlayerCommon.js.map

package/src/components/MediaPlayer/MediaPlayerCommon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaPlayerCommon.js","sourceRoot":"","sources":["MediaPlayerCommon.ts"],"names":[],"mappings":"AAwBA,MAAM,UAAU,sBAAsB,CACpC,MAAwB;IAExB,IAAI,MAAM,CAAC,QAAQ,EAAE;QACnB,OAAO;YACL,SAAS,EAAE,MAAM,CAAC,SAAS;YAC3B,SAAS,EAAE,KAAK;YAChB,WAAW,EAAE,MAAM,CAAC,WAAW;YAC/B,qBAAqB,EAAE,MAAM,CAAC,cAAc,IAAI,CAAC;YACjD,cAAc,EAAE,MAAM,CAAC,cAAc,IAAI,CAAC;YAC1C,sBAAsB,EAAE,MAAM,CAAC,sBAAsB,IAAI,CAAC;YAC1D,OAAO,EAAE,KAAK;SACf,CAAC;KACH;IAED,OAAO;QACL,SAAS,EAAE,KAAK;QAChB,SAAS,EAAE,KAAK;QAChB,WAAW,EAAE,KAAK;QAClB,qBAAqB,EAAE,CAAC;QACxB,cAAc,EAAE,CAAC;QACjB,sBAAsB,EAAE,CAAC;QACzB,OAAO,EAAE,IAAI;QACb,KAAK,EAAE,MAAM,CAAC,KAAK;KACpB,CAAC;AACJ,CAAC"}

package/src/components/MediaPlayer/MediaPlayerCommon.ts

@@ -0,0 +1,50 @@
+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;
+}
+
+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,
+  };
+}