@draftbit/core 48.5.5-bc0b6e.2 → 48.5.6

package/lib/typescript/src/components/MediaPlayer/AudioPlayer/HeadlessAudioPlayer.js

@@ -1,93 +1,93 @@
-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
- */
-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) => {
-        const mappedStatus = mapToMediaPlayerStatus(status);
-        onPlaybackStatusUpdateProp === null || onPlaybackStatusUpdateProp === void 0 ? void 0 : onPlaybackStatusUpdateProp(mappedStatus);
-        if (status.isLoaded) {
-            if (status.didJustFinish) {
-                onPlaybackFinish === null || onPlaybackFinish === void 0 ? void 0 : 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 === 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);
-    };
-    useSourceDeepCompareEffect(() => {
-        loadAudio();
-        // Ignore dependency of loadAudio
-    }, [source]);
-    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
-// 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;
+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
+ */
+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) => {
+        const mappedStatus = mapToMediaPlayerStatus(status);
+        onPlaybackStatusUpdateProp === null || onPlaybackStatusUpdateProp === void 0 ? void 0 : onPlaybackStatusUpdateProp(mappedStatus);
+        if (status.isLoaded) {
+            if (status.didJustFinish) {
+                onPlaybackFinish === null || onPlaybackFinish === void 0 ? void 0 : 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 === 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);
+    };
+    useSourceDeepCompareEffect(() => {
+        loadAudio();
+        // Ignore dependency of loadAudio
+    }, [source]);
+    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
+// 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/lib/typescript/src/components/MediaPlayer/AudioPlayer/index.d.ts

@@ -1,11 +1,11 @@
-import * as React from "react";
-import { AudioPlayerInterfaceProps, HeadlessAudioPlayerProps } from "./AudioPlayerCommon";
-import { MediaPlayerRef } from "../MediaPlayerCommon";
-interface AudioPlayerProps {
-    mode?: "interface" | "headless";
-}
-declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<AudioPlayerProps & AudioPlayerInterfaceProps & HeadlessAudioPlayerProps & React.RefAttributes<MediaPlayerRef>, "theme"> & {
-    theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
-}> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<AudioPlayerProps & AudioPlayerInterfaceProps & HeadlessAudioPlayerProps & React.RefAttributes<MediaPlayerRef>> & React.ForwardRefExoticComponent<AudioPlayerProps & AudioPlayerInterfaceProps & HeadlessAudioPlayerProps & React.RefAttributes<MediaPlayerRef>>, {}>;
-export default _default;
-export { MediaPlayerRef as AudioPlayerRef } from "../MediaPlayerCommon";
+import * as React from "react";
+import { AudioPlayerInterfaceProps, HeadlessAudioPlayerProps } from "./AudioPlayerCommon";
+import { MediaPlayerRef } from "../MediaPlayerCommon";
+interface AudioPlayerProps {
+    mode?: "interface" | "headless";
+}
+declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<AudioPlayerProps & AudioPlayerInterfaceProps & HeadlessAudioPlayerProps & React.RefAttributes<MediaPlayerRef>, "theme"> & {
+    theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
+}> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<AudioPlayerProps & AudioPlayerInterfaceProps & HeadlessAudioPlayerProps & React.RefAttributes<MediaPlayerRef>> & React.ForwardRefExoticComponent<AudioPlayerProps & AudioPlayerInterfaceProps & HeadlessAudioPlayerProps & React.RefAttributes<MediaPlayerRef>>, {}>;
+export default _default;
+export { MediaPlayerRef as AudioPlayerRef } from "../MediaPlayerCommon";

package/lib/typescript/src/components/MediaPlayer/AudioPlayer/index.js

@@ -1,15 +1,15 @@
-import * as React from "react";
-import { withTheme } from "../../../theming";
-import HeadlessAudioPlayer from "./HeadlessAudioPlayer";
-import AudioPlayerWithInterface from "./AudioPlayerWithInterface";
-const AudioPlayer = React.forwardRef(({ mode = "interface", ...rest }, ref) => {
-    switch (mode) {
-        case "headless":
-            return React.createElement(HeadlessAudioPlayer, { ref: ref, ...rest });
-        case "interface":
-            //@ts-ignore Typescript unable to handle nested passing of theme
-            return React.createElement(AudioPlayerWithInterface, { ref: ref, ...rest });
-    }
-});
-export default withTheme(AudioPlayer);
+import * as React from "react";
+import { withTheme } from "../../../theming";
+import HeadlessAudioPlayer from "./HeadlessAudioPlayer";
+import AudioPlayerWithInterface from "./AudioPlayerWithInterface";
+const AudioPlayer = React.forwardRef(({ mode = "interface", ...rest }, ref) => {
+    switch (mode) {
+        case "headless":
+            return React.createElement(HeadlessAudioPlayer, { ref: ref, ...rest });
+        case "interface":
+            //@ts-ignore Typescript unable to handle nested passing of theme
+            return React.createElement(AudioPlayerWithInterface, { ref: ref, ...rest });
+    }
+});
+export default withTheme(AudioPlayer);
 //# sourceMappingURL=index.js.map

package/lib/typescript/src/components/MediaPlayer/MediaPlaybackWrapper.d.ts

@@ -1,15 +1,15 @@
-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
- */
-declare const MediaPlaybackWrapper: React.ForwardRefExoticComponent<MediaPlaybackWrapperProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<MediaPlayerRef>>;
-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
+ */
+declare const MediaPlaybackWrapper: React.ForwardRefExoticComponent<MediaPlaybackWrapperProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<MediaPlayerRef>>;
+export default MediaPlaybackWrapper;

package/lib/typescript/src/components/MediaPlayer/MediaPlaybackWrapper.js

@@ -1,42 +1,42 @@
-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 pause = React.useCallback(async () => {
-        onTogglePlayback === null || onTogglePlayback === void 0 ? void 0 : onTogglePlayback();
-        await (media === null || media === void 0 ? void 0 : media.pauseAsync());
-    }, [media, onTogglePlayback]);
-    const play = React.useCallback(async () => {
-        onTogglePlayback === null || onTogglePlayback === void 0 ? void 0 : onTogglePlayback();
-        await (media === null || media === void 0 ? void 0 : media.playAsync());
-    }, [media, 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,
-        pause,
-        play,
-    }), [seekToPosition, togglePlayback, pause, play]);
-    return React.createElement(React.Fragment, null, children);
-});
-export default MediaPlaybackWrapper;
+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 pause = React.useCallback(async () => {
+        onTogglePlayback === null || onTogglePlayback === void 0 ? void 0 : onTogglePlayback();
+        await (media === null || media === void 0 ? void 0 : media.pauseAsync());
+    }, [media, onTogglePlayback]);
+    const play = React.useCallback(async () => {
+        onTogglePlayback === null || onTogglePlayback === void 0 ? void 0 : onTogglePlayback();
+        await (media === null || media === void 0 ? void 0 : media.playAsync());
+    }, [media, 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,
+        pause,
+        play,
+    }), [seekToPosition, togglePlayback, pause, play]);
+    return React.createElement(React.Fragment, null, children);
+});
+export default MediaPlaybackWrapper;
 //# sourceMappingURL=MediaPlaybackWrapper.js.map

