@draftbit/core 47.3.1-a89017.2 → 47.3.1-ae664b.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "47.3.1-a89017.2+a89017a",
+  "version": "47.3.1-ae664b.2+ae664b6",
   "description": "Core (non-native) Components",
   "main": "lib/src/index.js",
   "types": "lib/src/index.d.ts",
@@ -39,7 +39,8 @@
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/types": "^47.3.1-a89017.2+a89017a",
+    "@draftbit/types": "^47.3.1-ae664b.2+ae664b6",
+    "@expo/vector-icons": "^13.0.0",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "@react-native-community/slider": "4.2.4",
@@ -48,6 +49,7 @@
     "color": "^3.1.2",
     "date-fns": "^2.16.1",
     "dateformat": "^3.0.3",
+    "expo-av": "~13.0.3",
     "lodash.isnumber": "^3.0.3",
     "lodash.omit": "^4.5.0",
     "lodash.tonumber": "^4.0.3",
@@ -77,5 +79,5 @@
     "node_modules/",
     "lib/"
   ],
-  "gitHead": "a89017ac218f6d3b8b1aa47506b3881b1bea1dd7"
+  "gitHead": "ae664b68961880b5684a564b05afad6e18b74912"
 }

package/src/components/AudioPlayer/AudioPlayerCommon.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=AudioPlayerCommon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AudioPlayerCommon.js","sourceRoot":"","sources":["AudioPlayerCommon.ts"],"names":[],"mappings":""}

package/src/components/AudioPlayer/AudioPlayerCommon.ts

