Merge pull request remotion-dev#2766 from remotion-dev/fix-ios-seeking

UmungoBungo · Aug 21, 2023 · e1e4a47 · e1e4a47 · vercel · Aug 22, 2023
2 parents c1ac9c5 + d448833
commit e1e4a47
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 3 deletions.
diff --git a/packages/core/src/use-media-playback.ts b/packages/core/src/use-media-playback.ts
@@ -10,10 +10,28 @@ import {
 import {useCurrentFrame} from './use-current-frame.js';
 import {useVideoConfig} from './use-video-config.js';
 import {getMediaTime} from './video/get-current-time.js';
+import {isIosSafari} from './video/video-fragment.js';
 import {warnAboutNonSeekableMedia} from './warn-about-non-seekable-media.js';
 
 export const DEFAULT_ACCEPTABLE_TIMESHIFT = 0.45;
 
+const seek = (
+	mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement>,
+	time: number
+) => {
+	if (!mediaRef.current) {
+		return;
+	}
+
+	// iOS seeking does not support multiple decimals
+	if (isIosSafari()) {
+		mediaRef.current.currentTime = Number(time.toFixed(1));
+		return;
+	}
+
+	mediaRef.current.currentTime = time;
+};
+
 export const useMediaPlayback = ({
 	mediaRef,
 	src,
@@ -82,7 +100,7 @@ export const useMediaPlayback = ({
 			// If scrubbing around, adjust timing
 			// or if time shift is bigger than 0.45sec
 
-			mediaRef.current.currentTime = shouldBeTime;
+			seek(mediaRef, shouldBeTime);
 			if (!onlyWarnForMediaSeekingError) {
 				warnAboutNonSeekableMedia(
 					mediaRef.current,
@@ -103,13 +121,13 @@ export const useMediaPlayback = ({
 
 		if (!playing || absoluteFrame === 0) {
 			if (makesSenseToSeek) {
-				mediaRef.current.currentTime = shouldBeTime;
+				seek(mediaRef, shouldBeTime);
 			}
 		}
 
 		if (mediaRef.current.paused && !mediaRef.current.ended && playing) {
 			if (makesSenseToSeek) {
-				mediaRef.current.currentTime = shouldBeTime;
+				seek(mediaRef, shouldBeTime);
 			}
 
 			playAndHandleNotAllowedError(mediaRef, mediaType);

diff --git a/packages/core/src/video/video-fragment.ts b/packages/core/src/video/video-fragment.ts
@@ -47,6 +47,13 @@ export const useAppendVideoFragment = ({
 	return appended;
 };
 
+export const isIosSafari = () => {
+	return (
+		/iP(ad|od|hone)/i.test(window.navigator.userAgent) &&
+		Boolean(navigator.userAgent.match(/Version\/[\d.]+.*Safari/))
+	);
+};
+
 // https://github.com/remotion-dev/remotion/issues/1655
 const isIOSSafariCase = (actualSrc: string) => {
 	return typeof window === 'undefined'