Merge pull request #4286 from dpalou/MOBILE-4705

MOBILE-4705 mod_resource: Use VideoJS if needed in embedded media

Author: crazyserver

src/addons/mod/resource/components/index/addon-mod-resource-index.html

@@ -35,7 +35,7 @@
     </ng-container>
 
     <div *ngIf="mode === 'embedded'" class="ion-padding">
-        <core-format-text [text]="contentText" [filter]="false" />
+        <core-format-text [text]="contentText" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
     </div>
 
     <ng-container *ngIf="mode === 'external'">

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

@@ -114,22 +114,22 @@ export class MediaElementController extends ElementController {
             return;
         }
 
-        const player = await this.searchJSPlayer();
+        // Start listening to events because the player could be created while we're searching for it, causing a race condition.
+        this.jsPlayerListener = CoreEvents.on(VIDEO_JS_PLAYER_CREATED, ({ element, player }) => {
+            if (element !== media) {
+                return;
+            }
 
-        if (!player) {
-            this.jsPlayerListener = CoreEvents.on(VIDEO_JS_PLAYER_CREATED, ({ element, player }) => {
-                if (element !== media) {
-                    return;
-                }
+            this.jsPlayerListener?.off();
+            this.jsPlayer.resolve(player);
+        });
 
-                this.jsPlayerListener?.off();
-                this.jsPlayer.resolve(player);
-            });
+        const player = await this.searchJSPlayer();
 
-            return;
+        if (player && !this.jsPlayer.isSettled()) {
+            this.jsPlayerListener?.off();
+            this.jsPlayer.resolve(player);
         }
-
-        this.jsPlayer.resolve(player);
     }
 
     /**

src/core/services/utils/mimetype.ts

@@ -27,6 +27,7 @@ import mimeToExt from '@/assets/mimetoext.json';
 import { CoreFileEntry, CoreFileHelper } from '@services/file-helper';
 import { CoreUrl } from '@singletons/url';
 import { CoreSites } from '@services/sites';
+import { CoreUtils } from '@singletons/utils';
 
 interface MimeTypeInfo {
     type: string;
@@ -193,8 +194,10 @@ export class CoreMimetypeUtilsProvider {
                     return `<img src="${path}">`;
                 case 'audio':
                 case 'video':
+                    // Add videoJS class and ID because the media could use the VideoJS player.
                     return [
-                        `<${embedType} controls title="${filename}" src="${path}" controlsList="nodownload">`,
+                        `<${embedType} controls title="${filename}" src="${path}" controlsList="nodownload" class="video-js" ` +
+                            `id="id_videojs_moodleapp_${CoreUtils.getUniqueId('CoreMimetypeUtils-embedded-media')}">`,
                         `<source src="${path}" type="${mimeType}">`,
                         `</${embedType}>`,
                     ].join('');