@@ -0,0 +1,44 @@
+import { AVPlaybackSource } from "expo-av";
+import { StyleProp, ViewStyle, TextStyle } from "react-native";
+import type { Theme } from "../../styles/DefaultTheme";
+
+export type AudioInterruptionMode = "lower volume" | "stop";
+
+export interface AudioPlayerStatus {
+  isPlaying: boolean;
+  isLoading: boolean;
+  isBuffering: boolean;
+  currentPositionMillis: number;
+  durationMillis: number;
+  bufferedDurationMillis: number;
+  isError: boolean;
+  error?: string;
+}
+
+export interface HeadlessAudioPlayerRef {
+  seekToPosition: (positionMillis: number) => void;
+  togglePlayback: () => void;
+}
+
+export interface HeadlessAudioPlayerProps {
+  onPlaybackStatusUpdate?: (status: AudioPlayerStatus) => void;
+  onPlaybackFinish?: () => void;
+  source: AVPlaybackSource;
+  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/AudioPlayerWithInterface.js

@@ -0,0 +1,126 @@
+import * as React from "react";
+import { Text, View, StyleSheet } from "react-native";
+import { AntDesign } from "@expo/vector-icons";
+import { withTheme } from "../../theming";
+import Slider from "@react-native-community/slider";
+import HeadlessAudioPlayer from "./HeadlessAudioPlayer";
+import Pressable from "../Pressable";
+/**
+ * Built on top of HeadlessAudioPlayer to provide a simple interface for playing audio
+ */
+const AudioPlayerWithInterface = React.forwardRef(({ style, theme, thumbColor = theme.colors.primary, completedTrackColor = theme.colors.primary, remainingTrackColor = theme.colors.divider, togglePlaybackIconSize = 24, togglePlaybackIconColor = theme.colors.primary, onPlaybackStatusUpdate: onPlaybackStatusUpdateProp, onPlaybackFinish: onPlaybackFinishProp, hidePlaybackIcon = false, hideDuration = false, hideSlider = false, ...rest }, ref) => {
+    const [isPlaying, setIsPlaying] = React.useState(false);
+    const [isLoading, setIsLoading] = React.useState(false);
+    const [durationMillis, setDurationMillis] = React.useState(1);
+    const [isDraggingSlider, setIsDraggingSlider] = React.useState(false);
+    const [sliderPositionMillis, setSliderPositionMillis] = React.useState(0);
+    const newHeadlessAudioPlayerRef = React.useRef(null);
+    // Use the provided ref or default to new ref when not provided
+    const headlessAudioPlayerRef = ref
+        ? ref
+        : newHeadlessAudioPlayerRef;
+    const { color, fontFamily, fontWeight, fontSize, lineHeight, letterSpacing, textTransform, textAlign, textDecorationLine, textDecorationColor, textDecorationStyle, ...viewStyles } = StyleSheet.flatten(style || {});
+    const textStyles = {
+        color,
+        fontFamily,
+        fontWeight,
+        fontSize,
+        lineHeight,
+        letterSpacing,
+        textTransform,
+        textAlign,
+        textDecorationLine,
+        textDecorationColor,
+        textDecorationStyle,
+    };
+    const onPlaybackStatusUpdate = (status) => {
+        setIsLoading(status.isLoading);
+        setDurationMillis(status.durationMillis);
+        setSliderPositionMillis(status.currentPositionMillis);
+        setIsPlaying(status.isPlaying);
+        onPlaybackStatusUpdateProp === null || onPlaybackStatusUpdateProp === void 0 ? void 0 : onPlaybackStatusUpdateProp(status);
+    };
+    const onPlaybackFinish = () => {
+        var _a, _b;
+        setIsPlaying(false);
+        setSliderPositionMillis(0);
+        (_a = headlessAudioPlayerRef.current) === null || _a === void 0 ? void 0 : _a.togglePlayback();
+        (_b = headlessAudioPlayerRef.current) === null || _b === void 0 ? void 0 : _b.seekToPosition(0);
+        onPlaybackFinishProp === null || onPlaybackFinishProp === void 0 ? void 0 : onPlaybackFinishProp();
+    };
+    const onSlidingComplete = (sliderValue) => {
+        var _a;
+        if (isDraggingSlider) {
+            setIsDraggingSlider(false);
+        }
+        (_a = headlessAudioPlayerRef.current) === null || _a === void 0 ? void 0 : _a.seekToPosition(sliderValue);
+    };
+    const onSliderChange = () => {
+        if (!isDraggingSlider) {
+            setIsDraggingSlider(true);
+        }
+    };
+    let iconName;
+    if (isLoading) {
+        iconName = "loading1";
+    }
+    else if (isPlaying) {
+        iconName = "pause";
+    }
+    else {
+        iconName = "play";
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(HeadlessAudioPlayer, { ...rest, ref: headlessAudioPlayerRef, onPlaybackStatusUpdate: onPlaybackStatusUpdate, onPlaybackFinish: onPlaybackFinish }),
+        React.createElement(View, { style: [
+                {
+                    backgroundColor: theme.colors.background,
+                    borderColor: theme.colors.divider,
+                },
+                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 },
+                React.createElement(AntDesign, { name: iconName, size: togglePlaybackIconSize, color: togglePlaybackIconColor }))),
+            !hideDuration && (React.createElement(Text, { style: [
+                    { color: theme.colors.strong },
+                    styles.spacingEnd,
+                    { ...textStyles },
+                ] },
+                formatDuration(sliderPositionMillis !== null && sliderPositionMillis !== void 0 ? sliderPositionMillis : 0),
+                " /",
+                " ",
+                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 })))));
+});
+const styles = StyleSheet.create({
+    container: {
+        padding: 8,
+        flexDirection: "row",
+        alignItems: "center",
+        borderRadius: 8,
+        borderWidth: 1,
+    },
+    spacingEnd: {
+        marginEnd: 8,
+    },
+    slider: {
+        flex: 1,
+    },
+});
+function formatDuration(duration) {
+    if (duration === 0)
+        return "00:00";
+    const seconds = Math.floor((duration / 1000) % 60);
+    const minutes = Math.floor((duration / (1000 * 60)) % 60);
+    const hours = Math.floor((duration / (1000 * 60 * 60)) % 24);
+    const renderedHours = hours < 10 ? "0" + hours : hours;
+    const renderedMinutes = minutes < 10 ? "0" + minutes : minutes;
+    const renderedSeconds = seconds < 10 ? "0" + seconds : seconds;
+    if (hours > 0) {
+        return renderedHours + ":" + renderedMinutes + ":" + renderedSeconds;
+    }
+    return renderedMinutes + ":" + renderedSeconds;
+}
+export default withTheme(AudioPlayerWithInterface);
+//# sourceMappingURL=AudioPlayerWithInterface.js.map

