all

frontend-tools/video-js/src/components/overlays/EmbedInfoOverlay.js

@@ -14,6 +14,7 @@ class EmbedInfoOverlay extends Component {
         this.authorThumbnail = options.authorThumbnail || '';
         this.videoTitle = options.videoTitle || 'Video';
         this.videoUrl = options.videoUrl || '';
+        this.titleTarget = options.titleTarget || '_blank';
         this.showTitle = options.showTitle !== undefined ? options.showTitle : true;
         this.showRelated = options.showRelated !== undefined ? options.showRelated : true;
         this.showUserAvatar = options.showUserAvatar !== undefined ? options.showUserAvatar : true;
@@ -140,7 +141,7 @@ class EmbedInfoOverlay extends Component {
         if (this.videoUrl && this.linkTitle) {
             const titleLink = document.createElement('a');
             titleLink.href = this.videoUrl;
-            titleLink.target = '_blank';
+            titleLink.target = this.titleTarget;
             titleLink.rel = 'noopener noreferrer';
             titleLink.textContent = this.videoTitle;
             titleLink.title = this.videoTitle;

frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx

@@ -2216,12 +2216,26 @@ function VideoJSPlayer({ videoId = 'default-video', showTitle = true, showRelate
 
                     // BEGIN: Add Embed Info Overlay Component (for embed player only)
                     if (isEmbedPlayer) {
+                        let overlayVideoUrl = currentVideo.url;
+                        let overlayTitleTarget = '_blank';
+
+                        const parentMediaBase = mediaData?.parentMediaBase;
+                        if (parentMediaBase) {
+                            const token = new URLSearchParams(window.location.search).get('m');
+                            if (token) {
+                                const sep = parentMediaBase.includes('?') ? '&' : '?';
+                                overlayVideoUrl = `${parentMediaBase}${sep}token=${token}`;
+                                overlayTitleTarget = '_blank';
+                            }
+                        }
+
                         customComponents.current.embedInfoOverlay = new EmbedInfoOverlay(playerRef.current, {
                             authorName: currentVideo.author_name,
                             authorProfile: currentVideo.author_profile,
                             authorThumbnail: currentVideo.author_thumbnail,
                             videoTitle: currentVideo.title,
-                            videoUrl: currentVideo.url,
+                            videoUrl: overlayVideoUrl,
+                            titleTarget: overlayTitleTarget,
                             showTitle: finalShowTitle,
                             showRelated: finalShowRelated,
                             showUserAvatar: finalShowUserAvatar,

frontend-tools/video-js/src/main.jsx

@@ -3,50 +3,52 @@ import { createRoot } from 'react-dom/client';
 
 import VideoJS from './VideoJS.jsx';
 
-// Mount the components when the DOM is ready
-const mountComponents = () => {
-    // Mount main video player
-    const rootContainerMainNew = document.getElementById('video-js-root-main');
-    if (rootContainerMainNew && !rootContainerMainNew.hasChildNodes()) {
-        const rootMain = createRoot(rootContainerMainNew);
-        rootMain.render(
-            <StrictMode>
-                <VideoJS videoId="video-main" />
-            </StrictMode>
-        );
-    }
+// Track root instances keyed by container id.
+// Each entry: { root, container } so we can detect if the DOM element was replaced.
+const roots = {};
 
-    // Mount embed video player
-    const rootContainerEmbedNew = document.getElementById('video-js-root-embed');
-    if (rootContainerEmbedNew && !rootContainerEmbedNew.hasChildNodes()) {
-        const rootEmbed = createRoot(rootContainerEmbedNew);
-        rootEmbed.render(
-            <StrictMode>
-                <VideoJS videoId="video-embed" />
-            </StrictMode>
-        );
+const mountComponents = () => {
+    const containers = [
+        { id: 'video-js-root-main', videoId: 'video-main' },
+        { id: 'video-js-root-embed', videoId: 'video-embed' },
+    ];
+
+    for (const { id, videoId } of containers) {
+        const container = document.getElementById(id);
+        if (!container) continue;
+
+        const existing = roots[id];
+
+        if (existing && existing.container === container) {
+            // Same DOM node — re-render with latest MEDIA_DATA.
+            existing.root.render(
+                <StrictMode>
+                    <VideoJS videoId={videoId} />
+                </StrictMode>
+            );
+        } else {
+            // First mount, or container was replaced (SPA navigation).
+            if (existing) {
+                existing.root.unmount();
+            }
+            const root = createRoot(container);
+            root.render(
+                <StrictMode>
+                    <VideoJS videoId={videoId} />
+                </StrictMode>
+            );
+            roots[id] = { root, container };
+        }
     }
 };
 
-// Expose the mounting function globally for manual triggering
+// Expose globally so VideoJSEmbed can trigger a re-mount after MEDIA_DATA is updated.
 window.triggerVideoJSMount = mountComponents;
 
-// Listen for custom events to trigger mounting
-document.addEventListener('triggerVideoJSMount', () => {
-    mountComponents();
-});
+document.addEventListener('triggerVideoJSMount', mountComponents);
 
-// Initial mount
 if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', mountComponents);
 } else {
     mountComponents();
 }
-
-// Also periodically check for new containers (as a fallback)
-setInterval(() => {
-    const embedContainer = document.getElementById('video-js-root-embed');
-    if (embedContainer && !embedContainer.hasChildNodes()) {
-        mountComponents();
-    }
-}, 1000);