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

feat: add linkTitle options to embed player

Browse Source 
- Added 'linkTitle' to toggle between clickable and
This commit is contained in:
Yiannis Christodoulou
2026-01-07 13:03:57 +02:00
parent 4b06cabf93
commit eac08a51a8
9 changed files with 181 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend-tools/video-js/src/components/overlays/EmbedInfoOverlay.js
View File

@@ -17,6 +17,7 @@ class EmbedInfoOverlay extends Component {
this.showTitle = options.showTitle !== undefined ? options.showTitle : true;
this.showRelated = options.showRelated !== undefined ? options.showRelated : true;
this.showUserAvatar = options.showUserAvatar !== undefined ? options.showUserAvatar : true;
this.linkTitle = options.linkTitle !== undefined ? options.linkTitle : true;
// Initialize after player is ready
this.player().ready(() => {
@@ -136,7 +137,7 @@ class EmbedInfoOverlay extends Component {
overflow: hidden;
`;
if (this.videoUrl) {
if (this.videoUrl && this.linkTitle) {
const titleLink = document.createElement('a');
titleLink.href = this.videoUrl;
titleLink.target = '_blank';

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

@@ -170,7 +170,7 @@ const enableStandardButtonTooltips = (player) => {
}, 500); // Delay to ensure all components are ready
};
function VideoJSPlayer({ videoId = 'default-video', showTitle = true, showRelated = true, showUserAvatar = true }) {
function VideoJSPlayer({ videoId = 'default-video', showTitle = true, showRelated = true, showUserAvatar = true, linkTitle = true }) {
const videoRef = useRef(null);
const playerRef = useRef(null); // Track the player instance
const userPreferences = useRef(new UserPreferences()); // User preferences instance
@@ -221,10 +221,23 @@ function VideoJSPlayer({ videoId = 'default-video', showTitle = true, showRelate
return showUserAvatar;
}, [isEmbedPlayer, showUserAvatar]);
// Read linkTitle from URL parameter if available (for embed players)
const getLinkTitleFromURL = useMemo(() => {
if (isEmbedPlayer && typeof window !== 'undefined') {
const urlParams = new URLSearchParams(window.location.search);
const urlLinkTitle = urlParams.get('linkTitle');
if (urlLinkTitle !== null) {
return urlLinkTitle === '1' || urlLinkTitle === 'true';
}
}
return linkTitle;
}, [isEmbedPlayer, linkTitle]);
// Use URL parameter value if available, otherwise use prop value
const finalShowTitle = isEmbedPlayer ? getShowTitleFromURL : showTitle;
const finalShowRelated = isEmbedPlayer ? getShowRelatedFromURL : showRelated;
const finalShowUserAvatar = isEmbedPlayer ? getShowUserAvatarFromURL : showUserAvatar;
const finalLinkTitle = isEmbedPlayer ? getLinkTitleFromURL : linkTitle;
// Utility function to detect touch devices
const isTouchDevice = useMemo(() => {
@@ -1332,6 +1345,7 @@ function VideoJSPlayer({ videoId = 'default-video', showTitle = true, showRelate
goToNextVideo,
showRelated: finalShowRelated,
showUserAvatar: finalShowUserAvatar,
linkTitle: finalLinkTitle,
});
customComponents.current.endScreenHandler = endScreenHandler; // Store for cleanup
@@ -2254,6 +2268,7 @@ function VideoJSPlayer({ videoId = 'default-video', showTitle = true, showRelate
showTitle: finalShowTitle,
showRelated: finalShowRelated,
showUserAvatar: finalShowUserAvatar,
linkTitle: finalLinkTitle,
});
}
// END: Add Embed Info Overlay Component

1
frontend-tools/video-js/src/utils/EndScreenHandler.js
View File

@@ -72,6 +72,7 @@ export class EndScreenHandler {
goToNextVideo,
showRelated,
showUserAvatar,
linkTitle,
} = this.options;
// For embed players, show big play button when video ends

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

@@ -36,6 +36,7 @@ const VideoJSEmbed = ({
showTitle,
showRelated,
showUserAvatar,
linkTitle,
hasTheaterMode,
hasNextLink,
nextLink,
@@ -69,6 +70,7 @@ const VideoJSEmbed = ({
const urlMuted = getUrlParameter('muted');
const urlShowRelated = getUrlParameter('showRelated');
const urlShowUserAvatar = getUrlParameter('showUserAvatar');
const urlLinkTitle = getUrlParameter('linkTitle');
window.MEDIA_DATA = {
data: data || {},
@@ -93,6 +95,7 @@ const VideoJSEmbed = ({
showTitle: showTitle || false,
showRelated: showRelated !== undefined ? showRelated : (urlShowRelated === '1' || urlShowRelated === 'true' || urlShowRelated === null),
showUserAvatar: showUserAvatar !== undefined ? showUserAvatar : (urlShowUserAvatar === '1' || urlShowUserAvatar === 'true' || urlShowUserAvatar === null),
linkTitle: linkTitle !== undefined ? linkTitle : (urlLinkTitle === '1' || urlLinkTitle === 'true' || urlLinkTitle === null),
hasTheaterMode: hasTheaterMode || false,
hasNextLink: hasNextLink || false,
nextLink: nextLink || null,
@@ -104,6 +107,7 @@ const VideoJSEmbed = ({
urlMuted: urlMuted === '1',
urlShowRelated: urlShowRelated === '1' || urlShowRelated === 'true',
urlShowUserAvatar: urlShowUserAvatar === '1' || urlShowUserAvatar === 'true',
urlLinkTitle: urlLinkTitle === '1' || urlLinkTitle === 'true',
onClickNextCallback: onClickNextCallback || null,
onClickPreviousCallback: onClickPreviousCallback || null,
onStateUpdateCallback: onStateUpdateCallback || null,

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

@@ -22,6 +22,7 @@ export function MediaShareEmbed(props) {
const [showTitle, setShowTitle] = useState(false);
const [showRelated, setShowRelated] = useState(true);
const [showUserAvatar, setShowUserAvatar] = useState(true);
const [linkTitle, setLinkTitle] = useState(true);
const [aspectRatio, setAspectRatio] = useState('16:9');
const [embedWidthValue, setEmbedWidthValue] = useState(embedVideoDimensions.width);
const [embedWidthUnit, setEmbedWidthUnit] = useState(embedVideoDimensions.widthUnit);
@@ -107,6 +108,10 @@ export function MediaShareEmbed(props) {
setShowUserAvatar(!showUserAvatar);
}
function onLinkTitleChange() {
setLinkTitle(!linkTitle);
}
function onAspectRatioChange() {
const newVal = aspectRatioValueRef.current.value;
@@ -152,8 +157,8 @@ export function MediaShareEmbed(props) {
<div className="media-embed-wrap">
<SiteConsumer>
{(site) => <>
{/* <VideoViewer key={`embed-${showTitle}-${showRelated}-${showUserAvatar}`} data={MediaPageStore.get('media-data')} siteUrl={site.url} inEmbed={true} showTitle={showTitle} showRelated={showRelated} showUserAvatar={showUserAvatar} /> */}
<iframe width="100%" height="480px" src={`${links.embed + MediaPageStore.get('media-id')}&showTitle=${showTitle ? '1' : '0'}&showRelated=${showRelated ? '1' : '0'}&showUserAvatar=${showUserAvatar ? '1' : '0'}`} frameborder="0" allowfullscreen></iframe>
{/* <VideoViewer key={`embed-${showTitle}-${showRelated}-${showUserAvatar}-${linkTitle}`} data={MediaPageStore.get('media-data')} siteUrl={site.url} inEmbed={true} showTitle={showTitle} showRelated={showRelated} showUserAvatar={showUserAvatar} linkTitle={linkTitle} /> */}
<iframe width="100%" height="480px" src={`${links.embed + MediaPageStore.get('media-id')}&showTitle=${showTitle ? '1' : '0'}&showRelated=${showRelated ? '1' : '0'}&showUserAvatar=${showUserAvatar ? '1' : '0'}&linkTitle=${linkTitle ? '1' : '0'}`} frameborder="0" allowfullscreen></iframe>
</>}
</SiteConsumer>
</div>
@@ -188,6 +193,7 @@ export function MediaShareEmbed(props) {
'showTitle=' + (showTitle ? '1' : '0') +
'&showRelated=' + (showRelated ? '1' : '0') +
'&showUserAvatar=' + (showUserAvatar ? '1' : '0') +
'&linkTitle=' + (linkTitle ? '1' : '0') +
'" frameborder="0" allowfullscreen></iframe>'
}
></textarea>
@@ -209,6 +215,15 @@ export function MediaShareEmbed(props) {
</label>
</div>
{showTitle && (
<div className="options-group" style={{ paddingLeft: '20px' }}>
<label style={{ minHeight: '36px' }}>
<input type="checkbox" checked={linkTitle} onChange={onLinkTitleChange} />
Link title
</label>
</div>
)}
<div className="options-group">
<label style={{ minHeight: '36px' }}>
<input type="checkbox" checked={showRelated} onChange={onShowRelatedChange} />

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

@@ -415,6 +415,7 @@ export default class VideoViewer extends React.PureComponent {
showTitle: this.props.showTitle,
showRelated: this.props.showRelated,
showUserAvatar: this.props.showUserAvatar,
linkTitle: this.props.linkTitle,
hasTheaterMode: !this.props.inEmbed,
hasNextLink: !!nextLink,
nextLink: nextLink,
@@ -441,6 +442,7 @@ VideoViewer.defaultProps = {
showTitle: !0,
showRelated: !0,
showUserAvatar: !0,
linkTitle: !0,
siteUrl: PropTypes.string.isRequired,
};
@@ -449,4 +451,5 @@ VideoViewer.propTypes = {
showTitle: PropTypes.bool,
showRelated: PropTypes.bool,
showUserAvatar: PropTypes.bool,
linkTitle: PropTypes.bool,
};

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

@@ -61,9 +61,12 @@ export const EmbedPage: React.FC = () => {
<SiteConsumer>
{(site) => {
const urlParams = new URLSearchParams(window.location.search);
const showTitle = urlParams.get('showTitle') !== '0';
const showRelated = urlParams.get('showRelated') !== '0';
const showUserAvatar = urlParams.get('showUserAvatar') !== '0';
const urlShowRelated = urlParams.get('showRelated');
const showRelated = urlShowRelated !== '0';
const urlShowUserAvatar = urlParams.get('showUserAvatar');
const showUserAvatar = urlShowUserAvatar !== '0';
const urlLinkTitle = urlParams.get('linkTitle');
const linkTitle = urlLinkTitle !== '0';
return (
<VideoViewer
data={MediaPageStore.get('media-data')}
@@ -72,6 +75,7 @@ export const EmbedPage: React.FC = () => {
showTitle={showTitle}
showRelated={showRelated}
showUserAvatar={showUserAvatar}
linkTitle={linkTitle}
/>
);
}}

260
static/video_js/video-js.js
View File

File diff suppressed because one or more lines are too long

2
static/video_js/video-js.js.map
View File

File diff suppressed because one or more lines are too long