@draftbit/core 55.0.1 → 55.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "55.0.1",
+  "version": "55.0.3",
   "description": "Core (non-native) Components",
   "main": "./src/index.tsx",
   "react-native": "./src/index.tsx",
@@ -42,7 +42,7 @@
   "homepage": "https://github.com/draftbit/react-native-jigsaw#readme",
   "dependencies": {
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/theme": "55.0.1",
+    "@draftbit/theme": "55.0.3",
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
     "@expo/vector-icons": "^15.0.3",
@@ -123,5 +123,5 @@
     ],
     "testEnvironment": "node"
   },
-  "gitHead": "f30a27c1411df6202dae750f7273d72c24efee47"
+  "gitHead": "21ab4a3b9536ef056dc753f93c27e76c7c334090"
 }

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

@@ -4,7 +4,6 @@ import { HeadlessAudioPlayerProps } from "./AudioPlayerCommon";
 import {
   normalizeBase64Source,
   useSourceDeepCompareMemoize,
-  useSourceDeepCompareEffect,
 } from "../MediaPlayerCommon";
 import type { MediaPlayerRef, MediaPlayerStatus } from "../MediaPlayerCommon";
 import MediaPlaybackWrapper from "../MediaPlaybackWrapper";
@@ -60,6 +59,10 @@ const HeadlessAudioPlayer = React.forwardRef<
     }, []);
 
     React.useEffect(() => {
+      // 'useAudioPlayer' builds a new player whenever the source changes, so the
+      // mirrored playing state has to be resynced
+      setIsPlaying(player.playing);
+
       const subscription = player.addListener(
         "playbackStatusUpdate",
         (status) => {
@@ -75,17 +78,7 @@ const HeadlessAudioPlayer = React.forwardRef<
         }
       );
       return () => subscription.remove();
-    }, []);
-
-    // Replace source when it changes (deep comparison on URI to avoid unnecessary reloads)
-    const isFirstSourceRender = React.useRef(true);
-    useSourceDeepCompareEffect(() => {
-      if (isFirstSourceRender.current) {
-        isFirstSourceRender.current = false;
-        return;
-      }
-      player.replace(normalizeBase64Source(source, "audio") as any);
-    }, [source]);
+    }, [player]);
 
     const updateAudioMode = React.useCallback(async () => {
       try {

package/src/components/MediaPlayer/MediaPlaybackWrapper.tsx

@@ -25,7 +25,7 @@ const MediaPlaybackWrapper = React.forwardRef<
     } else {
       player?.play();
     }
-  }, [isPlaying, onTogglePlayback]);
+  }, [isPlaying, onTogglePlayback, player]);
 
   const pause = React.useCallback(() => {
     onTogglePlayback?.();

package/src/components/MediaPlayer/VideoPlayer/VideoPlayer.tsx

@@ -13,14 +13,12 @@ import {
   useVideoPlayer,
   TimeUpdateEventPayload,
   VideoPlayer as VideoPlayerType,
-  VideoSource,
 } from "expo-video";
 import { setAudioModeAsync } from "expo-audio";
 import { extractSizeStyles } from "../../../utilities";
 import MediaPlaybackWrapper from "../MediaPlaybackWrapper";
 import {
   normalizeBase64Source,
-  useSourceDeepCompareEffect,
   useSourceDeepCompareMemoize,
 } from "../MediaPlayerCommon";
 import type {
@@ -88,6 +86,7 @@ const VideoPlayer = React.forwardRef<VideoPlayerRef, VideoPlayerProps>(
       p.muted = isMuted;
       p.volume = volume;
       p.playbackRate = rate;
+      p.timeUpdateEventInterval = 0.5;
     });
 
     const videoPlayerRef = React.useRef<VideoPlayerComponent>(null);
@@ -126,6 +125,11 @@ const VideoPlayer = React.forwardRef<VideoPlayerRef, VideoPlayerProps>(
     const hasAppliedInitialState = React.useRef(false);
 
     React.useEffect(() => {
+      // 'useVideoPlayer' builds a new player whenever the source changes, so the
+      // initial state has to be applied again
+      hasAppliedInitialState.current = false;
+      setIsPlaying(player.playing);
+
       const timeUpdateSub = player.addListener("timeUpdate", (status) => {
         onPlaybackStatusUpdateProp?.(mapToMediaPlayerStatus(status, player));
       });
@@ -172,18 +176,7 @@ const VideoPlayer = React.forwardRef<VideoPlayerRef, VideoPlayerProps>(
         playToEndSub.remove();
         statusChangeSub.remove();
       };
-    }, []);
-
-    // Replace video source when it changes (deep comparison on URI to avoid unnecessary reloads)
-    const isFirstSourceRender = React.useRef(true);
-    useSourceDeepCompareEffect(() => {
-      if (isFirstSourceRender.current) {
-        isFirstSourceRender.current = false;
-        return;
-      }
-      hasAppliedInitialState.current = false;
-      player.replace(normalizeBase64Source(source, "video") as VideoSource);
-    }, [source]);
+    }, [player]);
 
     let mappedVideoContentFit: VideoContentFit;
     switch (resizeMode) {
@@ -233,16 +226,13 @@ const VideoPlayer = React.forwardRef<VideoPlayerRef, VideoPlayerProps>(
       ref,
       () => ({
         toggleFullscreen,
-        seekToPosition:
-          mediaPlaybackWrapperRef.current?.seekToPosition || (() => {}),
-        togglePlayback:
-          mediaPlaybackWrapperRef.current?.togglePlayback || (() => {}),
-        pause: mediaPlaybackWrapperRef.current?.pause || (() => {}),
-        play: mediaPlaybackWrapperRef.current?.play || (() => {}),
+        seekToPosition: (positionMillis: number) =>
+          mediaPlaybackWrapperRef.current?.seekToPosition(positionMillis),
+        togglePlayback: () => mediaPlaybackWrapperRef.current?.togglePlayback(),
+        pause: () => mediaPlaybackWrapperRef.current?.pause(),
+        play: () => mediaPlaybackWrapperRef.current?.play(),
       }),
-      // Include 'isPlaying' as dependency because 'togglePlayback' changes when it changes
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [toggleFullscreen, isPlaying]
+      [toggleFullscreen]
     );
 
     return (