all

frontend/src/static/js/components/VideoJS/VideoJSEmbed.jsx

@@ -36,6 +36,7 @@ const VideoJSEmbed = ({
     showRelated,
     showUserAvatar,
     linkTitle,
+    parentMediaBase,
     hasTheaterMode,
     hasNextLink,
     nextLink,
@@ -89,6 +90,7 @@ const VideoJSEmbed = ({
                 previewSprite: previewSprite || null,
                 subtitlesInfo: subtitlesInfo || [],
                 inEmbed: inEmbed || false,
+                parentMediaBase: parentMediaBase || null,
                 showTitle: showTitle || false,
                 showRelated: showRelated !== undefined ? showRelated : (urlShowRelated === '1' || urlShowRelated === 'true' || urlShowRelated === null),
                 showUserAvatar: showUserAvatar !== undefined ? showUserAvatar : (urlShowUserAvatar === '1' || urlShowUserAvatar === 'true' || urlShowUserAvatar === null),

frontend/src/static/js/components/media-viewer/VideoViewer/index.js

@@ -180,9 +180,9 @@ export default class VideoViewer extends React.PureComponent {
 
                 if (titleLink) {
                     titleLink.setAttribute('class', 'title-link');
-                    titleLink.setAttribute('href', this.props.data.url);
-                    titleLink.setAttribute('title', this.props.data.title);
+                    titleLink.setAttribute('href', this.props.data.url || '#');
                     titleLink.setAttribute('target', linkTarget);
+                    titleLink.setAttribute('title', this.props.data.title);
                     titleLink.innerHTML = this.props.data.title;
                 }
 
@@ -413,6 +413,7 @@ export default class VideoViewer extends React.PureComponent {
                                             previewSprite: previewSprite,
                                             subtitlesInfo: this.props.data.subtitles_info,
                                             inEmbed: this.props.inEmbed,
+                                            parentMediaBase: this.props.parentMediaBase || null,
                                             showTitle: this.props.showTitle,
                                             showRelated: this.props.showRelated,
                                             showUserAvatar: this.props.showUserAvatar,

frontend/src/static/js/pages/EmbedPage.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect, CSSProperties } from 'react';
 import { SiteConsumer } from '../utils/contexts/';
 import { MediaPageStore } from '../utils/stores/';
 import { MediaPageActions } from '../utils/actions/';
+import { getParentMediaBase } from '../utils/helpers/';
 import VideoViewer from '../components/media-viewer/VideoViewer';
 
 const wrapperStyles = {
@@ -72,16 +73,20 @@ export const EmbedPage: React.FC = () => {
             const urlTimestamp = urlParams.get('t');
             const timestamp = urlTimestamp ? parseInt(urlTimestamp, 10) : null;
 
+            const parentMediaBase = getParentMediaBase();
+
             return (
-              <VideoViewer 
-                data={MediaPageStore.get('media-data')} 
-                siteUrl={site.url} 
-                containerStyles={containerStyles} 
+              <VideoViewer
+                data={MediaPageStore.get('media-data')}
+                siteUrl={site.url}
+                containerStyles={containerStyles}
+                inEmbed={true}
                 showTitle={showTitle}
                 showRelated={showRelated}
                 showUserAvatar={showUserAvatar}
                 linkTitle={linkTitle}
                 timestamp={timestamp}
+                parentMediaBase={parentMediaBase}
               />
             );
           }} 

frontend/src/static/js/utils/helpers/embeddedApp.ts

@@ -58,6 +58,33 @@ export function inSelectMediaEmbedMode() {
     return inEmbeddedApp() && isSelectMediaMode();
 }
 
+// When MediaCMS is embedded inside a host platform (e.g. an LMS), the host passes a
+// `parent_media_base` URL via LTI custom params so that media title links in the embed
+// player navigate the parent frame to the host's own media viewer (e.g. Moodle My Media)
+// instead of opening a bare MediaCMS URL. The VideoViewer appends `?token=<friendly_token>`
+// and uses `target="_parent"` to perform the navigation.
+export function getParentMediaBase(): string | null {
+    try {
+        const params = new URL(globalThis.location.href).searchParams;
+        const mode = params.get('mode');
+        const base = params.get('parent_media_base');
+
+        if (mode === 'standard') {
+            sessionStorage.removeItem('parent_media_base');
+            return null;
+        }
+
+        if (base) {
+            sessionStorage.setItem('parent_media_base', base);
+            return base;
+        }
+
+        return sessionStorage.getItem('parent_media_base');
+    } catch (e) {
+        return null;
+    }
+}
+
 export function getLtiContextId(): string | null {
     try {
         const params = new URL(globalThis.location.href).searchParams;

frontend/src/static/js/utils/helpers/index.js

@@ -14,4 +14,4 @@ export * from './quickSort';
 export * from './requests';
 export { translateString } from './translate';
 export { replaceString } from './replacementStrings';
-export { inEmbeddedApp, inSelectMediaEmbedMode, isSelectMediaMode, isShareMediaDisabled } from './embeddedApp';
+export { getParentMediaBase, inEmbeddedApp, inSelectMediaEmbedMode, isSelectMediaMode, isShareMediaDisabled } from './embeddedApp';