package/lib/typescript/src/components/MediaPlayer/MediaPlayerCommon.d.ts

@@ -1,23 +1,23 @@
-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 declare function mapToMediaPlayerStatus(status: AVPlaybackStatus): MediaPlayerStatus;
+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 declare function mapToMediaPlayerStatus(status: AVPlaybackStatus): MediaPlayerStatus;

package/lib/typescript/src/components/MediaPlayer/MediaPlayerCommon.js

@@ -1,24 +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,
-    };
-}
+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/lib/typescript/src/components/MediaPlayer/VideoPlayer/VideoPlayer.d.ts

@@ -1,15 +1,15 @@
-import React from "react";
-import { ImageResizeMode } from "react-native";
-import { VideoProps as ExpoVideoProps } from "expo-av";
-import { MediaPlayerProps, MediaPlayerRef } from "../MediaPlayerCommon";
-declare type ResizeMode = "contain" | "cover" | "stretch";
-declare type ExpoVideoPropsOmitted = Omit<ExpoVideoProps, "videoStyle" | "resizeMode" | "onPlaybackStatusUpdate" | "source">;
-interface VideoPlayerProps extends ExpoVideoPropsOmitted, MediaPlayerProps {
-    resizeMode?: ResizeMode;
-    posterResizeMode?: ImageResizeMode;
-}
-export interface VideoPlayerRef extends MediaPlayerRef {
-    toggleFullscreen: () => void;
-}
-declare const VideoPlayer: React.ForwardRefExoticComponent<VideoPlayerProps & React.RefAttributes<VideoPlayerRef>>;
-export default VideoPlayer;
+import React from "react";
+import { ImageResizeMode } from "react-native";
+import { VideoProps as ExpoVideoProps } from "expo-av";
+import { MediaPlayerProps, MediaPlayerRef } from "../MediaPlayerCommon";
+declare type ResizeMode = "contain" | "cover" | "stretch";
+declare type ExpoVideoPropsOmitted = Omit<ExpoVideoProps, "videoStyle" | "resizeMode" | "onPlaybackStatusUpdate" | "source">;
+interface VideoPlayerProps extends ExpoVideoPropsOmitted, MediaPlayerProps {
+    resizeMode?: ResizeMode;
+    posterResizeMode?: ImageResizeMode;
+}
+export interface VideoPlayerRef extends MediaPlayerRef {
+    toggleFullscreen: () => void;
+}
+declare const VideoPlayer: React.ForwardRefExoticComponent<VideoPlayerProps & React.RefAttributes<VideoPlayerRef>>;
+export default VideoPlayer;

