diff --git a/src/common/components/VideoPlayer.tsx b/src/common/components/VideoPlayer.tsx index ff71c45d4..ede540eb0 100644 --- a/src/common/components/VideoPlayer.tsx +++ b/src/common/components/VideoPlayer.tsx @@ -7,18 +7,21 @@ type VideoPlayerProps = YouTubePlayerProps & { // make the player responsive responsive?: boolean; // set this to not set the full URL + vimeoVideoId?: string; + // set this to not set the full URL youTubeVideoId?: string; }; const VideoPlayerDynamic = React.lazy(async () => { // dynamically import react-player (saves 7kb but still..) + const { default: ReactPlayerVimeo } = await import('react-player/vimeo'); const { default: ReactPlayerYouTube } = await import('react-player/youtube'); return { default: (props: YouTubePlayerProps) => { - const { responsive, youTubeVideoId, ...baseProps } = props; + const { responsive, youTubeVideoId, vimeoVideoId, ...baseProps } = props; // responsive patch if (responsive) { @@ -26,11 +29,17 @@ const VideoPlayerDynamic = React.lazy(async () => { baseProps.height = '100%'; } - // fill in the URL if we have a YouTube video ID - if (youTubeVideoId) { - baseProps.url = `https://www.youtube.com/watch?v=${youTubeVideoId}`; - } + // Vimeo Video ID + if (props.vimeoVideoId) + baseProps.url = `https://vimeo.com/${props.vimeoVideoId}`; + if (baseProps.url?.indexOf('vimeo.') > 0) + return ; + // YouTube video ID + if (youTubeVideoId) + baseProps.url = `https://www.youtube.com/watch?v=${youTubeVideoId}`; + + // fallback to YouTube return ; }, }; diff --git a/src/common/components/modals/GoodModal.tsx b/src/common/components/modals/GoodModal.tsx index f1df7496c..1882e0846 100644 --- a/src/common/components/modals/GoodModal.tsx +++ b/src/common/components/modals/GoodModal.tsx @@ -71,7 +71,7 @@ export function GoodModal(props: { {props.children} {/**/} - {props.dividers === true && } + {props.dividers === true && (!!props.startButton || showBottomClose) && } {(!!props.startButton || showBottomClose) && {props.startButton}