MOBILE-4166 videojs: Support fullscreen and improve types

Author: dpalou

src/addons/filter/mediaplugin/classes/videojs-ogvjs.ts

@@ -14,7 +14,7 @@
 
 import { CorePlatform } from '@services/platform';
 import { OGVPlayer, OGVCompat, OGVLoader } from 'ogv';
-import videojs from 'video.js';
+import videojs, { PreloadOption, TechSourceObject, VideoJSOptions } from 'video.js';
 
 export const Tech = videojs.getComponent('Tech');
 
@@ -95,6 +95,10 @@ export class VideoJSOgvJS extends Tech {
         'volumechange',
     ];
 
+    protected playerId?: string;
+    protected parentElement: HTMLElement | null = null;
+    protected placeholderElement = document.createElement('div');
+
     // Variables/functions defined in parent classes.
     protected el_!: OGVPlayerEl; // eslint-disable-line @typescript-eslint/naming-convention
     protected options_!: VideoJSOptions; // eslint-disable-line @typescript-eslint/naming-convention
@@ -108,14 +112,15 @@ export class VideoJSOgvJS extends Tech {
      * @param options The key/value store of player options.
      * @param ready Callback function to call when the `OgvJS` Tech is ready.
      */
-    constructor(options: VideoJSOptions, ready: () => void) {
+    constructor(options: VideoJSTechOptions, ready: () => void) {
         super(options, ready);
 
         this.el_.src = options.src || options.source?.src || options.sources?.[0]?.src || this.el_.src;
         VideoJSOgvJS.setIfAvailable(this.el_, 'autoplay', options.autoplay);
         VideoJSOgvJS.setIfAvailable(this.el_, 'loop', options.loop);
         VideoJSOgvJS.setIfAvailable(this.el_, 'poster', options.poster);
         VideoJSOgvJS.setIfAvailable(this.el_, 'preload', options.preload);
+        this.playerId = options.playerId;
 
         this.on('loadedmetadata', () => {
             if (CoreApp.isIPhone()) {
@@ -654,8 +659,7 @@ export class VideoJSOgvJS extends Tech {
      * @returns Whether it supports full screen.
      */
     supportsFullScreen(): boolean {
-        // iOS devices have some problem with HTML5 fullscreen api so we need to fallback to fullWindow mode.
-        return !CoreApp.isIOS();
+        return !!this.playerId;
     }
 
     /**
@@ -667,6 +671,50 @@ export class VideoJSOgvJS extends Tech {
         return this.el_.error;
     }
 
+    /**
+     * Enter full screen mode.
+     */
+    enterFullScreen(): void {
+        // Use a "fake" full screen mode, moving the player to a different place in DOM to be able to use full screen size.
+        const player = videojs.getPlayer(this.playerId ?? '');
+        if (!player) {
+            return;
+        }
+
+        const container = player.el();
+        this.parentElement = container.parentElement;
+        if (!this.parentElement) {
+            // Shouldn't happen, it means the element is not in DOM. Do not support full screen in this case.
+            return;
+        }
+
+        this.parentElement.replaceChild(this.placeholderElement, container);
+        document.body.appendChild(container);
+        container.classList.add('vjs-ios-moodleapp-fs');
+
+        player.isFullscreen(true);
+    }
+
+    /**
+     * Exit full screen mode.
+     */
+    exitFullScreen(): void {
+        if (!this.parentElement) {
+            return;
+        }
+
+        const player = videojs.getPlayer(this.playerId ?? '');
+        if (!player) {
+            return;
+        }
+
+        const container = player.el();
+        this.parentElement.replaceChild(container, this.placeholderElement);
+        container.classList.remove('vjs-ios-moodleapp-fs');
+
+        player.isFullscreen(false);
+    }
+
 }
 
 [
@@ -688,75 +736,13 @@ export const initializeVideoJSOgvJS = (): void => {
     Tech.registerTech('OgvJS', VideoJSOgvJS);
 };
 
-export type VideoJSOptions = {
-    aspectRatio?: string;
-    audioOnlyMode?: boolean;
-    audioPosterMode?: boolean;
-    autoplay?: boolean | string;
-    autoSetup?: boolean;
-    base?: string;
-    breakpoints?: Record<string, number>;
-    children?: string[] | Record<string, Record<string, unknown>>;
-    controlBar?: {
-        remainingTimeDisplay?: {
-            displayNegative?: boolean;
-        };
-    };
-    controls?: boolean;
-    fluid?: boolean;
-    fullscreen?: {
-        options?: Record<string, unknown>;
-    };
-    height?: string | number;
-    id?: string;
-    inactivityTimeout?: number;
-    language?: string;
-    languages?: Record<string, Record<string, string>>;
-    liveui?: boolean;
-    liveTracker?: {
-        trackingThreshold?: number;
-        liveTolerance?: number;
-    };
-    loop?: boolean;
-    muted?: boolean;
-    nativeControlsForTouch?: boolean;
-    normalizeAutoplay?: boolean;
-    notSupportedMessage?: string;
-    noUITitleAttributes?: boolean;
-    playbackRates?: number[];
-    plugins?: Record<string, Record<string, unknown>>;
-    poster?: string;
-    preferFullWindow?: boolean;
-    preload?: PreloadOption;
-    responsive?: boolean;
-    restoreEl?: boolean | HTMLElement;
-    source?: TechSourceObject;
-    sources?: TechSourceObject[];
-    src?: string;
-    suppressNotSupportedError?: boolean;
-    tag?: HTMLElement;
-    techCanOverridePoster?: boolean;
-    techOrder?: string[];
-    userActions?: {
-        click?: boolean | ((ev: MouseEvent) => void);
-        doubleClick?: boolean | ((ev: MouseEvent) => void);
-        hotkeys?: boolean | ((ev: KeyboardEvent) => void) | {
-            fullscreenKey?: (ev: KeyboardEvent) => void;
-            muteKey?: (ev: KeyboardEvent) => void;
-            playPauseKey?: (ev: KeyboardEvent) => void;
-        };
-    };
-    'vtt.js'?: string;
-    width?: string | number;
-};
-
-type TechSourceObject = {
-    src: string; // Source URL.
-    type: string; // Mimetype.
-};
-
-type PreloadOption = '' | 'none' | 'metadata' | 'auto';
-
 type OGVPlayerEl = (HTMLAudioElement | HTMLVideoElement) & {
     stop: () => void;
 };
+
+/**
+ * VideoJS Tech options. It includes some options added by VideoJS internally.
+ */
+type VideoJSTechOptions = VideoJSOptions & {
+    playerId?: string;
+};

src/addons/filter/mediaplugin/services/handlers/mediaplugin.ts

@@ -21,10 +21,9 @@ import { CoreTextUtils } from '@services/utils/text';
 import { CoreUrlUtils } from '@services/utils/url';
 import { makeSingleton } from '@singletons';
 import { CoreDirectivesRegistry } from '@singletons/directives-registry';
-import { CoreDom } from '@singletons/dom';
 import { CoreEvents } from '@singletons/events';
-import videojs from 'video.js';
-import { VideoJSOptions } from '../../classes/videojs-ogvjs';
+import { CoreMedia } from '@singletons/media';
+import videojs, { VideoJSOptions, VideoJSPlayer } from 'video.js';
 
 /**
  * Handler to support the Multimedia filter.
@@ -48,7 +47,7 @@ export class AddonFilterMediaPluginHandlerService extends CoreFilterDefaultHandl
         const videos = Array.from(this.template.content.querySelectorAll('video'));
 
         videos.forEach((video) => {
-            this.treatVideoFilters(video);
+            this.treatYoutubeVideos(video);
         });
 
         return this.template.innerHTML;
@@ -61,7 +60,7 @@ export class AddonFilterMediaPluginHandlerService extends CoreFilterDefaultHandl
         const mediaElements = Array.from(container.querySelectorAll<HTMLVideoElement | HTMLAudioElement>('video, audio'));
 
         mediaElements.forEach((mediaElement) => {
-            if (CoreDom.mediaUsesJavascriptPlayer(mediaElement)) {
+            if (CoreMedia.mediaUsesJavascriptPlayer(mediaElement)) {
                 this.useVideoJS(mediaElement);
             } else {
                 // Remove the VideoJS classes and data if present.
@@ -93,28 +92,49 @@ export class AddonFilterMediaPluginHandlerService extends CoreFilterDefaultHandl
             controls: true,
             techOrder: ['OgvJS'],
             language: lang,
-            fluid: true,
             controlBar: {
-                fullscreenToggle: false,
+                pictureInPictureToggle: false,
             },
             aspectRatio: data.aspectRatio,
+        }, () => {
+            if (mediaElement.tagName === 'VIDEO') {
+                this.fixVideoJSPlayerSize(player);
+            }
         });
 
         CoreEvents.trigger(CoreEvents.JS_PLAYER_CREATED, {
             id: mediaElement.id,
             element: mediaElement,
             player,
         });
+    }
 
+    /**
+     * Fix VideoJS player size.
+     * If video width is wider than available width, video is cut off. Fix the dimensions in this case.
+     *
+     * @param player Player instance.
+     */
+    protected fixVideoJSPlayerSize(player: VideoJSPlayer): void {
+        const videoWidth = player.videoWidth();
+        const videoHeight = player.videoHeight();
+        const playerDimensions = player.currentDimensions();
+        if (!videoWidth || !videoHeight || !playerDimensions.width || videoWidth === playerDimensions.width) {
+            return;
+        }
+
+        const candidateHeight = playerDimensions.width * videoHeight / videoWidth;
+        if (!playerDimensions.height || Math.abs(candidateHeight - playerDimensions.height) > 1) {
+            player.dimension('height', candidateHeight);
+        }
     }
 
     /**
-     * Treat video filters. Currently only treating youtube video using video JS.
+     * Treat Video JS Youtube video links and translate them to iframes.
      *
      * @param video Video element.
      */
-    protected treatVideoFilters(video: HTMLElement): void {
-        // Treat Video JS Youtube video links and translate them to iframes.
+    protected treatYoutubeVideos(video: HTMLElement): void {
         if (!video.classList.contains('video-js')) {
             return;
         }

src/core/classes/element-controllers/MediaElementController.ts

@@ -14,10 +14,10 @@
 
 import { CoreUtils } from '@services/utils/utils';
 import { ElementController } from './ElementController';
-import videojs from 'video.js';
-import { CoreDom } from '@singletons/dom';
+import videojs, { VideoJSPlayer } from 'video.js';
 import { CorePromisedValue } from '@classes/promised-value';
 import { CoreEventObserver, CoreEvents } from '@singletons/events';
+import { CoreMedia } from '@singletons/media';
 
 /**
  * Wrapper class to control the interactivity of a media element.
@@ -42,15 +42,15 @@ export class MediaElementController extends ElementController {
 
         media.autoplay = false;
 
-        if (CoreDom.mediaUsesJavascriptPlayer(media)) {
+        if (CoreMedia.mediaUsesJavascriptPlayer(media)) {
             const player = this.searchJSPlayer();
             if (player) {
                 this.jsPlayer.resolve(player);
             } else {
                 this.jsPlayerListener = CoreEvents.on(CoreEvents.JS_PLAYER_CREATED, data => {
                     if (data.element === media) {
                         this.jsPlayerListener?.off();
-                        this.jsPlayer.resolve(data.player as VideoJSPlayer);
+                        this.jsPlayer.resolve(data.player);
                     }
                 });
             }
@@ -153,16 +153,8 @@ export class MediaElementController extends ElementController {
      *
      * @returns Player instance if found.
      */
-    private searchJSPlayer(): VideoJSPlayer | undefined {
+    private searchJSPlayer(): VideoJSPlayer | null {
         return videojs.getPlayer(this.media.id) || videojs.getPlayer(this.media.id.replace('_html5_api', ''));
     }
 
 }
-
-type VideoJSPlayer = {
-    play: () => Promise<void>;
-    pause: () => Promise<void>;
-    on: (name: string, callback: (ev: Event) => void) => void;
-    off: (name: string, callback: (ev: Event) => void) => void;
-    dispose: () => void;
-};

src/core/services/utils/url.ts

@@ -22,7 +22,7 @@ import { CoreUrl } from '@singletons/url';
 import { CoreSites } from '@services/sites';
 import { CorePath } from '@singletons/path';
 import { CorePlatform } from '@services/platform';
-import { CoreDom } from '@singletons/dom';
+import { CoreMedia } from '@singletons/media';
 
 /*
  * "Utils" service with helper functions for URLs.
@@ -122,7 +122,7 @@ export class CoreUrlUtilsProvider {
         return !CoreConstants.CONFIG.disableTokenFile && !!accessKey && !url.match(/[&?]file=/) && (
             url.indexOf(CorePath.concatenatePaths(siteUrl, 'pluginfile.php')) === 0 ||
             url.indexOf(CorePath.concatenatePaths(siteUrl, 'webservice/pluginfile.php')) === 0) &&
-            !CoreDom.sourceUsesJavascriptPlayer({ src: url });
+            !CoreMedia.sourceUsesJavascriptPlayer({ src: url });
     }
 
     /**

src/core/singletons/dom.ts

@@ -15,7 +15,6 @@
 import { CoreCancellablePromise } from '@classes/cancellable-promise';
 import { CoreApp } from '@services/app';
 import { CoreDomUtils } from '@services/utils/dom';
-import { CoreMimetypeUtils } from '@services/utils/mimetype';
 import { CoreUtils } from '@services/utils/utils';
 import { CoreEventObserver } from '@singletons/events';
 
@@ -569,6 +568,7 @@ export class CoreDom {
         }
     }
 
+<<<<<<< HEAD
     /**
      * Get all source URLs and types for a video or audio.
      *
@@ -637,6 +637,8 @@ export class CoreDom {
         return sources.some(source => CoreDom.sourceUsesJavascriptPlayer(source));
     }
 
+=======
+>>>>>>> f42ea632ca (a)
 }
 
 /**

src/core/singletons/events.ts

@@ -20,6 +20,7 @@ import { CoreFilepoolComponentFileEventData } from '@services/filepool';
 import { CoreRedirectPayload } from '@services/navigator';
 import { CoreCourseModuleCompletionData } from '@features/course/services/course-helper';
 import { CoreScreenOrientation } from '@services/screen';
+import { VideoJSPlayer } from 'video.js';
 
 /**
  * Observer instance to stop listening to an event.
@@ -499,5 +500,5 @@ export type CoreEventCompleteRequiredProfileDataFinished = {
 export type CoreEventJSVideoPlayerCreated = {
     id: string;
     element: HTMLAudioElement | HTMLVideoElement;
-    player: unknown;
+    player: VideoJSPlayer;
 };