package/src/components/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/AudioPlayerWithInterface.tsx

@@ -0,0 +1,217 @@
+import * as React from "react";
+import { Text, View, StyleSheet } from "react-native";
+import { AntDesign } from "@expo/vector-icons";
+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";
+
+/**
+ * Built on top of HeadlessAudioPlayer to provide a simple interface for playing audio
+ */
+const AudioPlayerWithInterface = React.forwardRef<
+  HeadlessAudioPlayerRef,
+  AudioPlayerInterfaceProps & HeadlessAudioPlayerProps
+>(
+  (
+    {
+      style,
+      theme,
+      thumbColor = theme.colors.primary,
+      completedTrackColor = theme.colors.primary,
+      remainingTrackColor = theme.colors.divider,
+      togglePlaybackIconSize = 24,
+      togglePlaybackIconColor = theme.colors.primary,
+      onPlaybackStatusUpdate: onPlaybackStatusUpdateProp,
+      onPlaybackFinish: onPlaybackFinishProp,
+      hidePlaybackIcon = false,
+      hideDuration = false,
+      hideSlider = false,
+      ...rest
+    },
+    ref
+  ) => {
+    const [isPlaying, setIsPlaying] = React.useState(false);
+    const [isLoading, setIsLoading] = React.useState(false);
+    const [durationMillis, setDurationMillis] = React.useState<
+      number | undefined
+    >(1);
+    const [isDraggingSlider, setIsDraggingSlider] = React.useState(false);
+    const [sliderPositionMillis, setSliderPositionMillis] = React.useState(0);
+    const newHeadlessAudioPlayerRef =
+      React.useRef<HeadlessAudioPlayerRef>(null);
+
+    // Use the provided ref or default to new ref when not provided
+    const headlessAudioPlayerRef = ref
+      ? (ref as React.RefObject<HeadlessAudioPlayerRef>)
+      : newHeadlessAudioPlayerRef;
+
+    const {
+      color,
+      fontFamily,
+      fontWeight,
+      fontSize,
+      lineHeight,
+      letterSpacing,
+      textTransform,
+      textAlign,
+      textDecorationLine,
+      textDecorationColor,
+      textDecorationStyle,
+      ...viewStyles
+    } = StyleSheet.flatten(style || {});
+
+    const textStyles = {
+      color,
+      fontFamily,
+      fontWeight,
+      fontSize,
+      lineHeight,
+      letterSpacing,
+      textTransform,
+      textAlign,
+      textDecorationLine,
+      textDecorationColor,
+      textDecorationStyle,
+    };
+
+    const onPlaybackStatusUpdate = (status: AudioPlayerStatus) => {
+      setIsLoading(status.isLoading);
+      setDurationMillis(status.durationMillis);
+      setSliderPositionMillis(status.currentPositionMillis);
+      setIsPlaying(status.isPlaying);
+      onPlaybackStatusUpdateProp?.(status);
+    };
+
+    const onPlaybackFinish = () => {
+      setIsPlaying(false);
+      setSliderPositionMillis(0);
+      headlessAudioPlayerRef.current?.togglePlayback();
+      headlessAudioPlayerRef.current?.seekToPosition(0);
+      onPlaybackFinishProp?.();
+    };
+
+    const onSlidingComplete = (sliderValue: number) => {
+      if (isDraggingSlider) {
+        setIsDraggingSlider(false);
+      }
+      headlessAudioPlayerRef.current?.seekToPosition(sliderValue);
+    };
+
+    const onSliderChange = () => {
+      if (!isDraggingSlider) {
+        setIsDraggingSlider(true);
+      }
+    };
+
+    let iconName;
+    if (isLoading) {
+      iconName = "loading1";
+    } else if (isPlaying) {
+      iconName = "pause";
+    } else {
+      iconName = "play";
+    }
+
+    return (
+      <>
+        <HeadlessAudioPlayer
+          {...rest}
+          ref={headlessAudioPlayerRef}
+          onPlaybackStatusUpdate={onPlaybackStatusUpdate}
+          onPlaybackFinish={onPlaybackFinish}
+        />
+        <View
+          style={[
+            {
+              backgroundColor: theme.colors.background,
+              borderColor: theme.colors.divider,
+            },
+            styles.container,
+            viewStyles,
+          ]}
+        >
+          {!hidePlaybackIcon && (
+            <Pressable
+              onPress={() => headlessAudioPlayerRef.current?.togglePlayback()}
+              style={styles.spacingEnd}
+            >
+              <AntDesign
+                name={iconName as any}
+                size={togglePlaybackIconSize}
+                color={togglePlaybackIconColor}
+              />
+            </Pressable>
+          )}
+          {!hideDuration && (
+            <Text
+              style={[
+                { color: theme.colors.strong },
+                styles.spacingEnd,
+                { ...textStyles },
+              ]}
+            >
+              {formatDuration(sliderPositionMillis ?? 0)} /{" "}
+              {formatDuration(durationMillis || 0)}
+            </Text>
+          )}
+          {!hideSlider && (
+            <Slider
+              style={styles.slider}
+              minimumTrackTintColor={completedTrackColor}
+              maximumTrackTintColor={remainingTrackColor}
+              thumbTintColor={thumbColor}
+              minimumValue={0}
+              value={sliderPositionMillis}
+              maximumValue={durationMillis}
+              onValueChange={onSliderChange}
+              onSlidingComplete={onSlidingComplete}
+            />
+          )}
+        </View>
+      </>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 8,
+    flexDirection: "row",
+    alignItems: "center",
+    borderRadius: 8,
+    borderWidth: 1,
+  },
+  spacingEnd: {
+    marginEnd: 8,
+  },
+  slider: {
+    flex: 1,
+  },
+});
+
+function formatDuration(duration: number) {
+  if (duration === 0) return "00:00";
+
+  const seconds = Math.floor((duration / 1000) % 60);
+  const minutes = Math.floor((duration / (1000 * 60)) % 60);
+  const hours = Math.floor((duration / (1000 * 60 * 60)) % 24);
+
+  const renderedHours = hours < 10 ? "0" + hours : hours;
+  const renderedMinutes = minutes < 10 ? "0" + minutes : minutes;
+  const renderedSeconds = seconds < 10 ? "0" + seconds : seconds;
+
+  if (hours > 0) {
+    return renderedHours + ":" + renderedMinutes + ":" + renderedSeconds;
+  }
+
+  return renderedMinutes + ":" + renderedSeconds;
+}
+
+export default withTheme(AudioPlayerWithInterface);

