feat: add showRelated option to video player and embed UI

- Added 'showRelated' parameter to control related videos visibility at video end
- Implemented UI toggle in MediaShareEmbed for the 'showRelated' option
- Updated EndScreenHandler to honor the 'showRelated' setting
- Modified EmbedPage and VideoJSEmbed to pass the parameter from URL to player

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

@@ -15,6 +15,7 @@ class EmbedInfoOverlay extends Component {
         this.videoTitle = options.videoTitle || 'Video';
         this.videoUrl = options.videoUrl || '';
         this.showTitle = options.showTitle !== undefined ? options.showTitle : true;
+        this.showRelated = options.showRelated !== undefined ? options.showRelated : true;
 
         // Initialize after player is ready
         this.player().ready(() => {

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

@@ -170,7 +170,7 @@ const enableStandardButtonTooltips = (player) => {
     }, 500); // Delay to ensure all components are ready
 };
 
-function VideoJSPlayer({ videoId = 'default-video', showTitle = true }) {
+function VideoJSPlayer({ videoId = 'default-video', showTitle = true, showRelated = true }) {
     const videoRef = useRef(null);
     const playerRef = useRef(null); // Track the player instance
     const userPreferences = useRef(new UserPreferences()); // User preferences instance
@@ -197,8 +197,21 @@ function VideoJSPlayer({ videoId = 'default-video', showTitle = true }) {
         return showTitle;
     }, [isEmbedPlayer, showTitle]);
 
+    // Read showRelated from URL parameter if available (for embed players)
+    const getShowRelatedFromURL = useMemo(() => {
+        if (isEmbedPlayer && typeof window !== 'undefined') {
+            const urlParams = new URLSearchParams(window.location.search);
+            const urlShowRelated = urlParams.get('showRelated');
+            if (urlShowRelated !== null) {
+                return urlShowRelated === '1' || urlShowRelated === 'true';
+            }
+        }
+        return showRelated;
+    }, [isEmbedPlayer, showRelated]);
+
     // Use URL parameter value if available, otherwise use prop value
     const finalShowTitle = isEmbedPlayer ? getShowTitleFromURL : showTitle;
+    const finalShowRelated = isEmbedPlayer ? getShowRelatedFromURL : showRelated;
 
     // Utility function to detect touch devices
     const isTouchDevice = useMemo(() => {
@@ -1304,6 +1317,7 @@ function VideoJSPlayer({ videoId = 'default-video', showTitle = true }) {
                         currentVideo,
                         relatedVideos,
                         goToNextVideo,
+                        showRelated: finalShowRelated,
                     });
                     customComponents.current.endScreenHandler = endScreenHandler; // Store for cleanup
 
@@ -2224,6 +2238,7 @@ function VideoJSPlayer({ videoId = 'default-video', showTitle = true }) {
                             videoTitle: currentVideo.title,
                             videoUrl: currentVideo.url,
                             showTitle: finalShowTitle,
+                            showRelated: finalShowRelated,
                         });
                     }
                     // END: Add Embed Info Overlay Component

frontend-tools/video-js/src/utils/EndScreenHandler.js

@@ -63,7 +63,15 @@ export class EndScreenHandler {
     }
 
     handleVideoEnded() {
-        const { isEmbedPlayer, userPreferences, mediaData, currentVideo, relatedVideos, goToNextVideo } = this.options;
+        const {
+            isEmbedPlayer,
+            userPreferences,
+            mediaData,
+            currentVideo,
+            relatedVideos,
+            goToNextVideo,
+            showRelated,
+        } = this.options;
 
         // For embed players, show big play button when video ends
         if (isEmbedPlayer) {
@@ -73,6 +81,34 @@ export class EndScreenHandler {
             }
         }
 
+        // If showRelated is false, we don't show the end screen or autoplay countdown
+        if (showRelated === false) {
+            // But we still want to keep the control bar visible and hide the poster
+            setTimeout(() => {
+                if (this.player && !this.player.isDisposed()) {
+                    const playerEl = this.player.el();
+                    if (playerEl) {
+                        // Hide poster elements
+                        const posterElements = playerEl.querySelectorAll('.vjs-poster');
+                        posterElements.forEach((posterEl) => {
+                            posterEl.style.display = 'none';
+                            posterEl.style.visibility = 'hidden';
+                            posterEl.style.opacity = '0';
+                        });
+
+                        // Keep control bar visible
+                        const controlBar = this.player.getChild('controlBar');
+                        if (controlBar) {
+                            controlBar.show();
+                            controlBar.el().style.opacity = '1';
+                            controlBar.el().style.pointerEvents = 'auto';
+                        }
+                    }
+                }
+            }, 50);
+            return;
+        }
+
         // Keep controls active after video ends
         setTimeout(() => {
             if (this.player && !this.player.isDisposed()) {

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

@@ -34,6 +34,7 @@ const VideoJSEmbed = ({
     enableAutoplay,
     inEmbed,
     showTitle,
+    showRelated,
     hasTheaterMode,
     hasNextLink,
     nextLink,
@@ -65,6 +66,7 @@ const VideoJSEmbed = ({
             const urlTimestamp = getUrlParameter('t');
             const urlAutoplay = getUrlParameter('autoplay');
             const urlMuted = getUrlParameter('muted');
+            const urlShowRelated = getUrlParameter('showRelated');
             
             window.MEDIA_DATA = {
                 data: data || {}, 
@@ -86,6 +88,8 @@ const VideoJSEmbed = ({
                 subtitlesInfo: subtitlesInfo || [],
                 enableAutoplay: enableAutoplay || (urlAutoplay === '1'),
                 inEmbed: inEmbed || false,
+                showTitle: showTitle || false,
+                showRelated: showRelated !== undefined ? showRelated : (urlShowRelated === '1' || urlShowRelated === 'true' || urlShowRelated === null),
                 hasTheaterMode: hasTheaterMode || false,
                 hasNextLink: hasNextLink || false,
                 nextLink: nextLink || null,
@@ -95,6 +99,7 @@ const VideoJSEmbed = ({
                 urlTimestamp: urlTimestamp ? parseInt(urlTimestamp, 10) : null,
                 urlAutoplay: urlAutoplay === '1',
                 urlMuted: urlMuted === '1',
+                urlShowRelated: urlShowRelated === '1' || urlShowRelated === 'true',
                 onClickNextCallback: onClickNextCallback || null,
                 onClickPreviousCallback: onClickPreviousCallback || null,
                 onStateUpdateCallback: onStateUpdateCallback || null,

frontend/src/static/js/components/media-actions/MediaShareEmbed.jsx

@@ -20,6 +20,7 @@ export function MediaShareEmbed(props) {
   const [maxHeight, setMaxHeight] = useState(window.innerHeight - 144 + 56);
   const [keepAspectRatio, setKeepAspectRatio] = useState(false);
   const [showTitle, setShowTitle] = useState(false);
+  const [showRelated, setShowRelated] = useState(true);
   const [aspectRatio, setAspectRatio] = useState('16:9');
   const [embedWidthValue, setEmbedWidthValue] = useState(embedVideoDimensions.width);
   const [embedWidthUnit, setEmbedWidthUnit] = useState(embedVideoDimensions.widthUnit);
@@ -97,6 +98,10 @@ export function MediaShareEmbed(props) {
     setShowTitle(!showTitle);
   }
 
+  function onShowRelatedChange() {
+    setShowRelated(!showRelated);
+  }
+
   function onAspectRatioChange() {
     const newVal = aspectRatioValueRef.current.value;
 
@@ -142,8 +147,8 @@ export function MediaShareEmbed(props) {
           <div className="media-embed-wrap">
             <SiteConsumer>
               {(site) => <>
-              {/*  <VideoViewer key={`embed-${showTitle}`} data={MediaPageStore.get('media-data')} siteUrl={site.url} inEmbed={true} showTitle={showTitle} /> */}
-               <iframe width="100%" height="480px" src={`${links.embed + MediaPageStore.get('media-id')}&showTitle=${showTitle ? '1' : '0'}`} frameborder="0" allowfullscreen></iframe>
+              {/*  <VideoViewer key={`embed-${showTitle}-${showRelated}`} data={MediaPageStore.get('media-data')} siteUrl={site.url} inEmbed={true} showTitle={showTitle} showRelated={showRelated} /> */}
+               <iframe width="100%" height="480px" src={`${links.embed + MediaPageStore.get('media-id')}&showTitle=${showTitle ? '1' : '0'}&showRelated=${showRelated ? '1' : '0'}`} frameborder="0" allowfullscreen></iframe>
                </>}
             </SiteConsumer>
           </div>
@@ -174,7 +179,9 @@ export function MediaShareEmbed(props) {
                 '" src="' +
                 links.embed +
                 MediaPageStore.get('media-id') +
-                (showTitle ? (links.embed.includes('?') ? '&showTitle=1' : '?showTitle=1') : '') +
+                (links.embed.includes('?') ? '&' : '?') +
+                'showTitle=' + (showTitle ? '1' : '0') +
+                '&showRelated=' + (showRelated ? '1' : '0') +
                 '" frameborder="0" allowfullscreen></iframe>'
               }
             ></textarea>
@@ -196,6 +203,13 @@ export function MediaShareEmbed(props) {
                       </label>
                     </div>
 
+                    <div className="options-group">
+                      <label style={{ minHeight: '36px' }}>
+                        <input type="checkbox" checked={showRelated} onChange={onShowRelatedChange} />
+                        Show related
+                      </label>
+                    </div>
+
                     <div className="options-group">
                       <label style={{ minHeight: '36px' }}>
                         <input type="checkbox" checked={keepAspectRatio} onChange={onKeepAspectRatioChange} />

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

@@ -412,6 +412,8 @@ export default class VideoViewer extends React.PureComponent {
                                             subtitlesInfo: this.props.data.subtitles_info,
                                             enableAutoplay: !this.props.inEmbed,
                                             inEmbed: this.props.inEmbed,
+                                            showTitle: this.props.showTitle,
+                                            showRelated: this.props.showRelated,
                                             hasTheaterMode: !this.props.inEmbed,
                                             hasNextLink: !!nextLink,
                                             nextLink: nextLink,

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

@@ -59,9 +59,20 @@ export const EmbedPage: React.FC = () => {
 
       {loadedVideo && (
         <SiteConsumer>
-        {(site) => (
-            <VideoViewer data={MediaPageStore.get('media-data')} siteUrl={site.url} containerStyles={containerStyles} />
-          )} 
+        {(site) => {
+            const urlParams = new URLSearchParams(window.location.search);
+            const showTitle = urlParams.get('showTitle') !== '0';
+            const showRelated = urlParams.get('showRelated') !== '0';
+            return (
+              <VideoViewer 
+                data={MediaPageStore.get('media-data')} 
+                siteUrl={site.url} 
+                containerStyles={containerStyles} 
+                showTitle={showTitle}
+                showRelated={showRelated}
+              />
+            );
+          }} 
         </SiteConsumer>
       )}
     </div>