From 5a282c7cd26829439546690a3262274544904e04 Mon Sep 17 00:00:00 2001 From: Yiannis Christodoulou Date: Thu, 16 Oct 2025 16:12:35 +0300 Subject: [PATCH] Improve Safari audio/video initialization and fallbacks Adds Safari-specific detection and initialization logic to better support audio and video playback, especially for cases where metadata is not loaded as expected. Implements fallback event listeners, user interaction triggers, and exposes an initialization helper to ensure the editor works reliably on Safari and iOS devices. --- .../chapters-editor/client/src/App.tsx | 13 +- .../client/src/components/IOSPlayPrompt.tsx | 20 +- .../client/src/components/VideoPlayer.tsx | 19 +- .../client/src/hooks/useVideoChapters.tsx | 175 ++++++++++++++++++ 4 files changed, 205 insertions(+), 22 deletions(-) diff --git a/frontend-tools/chapters-editor/client/src/App.tsx b/frontend-tools/chapters-editor/client/src/App.tsx index b1dd8985..1fefad96 100644 --- a/frontend-tools/chapters-editor/client/src/App.tsx +++ b/frontend-tools/chapters-editor/client/src/App.tsx @@ -40,9 +40,10 @@ const App = () => { isMobile, videoInitialized, setVideoInitialized, + initializeSafariIfNeeded, } = useVideoChapters(); - const handlePlay = () => { + const handlePlay = async () => { if (!videoRef.current) return; const video = videoRef.current; @@ -55,6 +56,16 @@ const App = () => { return; } + // Safari: Try to initialize if needed before playing + if (duration === 0) { + const initialized = await initializeSafariIfNeeded(); + if (initialized) { + // Wait a moment for initialization to complete + setTimeout(() => handlePlay(), 200); + return; + } + } + // Start playing - no boundary checking, play through entire timeline video .play() diff --git a/frontend-tools/chapters-editor/client/src/components/IOSPlayPrompt.tsx b/frontend-tools/chapters-editor/client/src/components/IOSPlayPrompt.tsx index 33ea80d7..48dc6ac9 100644 --- a/frontend-tools/chapters-editor/client/src/components/IOSPlayPrompt.tsx +++ b/frontend-tools/chapters-editor/client/src/components/IOSPlayPrompt.tsx @@ -9,7 +9,7 @@ interface MobilePlayPromptProps { const MobilePlayPrompt: React.FC = ({ videoRef, onPlay }) => { const [isVisible, setIsVisible] = useState(false); - // Check if the device is mobile + // Check if the device is mobile or Safari browser useEffect(() => { const checkIsMobile = () => { // More comprehensive check for mobile/tablet devices @@ -18,7 +18,7 @@ const MobilePlayPrompt: React.FC = ({ videoRef, onPlay }) ); }; - // Always show for mobile devices on each visit + // Only show for mobile devices const isMobile = checkIsMobile(); setIsVisible(isMobile); }, []); @@ -49,22 +49,6 @@ const MobilePlayPrompt: React.FC = ({ videoRef, onPlay }) return (
- {/*

Mobile Device Notice

- -

- For the best video editing experience on mobile devices, you need to play the video first before - using the timeline controls. -

- -
-

Please follow these steps:

-
    -
  1. Tap the button below to start the video
    2. -
  2. After the video starts, you can pause it
    3. -
  3. Then you'll be able to use all timeline controls
    4. -
-
*/} - diff --git a/frontend-tools/chapters-editor/client/src/components/VideoPlayer.tsx b/frontend-tools/chapters-editor/client/src/components/VideoPlayer.tsx index fbe2bd00..c04d5216 100644 --- a/frontend-tools/chapters-editor/client/src/components/VideoPlayer.tsx +++ b/frontend-tools/chapters-editor/client/src/components/VideoPlayer.tsx @@ -38,14 +38,24 @@ const VideoPlayer: React.FC = ({ const sampleVideoUrl = (typeof window !== 'undefined' && (window as any).MEDIA_DATA?.videoUrl) || '/videos/sample-video.mp4'; - // Detect iOS device + // Detect iOS device and Safari browser useEffect(() => { const checkIOS = () => { const userAgent = navigator.userAgent || navigator.vendor || (window as any).opera; return /iPad|iPhone|iPod/.test(userAgent) && !(window as any).MSStream; }; + const checkSafari = () => { + const userAgent = navigator.userAgent || navigator.vendor || (window as any).opera; + return /Safari/.test(userAgent) && !/Chrome/.test(userAgent) && !/Chromium/.test(userAgent); + }; + setIsIOS(checkIOS()); + + // Store Safari detection globally for other components + if (typeof window !== 'undefined') { + (window as any).isSafari = checkSafari(); + } // Check if video was previously initialized if (typeof window !== 'undefined') { @@ -336,7 +346,7 @@ const VideoPlayer: React.FC = ({
{/* iOS First-play indicator - only shown on first visit for iOS devices when not initialized */} diff --git a/frontend-tools/chapters-editor/client/src/hooks/useVideoChapters.tsx b/frontend-tools/chapters-editor/client/src/hooks/useVideoChapters.tsx index 0b3d706f..a257e03b 100644 --- a/frontend-tools/chapters-editor/client/src/hooks/useVideoChapters.tsx +++ b/frontend-tools/chapters-editor/client/src/hooks/useVideoChapters.tsx @@ -87,12 +87,23 @@ const useVideoChapters = () => { } }, [history, historyPosition]); + // Detect Safari browser + const isSafari = () => { + const userAgent = navigator.userAgent || navigator.vendor || (window as any).opera; + const isSafariBrowser = /Safari/.test(userAgent) && !/Chrome/.test(userAgent) && !/Chromium/.test(userAgent); + if (isSafariBrowser) { + logger.debug('Safari browser detected, enabling audio support fallbacks'); + } + return isSafariBrowser; + }; + // Initialize video event listeners useEffect(() => { const video = videoRef.current; if (!video) return; const handleLoadedMetadata = () => { + logger.debug('Video loadedmetadata event fired, duration:', video.duration); setDuration(video.duration); setTrimEnd(video.duration); @@ -146,11 +157,32 @@ const useVideoChapters = () => { setHistory([initialState]); setHistoryPosition(0); setClipSegments(initialSegments); + logger.debug('Editor initialized with segments:', initialSegments.length); }; initializeEditor(); }; + // Safari-specific fallback for audio files + const handleCanPlay = () => { + logger.debug('Video canplay event fired'); + // If loadedmetadata hasn't fired yet but we have duration, trigger initialization + if (video.duration && duration === 0) { + logger.debug('Safari fallback: Using canplay event to initialize'); + handleLoadedMetadata(); + } + }; + + // Additional Safari fallback for audio files + const handleLoadedData = () => { + logger.debug('Video loadeddata event fired'); + // If we still don't have duration, try again + if (video.duration && duration === 0) { + logger.debug('Safari fallback: Using loadeddata event to initialize'); + handleLoadedMetadata(); + } + }; + const handleTimeUpdate = () => { setCurrentTime(video.currentTime); }; @@ -176,6 +208,33 @@ const useVideoChapters = () => { video.addEventListener('pause', handlePause); video.addEventListener('ended', handleEnded); + // Safari-specific fallback event listeners for audio files + if (isSafari()) { + logger.debug('Adding Safari-specific event listeners for audio support'); + video.addEventListener('canplay', handleCanPlay); + video.addEventListener('loadeddata', handleLoadedData); + + // Additional timeout fallback for Safari audio files + const safariTimeout = setTimeout(() => { + if (video.duration && duration === 0) { + logger.debug('Safari timeout fallback: Force initializing editor'); + handleLoadedMetadata(); + } + }, 1000); + + return () => { + // Remove event listeners + video.removeEventListener('loadedmetadata', handleLoadedMetadata); + video.removeEventListener('timeupdate', handleTimeUpdate); + video.removeEventListener('play', handlePlay); + video.removeEventListener('pause', handlePause); + video.removeEventListener('ended', handleEnded); + video.removeEventListener('canplay', handleCanPlay); + video.removeEventListener('loadeddata', handleLoadedData); + clearTimeout(safariTimeout); + }; + } + return () => { // Remove event listeners video.removeEventListener('loadedmetadata', handleLoadedMetadata); @@ -186,6 +245,92 @@ const useVideoChapters = () => { }; }, []); + // Safari auto-initialization on user interaction + useEffect(() => { + if (isSafari() && videoRef.current) { + const video = videoRef.current; + + const initializeSafariOnInteraction = () => { + // Try to load video metadata by attempting to play and immediately pause + const attemptInitialization = async () => { + try { + logger.debug('Safari: Attempting auto-initialization on user interaction'); + + // Briefly play to trigger metadata loading, then pause + await video.play(); + video.pause(); + + // Check if we now have duration and initialize if needed + if (video.duration > 0 && clipSegments.length === 0) { + logger.debug('Safari: Successfully initialized metadata, creating default segment'); + + const defaultSegment: Segment = { + id: 1, + chapterTitle: '', + startTime: 0, + endTime: video.duration, + }; + + setDuration(video.duration); + setTrimEnd(video.duration); + setClipSegments([defaultSegment]); + + const initialState: EditorState = { + trimStart: 0, + trimEnd: video.duration, + splitPoints: [], + clipSegments: [defaultSegment], + }; + + setHistory([initialState]); + setHistoryPosition(0); + } + } catch (error) { + logger.debug('Safari: Auto-initialization failed, will retry on next interaction:', error); + } + }; + + attemptInitialization(); + }; + + // Listen for any user interaction with video controls + const handleUserInteraction = () => { + if (clipSegments.length === 0 && video.duration === 0) { + initializeSafariOnInteraction(); + } + }; + + // Add listeners for various user interactions + document.addEventListener('click', handleUserInteraction); + document.addEventListener('keydown', handleUserInteraction); + + return () => { + document.removeEventListener('click', handleUserInteraction); + document.removeEventListener('keydown', handleUserInteraction); + }; + } + }, [clipSegments.length]); + + // Safari initialization helper + const initializeSafariIfNeeded = async () => { + if (isSafari() && videoRef.current && duration === 0) { + const video = videoRef.current; + try { + logger.debug('Safari: Initializing on user interaction'); + // This play/pause will trigger metadata loading in Safari + await video.play(); + video.pause(); + + // The metadata events should fire now and initialize segments + return true; + } catch (error) { + logger.debug('Safari: Initialization attempt failed:', error); + return false; + } + } + return false; + }; + // Play/pause video const playPauseVideo = () => { const video = videoRef.current; @@ -194,6 +339,21 @@ const useVideoChapters = () => { if (isPlaying) { video.pause(); } else { + // Safari: Try to initialize if needed before playing + if (isSafari() && duration === 0) { + initializeSafariIfNeeded().then(() => { + // After initialization, try to play again + setTimeout(() => { + if (video && !isPlaying) { + video.play().catch((err) => { + console.error('Error playing after Safari initialization:', err); + }); + } + }, 100); + }); + return; + } + // iOS Safari fix: Use the last seeked position if available if (!isPlaying && typeof window !== 'undefined' && window.lastSeekedPosition > 0) { // Only apply this if the video is not at the same position already @@ -228,6 +388,20 @@ const useVideoChapters = () => { const video = videoRef.current; if (!video) return; + // Safari: Try to initialize if needed before seeking + if (isSafari() && duration === 0) { + initializeSafariIfNeeded().then(() => { + // After initialization, try to seek again + setTimeout(() => { + if (video) { + video.currentTime = time; + setCurrentTime(time); + } + }, 100); + }); + return; + } + // Track if the video was playing before seeking const wasPlaying = !video.paused; @@ -946,6 +1120,7 @@ const useVideoChapters = () => { isMobile, videoInitialized, setVideoInitialized, + initializeSafariIfNeeded, // Expose Safari initialization helper }; };