diff --git a/src/app/molecules/media/Media.jsx b/src/app/molecules/media/Media.jsx
index fdac6de6..1177c0ca 100644
--- a/src/app/molecules/media/Media.jsx
+++ b/src/app/molecules/media/Media.jsx
@@ -16,6 +16,7 @@ import PlaySVG from '../../../../public/res/ic/outlined/play.svg';
import { getBlobSafeMimeType } from '../../../util/mimetypes';
import initMatrix from '../../../client/initMatrix';
+import settings from '../../../client/state/settings';
async function getDecryptedBlob(response, type, decryptData) {
const arrayBuffer = await response.arrayBuffer();
@@ -362,23 +363,106 @@ Video.propTypes = {
blurhash: PropTypes.string,
};
-function YoutubeEmbed({ link }) {
- const url = new URL(link);
-
- const [urlPreviewInfo, setUrlPreviewInfo] = useState(null);
+function IframePlayer({
+ children, link, sitename, title, thumbnail,
+}) {
const [videoStarted, setVideoStarted] = useState(false);
- const mx = initMatrix.matrixClient;
-
const handlePlayVideo = () => {
setVideoStarted(true);
};
+ return (
+
url preview here!/div>;
+ // }
+
+ return null;
+}
+Embed.propTypes = {
+ link: PropTypes.string.isRequired,
+};
+
+function YoutubeEmbed({ link }) {
+ const [urlPreviewInfo, setUrlPreviewInfo] = useState(null);
+ const mx = initMatrix.matrixClient;
+ const url = new URL(link);
+
+ // fix for no embed information on www.youtu.be
+ if (url.host === 'www.youtu.be') {
+ url.host = 'youtu.be';
+ }
+
useEffect(() => {
let unmounted = false;
async function getThumbnail() {
- const info = await mx.getUrlPreview(link, 0);
+ const info = await mx.getUrlPreview(url.toString(), 0);
if (unmounted) return;
setUrlPreviewInfo(info);
@@ -391,54 +475,38 @@ function YoutubeEmbed({ link }) {
};
});
- let embedURL = `https://www.youtube-nocookie.com/embed/${url.searchParams.get('v')}?autoplay=1`;
- if (url.searchParams.has('t')) {
+ let videoID;
+ if (url.host === 'youtu.be' || url.host === 'www.youtu.be') {
+ videoID = url.pathname.slice(1);
+ } else {
+ videoID = url.searchParams.get('v');
+ }
+
+ let embedURL = `https://www.youtube-nocookie.com/embed/${videoID}?autoplay=1`;
+ if (url.searchParams.has('t')) { // timestamp flag
embedURL += `&start=${url.searchParams.get('t')}`;
}
- return (
-
- {urlPreviewInfo !== null && (
-
+ if (urlPreviewInfo !== null) {
+ return (
+
+
+
+ );
+ }
-
- {`Youtube - ${urlPreviewInfo['og:title']}`}
-
- window.open(link)}
- />
-
-
-
- {!videoStarted &&
}
- {!videoStarted &&
}
-
- {videoStarted && (
-
- )}
-
-
-
- )}
-
-
- );
+ return null;
}
YoutubeEmbed.propTypes = {
link: PropTypes.string.isRequired,
};
export {
- File, Image, Sticker, Audio, Video, YoutubeEmbed,
+ File, Image, Sticker, Audio, Video, YoutubeEmbed, Embed, IframePlayer,
};
diff --git a/src/app/molecules/message/Message.jsx b/src/app/molecules/message/Message.jsx
index 9f55fa7e..a89362f2 100644
--- a/src/app/molecules/message/Message.jsx
+++ b/src/app/molecules/message/Message.jsx
@@ -5,6 +5,7 @@ import React, {
import PropTypes from 'prop-types';
import './Message.scss';
+import { find } from 'linkifyjs';
import { twemojify } from '../../../util/twemojify';
import initMatrix from '../../../client/initMatrix';
@@ -29,7 +30,6 @@ import IconButton from '../../atoms/button/IconButton';
import Time from '../../atoms/time/Time';
import ContextMenu, { MenuHeader, MenuItem, MenuBorder } from '../../atoms/context-menu/ContextMenu';
import * as Media from '../media/Media';
-import settings from '../../../client/state/settings';
import ReplyArrowIC from '../../../../public/res/ic/outlined/reply-arrow.svg';
import EmojiAddIC from '../../../../public/res/ic/outlined/emoji-add.svg';
@@ -42,7 +42,7 @@ import BinIC from '../../../../public/res/ic/outlined/bin.svg';
import { confirmDialog } from '../confirm-dialog/ConfirmDialog';
import { getBlobSafeMimeType } from '../../../util/mimetypes';
import { html, plain } from '../../../util/markdown';
-import { YoutubeEmbed } from '../media/Media';
+import { Embed } from '../media/Media';
function PlaceholderMessage() {
return (
@@ -718,8 +718,9 @@ function getEditedBody(editedMEvent) {
return [parsedContent.body, isCustomHTML, newContent.formatted_body ?? null];
}
-function findYoutubeLinks(body) {
- return [...new Set(body.match(/https?:\/\/(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)[^ \n]+/g))] ?? [];
+function findLinks(body) {
+ return find(body, 'url')
+ .filter((v, i, a) => a.findIndex((v2) => (v2.href === v.href)) === i);
}
function Message({
@@ -807,8 +808,8 @@ function Message({
isEdited={isEdited}
/>
)}
- {settings.showYoutubeEmbedPlayer && findYoutubeLinks(body).map((link) => (
-
+ {findLinks(body).map((link) => (
+
))}
{isEdit && (