Adjusted styling and classes

This commit is contained in:
Ayes 2022-11-18 22:11:12 +02:00
parent f50e37ea36
commit dd22a92e33
2 changed files with 50 additions and 41 deletions

View file

@ -373,6 +373,7 @@ function IframePlayer({
}; };
return ( return (
<div className="iframeplayer">
<div className="file-container"> <div className="file-container">
<div className="file-header"> <div className="file-header">
<Text className="file-name" variant="b3">{`${sitename} - ${title}`}</Text> <Text className="file-name" variant="b3">{`${sitename} - ${title}`}</Text>
@ -385,18 +386,18 @@ function IframePlayer({
/> />
</div> </div>
<div <div className="video-container">
className="video-container" {videoStarted ? (
>
{!videoStarted && <img src={thumbnail} alt={`${sitename} thumbnail`} />}
{!videoStarted && <IconButton onClick={handlePlayVideo} tooltip="Play video" src={PlaySVG} />}
{videoStarted && (
<div> <div>
{children} {children}
</div> </div>
) : (
<>
<img src={thumbnail} alt={`${sitename} thumbnail`} />
<IconButton onClick={handlePlayVideo} tooltip="Play video" src={PlaySVG} />
</>
)} )}
</div>
</div> </div>
</div> </div>
); );
@ -454,17 +455,19 @@ function Embed({ link }) {
// Image only embed // Image only embed
if (image != null && urlPreviewInfo['og:title'] == null && urlPreviewInfo['og:description'] == null) { if (image != null && urlPreviewInfo['og:title'] == null && urlPreviewInfo['og:description'] == null) {
return ( return (
<div className="embed-container">
<div className="file-container"> <div className="file-container">
{image} {image}
</div> </div>
</div>
); );
} }
const embedTitle = urlPreviewInfo['og:title'] || urlPreviewInfo['og:site_name']; const embedTitle = urlPreviewInfo['og:title'] || urlPreviewInfo['og:site_name'];
return ( return (
<div className="file-container">
<div className="embed-container"> <div className="embed-container">
<div className="file-container embed">
<div className="embed-text"> <div className="embed-text">
{(embedTitle != null) && ( {(embedTitle != null) && (
<Text className="embed-title" variant="h2"> <Text className="embed-title" variant="h2">
@ -536,6 +539,7 @@ function YoutubeEmbed({ link }) {
if (urlPreviewInfo !== null) { if (urlPreviewInfo !== null) {
return ( return (
<div className="embed-container">
<IframePlayer link={link} sitename="Youtube" title={urlPreviewInfo['og:title']} thumbnail={mx.mxcUrlToHttp(urlPreviewInfo['og:image'])}> <IframePlayer link={link} sitename="Youtube" title={urlPreviewInfo['og:title']} thumbnail={mx.mxcUrlToHttp(urlPreviewInfo['og:image'])}>
<iframe <iframe
src={embedURL} src={embedURL}
@ -545,6 +549,7 @@ function YoutubeEmbed({ link }) {
allowFullScreen allowFullScreen
/> />
</IframePlayer> </IframePlayer>
</div>
); );
} }

View file

@ -90,6 +90,9 @@
} }
.embed-container { .embed-container {
margin-top: 5px;
.embed {
color: var(--tc-surface-low); color: var(--tc-surface-low);
background-color: var(--bg-surface-hover); background-color: var(--bg-surface-hover);
border-radius: calc(var(--bo-radius) / 2); border-radius: calc(var(--bo-radius) / 2);
@ -99,3 +102,4 @@
margin-bottom: 5px; margin-bottom: 5px;
} }
} }
}