build assets

fix: First chapter is not saved, if not given a name, although indicating it is saved (151)
build assets
2025-12-05 12:02:31 -05:00 · 2025-11-09 22:42:21 +02:00 · 2025-11-09 22:42:14 +02:00 · 2025-11-09 22:22:10 +02:00 · 2025-11-09 22:20:15 +02:00 · 2025-11-09 21:54:18 +02:00
50 changed files with 450 additions and 217 deletions
--- a/frontend-tools/chapters-editor/client/src/components/IOSVideoPlayer.tsx
+++ b/frontend-tools/chapters-editor/client/src/components/IOSVideoPlayer.tsx
@@ -13,6 +13,7 @@ const IOSVideoPlayer = ({ videoRef, currentTime, duration }: IOSVideoPlayerProps
    const [videoUrl, setVideoUrl] = useState<string>('');
    const [iosVideoRef, setIosVideoRef] = useState<HTMLVideoElement | null>(null);
    const [posterImage, setPosterImage] = useState<string | undefined>(undefined);
+    const [isAudioFile, setIsAudioFile] = useState(false);

    // Refs for hold-to-continue functionality
    const incrementIntervalRef = useRef<NodeJS.Timeout | null>(null);
@@ -41,12 +42,13 @@ const IOSVideoPlayer = ({ videoRef, currentTime, duration }: IOSVideoPlayerProps
        setVideoUrl(url);

        // Check if the media is an audio file and set poster image
-        const isAudioFile = url.match(/\.(mp3|wav|ogg|m4a|aac|flac)$/i) !== null;
+        const audioFile = url.match(/\.(mp3|wav|ogg|m4a|aac|flac)$/i) !== null;
+        setIsAudioFile(audioFile);
        
        // Get posterUrl from MEDIA_DATA, or use audio-poster.jpg as fallback for audio files when posterUrl is empty, null, or "None"
        const mediaPosterUrl = (typeof window !== 'undefined' && (window as any).MEDIA_DATA?.posterUrl) || '';
        const isValidPoster = mediaPosterUrl && mediaPosterUrl !== 'None' && mediaPosterUrl.trim() !== '';
-        setPosterImage(isValidPoster ? mediaPosterUrl : (isAudioFile ? AUDIO_POSTER_URL : undefined));
+        setPosterImage(isValidPoster ? mediaPosterUrl : (audioFile ? AUDIO_POSTER_URL : undefined));
    }, [videoRef]);

    // Function to jump 15 seconds backward
@@ -128,22 +130,34 @@ const IOSVideoPlayer = ({ videoRef, currentTime, duration }: IOSVideoPlayerProps
                </span>
            </div>

-            {/* iOS-optimized Video Element with Native Controls */}
-            <video
-                ref={(ref) => setIosVideoRef(ref)}
-                className="w-full rounded-md"
-                src={videoUrl}
-                controls
-                playsInline
-                webkit-playsinline="true"
-                x-webkit-airplay="allow"
-                preload="auto"
-                crossOrigin="anonymous"
-                poster={posterImage}
-            >
-                <source src={videoUrl} type="video/mp4" />
-                <p>Your browser doesn't support HTML5 video.</p>
-            </video>
+            {/* Video container with persistent background for audio files */}
+            <div className="ios-video-wrapper">
+                {/* Persistent background image for audio files (Safari fix) */}
+                {isAudioFile && posterImage && (
+                    <div 
+                        className="ios-audio-poster-background" 
+                        style={{ backgroundImage: `url(${posterImage})` }}
+                        aria-hidden="true"
+                    />
+                )}
+                
+                {/* iOS-optimized Video Element with Native Controls */}
+                <video
+                    ref={(ref) => setIosVideoRef(ref)}
+                    className={`w-full rounded-md ${isAudioFile && posterImage ? 'audio-with-poster' : ''}`}
+                    src={videoUrl}
+                    controls
+                    playsInline
+                    webkit-playsinline="true"
+                    x-webkit-airplay="allow"
+                    preload="auto"
+                    crossOrigin="anonymous"
+                    poster={posterImage}
+                >
+                    <source src={videoUrl} type="video/mp4" />
+                    <p>Your browser doesn't support HTML5 video.</p>
+                </video>
+            </div>

            {/* iOS Video Skip Controls */}
            <div className="ios-skip-controls mt-3 flex justify-center gap-4">
--- a/frontend-tools/chapters-editor/client/src/components/TimelineControls.tsx
+++ b/frontend-tools/chapters-editor/client/src/components/TimelineControls.tsx
@@ -26,6 +26,18 @@ const mediaPageLinkStyles = {
    },
 } as const;

