From a95e65ead071e1f4df29ea426a555b143a3ee2ae Mon Sep 17 00:00:00 2001
From: Dani Palou <dani@moodle.com>
Date: Wed, 15 Jan 2025 10:22:53 +0100
Subject: [PATCH] MOBILE-4705 mod_resource: Use VideoJS if needed in embedded
 media

---
 .../index/addon-mod-resource-index.html       |  2 +-
 .../MediaElementController.ts                 | 26 +++++++++----------
 src/core/services/utils/mimetype.ts           |  5 +++-
 3 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/addons/mod/resource/components/index/addon-mod-resource-index.html b/src/addons/mod/resource/components/index/addon-mod-resource-index.html
index 5b2a6eb01..59d8fd370 100644
--- a/src/addons/mod/resource/components/index/addon-mod-resource-index.html
+++ b/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'">
diff --git a/src/core/classes/element-controllers/MediaElementController.ts b/src/core/classes/element-controllers/MediaElementController.ts
index b4b6682ad..f595c7d42 100644
--- a/src/core/classes/element-controllers/MediaElementController.ts
+++ b/src/core/classes/element-controllers/MediaElementController.ts
@@ -114,22 +114,22 @@ export class MediaElementController extends ElementController {
             return;
         }
 
+        // 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;
+            }
+
+            this.jsPlayerListener?.off();
+            this.jsPlayer.resolve(player);
+        });
+
         const player = await this.searchJSPlayer();
 
-        if (!player) {
-            this.jsPlayerListener = CoreEvents.on(VIDEO_JS_PLAYER_CREATED, ({ element, player }) => {
-                if (element !== media) {
-                    return;
-                }
-
-                this.jsPlayerListener?.off();
-                this.jsPlayer.resolve(player);
-            });
-
-            return;
+        if (player && !this.jsPlayer.isSettled()) {
+            this.jsPlayerListener?.off();
+            this.jsPlayer.resolve(player);
         }
-
-        this.jsPlayer.resolve(player);
     }
 
     /**
diff --git a/src/core/services/utils/mimetype.ts b/src/core/services/utils/mimetype.ts
index a2f63d1f3..f1f093b7a 100644
--- a/src/core/services/utils/mimetype.ts
+++ b/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('');