unify fullscreen support across all book players

Author: dkanada

src/apps/legacy/features/playback/utils/playbackSubscriber.ts

@@ -21,7 +21,7 @@ export interface PlaybackSubscriber {
     onPlayerChange?(e: Event, player: PlayerPlugin, target: PlayTarget, previousPlayer: PlayerPlugin): void
     onPromptSkip?(e: Event, mediaSegment: MediaSegmentDto): void
     onPlayerError?(e: Event, error: PlayerError): void
-    onPlayerFullscreenChange?(e: Event): void
+    onPlayerFullscreenChange?(e: Event, fullscreen: boolean): void
     onPlayerItemStarted?(e: Event, item?: BaseItemDto, mediaSource?: MediaSourceInfo): void
     onPlayerItemStopped?(e: Event, info: ManagedPlayerStopInfo): void
     onPlayerMediaStreamsChange?(e: Event): void

src/components/playback/playbackmanager.js

@@ -52,12 +52,12 @@ function supportsPhysicalVolumeControl(player) {
 function bindToFullscreenChange(player) {
     if (Screenfull.isEnabled) {
         Screenfull.on('change', function () {
-            Events.trigger(player, 'fullscreenchange');
+            Events.trigger(player, 'fullscreenchange', [Screenfull.isFullscreen]);
         });
     } else {
         // iOS Safari
         document.addEventListener('webkitfullscreenchange', function () {
-            Events.trigger(player, 'fullscreenchange');
+            Events.trigger(player, 'fullscreenchange', [document.webkitIsFullScreen]);
         }, false);
     }
 }
@@ -2266,7 +2266,9 @@ export class PlaybackManager {
 
             options.items = items;
 
-            return player.play(options);
+            return player.play(options).then(() => {
+                onPlaybackStarted(player, options, player.streamInfo, player.streamInfo?.mediaSource);
+            });
         }
 
         const getAdditionalParts = async (items, mediaSourceId, startIndex) => {

src/global.d.ts

@@ -16,6 +16,12 @@ export declare global {
         'viewshow': CustomEvent;
     }
 
+    interface Document {
+        webkitIsFullScreen?: boolean;
+        webkitCancelFullscreen?(): void;
+        webkitEnterFullscreen?(): void;
+    }
+
     const __COMMIT_SHA__: string;
     const __JF_BUILD_VERSION__: string;
     const __PACKAGE_JSON_NAME__: string;

src/plugins/bookPlayer/BookOsd/BookOsd.tsx

@@ -1,10 +1,11 @@
-import React, { type FC, useCallback, useState } from 'react';
+import React, { type FC, useCallback, useEffect, useState } from 'react';
 
 import './BookOsd.scss';
 import IconButton from '../../../elements/emby-button/IconButton';
 import globalize from 'lib/globalize';
 import * as userSettings from '../../../scripts/settings/userSettings';
 import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
+import Screenfull from 'screenfull';
 
 interface BookOsdProps {
     item: BaseItemDto;
@@ -17,7 +18,7 @@ interface BookOsdProps {
     onIncreaseFontSize?: () => void;
     onToggleDirection?: () => void;
     onToggleLayout?: () => void;
-    onToggleFullscreen?: () => void;
+    onToggleFullscreen: () => void;
 }
 
 interface ComicsPlayerSettings {
@@ -44,6 +45,20 @@ const BookOsd: FC<BookOsdProps> = ({
     const [layout, setLayout] = useState(settings.pagesPerView === 2);
     const [fullscreen, setFullscreen] = useState(false);
 
+    const updateFullscreen = useCallback((state: boolean) => {
+        if (Screenfull.isEnabled) {
+            void Screenfull.toggle();
+        } else if (window.NativeShell) {
+            state ? window.NativeShell.enableFullscreen() : window.NativeShell.disableFullscreen();
+        } else if (document.webkitEnterFullscreen || document.webkitCancelFullscreen) {
+            state ? document.webkitEnterFullscreen?.() : document.webkitCancelFullscreen?.();
+        }
+    }, []);
+
+    useEffect(() => {
+        return () => updateFullscreen(false);
+    }, [updateFullscreen]);
+
     const onClickDirection = useCallback(() => {
         onToggleDirection?.();
         setDirection(state => !state);
@@ -55,9 +70,10 @@ const BookOsd: FC<BookOsdProps> = ({
     }, [onToggleLayout]);
 
     const onClickFullscreen = useCallback(() => {
+        updateFullscreen(!fullscreen);
         onToggleFullscreen?.();
         setFullscreen(state => !state);
-    }, [onToggleFullscreen]);
+    }, [onToggleFullscreen, updateFullscreen, fullscreen]);
 
     return (
         <div className='bookOsd'>
@@ -119,13 +135,11 @@ const BookOsd: FC<BookOsdProps> = ({
                     />
                 )}
 
-                {onToggleFullscreen && (
-                    <IconButton
-                        onClick={onClickFullscreen}
-                        icon={fullscreen ? 'fullscreen_exit' : 'fullscreen'}
-                        title={globalize.translate(fullscreen ? 'ExitFullscreen' : 'Fullscreen')}
-                    />
-                )}
+                <IconButton
+                    onClick={onClickFullscreen}
+                    icon={fullscreen ? 'fullscreen_exit' : 'fullscreen'}
+                    title={globalize.translate(fullscreen ? 'ExitFullscreen' : 'Fullscreen')}
+                />
             </div>
         </div>
     );

src/plugins/bookPlayer/plugin.js

@@ -1,5 +1,4 @@
 import { getLibraryApi } from '@jellyfin/sdk/lib/utils/api/library-api';
-import Screenfull from 'screenfull';
 
 import { PluginType } from 'constants/pluginType';
 import { ServerConnections } from 'lib/jellyfin-apiclient';
@@ -53,7 +52,6 @@ export class BookPlayer {
         this.onWindowKeyDown = this.onWindowKeyDown.bind(this);
         this.addSwipeGestures = this.addSwipeGestures.bind(this);
         this.toggleFullscreen = this.toggleFullscreen.bind(this);
-        this.fullscreen = false;
     }
 
     play(options) {
@@ -94,10 +92,6 @@ export class BookPlayer {
             rendition.destroy();
         }
 
-        if (this.fullscreen) {
-            this.toggleFullscreen();
-        }
-
         // hide loader in case player was not fully loaded yet
         loading.hide();
         this.cancellationToken = true;
@@ -219,18 +213,8 @@ export class BookPlayer {
     toggleFullscreen() {
         const player = document.querySelector('#bookPlayerContainer');
 
-        player.classList.toggle('fullscreen', !this.fullscreen);
-        if (Screenfull.isEnabled) {
-            Screenfull.toggle();
-        } else if (window.NativeShell) {
-            this.fullscreen ? window.NativeShell.disableFullscreen() : window.NativeShell.enableFullscreen();
-        }
-
         // needs to be executed with a slight delay to give NativeShell time to process the request
         setTimeout(() => this.rendition.resize(player.clientWidth, player.clientHeight), 200);
-
-        // required for mobile apps without browser fullscreen support
-        this.fullscreen = !this.fullscreen;
     }
 
     rotateTheme() {
@@ -305,7 +289,7 @@ export class BookPlayer {
             onRotateTheme: this.rotateTheme,
             onDecreaseFontSize: this.decreaseFontSize,
             onIncreaseFontSize: this.increaseFontSize,
-            onToggleFullscreen: Screenfull.isEnabled || window.NativeShell ? this.toggleFullscreen : null
+            onToggleFullscreen: this.toggleFullscreen
         }, elem.querySelector('#bookOsdMount'));
 
         return elem;
@@ -340,7 +324,7 @@ export class BookPlayer {
                     flow: 'paginated'
                 });
 
-                this.currentSrc = downloadHref;
+                this.currentSrc = () => downloadHref;
                 this.rendition = rendition;
 
                 rendition.themes.register('default', THEMES[this.theme]);

src/plugins/bookPlayer/style.scss

@@ -20,11 +20,6 @@
     inset: 0;
     z-index: 1000;
     width: 100%;
-    top: 5vh;
-    height: 90vh;
-}
-
-#bookPlayerContainer.fullscreen {
     top: calc(5vh + env(safe-area-inset-top));
     height: calc(90vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
 }

src/plugins/comicsPlayer/plugin.js

@@ -36,6 +36,7 @@ export class ComicsPlayer {
 
         this.onDialogClosed = this.onDialogClosed.bind(this);
         this.onWindowKeyDown = this.onWindowKeyDown.bind(this);
+        this.toggleFullscreen = this.toggleFullscreen.bind(this);
     }
 
     play(options) {
@@ -192,6 +193,10 @@ export class ComicsPlayer {
         document.removeEventListener('keydown', this.onWindowKeyDown);
     }
 
+    toggleFullscreen() {
+        setTimeout(() => this.swiperInstance?.update(), 200);
+    }
+
     createMediaElement(options) {
         let elem = this.mediaElement;
         if (elem) {
@@ -226,7 +231,8 @@ export class ComicsPlayer {
             onPrevious: this.previous,
             onNext: this.next,
             onToggleDirection: this.onDirChanged,
-            onToggleLayout: this.onViewChanged
+            onToggleLayout: this.onViewChanged,
+            onToggleFullscreen: this.toggleFullscreen
         }, elem.querySelector('#bookOsdMount'));
 
         this.bindEvents();
@@ -271,6 +277,7 @@ export class ComicsPlayer {
 
                 this.pageCount = this.archiveSource.urls.length;
                 this.currentPage = options.startPositionTicks / 10000 || 0;
+                this.currentSrc = () => this.currentPage;
 
                 this.swiperInstance = new Swiper(elem.querySelector('.slideshowSwiperContainer'), {
                     direction: 'horizontal',

src/plugins/comicsPlayer/style.scss

@@ -3,8 +3,8 @@
 
     .slideshowSwiperContainer {
         position: relative;
-        top: 5vh;
-        height: 90vh;
+        top: calc(5vh + env(safe-area-inset-top));
+        height: calc(90vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
     }
 
     .slider-zoom-container {

src/plugins/pdfPlayer/plugin.js

@@ -28,6 +28,7 @@ export class PdfPlayer {
         this.onDialogClosed = this.onDialogClosed.bind(this);
         this.onWindowKeyDown = this.onWindowKeyDown.bind(this);
         this.onTouchStart = this.onTouchStart.bind(this);
+        this.toggleFullscreen = this.toggleFullscreen.bind(this);
     }
 
     play(options) {
@@ -150,6 +151,10 @@ export class PdfPlayer {
         document.querySelector('#container')?.removeEventListener('touchstart', this.onTouchStart);
     }
 
+    toggleFullscreen() {
+        setTimeout(() => this.loadPage(this.progress + 1), 200);
+    }
+
     createMediaElement(options) {
         let elem = this.mediaElement;
         if (elem) {
@@ -178,7 +183,8 @@ export class PdfPlayer {
             item: options.items[0],
             onExit: this.onDialogClosed,
             onPrevious: this.previous,
-            onNext: this.next
+            onNext: this.next,
+            onToggleFullscreen: this.toggleFullscreen
         }, elem.querySelector('#bookOsdMount'));
 
         return elem;
@@ -261,7 +267,7 @@ export class PdfPlayer {
 
         // load any missing pages in the cache
         for (const page of pages) {
-            if (!this.pages[page]) {
+            if (!this.pages[page] || this.dimensions !== window.innerWidth + window.innerHeight) {
                 this.pages[page] = document.createElement('canvas');
                 this.renderPage(this.pages[page], parseInt(page.slice(4), 10));
 
@@ -271,6 +277,10 @@ export class PdfPlayer {
 
         // show the requested page
         canvas?.parentNode.replaceChild(this.pages[prefix + number], canvas);
+        this.currentSrc = () => this.pages[prefix + number];
+
+        // track size so we can render all pages again when the screen has changed
+        this.dimensions = window.innerWidth + window.innerHeight;
 
         // delete all pages outside the cache area
         for (const page in this.pages) {

src/plugins/pdfPlayer/style.scss

@@ -2,8 +2,8 @@
     position: relative;
     display: grid;
     place-items: center;
-    top: 5vh;
-    height: 90vh;
+    top: calc(5vh + env(safe-area-inset-top));
+    height: calc(90vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
 }
 
 #pdfPlayer {