+// Helper function to parse time string (HH:MM:SS.mmm) to seconds
+const parseTimeToSeconds = (timeString: string): number => {
+    const parts = timeString.split(':');
+    if (parts.length !== 3) return 0;
+
+    const hours = parseInt(parts[0], 10) || 0;
+    const minutes = parseInt(parts[1], 10) || 0;
+    const seconds = parseFloat(parts[2]) || 0;
+
+    return hours * 3600 + minutes * 60 + seconds;
+};
+
 interface TimelineControlsProps {
    currentTime: number;
    duration: number;
@@ -191,7 +203,17 @@ const TimelineControls = ({
            setIsAutoSaving(true);

            // Format segments data for API request - use ref to get latest segments and sort by start time
+            // ONLY save chapters that have custom titles - filter out chapters without titles or with default names
            const chapters = clipSegmentsRef.current
+                .filter((segment) => {
+                    // Filter out empty titles
+                    if (!segment.chapterTitle || !segment.chapterTitle.trim()) {
+                        return false;
+                    }
+                    // Filter out default chapter names like "Chapter 1", "Chapter 2", etc.
+                    const isDefaultName = /^Chapter \d+$/.test(segment.chapterTitle);
+                    return !isDefaultName;
+                })
                .sort((a, b) => a.startTime - b.startTime) // Sort by start time chronologically
                .map((chapter) => ({
                    startTime: formatDetailedTime(chapter.startTime),
@@ -199,7 +221,7 @@ const TimelineControls = ({
                    chapterTitle: chapter.chapterTitle,
                }));

-            logger.debug('chapters', chapters);
+            logger.debug('Filtered chapters (only custom titles):', chapters);

            const mediaId = (typeof window !== 'undefined' && (window as any).MEDIA_DATA?.mediaId) || null;
            // For testing, use '1234' if no mediaId is available
@@ -207,12 +229,13 @@ const TimelineControls = ({

            logger.debug('mediaId', finalMediaId);

-            if (!finalMediaId || chapters.length === 0) {
-                logger.debug('No mediaId or segments, skipping auto-save');
+            if (!finalMediaId) {
+                logger.debug('No mediaId, skipping auto-save');
                setIsAutoSaving(false);
                return;
            }

+            // Save chapters (empty array if no chapters have titles)
            logger.debug('Auto-saving segments:', { mediaId: finalMediaId, chapters });

            const response = await autoSaveVideo(finalMediaId, { chapters });
@@ -499,11 +522,20 @@ const TimelineControls = ({

        try {
            // Format chapters data for API request - sort by start time first
+            // ONLY save chapters that have custom titles - filter out chapters without titles or with default names
            const chapters = clipSegments
-                .filter((segment) => segment.chapterTitle && segment.chapterTitle.trim())
+                .filter((segment) => {
+                    // Filter out empty titles
+                    if (!segment.chapterTitle || !segment.chapterTitle.trim()) {
+                        return false;
+                    }
+                    // Filter out default chapter names like "Chapter 1", "Chapter 2", etc.
+                    const isDefaultName = /^Chapter \d+$/.test(segment.chapterTitle);
+                    return !isDefaultName;
+                })
                .sort((a, b) => a.startTime - b.startTime) // Sort by start time chronologically
                .map((segment) => ({
-                    chapterTitle: segment.chapterTitle || `Chapter ${segment.id}`,
+                    chapterTitle: segment.chapterTitle,
                    from: formatDetailedTime(segment.startTime),
                    to: formatDetailedTime(segment.endTime),
                }));
--- a/frontend-tools/chapters-editor/client/src/components/VideoPlayer.tsx
+++ b/frontend-tools/chapters-editor/client/src/components/VideoPlayer.tsx
@@ -353,8 +353,18 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({

    return (
        <div className="video-player-container">
+            {/* Persistent background image for audio files (Safari fix) */}
+            {isAudioFile && posterImage && (
+                <div 
+                    className="audio-poster-background" 
+                    style={{ backgroundImage: `url(${posterImage})` }}
+                    aria-hidden="true"
+                />
+            )}
+            
            <video
                ref={videoRef}
+                className={isAudioFile && posterImage ? 'audio-with-poster' : ''}
                preload="metadata"
                crossOrigin="anonymous"
                onClick={handleVideoClick}
--- a/frontend-tools/chapters-editor/client/src/styles/IOSVideoPlayer.css
+++ b/frontend-tools/chapters-editor/client/src/styles/IOSVideoPlayer.css
@@ -8,12 +8,40 @@
    overflow: hidden;
 }

+/* Video wrapper for positioning background */
+.ios-video-wrapper {
+    position: relative;
+    width: 100%;
+    background-color: black;
+    border-radius: 0.5rem;
+    overflow: hidden;
+}
+
+/* Persistent background poster for audio files (Safari fix) */
+.ios-audio-poster-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+    z-index: -1;
+    pointer-events: none;
+}
+
 .ios-video-player-container video {
+    position: relative;
    width: 100%;
    height: auto;
    max-height: 360px;
    aspect-ratio: 16/9;
-    background-color: black;
+}
+
+/* Make video transparent only for audio files with poster so background shows through */
+.ios-video-player-container video.audio-with-poster {
+    background-color: transparent;
 }

 .ios-time-display {
--- a/frontend-tools/chapters-editor/client/src/styles/VideoPlayer.css
+++ b/frontend-tools/chapters-editor/client/src/styles/VideoPlayer.css
@@ -76,10 +76,26 @@
        user-select: none;
    }

+    /* Persistent background poster for audio files (Safari fix) */
+    .audio-poster-background {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-size: contain;
+        background-position: center;
+        background-repeat: no-repeat;
+        z-index: 1;
+        pointer-events: none;
+    }
+
    .video-player-container video {
+        position: relative;
        width: 100%;
        height: 100%;
        cursor: pointer;
+        z-index: 2;
        /* Force hardware acceleration */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
@@ -88,6 +104,11 @@
        user-select: none;
    }

+    /* Make video transparent only for audio files with poster so background shows through */
+    .video-player-container video.audio-with-poster {
+        background: transparent;
+    }
+
    /* iOS-specific styles */
    @supports (-webkit-touch-callout: none) {
        .video-player-container video {
@@ -109,6 +130,7 @@
        opacity: 0;
        transition: opacity 0.3s;
        pointer-events: none;
+        z-index: 3;
    }

    .video-player-container:hover .play-pause-indicator {
@@ -187,6 +209,7 @@
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
        opacity: 0;
        transition: opacity 0.3s;
+        z-index: 3;
    }

    .video-player-container:hover .video-controls {
--- a/frontend-tools/video-editor/client/src/components/IOSVideoPlayer.tsx
+++ b/frontend-tools/video-editor/client/src/components/IOSVideoPlayer.tsx
@@ -13,6 +13,7 @@ const IOSVideoPlayer = ({ videoRef, currentTime, duration }: IOSVideoPlayerProps
    const [videoUrl, setVideoUrl] = useState<string>('');
    const [iosVideoRef, setIosVideoRef] = useState<HTMLVideoElement | null>(null);
    const [posterImage, setPosterImage] = useState<string | undefined>(undefined);
+    const [isAudioFile, setIsAudioFile] = useState(false);

    // Refs for hold-to-continue functionality
    const incrementIntervalRef = useRef<NodeJS.Timeout | null>(null);
@@ -41,12 +42,13 @@ const IOSVideoPlayer = ({ videoRef, currentTime, duration }: IOSVideoPlayerProps
        setVideoUrl(url);

        // Check if the media is an audio file and set poster image
-        const isAudioFile = url.match(/\.(mp3|wav|ogg|m4a|aac|flac)$/i) !== null;
+        const audioFile = url.match(/\.(mp3|wav|ogg|m4a|aac|flac)$/i) !== null;
+        setIsAudioFile(audioFile);
        
        // Get posterUrl from MEDIA_DATA, or use audio-poster.jpg as fallback for audio files when posterUrl is empty, null, or "None"
        const mediaPosterUrl = (typeof window !== 'undefined' && (window as any).MEDIA_DATA?.posterUrl) || '';
        const isValidPoster = mediaPosterUrl && mediaPosterUrl !== 'None' && mediaPosterUrl.trim() !== '';
-        setPosterImage(isValidPoster ? mediaPosterUrl : (isAudioFile ? AUDIO_POSTER_URL : undefined));
+        setPosterImage(isValidPoster ? mediaPosterUrl : (audioFile ? AUDIO_POSTER_URL : undefined));
    }, [videoRef]);

    // Function to jump 15 seconds backward
@@ -128,22 +130,34 @@ const IOSVideoPlayer = ({ videoRef, currentTime, duration }: IOSVideoPlayerProps
                </span>
            </div>

-            {/* iOS-optimized Video Element with Native Controls */}
-            <video
-                ref={(ref) => setIosVideoRef(ref)}
-                className="w-full rounded-md"
-                src={videoUrl}
-                controls
-                playsInline
-                webkit-playsinline="true"
-                x-webkit-airplay="allow"
-                preload="auto"
-                crossOrigin="anonymous"
-                poster={posterImage}
-            >
-                <source src={videoUrl} type="video/mp4" />
-                <p>Your browser doesn't support HTML5 video.</p>
-            </video>
+            {/* Video container with persistent background for audio files */}
+            <div className="ios-video-wrapper">
+                {/* Persistent background image for audio files (Safari fix) */}
+                {isAudioFile && posterImage && (
+                    <div 
+                        className="ios-audio-poster-background" 
+                        style={{ backgroundImage: `url(${posterImage})` }}
+                        aria-hidden="true"
+                    />
+                )}
+                
+                {/* iOS-optimized Video Element with Native Controls */}
+                <video
+                    ref={(ref) => setIosVideoRef(ref)}
+                    className={`w-full rounded-md ${isAudioFile && posterImage ? 'audio-with-poster' : ''}`}
+                    src={videoUrl}
+                    controls
+                    playsInline
+                    webkit-playsinline="true"
+                    x-webkit-airplay="allow"
+                    preload="auto"
+                    crossOrigin="anonymous"
+                    poster={posterImage}
+                >
+                    <source src={videoUrl} type="video/mp4" />
+                    <p>Your browser doesn't support HTML5 video.</p>
+                </video>
+            </div>

            {/* iOS Video Skip Controls */}
            <div className="ios-skip-controls mt-3 flex justify-center gap-4">
--- a/frontend-tools/video-editor/client/src/components/VideoPlayer.tsx
+++ b/frontend-tools/video-editor/client/src/components/VideoPlayer.tsx
@@ -353,8 +353,18 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({

    return (
        <div className="video-player-container">
+            {/* Persistent background image for audio files (Safari fix) */}
+            {isAudioFile && posterImage && (
+                <div 
+                    className="audio-poster-background" 
+                    style={{ backgroundImage: `url(${posterImage})` }}
+                    aria-hidden="true"
+                />
+            )}
+            
            <video
                ref={videoRef}
+                className={isAudioFile && posterImage ? 'audio-with-poster' : ''}
                preload="metadata"
                crossOrigin="anonymous"
                onClick={handleVideoClick}
--- a/frontend-tools/video-editor/client/src/styles/IOSVideoPlayer.css
+++ b/frontend-tools/video-editor/client/src/styles/IOSVideoPlayer.css
@@ -8,12 +8,40 @@
    overflow: hidden;
 }

+/* Video wrapper for positioning background */
+.ios-video-wrapper {
+    position: relative;
+    width: 100%;
+    background-color: black;
+    border-radius: 0.5rem;
+    overflow: hidden;
+}
+
+/* Persistent background poster for audio files (Safari fix) */
+.ios-audio-poster-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+    z-index: -1;
+    pointer-events: none;
+}
+
 .ios-video-player-container video {
+    position: relative;
    width: 100%;
    height: auto;
    max-height: 360px;
    aspect-ratio: 16/9;
-    background-color: black;
+}
+
+/* Make video transparent only for audio files with poster so background shows through */
+.ios-video-player-container video.audio-with-poster {
+    background-color: transparent;
 }

 .ios-time-display {
--- a/frontend-tools/video-editor/client/src/styles/VideoPlayer.css
+++ b/frontend-tools/video-editor/client/src/styles/VideoPlayer.css
@@ -76,10 +76,26 @@
        user-select: none;
    }

+    /* Persistent background poster for audio files (Safari fix) */
+    .audio-poster-background {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-size: contain;
+        background-position: center;
+        background-repeat: no-repeat;
+        z-index: 1;
+        pointer-events: none;
+    }
+
    .video-player-container video {
+        position: relative;
        width: 100%;
        height: 100%;
        cursor: pointer;
+        z-index: 2;
        /* Force hardware acceleration */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
@@ -88,6 +104,11 @@
        user-select: none;
    }

+    /* Make video transparent only for audio files with poster so background shows through */
+    .video-player-container video.audio-with-poster {
+        background: transparent;
+    }
+
    /* iOS-specific styles */
    @supports (-webkit-touch-callout: none) {
        .video-player-container video {
@@ -109,6 +130,7 @@
        opacity: 0;
        transition: opacity 0.3s;
        pointer-events: none;
+        z-index: 3;
    }

    .video-player-container:hover .play-pause-indicator {
@@ -187,6 +209,7 @@
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
        opacity: 0;
        transition: opacity 0.3s;
+        z-index: 3;
    }

    .video-player-container:hover .video-controls {
--- a/frontend-tools/video-js/src/components/controls/CustomChaptersOverlay.js
+++ b/frontend-tools/video-js/src/components/controls/CustomChaptersOverlay.js
@@ -20,6 +20,7 @@ class CustomChaptersOverlay extends Component {
        this.touchStartTime = 0;
        this.touchThreshold = 150; // ms for tap vs scroll detection
        this.isSmallScreen = window.innerWidth <= 480;
+        this.scrollY = 0; // Track scroll position before locking

        // Bind methods
        this.createOverlay = this.createOverlay.bind(this);
@@ -31,6 +32,8 @@ class CustomChaptersOverlay extends Component {
        this.handleMobileInteraction = this.handleMobileInteraction.bind(this);
        this.setupResizeListener = this.setupResizeListener.bind(this);
        this.handleResize = this.handleResize.bind(this);
+        this.lockBodyScroll = this.lockBodyScroll.bind(this);
+        this.unlockBodyScroll = this.unlockBodyScroll.bind(this);

        // Initialize after player is ready
        this.player().ready(() => {
@@ -65,6 +68,9 @@ class CustomChaptersOverlay extends Component {

        const el = this.player().el();
        if (el) el.classList.remove('chapters-open');
+
+        // Restore body scroll on mobile when closing
+        this.unlockBodyScroll();
    }

    setupResizeListener() {
@@ -164,6 +170,8 @@ class CustomChaptersOverlay extends Component {
            this.overlay.style.display = 'none';
            const el = this.player().el();
            if (el) el.classList.remove('chapters-open');
+            // Restore body scroll on mobile when closing
+            this.unlockBodyScroll();
        };
        chapterClose.appendChild(closeBtn);
        playlistTitle.appendChild(chapterClose);
@@ -355,6 +363,37 @@ class CustomChaptersOverlay extends Component {
        }
    }

+    lockBodyScroll() {
+        if (!this.isMobile) return;
+
+        // Save current scroll position
+        this.scrollY = window.scrollY || window.pageYOffset;
+
+        // Lock body scroll with proper iOS handling
+        document.body.style.overflow = 'hidden';
+        document.body.style.position = 'fixed';
+        document.body.style.top = `-${this.scrollY}px`;
+        document.body.style.left = '0';
+        document.body.style.right = '0';
+        document.body.style.width = '100%';
+    }
+
+    unlockBodyScroll() {
+        if (!this.isMobile) return;
+
+        // Restore body scroll
+        const scrollY = this.scrollY;
+        document.body.style.overflow = '';
+        document.body.style.position = '';
+        document.body.style.top = '';
+        document.body.style.left = '';
+        document.body.style.right = '';
+        document.body.style.width = '';
+
+        // Restore scroll position
+        window.scrollTo(0, scrollY);
+    }
+
    toggleOverlay() {
        if (!this.overlay) return;

@@ -369,17 +408,11 @@ class CustomChaptersOverlay extends Component {
            navigator.vibrate(30);
        }

-        // Prevent body scroll on mobile when overlay is open
-        if (this.isMobile) {
-            if (isHidden) {
-                document.body.style.overflow = 'hidden';
-                document.body.style.position = 'fixed';
-                document.body.style.width = '100%';
-            } else {
-                document.body.style.overflow = '';
-                document.body.style.position = '';
-                document.body.style.width = '';
-            }
+        // Lock/unlock body scroll on mobile when overlay opens/closes
+        if (isHidden) {
+            this.lockBodyScroll();
+        } else {
+            this.unlockBodyScroll();
        }

        try {
@@ -390,7 +423,9 @@ class CustomChaptersOverlay extends Component {
                    m.classList.remove('vjs-lock-showing');
                    m.style.display = 'none';
                });
-        } catch (e) {}
+        } catch {
+            // Ignore errors when closing menus
+        }
    }

    updateCurrentChapter() {
@@ -406,7 +441,6 @@ class CustomChaptersOverlay extends Component {
                currentTime >= chapter.startTime &&
                (index === this.chaptersData.length - 1 || currentTime < this.chaptersData[index + 1].startTime);

-            const handle = item.querySelector('.playlist-drag-handle');
            const dynamic = item.querySelector('.meta-dynamic');
            if (isPlaying) {
                currentChapterIndex = index;
@@ -463,11 +497,7 @@ class CustomChaptersOverlay extends Component {
            if (el) el.classList.remove('chapters-open');

            // Restore body scroll on mobile
-            if (this.isMobile) {
-                document.body.style.overflow = '';
-                document.body.style.position = '';
-                document.body.style.width = '';
-            }
+            this.unlockBodyScroll();
        }
    }

@@ -479,11 +509,7 @@ class CustomChaptersOverlay extends Component {
        if (el) el.classList.remove('chapters-open');

        // Restore body scroll on mobile when disposing
-        if (this.isMobile) {
-            document.body.style.overflow = '';
-            document.body.style.position = '';
-            document.body.style.width = '';
-        }
+        this.unlockBodyScroll();

        // Clean up event listeners
        if (this.handleResize) {
--- a/frontend-tools/video-js/src/components/controls/CustomSettingsMenu.js
+++ b/frontend-tools/video-js/src/components/controls/CustomSettingsMenu.js
@@ -25,6 +25,7 @@ class CustomSettingsMenu extends Component {
        this.isMobile = this.detectMobile();
        this.isSmallScreen = window.innerWidth <= 480;
        this.touchThreshold = 150; // ms for tap vs scroll detection
+        this.scrollY = 0; // Track scroll position before locking

        // Bind methods
        this.createSettingsButton = this.createSettingsButton.bind(this);
@@ -41,6 +42,8 @@ class CustomSettingsMenu extends Component {
        this.detectMobile = this.detectMobile.bind(this);
        this.handleMobileInteraction = this.handleMobileInteraction.bind(this);
        this.setupResizeListener = this.setupResizeListener.bind(this);
+        this.lockBodyScroll = this.lockBodyScroll.bind(this);
+        this.unlockBodyScroll = this.unlockBodyScroll.bind(this);

        // Initialize after player is ready
        this.player().ready(() => {
@@ -656,6 +659,8 @@ class CustomSettingsMenu extends Component {
                if (btnEl) {
                    btnEl.classList.remove('settings-clicked');
                }
+                // Restore body scroll on mobile when closing
+                this.unlockBodyScroll();
            };

            closeButton.addEventListener('click', closeFunction);
@@ -942,6 +947,37 @@ class CustomSettingsMenu extends Component {
        this.startSubtitleSync();
    }

+    lockBodyScroll() {
+        if (!this.isMobile) return;
+        
+        // Save current scroll position
+        this.scrollY = window.scrollY || window.pageYOffset;
+        
+        // Lock body scroll with proper iOS handling
+        document.body.style.overflow = 'hidden';
+        document.body.style.position = 'fixed';
+        document.body.style.top = `-${this.scrollY}px`;
+        document.body.style.left = '0';
+        document.body.style.right = '0';
+        document.body.style.width = '100%';
+    }
+
+    unlockBodyScroll() {
+        if (!this.isMobile) return;
+        
+        // Restore body scroll
+        const scrollY = this.scrollY;
+        document.body.style.overflow = '';
+        document.body.style.position = '';
+        document.body.style.top = '';
+        document.body.style.left = '';
+        document.body.style.right = '';
+        document.body.style.width = '';
+        
+        // Restore scroll position
+        window.scrollTo(0, scrollY);
+    }
+
    toggleSettings(e) {
        // e.stopPropagation();
        const isVisible = this.settingsOverlay.classList.contains('show');
@@ -954,11 +990,7 @@ class CustomSettingsMenu extends Component {
            this.stopKeepingControlsVisible();

            // Restore body scroll on mobile when closing
-            if (this.isMobile) {
-                document.body.style.overflow = '';
-                document.body.style.position = '';
-                document.body.style.width = '';
-            }
+            this.unlockBodyScroll();
        } else {
            this.settingsOverlay.classList.add('show');
            this.settingsOverlay.style.display = 'block';
@@ -972,11 +1004,7 @@ class CustomSettingsMenu extends Component {
            }

            // Prevent body scroll on mobile when overlay is open
-            if (this.isMobile) {
-                document.body.style.overflow = 'hidden';
-                document.body.style.position = 'fixed';
-                document.body.style.width = '100%';
-            }
+            this.lockBodyScroll();
        }

        this.speedSubmenu.style.display = 'none'; // Hide submenu when main menu toggles
@@ -1002,6 +1030,9 @@ class CustomSettingsMenu extends Component {
        this.settingsOverlay.classList.add('show');
        this.settingsOverlay.style.display = 'block';

+        // Lock body scroll when opening
+        this.lockBodyScroll();
+
        // Hide other submenus and show subtitles submenu
        this.speedSubmenu.style.display = 'none';
        if (this.qualitySubmenu) this.qualitySubmenu.style.display = 'none';
@@ -1072,11 +1103,7 @@ class CustomSettingsMenu extends Component {
            }

            // Restore body scroll on mobile when closing
-            if (this.isMobile) {
-                document.body.style.overflow = '';
-                document.body.style.position = '';
-                document.body.style.width = '';
-            }
+            this.unlockBodyScroll();
        }
    }

@@ -1417,6 +1444,8 @@ class CustomSettingsMenu extends Component {
            if (btnEl) {
                btnEl.classList.remove('settings-clicked');
            }
+            // Restore body scroll on mobile when closing
+            this.unlockBodyScroll();
        }
    }

@@ -1493,11 +1522,7 @@ class CustomSettingsMenu extends Component {
        }

        // Restore body scroll on mobile when disposing
-        if (this.isMobile) {
-            document.body.style.overflow = '';
-            document.body.style.position = '';
-            document.body.style.width = '';
-        }
+        this.unlockBodyScroll();

        // Remove DOM elements
        if (this.settingsOverlay) {
--- a/static/chapters_editor/chapters-editor.css
+++ b/static/chapters_editor/chapters-editor.css
--- a/static/chapters_editor/chapters-editor.js
+++ b/static/chapters_editor/chapters-editor.js
--- a/static/chapters_editor/chapters-editor.js.map
+++ b/static/chapters_editor/chapters-editor.js.map
--- a/static/css/_commons.css
+++ b/static/css/_commons.css
--- a/static/css/add-media.css
+++ b/static/css/add-media.css
--- a/static/css/media.css
+++ b/static/css/media.css
--- a/static/css/playlist.css
+++ b/static/css/playlist.css
--- a/static/js/_commons.js
+++ b/static/js/_commons.js
--- a/static/js/about.js
+++ b/static/js/about.js
--- a/static/js/add-media.js
+++ b/static/js/add-media.js
--- a/static/js/base.js
+++ b/static/js/base.js
--- a/static/js/categories.js
+++ b/static/js/categories.js
--- a/static/js/embed.js
+++ b/static/js/embed.js
--- a/static/js/featured.js
+++ b/static/js/featured.js
--- a/static/js/history.js
+++ b/static/js/history.js
--- a/static/js/index.js
+++ b/static/js/index.js
--- a/static/js/latest.js
+++ b/static/js/latest.js
--- a/static/js/liked.js
+++ b/static/js/liked.js
--- a/static/js/manage-comments.js
+++ b/static/js/manage-comments.js
--- a/static/js/manage-media.js
+++ b/static/js/manage-media.js
--- a/static/js/manage-users.js
+++ b/static/js/manage-users.js
--- a/static/js/media.js
+++ b/static/js/media.js
--- a/static/js/members.js
+++ b/static/js/members.js
--- a/static/js/playlist.js
+++ b/static/js/playlist.js
--- a/static/js/profile-about.js
+++ b/static/js/profile-about.js
--- a/static/js/profile-media.js
+++ b/static/js/profile-media.js
--- a/static/js/profile-playlists.js
+++ b/static/js/profile-playlists.js
--- a/static/js/profile-shared-by-me.js
+++ b/static/js/profile-shared-by-me.js
--- a/static/js/profile-shared-with-me.js
+++ b/static/js/profile-shared-with-me.js
--- a/static/js/recommended.js
+++ b/static/js/recommended.js
--- a/static/js/search.js
+++ b/static/js/search.js
--- a/static/js/tags.js
+++ b/static/js/tags.js
--- a/static/lib/file-uploader/5.13.0/fine-uploader.js
+++ b/static/lib/file-uploader/5.13.0/fine-uploader.js
--- a/static/lib/file-uploader/5.13.0/fine-uploader.min.js
+++ b/static/lib/file-uploader/5.13.0/fine-uploader.min.js
--- a/static/video_editor/video-editor.css
+++ b/static/video_editor/video-editor.css
--- a/static/video_editor/video-editor.js
+++ b/static/video_editor/video-editor.js
--- a/static/video_editor/video-editor.js.map
+++ b/static/video_editor/video-editor.js.map
--- a/static/video_js/video-js.js
+++ b/static/video_js/video-js.js
--- a/static/video_js/video-js.js.map
+++ b/static/video_js/video-js.js.map
Author	SHA1	Message	Date
Yiannis Christodoulou	0ddcb0be1c	build assets	2025-11-09 22:42:21 +02:00
Yiannis Christodoulou	5190fb4474	fix: First chapter is not saved, if not given a name, although indicating it is saved (151)	2025-11-09 22:42:14 +02:00
Yiannis Christodoulou	846d9fa3f6	build assets	2025-11-09 22:22:10 +02:00
Yiannis Christodoulou	b317f406c3	fix: Scroll is locked: Need to reload page. (149) Introduced lockBodyScroll and unlockBodyScroll methods in CustomChaptersOverlay and CustomSettingsMenu to consistently handle body scroll locking and restoration on mobile devices when overlays are opened or closed. This improves iOS compatibility and code maintainability by centralizing scroll management logic.	2025-11-09 22:20:15 +02:00
Yiannis Christodoulou	9a8a34317d	Fix audio poster display for Safari in video players (144) Adds persistent background poster images for audio files in both VideoPlayer and IOSVideoPlayer components to address Safari rendering issues. Updates CSS and component logic to ensure poster images remain visible for audio files, improving user experience and visual consistency.	2025-11-09 21:54:18 +02:00