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

feat: add showUserAvatar option to video player and embed UI

Browse Source 
- Added 'showUserAvatar' parameter to control author avatar visibility in embed info overlay
- Implemented UI toggle in MediaShareEmbed for the 'showUserAvatar' option
- Propagated 'showUserAvatar' through EmbedPage, VideoViewer, and VideoJSEmbed
- Updated test iframe index with all 8 combinations of showTitle, showRelated, and showUserAvatar
This commit is contained in:
Yiannis Christodoulou
2026-01-07 12:54:43 +02:00
parent 54121df1ae
commit 4b06cabf93
9 changed files with 191 additions and 148 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

@@ -16,6 +16,7 @@ class EmbedInfoOverlay extends Component {
this.videoUrl = options.videoUrl || '';
this.showTitle = options.showTitle !== undefined ? options.showTitle : true;
this.showRelated = options.showRelated !== undefined ? options.showRelated : true;
this.showUserAvatar = options.showUserAvatar !== undefined ? options.showUserAvatar : true;
// Initialize after player is ready
this.player().ready(() => {
@@ -59,7 +60,7 @@ class EmbedInfoOverlay extends Component {
`;
// Create avatar container
if (this.authorThumbnail) {
if (this.authorThumbnail && this.showUserAvatar) {
const avatarContainer = document.createElement('div');
avatarContainer.className = 'embed-avatar-container';
avatarContainer.style.cssText = `

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 }) {
function VideoJSPlayer({ videoId = 'default-video', showTitle = true, showRelated = true, showUserAvatar = true }) {
const videoRef = useRef(null);
const playerRef = useRef(null); // Track the player instance
const userPreferences = useRef(new UserPreferences()); // User preferences instance
@@ -209,9 +209,22 @@ function VideoJSPlayer({ videoId = 'default-video', showTitle = true, showRelate
return showRelated;
}, [isEmbedPlayer, showRelated]);
// Read showUserAvatar from URL parameter if available (for embed players)
const getShowUserAvatarFromURL = useMemo(() => {
if (isEmbedPlayer && typeof window !== 'undefined') {
const urlParams = new URLSearchParams(window.location.search);
const urlShowUserAvatar = urlParams.get('showUserAvatar');
if (urlShowUserAvatar !== null) {
return urlShowUserAvatar === '1' || urlShowUserAvatar === 'true';
}
}
return showUserAvatar;
}, [isEmbedPlayer, showUserAvatar]);
// 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;
// Utility function to detect touch devices
const isTouchDevice = useMemo(() => {
@@ -1318,6 +1331,7 @@ function VideoJSPlayer({ videoId = 'default-video', showTitle = true, showRelate
relatedVideos,
goToNextVideo,
showRelated: finalShowRelated,
showUserAvatar: finalShowUserAvatar,
});
customComponents.current.endScreenHandler = endScreenHandler; // Store for cleanup
@@ -2239,6 +2253,7 @@ function VideoJSPlayer({ videoId = 'default-video', showTitle = true, showRelate
videoUrl: currentVideo.url,
showTitle: finalShowTitle,
showRelated: finalShowRelated,
showUserAvatar: finalShowUserAvatar,
});
}
// END: Add Embed Info Overlay Component