Skip to content

Commit eae5793

Browse files
YiannistaosYiannistaos
committed
fix embed options
1 parent bc076f0 commit eae5793

File tree

12 files changed

+2403
-2337
lines changed

12 files changed

+2403
-2337
lines changed

‎__test-iframe/index2.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>MediaCMS Embed Test</title>
7+
<style>
8+
/* CSS Reset for full-page iframe */
9+
html,
10+
body {
11+
margin: 0;
12+
padding: 0;
13+
height: 100%;
14+
width: 100%;
15+
overflow: hidden;
16+
background-color: #000;
17+
}
18+
</style>
19+
</head>
20+
<body>
21+
<iframe
22+
src="http://localhost/embed?m=6WShYNxZx&showTitle=1&showRelated=1&showUserAvatar=0&linkTitle=0"
23+
width="100%"
24+
height="100%"
25+
frameborder="0"
26+
allowfullscreen
27+
></iframe>
28+
</body>
29+
</html>

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

Lines changed: 33 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,7 @@ const enableStandardButtonTooltips = (player) => {
170170
}, 500); // Delay to ensure all components are ready
171171
};
172172

173-
function VideoJSPlayer({ videoId = 'default-video', showTitle = true, showRelated = true, showUserAvatar = true, linkTitle = true }) {
173+
function VideoJSPlayer({ videoId = 'default-video', showTitle = true, showRelated = true, showUserAvatar = true, linkTitle = true, urlTimestamp = null }) {
174174
const videoRef = useRef(null);
175175
const playerRef = useRef(null); // Track the player instance
176176
const userPreferences = useRef(new UserPreferences()); // User preferences instance
@@ -185,76 +185,10 @@ function VideoJSPlayer({ videoId = 'default-video', showTitle = true, showRelate
185185
// Check if this is an embed player (disable next video and autoplay features)
186186
const isEmbedPlayer = videoId === 'video-embed';
187187

188-
// Read showTitle from URL parameter if available (for embed players)
189-
const getShowTitleFromURL = useMemo(() => {
190-
if (isEmbedPlayer && typeof window !== 'undefined') {
191-
const urlParams = new URLSearchParams(window.location.search);
192-
const urlShowTitle = urlParams.get('showTitle');
193-
if (urlShowTitle !== null) {
194-
return urlShowTitle === '1' || urlShowTitle === 'true';
195-
}
196-
}
197-
return showTitle;
198-
}, [isEmbedPlayer, showTitle]);
199-
200-
// Read showRelated from URL parameter if available (for embed players)
201-
const getShowRelatedFromURL = useMemo(() => {
202-
if (isEmbedPlayer && typeof window !== 'undefined') {
203-
const urlParams = new URLSearchParams(window.location.search);
204-
const urlShowRelated = urlParams.get('showRelated');
205-
if (urlShowRelated !== null) {
206-
return urlShowRelated === '1' || urlShowRelated === 'true';
207-
}
208-
}
209-
return showRelated;
210-
}, [isEmbedPlayer, showRelated]);
211-
212-
// Read showUserAvatar from URL parameter if available (for embed players)
213-
const getShowUserAvatarFromURL = useMemo(() => {
214-
if (isEmbedPlayer && typeof window !== 'undefined') {
215-
const urlParams = new URLSearchParams(window.location.search);
216-
const urlShowUserAvatar = urlParams.get('showUserAvatar');
217-
if (urlShowUserAvatar !== null) {
218-
return urlShowUserAvatar === '1' || urlShowUserAvatar === 'true';
219-
}
220-
}
221-
return showUserAvatar;
222-
}, [isEmbedPlayer, showUserAvatar]);
223-
224-
// Read linkTitle from URL parameter if available (for embed players)
225-
const getLinkTitleFromURL = useMemo(() => {
226-
if (isEmbedPlayer && typeof window !== 'undefined') {
227-
const urlParams = new URLSearchParams(window.location.search);
228-
const urlLinkTitle = urlParams.get('linkTitle');
229-
if (urlLinkTitle !== null) {
230-
return urlLinkTitle === '1' || urlLinkTitle === 'true';
231-
}
232-
}
233-
return linkTitle;
234-
}, [isEmbedPlayer, linkTitle]);
235-
236-
// Use URL parameter value if available, otherwise use prop value
237-
const finalShowTitle = isEmbedPlayer ? getShowTitleFromURL : showTitle;
238-
const finalShowRelated = isEmbedPlayer ? getShowRelatedFromURL : showRelated;
239-
const finalShowUserAvatar = isEmbedPlayer ? getShowUserAvatarFromURL : showUserAvatar;
240-
const finalLinkTitle = isEmbedPlayer ? getLinkTitleFromURL : linkTitle;
241-
242-
// Utility function to detect touch devices
243-
const isTouchDevice = useMemo(() => {
244-
return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
245-
}, []);
246-
247-
// Utility function to detect iOS devices
248-
const isIOS = useMemo(() => {
249-
return (
250-
/iPad|iPhone|iPod/.test(navigator.userAgent) ||
251-
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
252-
);
253-
}, []);
254-
255188
// Environment-based development mode configuration
256189
const isDevMode = import.meta.env.VITE_DEV_MODE === 'true' || window.location.hostname.includes('vercel.app');
257-
// Safely access window.MEDIA_DATA with fallback using useMemo
190+
191+
// Read options from window.MEDIA_DATA if available (for consistency with embed logic)
258192
const mediaData = useMemo(
259193
() =>
260194
typeof window !== 'undefined' && window.MEDIA_DATA
@@ -273,12 +207,37 @@ function VideoJSPlayer({ videoId = 'default-video', showTitle = true, showRelate
273207
},
274208
siteUrl: 'https://deic.mediacms.io',
275209
nextLink: 'https://deic.mediacms.io/view?m=elygiagorgechania',
276-
urlAutoplay: true,
277-
urlMuted: false,
278210
},
279211
[]
280212
);
281213

214+
// Helper to get effective value (prop or MEDIA_DATA or default)
215+
const getOption = (propKey, mediaDataKey, defaultValue) => {
216+
if (isEmbedPlayer) {
217+
if (mediaData[mediaDataKey] !== undefined) return mediaData[mediaDataKey];
218+
}
219+
return propKey !== undefined ? propKey : defaultValue;
220+
};
221+
222+
const finalShowTitle = getOption(showTitle, 'showTitle', true);
223+
const finalShowRelated = getOption(showRelated, 'showRelated', true);
224+
const finalShowUserAvatar = getOption(showUserAvatar, 'showUserAvatar', true);
225+
const finalLinkTitle = getOption(linkTitle, 'linkTitle', true);
226+
const finalTimestamp = getOption(urlTimestamp, 'urlTimestamp', null);
227+
228+
// Utility function to detect touch devices
229+
const isTouchDevice = useMemo(() => {
230+
return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
231+
}, []);
232+
233+
// Utility function to detect iOS devices
234+
const isIOS = useMemo(() => {
235+
return (
236+
/iPad|iPhone|iPod/.test(navigator.userAgent) ||
237+
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
238+
);
239+
}, []);
240+
282241
// Define chapters as JSON object
283242
// Note: The sample-chapters.vtt file is no longer needed as chapters are now loaded from this JSON
284243
// CONDITIONAL LOGIC:
@@ -590,8 +549,6 @@ function VideoJSPlayer({ videoId = 'default-video', showTitle = true, showRelate
590549
isPlayList: mediaData?.isPlayList,
591550
related_media: mediaData.data?.related_media || [],
592551
nextLink: mediaData?.nextLink || null,
593-
urlAutoplay: mediaData?.urlAutoplay || true,
594-
urlMuted: mediaData?.urlMuted || false,
595552
sources: getVideoSources(),
596553
};
597554

@@ -1366,8 +1323,8 @@ function VideoJSPlayer({ videoId = 'default-video', showTitle = true, showRelate
13661323
}
13671324

13681325
// Handle URL timestamp parameter
1369-
if (mediaData.urlTimestamp !== null && mediaData.urlTimestamp >= 0) {
1370-
const timestamp = mediaData.urlTimestamp;
1326+
if (finalTimestamp !== null && finalTimestamp >= 0) {
1327+
const timestamp = finalTimestamp;
13711328

13721329
// Wait for video metadata to be loaded before seeking
13731330
if (playerRef.current.readyState() >= 1) {
@@ -2417,7 +2374,7 @@ function VideoJSPlayer({ videoId = 'default-video', showTitle = true, showRelate
24172374
ref={videoRef}
24182375
id={videoId}
24192376
controls={true}
2420-
className={`video-js vjs-fluid vjs-default-skin${currentVideo.useRoundedCorners ? ' video-js-rounded-corners' : ''}`}
2377+
className={`video-js ${isEmbedPlayer ? 'vjs-fill' : 'vjs-fluid'} vjs-default-skin${currentVideo.useRoundedCorners ? ' video-js-rounded-corners' : ''}`}
24212378
preload="auto"
24222379
poster={currentVideo.poster}
24232380
tabIndex="0"

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

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ const VideoJSEmbed = ({
3131
poster,
3232
previewSprite,
3333
subtitlesInfo,
34-
enableAutoplay,
3534
inEmbed,
3635
showTitle,
3736
showRelated,
@@ -66,7 +65,6 @@ const VideoJSEmbed = ({
6665
if (typeof window !== 'undefined') {
6766
// Get URL parameters for autoplay, muted, and timestamp
6867
const urlTimestamp = getUrlParameter('t');
69-
const urlAutoplay = getUrlParameter('autoplay');
7068
const urlMuted = getUrlParameter('muted');
7169
const urlShowRelated = getUrlParameter('showRelated');
7270
const urlShowUserAvatar = getUrlParameter('showUserAvatar');
@@ -78,7 +76,7 @@ const VideoJSEmbed = ({
7876
version: version,
7977
isPlayList: isPlayList,
8078
playerVolume: playerVolume || 0.5,
81-
playerSoundMuted: playerSoundMuted || (urlMuted === '1'),
79+
playerSoundMuted: urlMuted === '1',
8280
videoQuality: videoQuality || 'auto',
8381
videoPlaybackSpeed: videoPlaybackSpeed || 1,
8482
inTheaterMode: inTheaterMode || false,
@@ -90,7 +88,6 @@ const VideoJSEmbed = ({
9088
poster: poster || '',
9189
previewSprite: previewSprite || null,
9290
subtitlesInfo: subtitlesInfo || [],
93-
enableAutoplay: enableAutoplay || (urlAutoplay === '1'),
9491
inEmbed: inEmbed || false,
9592
showTitle: showTitle || false,
9693
showRelated: showRelated !== undefined ? showRelated : (urlShowRelated === '1' || urlShowRelated === 'true' || urlShowRelated === null),
@@ -103,7 +100,6 @@ const VideoJSEmbed = ({
103100
errorMessage: errorMessage || '',
104101
// URL parameters
105102
urlTimestamp: urlTimestamp ? parseInt(urlTimestamp, 10) : null,
106-
urlAutoplay: urlAutoplay === '1',
107103
urlMuted: urlMuted === '1',
108104
urlShowRelated: urlShowRelated === '1' || urlShowRelated === 'true',
109105
urlShowUserAvatar: urlShowUserAvatar === '1' || urlShowUserAvatar === 'true',

0 commit comments

Comments
 (0)