102 lines
3.1 KiB
TypeScript
102 lines
3.1 KiB
TypeScript
import React from 'react';
|
|
import { useSelector } from 'react-redux';
|
|
|
|
import { IReduxState } from '../../../app/types';
|
|
import { VIDEO_SOURCE_TYPES } from '../../constants';
|
|
import { getVideoEmbedUrl, getVideoSourceType, isVideoPlaying } from '../../functions';
|
|
|
|
interface IProps {
|
|
|
|
/**
|
|
* The participant ID (video URL or YouTube ID).
|
|
*/
|
|
participantId: string;
|
|
}
|
|
|
|
/**
|
|
* Component that renders a shared video tile in the filmstrip.
|
|
* Displays the embedded video player inside the filmstrip thumbnail.
|
|
*
|
|
* @param {IProps} props - The component props.
|
|
* @returns {React.ReactElement | null}
|
|
*/
|
|
const SharedVideoTile: React.FC<IProps> = ({ participantId }) => {
|
|
const { videoUrl } = useSelector(
|
|
(state: IReduxState) => state['features/shared-video']
|
|
);
|
|
const isShared = useSelector((state: IReduxState) => isVideoPlaying(state));
|
|
|
|
if (!isShared || participantId !== videoUrl) {
|
|
return null;
|
|
}
|
|
|
|
const sourceType = getVideoSourceType(videoUrl ?? '');
|
|
|
|
const renderPlayer = () => {
|
|
if (!videoUrl) {
|
|
return null;
|
|
}
|
|
|
|
if (sourceType === VIDEO_SOURCE_TYPES.YOUTUBE) {
|
|
// videoUrl is a YouTube ID (not a full URL) for YouTube videos
|
|
const youtubeId = videoUrl.match(/^https?:\/\//) ? null : videoUrl;
|
|
const embedId = youtubeId ?? videoUrl;
|
|
|
|
return (
|
|
<iframe
|
|
allow = 'autoplay; encrypted-media'
|
|
allowFullScreen = { true }
|
|
frameBorder = '0'
|
|
height = '100%'
|
|
src = { `https://www.youtube.com/embed/${embedId}?autoplay=1&controls=1&rel=0` }
|
|
title = 'Shared Video'
|
|
width = '100%' />
|
|
);
|
|
}
|
|
|
|
if (sourceType === VIDEO_SOURCE_TYPES.VIMEO
|
|
|| sourceType === VIDEO_SOURCE_TYPES.DAILYMOTION
|
|
|| sourceType === VIDEO_SOURCE_TYPES.TWITCH) {
|
|
const embedUrl = getVideoEmbedUrl(videoUrl, sourceType);
|
|
|
|
return (
|
|
<iframe
|
|
allow = 'autoplay; encrypted-media; fullscreen'
|
|
allowFullScreen = { true }
|
|
frameBorder = '0'
|
|
height = '100%'
|
|
src = { embedUrl }
|
|
title = 'Shared Video'
|
|
width = '100%' />
|
|
);
|
|
}
|
|
|
|
// Direct video URL
|
|
return (
|
|
<video
|
|
autoPlay = { true }
|
|
controls = { true }
|
|
height = '100%'
|
|
src = { videoUrl }
|
|
width = '100%'>
|
|
<track kind = 'captions' />
|
|
</video>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className = 'shared-video-tile'>
|
|
<div className = 'shared-video-player-wrapper'>
|
|
{renderPlayer()}
|
|
</div>
|
|
<div className = 'shared-video-controls-overlay'>
|
|
<div className = 'shared-video-title'>
|
|
{'Shared Video'}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SharedVideoTile;
|