package/lib/typescript/src/components/MediaPlayer/VideoPlayer/VideoPlayer.js

@@ -1,75 +1,75 @@
-import React from "react";
-import { Video as VideoPlayerComponent, ResizeMode as ExpoResizeMode, VideoFullscreenUpdate, } from "expo-av";
-import { extractSizeStyles } from "../../../utilities";
-import MediaPlaybackWrapper from "../MediaPlaybackWrapper";
-import { mapToMediaPlayerStatus, } from "../MediaPlayerCommon";
-const VideoPlayer = React.forwardRef(({ style, resizeMode = "contain", posterResizeMode = "cover", onPlaybackStatusUpdate: onPlaybackStatusUpdateProp, onPlaybackFinish, ...rest }, ref) => {
-    const [videoMediaObject, setVideoMediaObject] = React.useState();
-    const [isPlaying, setIsPlaying] = React.useState(false);
-    const [isFullscreen, setIsFullscreen] = React.useState(false);
-    const mediaPlaybackWrapperRef = React.useRef(null);
-    const sizeStyles = extractSizeStyles(style);
-    let mappedResizeMode;
-    switch (resizeMode) {
-        case "contain":
-            mappedResizeMode = ExpoResizeMode.CONTAIN;
-            break;
-        case "cover":
-            mappedResizeMode = ExpoResizeMode.COVER;
-            break;
-        case "stretch":
-            mappedResizeMode = ExpoResizeMode.STRETCH;
-            break;
-    }
-    const onPlaybackStatusUpdate = (status) => {
-        const mappedStatus = mapToMediaPlayerStatus(status);
-        onPlaybackStatusUpdateProp === null || onPlaybackStatusUpdateProp === void 0 ? void 0 : onPlaybackStatusUpdateProp(mappedStatus);
-        if (status.isLoaded) {
-            if (status.didJustFinish) {
-                onPlaybackFinish === null || onPlaybackFinish === void 0 ? void 0 : onPlaybackFinish();
-            }
-            setIsPlaying(status.isPlaying);
-        }
-    };
-    const onFullscreenUpdate = (fullscreenUpdate) => {
-        switch (fullscreenUpdate) {
-            case VideoFullscreenUpdate.PLAYER_DID_PRESENT:
-            case VideoFullscreenUpdate.PLAYER_WILL_PRESENT:
-                setIsFullscreen(true);
-                break;
-            case VideoFullscreenUpdate.PLAYER_DID_DISMISS:
-            case VideoFullscreenUpdate.PLAYER_WILL_DISMISS:
-                setIsFullscreen(false);
-                break;
-        }
-    };
-    const toggleFullscreen = React.useCallback(async () => {
-        if (isFullscreen) {
-            await (videoMediaObject === null || videoMediaObject === void 0 ? void 0 : videoMediaObject.dismissFullscreenPlayer());
-        }
-        else {
-            await (videoMediaObject === null || videoMediaObject === void 0 ? void 0 : videoMediaObject.presentFullscreenPlayer());
-        }
-    }, [isFullscreen, videoMediaObject]);
-    React.useImperativeHandle(ref, () => {
-        var _a, _b, _c, _d;
-        return ({
-            toggleFullscreen,
-            seekToPosition: ((_a = mediaPlaybackWrapperRef.current) === null || _a === void 0 ? void 0 : _a.seekToPosition) || (() => { }),
-            togglePlayback: ((_b = mediaPlaybackWrapperRef.current) === null || _b === void 0 ? void 0 : _b.togglePlayback) || (() => { }),
-            pause: ((_c = mediaPlaybackWrapperRef.current) === null || _c === void 0 ? void 0 : _c.pause) || (() => { }),
-            play: ((_d = mediaPlaybackWrapperRef.current) === null || _d === void 0 ? void 0 : _d.play) || (() => { }),
-        });
-    }, 
-    // Include 'isPlaying' as dependency because 'togglePlayback' changes when it changes
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [toggleFullscreen, isPlaying]);
-    return (React.createElement(MediaPlaybackWrapper, { media: videoMediaObject, isPlaying: isPlaying, ref: mediaPlaybackWrapperRef },
-        React.createElement(VideoPlayerComponent
-        // https://docs.expo.dev/versions/latest/sdk/av/#example-video to see why ref is handled this way
-        , { 
-            // https://docs.expo.dev/versions/latest/sdk/av/#example-video to see why ref is handled this way
-            ref: (component) => setVideoMediaObject(component), style: style, videoStyle: sizeStyles, resizeMode: mappedResizeMode, posterStyle: [sizeStyles, { resizeMode: posterResizeMode }], onPlaybackStatusUpdate: onPlaybackStatusUpdate, onFullscreenUpdate: (e) => onFullscreenUpdate(e.fullscreenUpdate), ...rest })));
-});
-export default VideoPlayer;
+import React from "react";
+import { Video as VideoPlayerComponent, ResizeMode as ExpoResizeMode, VideoFullscreenUpdate, } from "expo-av";
+import { extractSizeStyles } from "../../../utilities";
+import MediaPlaybackWrapper from "../MediaPlaybackWrapper";
+import { mapToMediaPlayerStatus, } from "../MediaPlayerCommon";
+const VideoPlayer = React.forwardRef(({ style, resizeMode = "contain", posterResizeMode = "cover", onPlaybackStatusUpdate: onPlaybackStatusUpdateProp, onPlaybackFinish, ...rest }, ref) => {
+    const [videoMediaObject, setVideoMediaObject] = React.useState();
+    const [isPlaying, setIsPlaying] = React.useState(false);
+    const [isFullscreen, setIsFullscreen] = React.useState(false);
+    const mediaPlaybackWrapperRef = React.useRef(null);
+    const sizeStyles = extractSizeStyles(style);
+    let mappedResizeMode;
+    switch (resizeMode) {
+        case "contain":
+            mappedResizeMode = ExpoResizeMode.CONTAIN;
+            break;
+        case "cover":
+            mappedResizeMode = ExpoResizeMode.COVER;
+            break;
+        case "stretch":
+            mappedResizeMode = ExpoResizeMode.STRETCH;
+            break;
+    }
+    const onPlaybackStatusUpdate = (status) => {
+        const mappedStatus = mapToMediaPlayerStatus(status);
+        onPlaybackStatusUpdateProp === null || onPlaybackStatusUpdateProp === void 0 ? void 0 : onPlaybackStatusUpdateProp(mappedStatus);
+        if (status.isLoaded) {
+            if (status.didJustFinish) {
+                onPlaybackFinish === null || onPlaybackFinish === void 0 ? void 0 : onPlaybackFinish();
+            }
+            setIsPlaying(status.isPlaying);
+        }
+    };
+    const onFullscreenUpdate = (fullscreenUpdate) => {
+        switch (fullscreenUpdate) {
+            case VideoFullscreenUpdate.PLAYER_DID_PRESENT:
+            case VideoFullscreenUpdate.PLAYER_WILL_PRESENT:
+                setIsFullscreen(true);
+                break;
+            case VideoFullscreenUpdate.PLAYER_DID_DISMISS:
+            case VideoFullscreenUpdate.PLAYER_WILL_DISMISS:
+                setIsFullscreen(false);
+                break;
+        }
+    };
+    const toggleFullscreen = React.useCallback(async () => {
+        if (isFullscreen) {
+            await (videoMediaObject === null || videoMediaObject === void 0 ? void 0 : videoMediaObject.dismissFullscreenPlayer());
+        }
+        else {
+            await (videoMediaObject === null || videoMediaObject === void 0 ? void 0 : videoMediaObject.presentFullscreenPlayer());
+        }
+    }, [isFullscreen, videoMediaObject]);
+    React.useImperativeHandle(ref, () => {
+        var _a, _b, _c, _d;
+        return ({
+            toggleFullscreen,
+            seekToPosition: ((_a = mediaPlaybackWrapperRef.current) === null || _a === void 0 ? void 0 : _a.seekToPosition) || (() => { }),
+            togglePlayback: ((_b = mediaPlaybackWrapperRef.current) === null || _b === void 0 ? void 0 : _b.togglePlayback) || (() => { }),
+            pause: ((_c = mediaPlaybackWrapperRef.current) === null || _c === void 0 ? void 0 : _c.pause) || (() => { }),
+            play: ((_d = mediaPlaybackWrapperRef.current) === null || _d === void 0 ? void 0 : _d.play) || (() => { }),
+        });
+    }, 
+    // Include 'isPlaying' as dependency because 'togglePlayback' changes when it changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [toggleFullscreen, isPlaying]);
+    return (React.createElement(MediaPlaybackWrapper, { media: videoMediaObject, isPlaying: isPlaying, ref: mediaPlaybackWrapperRef },
+        React.createElement(VideoPlayerComponent
+        // https://docs.expo.dev/versions/latest/sdk/av/#example-video to see why ref is handled this way
+        , { 
+            // https://docs.expo.dev/versions/latest/sdk/av/#example-video to see why ref is handled this way
+            ref: (component) => setVideoMediaObject(component), style: style, videoStyle: sizeStyles, resizeMode: mappedResizeMode, posterStyle: [sizeStyles, { resizeMode: posterResizeMode }], onPlaybackStatusUpdate: onPlaybackStatusUpdate, onFullscreenUpdate: (e) => onFullscreenUpdate(e.fullscreenUpdate), ...rest })));
+});
+export default VideoPlayer;
 //# sourceMappingURL=VideoPlayer.js.map

package/lib/typescript/src/components/MediaPlayer/VideoPlayer/index.d.ts

@@ -1,2 +1,2 @@
-export { default as default } from "./VideoPlayer";
-export { VideoPlayerRef } from "./VideoPlayer";
+export { default as default } from "./VideoPlayer";
+export { VideoPlayerRef } from "./VideoPlayer";