michael/cinny
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity

Added basic url previews

Browse source
This commit is contained in:
ayes-web 2022-11-17 02:41:58 +02:00
parent 01999ddef2
commit e0eae9606a
2 changed files with 78 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
src/app/molecules/media/Media.jsx
View file

@ -416,31 +416,79 @@ function Embed({ link }) {
return <YoutubeEmbed link={link} />; return <YoutubeEmbed link={link} />;
} }
// TODO: url preview const [urlPreviewInfo, setUrlPreviewInfo] = useState({});
// const [urlPreviewInfo, setUrlPreviewInfo] = useState(null); const mx = initMatrix.matrixClient;
// const mx = initMatrix.matrixClient;
// useEffect(() => { useEffect(() => {
// let unmounted = false; let unmounted = false;
// async function getThumbnail() { async function getUrlPreview() {
// const info = await mx.getUrlPreview(link, 0); const info = await mx.getUrlPreview(link, 0);
// console.log('DEBUG', info); if (unmounted) return;
// if (unmounted) return; setUrlPreviewInfo(info);
}
// setUrlPreviewInfo(info); getUrlPreview();
// }
// getThumbnail(); return () => {
unmounted = true;
};
});
// return () => { if (urlPreviewInfo !== undefined) {
// unmounted = true; // Image only embed
// }; if (urlPreviewInfo['og:image'] != null && urlPreviewInfo['og:image:width'] != null && urlPreviewInfo['og:image:height'] != null && urlPreviewInfo['og:title'] == null && urlPreviewInfo['og:description'] == null) {
// }); return (
<div className="file-container">
<Image
link={mx.mxcUrlToHttp(urlPreviewInfo['og:image'])}
height={urlPreviewInfo['og:image:height']}
width={urlPreviewInfo['og:image:width']}
name={urlPreviewInfo['og:image:alt'] || urlPreviewInfo['og:title'] || urlPreviewInfo['og:site_name'] || ''}
type={urlPreviewInfo['og:image:type']}
/>
</div>
);
}
// if (urlPreviewInfo !== null) { let embedTitle;
// return <div>url preview here!/div>;
// } if (urlPreviewInfo['og:site_name'] != null && urlPreviewInfo['og:title'] != null) {
embedTitle = `${urlPreviewInfo['og:site_name']} - ${urlPreviewInfo['og:title']}`;
} else {
embedTitle = urlPreviewInfo['og:title'] || urlPreviewInfo['og:site_name'];
}
return (
<div className="file-container">
<div className="embed-container">
<div className="embed-text">
{(embedTitle != null) && (
<Text className="embed-title" variant="h2">
{embedTitle}
</Text>
)}
{(urlPreviewInfo['og:description'] != null) && (
<Text className="embed-description" variant="b3">
{urlPreviewInfo['og:description']}
</Text>
)}
</div>
{urlPreviewInfo['og:image'] != null && urlPreviewInfo['og:image:width'] != null && urlPreviewInfo['og:image:height'] != null && (
<Image
link={mx.mxcUrlToHttp(urlPreviewInfo['og:image'])}
height={urlPreviewInfo['og:image:height']}
width={urlPreviewInfo['og:image:width']}
name={urlPreviewInfo['og:image:alt'] || urlPreviewInfo['og:title'] || urlPreviewInfo['og:site_name'] || ''}
type={urlPreviewInfo['og:image:type']}
/>
)}
</div>
</div>
);
}
return null; return null;
} }

11
src/app/molecules/media/Media.scss
View file

@ -88,3 +88,14 @@
width: 100%; width: 100%;
} }
} }
.embed-container {
color: var(--tc-surface-low);
background-color: var(--bg-surface-hover);
border-radius: calc(var(--bo-radius) / 2);
padding: 15px;
.embed-text {
margin-bottom: 5px;
}
}