CopyBot/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2026-01-20 15:22:58 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: add showRelated option to video player and embed UI

Browse Source 
- 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
This commit is contained in:
Yiannis Christodoulou
2026-01-07 12:36:37 +02:00
parent 743d79a08d
commit 54121df1ae
9 changed files with 213 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/static/js/components/VideoJS/VideoJSEmbed.jsx
View File

@@ -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,

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

@@ -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} />

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

@@ -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,

17
frontend/src/static/js/pages/EmbedPage.tsx
View File

@@ -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>