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

fix embed options

Browse Source
This commit is contained in:
Yiannis Christodoulou
2026-01-08 10:27:44 +02:00
parent c54e46c412
commit f1e69f795f
9 changed files with 2399 additions and 2333 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
__test-iframe/index2.html Normal file
View File

@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MediaCMS Embed Test</title>
<style>
/* CSS Reset for full-page iframe */
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
background-color: #000;
}
</style>
</head>
<body>
<iframe
src="http://localhost/embed?m=6WShYNxZx&showTitle=1&showRelated=1&showUserAvatar=0&linkTitle=0"
width="100%"
height="100%"
frameborder="0"
allowfullscreen
></iframe>
</body>
</html>

109
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 }, 500); // Delay to ensure all components are ready
}; };
function VideoJSPlayer({ videoId = 'default-video', showTitle = true, showRelated = true, showUserAvatar = true, linkTitle = true }) { function VideoJSPlayer({ videoId = 'default-video', showTitle = true, showRelated = true, showUserAvatar = true, linkTitle = true, urlTimestamp = null }) {
const videoRef = useRef(null); const videoRef = useRef(null);
const playerRef = useRef(null); // Track the player instance const playerRef = useRef(null); // Track the player instance
const userPreferences = useRef(new UserPreferences()); // User preferences instance const userPreferences = useRef(new UserPreferences()); // User preferences instance
@@ -185,76 +185,10 @@ function VideoJSPlayer({ videoId = 'default-video', showTitle = true, showRelate
// Check if this is an embed player (disable next video and autoplay features) // Check if this is an embed player (disable next video and autoplay features)
const isEmbedPlayer = videoId === 'video-embed'; const isEmbedPlayer = videoId === 'video-embed';
// Read showTitle from URL parameter if available (for embed players)
const getShowTitleFromURL = useMemo(() => {
if (isEmbedPlayer && typeof window !== 'undefined') {
const urlParams = new URLSearchParams(window.location.search);
const urlShowTitle = urlParams.get('showTitle');
if (urlShowTitle !== null) {
return urlShowTitle === '1' || urlShowTitle === '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]);
// 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]);
// 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(() => {
return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
}, []);
// Utility function to detect iOS devices
const isIOS = useMemo(() => {
return (
/iPad|iPhone|iPod/.test(navigator.userAgent) ||
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
);
}, []);
// Environment-based development mode configuration // Environment-based development mode configuration
const isDevMode = import.meta.env.VITE_DEV_MODE === 'true' || window.location.hostname.includes('vercel.app'); const isDevMode = import.meta.env.VITE_DEV_MODE === 'true' || window.location.hostname.includes('vercel.app');
// Safely access window.MEDIA_DATA with fallback using useMemo
// Read options from window.MEDIA_DATA if available (for consistency with embed logic)
const mediaData = useMemo( const mediaData = useMemo(
() => () =>
typeof window !== 'undefined' && window.MEDIA_DATA typeof window !== 'undefined' && window.MEDIA_DATA
@@ -273,12 +207,37 @@ function VideoJSPlayer({ videoId = 'default-video', showTitle = true, showRelate
}, },
siteUrl: 'https://deic.mediacms.io', siteUrl: 'https://deic.mediacms.io',
nextLink: 'https://deic.mediacms.io/view?m=elygiagorgechania', nextLink: 'https://deic.mediacms.io/view?m=elygiagorgechania',
urlAutoplay: true,
urlMuted: false,
}, },
[] []
); );
// Helper to get effective value (prop or MEDIA_DATA or default)
const getOption = (propKey, mediaDataKey, defaultValue) => {
if (isEmbedPlayer) {
if (mediaData[mediaDataKey] !== undefined) return mediaData[mediaDataKey];
}
return propKey !== undefined ? propKey : defaultValue;
};
const finalShowTitle = getOption(showTitle, 'showTitle', true);
const finalShowRelated = getOption(showRelated, 'showRelated', true);
const finalShowUserAvatar = getOption(showUserAvatar, 'showUserAvatar', true);
const finalLinkTitle = getOption(linkTitle, 'linkTitle', true);
const finalTimestamp = getOption(urlTimestamp, 'urlTimestamp', null);
// Utility function to detect touch devices
const isTouchDevice = useMemo(() => {
return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
}, []);
// Utility function to detect iOS devices
const isIOS = useMemo(() => {
return (
/iPad|iPhone|iPod/.test(navigator.userAgent) ||
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
);
}, []);
// Define chapters as JSON object // Define chapters as JSON object
// Note: The sample-chapters.vtt file is no longer needed as chapters are now loaded from this JSON // Note: The sample-chapters.vtt file is no longer needed as chapters are now loaded from this JSON
// CONDITIONAL LOGIC: // CONDITIONAL LOGIC:
@@ -590,8 +549,6 @@ function VideoJSPlayer({ videoId = 'default-video', showTitle = true, showRelate
isPlayList: mediaData?.isPlayList, isPlayList: mediaData?.isPlayList,
related_media: mediaData.data?.related_media || [], related_media: mediaData.data?.related_media || [],
nextLink: mediaData?.nextLink || null, nextLink: mediaData?.nextLink || null,
urlAutoplay: mediaData?.urlAutoplay || true,
urlMuted: mediaData?.urlMuted || false,
sources: getVideoSources(), sources: getVideoSources(),
}; };
@@ -1366,8 +1323,8 @@ function VideoJSPlayer({ videoId = 'default-video', showTitle = true, showRelate
} }
// Handle URL timestamp parameter // Handle URL timestamp parameter
if (mediaData.urlTimestamp !== null && mediaData.urlTimestamp >= 0) { if (finalTimestamp !== null && finalTimestamp >= 0) {
const timestamp = mediaData.urlTimestamp; const timestamp = finalTimestamp;
// Wait for video metadata to be loaded before seeking // Wait for video metadata to be loaded before seeking
if (playerRef.current.readyState() >= 1) { if (playerRef.current.readyState() >= 1) {
@@ -2417,7 +2374,7 @@ function VideoJSPlayer({ videoId = 'default-video', showTitle = true, showRelate
ref={videoRef} ref={videoRef}
id={videoId} id={videoId}
controls={true} controls={true}
className={`video-js vjs-fluid vjs-default-skin${currentVideo.useRoundedCorners ? ' video-js-rounded-corners' : ''}`} className={`video-js ${isEmbedPlayer ? 'vjs-fill' : 'vjs-fluid'} vjs-default-skin${currentVideo.useRoundedCorners ? ' video-js-rounded-corners' : ''}`}
preload="auto" preload="auto"
poster={currentVideo.poster} poster={currentVideo.poster}
tabIndex="0" tabIndex="0"

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

@@ -31,7 +31,6 @@ const VideoJSEmbed = ({
poster, poster,
previewSprite, previewSprite,
subtitlesInfo, subtitlesInfo,
enableAutoplay,
inEmbed, inEmbed,
showTitle, showTitle,
showRelated, showRelated,
@@ -66,7 +65,6 @@ const VideoJSEmbed = ({
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
// Get URL parameters for autoplay, muted, and timestamp // Get URL parameters for autoplay, muted, and timestamp
const urlTimestamp = getUrlParameter('t'); const urlTimestamp = getUrlParameter('t');
const urlAutoplay = getUrlParameter('autoplay');
const urlMuted = getUrlParameter('muted'); const urlMuted = getUrlParameter('muted');
const urlShowRelated = getUrlParameter('showRelated'); const urlShowRelated = getUrlParameter('showRelated');
const urlShowUserAvatar = getUrlParameter('showUserAvatar'); const urlShowUserAvatar = getUrlParameter('showUserAvatar');
@@ -78,7 +76,7 @@ const VideoJSEmbed = ({
version: version, version: version,
isPlayList: isPlayList, isPlayList: isPlayList,
playerVolume: playerVolume || 0.5, playerVolume: playerVolume || 0.5,
playerSoundMuted: playerSoundMuted || (urlMuted === '1'), playerSoundMuted: urlMuted === '1',
videoQuality: videoQuality || 'auto', videoQuality: videoQuality || 'auto',
videoPlaybackSpeed: videoPlaybackSpeed || 1, videoPlaybackSpeed: videoPlaybackSpeed || 1,
inTheaterMode: inTheaterMode || false, inTheaterMode: inTheaterMode || false,
@@ -90,7 +88,6 @@ const VideoJSEmbed = ({
poster: poster || '', poster: poster || '',
previewSprite: previewSprite || null, previewSprite: previewSprite || null,
subtitlesInfo: subtitlesInfo || [], subtitlesInfo: subtitlesInfo || [],
enableAutoplay: enableAutoplay || (urlAutoplay === '1'),
inEmbed: inEmbed || false, inEmbed: inEmbed || false,
showTitle: showTitle || false, showTitle: showTitle || false,
showRelated: showRelated !== undefined ? showRelated : (urlShowRelated === '1' || urlShowRelated === 'true' || urlShowRelated === null), showRelated: showRelated !== undefined ? showRelated : (urlShowRelated === '1' || urlShowRelated === 'true' || urlShowRelated === null),
@@ -103,7 +100,6 @@ const VideoJSEmbed = ({
errorMessage: errorMessage || '', errorMessage: errorMessage || '',
// URL parameters // URL parameters
urlTimestamp: urlTimestamp ? parseInt(urlTimestamp, 10) : null, urlTimestamp: urlTimestamp ? parseInt(urlTimestamp, 10) : null,
urlAutoplay: urlAutoplay === '1',
urlMuted: urlMuted === '1', urlMuted: urlMuted === '1',
urlShowRelated: urlShowRelated === '1' || urlShowRelated === 'true', urlShowRelated: urlShowRelated === '1' || urlShowRelated === 'true',
urlShowUserAvatar: urlShowUserAvatar === '1' || urlShowUserAvatar === 'true', urlShowUserAvatar: urlShowUserAvatar === '1' || urlShowUserAvatar === 'true',

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

@@ -4,7 +4,6 @@ import { LinksContext, SiteConsumer } from '../../utils/contexts/';
import { PageStore, MediaPageStore } from '../../utils/stores/'; import { PageStore, MediaPageStore } from '../../utils/stores/';
import { PageActions, MediaPageActions } from '../../utils/actions/'; import { PageActions, MediaPageActions } from '../../utils/actions/';
import { CircleIconButton, MaterialIcon, NumericInputWithUnit } from '../_shared/'; import { CircleIconButton, MaterialIcon, NumericInputWithUnit } from '../_shared/';
import VideoViewer from '../media-viewer/VideoViewer';
export function MediaShareEmbed(props) { export function MediaShareEmbed(props) {
const embedVideoDimensions = PageStore.get('config-options').embedded.video.dimensions; const embedVideoDimensions = PageStore.get('config-options').embedded.video.dimensions;
@@ -23,6 +22,9 @@ export function MediaShareEmbed(props) {
const [showRelated, setShowRelated] = useState(true); const [showRelated, setShowRelated] = useState(true);
const [showUserAvatar, setShowUserAvatar] = useState(true); const [showUserAvatar, setShowUserAvatar] = useState(true);
const [linkTitle, setLinkTitle] = useState(true); const [linkTitle, setLinkTitle] = useState(true);
const [responsive, setResponsive] = useState(true);
const [startAt, setStartAt] = useState(false);
const [startTime, setStartTime] = useState('0:00');
const [aspectRatio, setAspectRatio] = useState('16:9'); const [aspectRatio, setAspectRatio] = useState('16:9');
const [embedWidthValue, setEmbedWidthValue] = useState(embedVideoDimensions.width); const [embedWidthValue, setEmbedWidthValue] = useState(embedVideoDimensions.width);
const [embedWidthUnit, setEmbedWidthUnit] = useState(embedVideoDimensions.widthUnit); const [embedWidthUnit, setEmbedWidthUnit] = useState(embedVideoDimensions.widthUnit);
@@ -75,27 +77,6 @@ export function MediaShareEmbed(props) {
setEmbedHeightUnit(newVal); setEmbedHeightUnit(newVal);
} }
function onKeepAspectRatioChange() {
const newVal = !keepAspectRatio;
const arr = aspectRatio.split(':');
const x = arr[0];
const y = arr[1];
setKeepAspectRatio(newVal);
setEmbedWidthUnit(newVal ? 'px' : embedWidthUnit);
setEmbedHeightUnit(newVal ? 'px' : embedHeightUnit);
setEmbedHeightValue(newVal ? parseInt((embedWidthValue * y) / x, 10) : embedHeightValue);
setUnitOptions(
newVal
? [{ key: 'px', label: 'px' }]
: [
{ key: 'px', label: 'px' },
{ key: 'percent', label: '%' },
]
);
}
function onShowTitleChange() { function onShowTitleChange() {
setShowTitle(!showTitle); setShowTitle(!showTitle);
} }
@@ -112,6 +93,37 @@ export function MediaShareEmbed(props) {
setLinkTitle(!linkTitle); setLinkTitle(!linkTitle);
} }
function onResponsiveChange() {
const nextResponsive = !responsive;
setResponsive(nextResponsive);
if (!nextResponsive) {
const arr = aspectRatio.split(':');
const x = arr[0];
const y = arr[1];
setKeepAspectRatio(true);
setEmbedWidthUnit('px');
setEmbedHeightUnit('px');
setEmbedHeightValue(parseInt((embedWidthValue * y) / x, 10));
setUnitOptions([{ key: 'px', label: 'px' }]);
} else {
setKeepAspectRatio(false);
setUnitOptions([
{ key: 'px', label: 'px' },
{ key: 'percent', label: '%' },
]);
}
}
function onStartAtChange() {
setStartAt(!startAt);
}
function onStartTimeChange(e) {
setStartTime(e.target.value);
}
function onAspectRatioChange() { function onAspectRatioChange() {
const newVal = aspectRatioValueRef.current.value; const newVal = aspectRatioValueRef.current.value;
@@ -150,16 +162,62 @@ export function MediaShareEmbed(props) {
}; };
}, []); }, []);
function getEmbedCode() {
const mediaId = MediaPageStore.get('media-id');
const params = new URLSearchParams();
if (showTitle) params.set('showTitle', '1');
else params.set('showTitle', '0');
if (showRelated) params.set('showRelated', '1');
else params.set('showRelated', '0');
if (showUserAvatar) params.set('showUserAvatar', '1');
else params.set('showUserAvatar', '0');
if (linkTitle) params.set('linkTitle', '1');
else params.set('linkTitle', '0');
if (startAt && startTime) {
const parts = startTime.split(':').reverse();
let seconds = 0;
if (parts[0]) seconds += parseInt(parts[0], 10) || 0;
if (parts[1]) seconds += (parseInt(parts[1], 10) || 0) * 60;
if (parts[2]) seconds += (parseInt(parts[2], 10) || 0) * 3600;
if (seconds > 0) params.set('t', seconds);
}
const separator = links.embed.includes('?') ? '&' : '?';
const finalUrl = `${links.embed}${mediaId}${separator}${params.toString()}`;
if (responsive) {
return `<iframe src="${finalUrl}" width="100%" height="100%" frameBorder="0" allowFullScreen></iframe>`;
}
const width = 'percent' === embedWidthUnit ? embedWidthValue + '%' : embedWidthValue;
const height = 'percent' === embedHeightUnit ? embedHeightValue + '%' : embedHeightValue;
return `<iframe width="${width}" height="${height}" src="${finalUrl}" frameBorder="0" allowFullScreen></iframe>`;
}
return ( return (
<div className="share-embed" style={{ maxHeight: maxHeight + 'px' }}> <div className="share-embed" style={{ maxHeight: maxHeight + 'px' }}>
<div className="share-embed-inner"> <div className="share-embed-inner">
<div className="on-left"> <div className="on-left">
<div className="media-embed-wrap"> <div className="media-embed-wrap">
<SiteConsumer> <SiteConsumer>
{(site) => <> {(site) => {
{/* <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} /> */} const previewUrl = `${links.embed + MediaPageStore.get('media-id')}&showTitle=${showTitle ? '1' : '0'}&showRelated=${showRelated ? '1' : '0'}&showUserAvatar=${showUserAvatar ? '1' : '0'}&linkTitle=${linkTitle ? '1' : '0'}${startAt ? '&t=' + (startTime.split(':').reverse().reduce((acc, cur, i) => acc + (parseInt(cur, 10) || 0) * Math.pow(60, i), 0)) : ''}`;
<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>
</>} const style = {};
style.width = '100%';
style.height = '480px';
style.overflow = 'hidden';
return (
<div style={style}>
<iframe width="100%" height="100%" src={previewUrl} frameBorder="0" allowFullScreen></iframe>
</div>
);
}}
</SiteConsumer> </SiteConsumer>
</div> </div>
</div> </div>
@@ -181,21 +239,7 @@ export function MediaShareEmbed(props) {
> >
<textarea <textarea
readOnly readOnly
value={ value={getEmbedCode()}
'<iframe width="' +
('percent' === embedWidthUnit ? embedWidthValue + '%' : embedWidthValue) +
'" height="' +
('percent' === embedHeightUnit ? embedHeightValue + '%' : embedHeightValue) +
'" src="' +
links.embed +
MediaPageStore.get('media-id') +
(links.embed.includes('?') ? '&' : '?') +
'showTitle=' + (showTitle ? '1' : '0') +
'&showRelated=' + (showRelated ? '1' : '0') +
'&showUserAvatar=' + (showUserAvatar ? '1' : '0') +
'&linkTitle=' + (linkTitle ? '1' : '0') +
'" frameborder="0" allowfullscreen></iframe>'
}
></textarea> ></textarea>
<div className="iframe-config"> <div className="iframe-config">
@@ -236,58 +280,85 @@ export function MediaShareEmbed(props) {
</label> </label>
</div> </div>
<div className="options-group"> <div className="options-group" style={{ display: 'flex', alignItems: 'center' }}>
<label style={{ minHeight: '36px', whiteSpace: 'nowrap' }}> <label style={{ minHeight: '36px', whiteSpace: 'nowrap', display: 'flex', alignItems: 'center', marginRight: '10px' }}>
<input type="checkbox" checked={keepAspectRatio} onChange={onKeepAspectRatioChange} /> <input type="checkbox" checked={responsive} onChange={onResponsiveChange} />
Keep aspect ratio Responsive
</label> </label>
</div> </div>
{!keepAspectRatio ? null : ( <div className="options-group" style={{ display: 'flex', alignItems: 'center' }}>
<div className="options-group"> <label style={{ minHeight: '36px', whiteSpace: 'nowrap', display: 'flex', alignItems: 'center', marginRight: '10px' }}>
<select ref={aspectRatioValueRef} onChange={onAspectRatioChange} value={aspectRatio}> <input type="checkbox" checked={startAt} onChange={onStartAtChange} />
<optgroup label="Horizontal orientation"> Start at
<option value="16:9">16:9</option> </label>
<option value="4:3">4:3</option> {startAt && (
<option value="3:2">3:2</option> <input
</optgroup> type="text"
<optgroup label="Vertical orientation"> value={startTime}
<option value="9:16">9:16</option> onChange={onStartTimeChange}
<option value="3:4">3:4</option> style={{ width: '60px', height: '28px', fontSize: '12px', padding: '2px 5px' }}
<option value="2:3">2:3</option> />
</optgroup> )}
</select> </div>
{!responsive && (
<div className="options-group" style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
<div style={{ fontSize: '12px', marginBottom: '4px', color: 'rgba(0,0,0,0.6)' }}>Aspect Ratio</div>
<div style={{ display: 'flex', alignItems: 'center' }}>
<select
ref={aspectRatioValueRef}
onChange={onAspectRatioChange}
value={aspectRatio}
style={{ height: '28px', fontSize: '12px' }}
>
<optgroup label="Horizontal orientation">
<option value="16:9">16:9</option>
<option value="4:3">4:3</option>
<option value="3:2">3:2</option>
</optgroup>
<optgroup label="Vertical orientation">
<option value="9:16">9:16</option>
<option value="3:4">3:4</option>
<option value="2:3">2:3</option>
</optgroup>
</select>
</div>
</div> </div>
)} )}
</div> </div>
<br /> <br />
<div className="options-group"> {!responsive && (
<NumericInputWithUnit <>
valueCallback={onEmbedWidthValueChange} <div className="options-group">
unitCallback={onEmbedWidthUnitChange} <NumericInputWithUnit
label={'Width'} valueCallback={onEmbedWidthValueChange}
defaultValue={parseInt(embedWidthValue, 10)} unitCallback={onEmbedWidthUnitChange}
defaultUnit={embedWidthUnit} label={'Width'}
minValue={1} defaultValue={parseInt(embedWidthValue, 10)}
maxValue={99999} defaultUnit={embedWidthUnit}
units={unitOptions} minValue={1}
/> maxValue={99999}
</div> units={unitOptions}
/>
</div>
<div className="options-group"> <div className="options-group">
<NumericInputWithUnit <NumericInputWithUnit
valueCallback={onEmbedHeightValueChange} valueCallback={onEmbedHeightValueChange}
unitCallback={onEmbedHeightUnitChange} unitCallback={onEmbedHeightUnitChange}
label={'Height'} label={'Height'}
defaultValue={parseInt(embedHeightValue, 10)} defaultValue={parseInt(embedHeightValue, 10)}
defaultUnit={embedHeightUnit} defaultUnit={embedHeightUnit}
minValue={1} minValue={1}
maxValue={99999} maxValue={99999}
units={unitOptions} units={unitOptions}
/> />
</div> </div>
</>
)}
</div> </div>
</div> </div>
</div> </div>

4083
frontend/src/static/js/components/media-page/MediaPage.scss
View File

File diff suppressed because it is too large Load Diff

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

@@ -410,12 +410,12 @@ export default class VideoViewer extends React.PureComponent {
poster: this.videoPoster, poster: this.videoPoster,
previewSprite: previewSprite, previewSprite: previewSprite,
subtitlesInfo: this.props.data.subtitles_info, subtitlesInfo: this.props.data.subtitles_info,
enableAutoplay: !this.props.inEmbed,
inEmbed: this.props.inEmbed, inEmbed: this.props.inEmbed,
showTitle: this.props.showTitle, showTitle: this.props.showTitle,
showRelated: this.props.showRelated, showRelated: this.props.showRelated,
showUserAvatar: this.props.showUserAvatar, showUserAvatar: this.props.showUserAvatar,
linkTitle: this.props.linkTitle, linkTitle: this.props.linkTitle,
urlTimestamp: this.props.timestamp,
hasTheaterMode: !this.props.inEmbed, hasTheaterMode: !this.props.inEmbed,
hasNextLink: !!nextLink, hasNextLink: !!nextLink,
nextLink: nextLink, nextLink: nextLink,
@@ -443,6 +443,7 @@ VideoViewer.defaultProps = {
showRelated: !0, showRelated: !0,
showUserAvatar: !0, showUserAvatar: !0,
linkTitle: !0, linkTitle: !0,
timestamp: null,
siteUrl: PropTypes.string.isRequired, siteUrl: PropTypes.string.isRequired,
}; };
@@ -452,4 +453,5 @@ VideoViewer.propTypes = {
showRelated: PropTypes.bool, showRelated: PropTypes.bool,
showUserAvatar: PropTypes.bool, showUserAvatar: PropTypes.bool,
linkTitle: PropTypes.bool, linkTitle: PropTypes.bool,
timestamp: PropTypes.number,
}; };

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

@@ -41,7 +41,7 @@ export const EmbedPage: React.FC = () => {
}, []); }, []);
return ( return (
<div className="embed-wrap" style={wrapperStyles}> <div className="embed-wrap media-embed-wrap" style={wrapperStyles}>
{failedMediaLoad && ( {failedMediaLoad && (
<div className="player-container player-container-error" style={containerStyles}> <div className="player-container player-container-error" style={containerStyles}>
<div className="player-container-inner" style={containerStyles}> <div className="player-container-inner" style={containerStyles}>
@@ -61,12 +61,17 @@ export const EmbedPage: React.FC = () => {
<SiteConsumer> <SiteConsumer>
{(site) => { {(site) => {
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
const urlShowTitle = urlParams.get('showTitle');
const showTitle = urlShowTitle !== '0';
const urlShowRelated = urlParams.get('showRelated'); const urlShowRelated = urlParams.get('showRelated');
const showRelated = urlShowRelated !== '0'; const showRelated = urlShowRelated !== '0';
const urlShowUserAvatar = urlParams.get('showUserAvatar'); const urlShowUserAvatar = urlParams.get('showUserAvatar');
const showUserAvatar = urlShowUserAvatar !== '0'; const showUserAvatar = urlShowUserAvatar !== '0';
const urlLinkTitle = urlParams.get('linkTitle'); const urlLinkTitle = urlParams.get('linkTitle');
const linkTitle = urlLinkTitle !== '0'; const linkTitle = urlLinkTitle !== '0';
const urlTimestamp = urlParams.get('t');
const timestamp = urlTimestamp ? parseInt(urlTimestamp, 10) : null;
return ( return (
<VideoViewer <VideoViewer
data={MediaPageStore.get('media-data')} data={MediaPageStore.get('media-data')}
@@ -76,6 +81,7 @@ export const EmbedPage: React.FC = () => {
showRelated={showRelated} showRelated={showRelated}
showUserAvatar={showUserAvatar} showUserAvatar={showUserAvatar}
linkTitle={linkTitle} linkTitle={linkTitle}
timestamp={timestamp}
/> />
); );
}} }}

254
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