diff --git a/src/app/molecules/media/Media.jsx b/src/app/molecules/media/Media.jsx index e2b61775..fdac6de6 100644 --- a/src/app/molecules/media/Media.jsx +++ b/src/app/molecules/media/Media.jsx @@ -15,6 +15,7 @@ import ExternalSVG from '../../../../public/res/ic/outlined/external.svg'; import PlaySVG from '../../../../public/res/ic/outlined/play.svg'; import { getBlobSafeMimeType } from '../../../util/mimetypes'; +import initMatrix from '../../../client/initMatrix'; async function getDecryptedBlob(response, type, decryptData) { const arrayBuffer = await response.arrayBuffer(); @@ -361,6 +362,83 @@ Video.propTypes = { blurhash: PropTypes.string, }; -export { - File, Image, Sticker, Audio, Video, +function YoutubeEmbed({ link }) { + const url = new URL(link); + + const [urlPreviewInfo, setUrlPreviewInfo] = useState(null); + const [videoStarted, setVideoStarted] = useState(false); + + const mx = initMatrix.matrixClient; + + const handlePlayVideo = () => { + setVideoStarted(true); + }; + + useEffect(() => { + let unmounted = false; + + async function getThumbnail() { + const info = await mx.getUrlPreview(link, 0); + if (unmounted) return; + + setUrlPreviewInfo(info); + } + + getThumbnail(); + + return () => { + unmounted = true; + }; + }); + + let embedURL = `https://www.youtube-nocookie.com/embed/${url.searchParams.get('v')}?autoplay=1`; + if (url.searchParams.has('t')) { + embedURL += `&start=${url.searchParams.get('t')}`; + } + + return ( +
+ {urlPreviewInfo !== null && ( +
+ +
+ {`Youtube - ${urlPreviewInfo['og:title']}`} + + window.open(link)} + /> +
+ +
+ {!videoStarted && Youtube thumbnail} + {!videoStarted && } + + {videoStarted && ( +