package/src/components/AudioPlayer/HeadlessAudioPlayer.js

@@ -0,0 +1,132 @@
+import * as React from "react";
+import { Audio, InterruptionModeIOS, InterruptionModeAndroid, } from "expo-av";
+/**
+ * Audio Player component without an interface (UI).
+ * Only handles playing of the audio and provides callbacks and ref functions
+ */
+const HeadlessAudioPlayer = React.forwardRef(({ source, interruptionMode = "lower volume", playsInBackground = false, playsInSilentModeIOS = false, playThroughEarpieceAndroid = false, onPlaybackStatusUpdate: onPlaybackStatusUpdateProp, onPlaybackFinish, }, ref) => {
+    const [currentSound, setCurrentSound] = React.useState();
+    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) => {
+        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 loadAudio = async () => {
+        onPlaybackStatusUpdateProp === null || onPlaybackStatusUpdateProp === void 0 ? void 0 : 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 === 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;
+});
+// 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, b) {
+    if ((a === null || a === void 0 ? void 0 : a.uri) && (b === null || b === void 0 ? void 0 : b.uri)) {
+        return a.uri === b.uri;
+    }
+    return a === b;
+}
+function useSourceDeepCompareMemoize(value) {
+    const ref = React.useRef();
+    if (!sourceDeepCompareEquals(value, ref.current)) {
+        ref.current = value;
+    }
+    return ref.current;
+}
+function useSourceDeepCompareEffect(callback, dependencies) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    React.useEffect(callback, dependencies.map(useSourceDeepCompareMemoize));
+}
+export default HeadlessAudioPlayer;
+//# sourceMappingURL=HeadlessAudioPlayer.js.map

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

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