Adjusted styling and classes
This commit is contained in:
parent
f50e37ea36
commit
dd22a92e33
2 changed files with 50 additions and 41 deletions
|
@ -373,6 +373,7 @@ function IframePlayer({
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="iframeplayer">
|
||||
<div className="file-container">
|
||||
<div className="file-header">
|
||||
<Text className="file-name" variant="b3">{`${sitename} - ${title}`}</Text>
|
||||
|
@ -385,18 +386,18 @@ function IframePlayer({
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="video-container"
|
||||
>
|
||||
{!videoStarted && <img src={thumbnail} alt={`${sitename} thumbnail`} />}
|
||||
{!videoStarted && <IconButton onClick={handlePlayVideo} tooltip="Play video" src={PlaySVG} />}
|
||||
|
||||
{videoStarted && (
|
||||
<div className="video-container">
|
||||
{videoStarted ? (
|
||||
<div>
|
||||
{children}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<img src={thumbnail} alt={`${sitename} thumbnail`} />
|
||||
<IconButton onClick={handlePlayVideo} tooltip="Play video" src={PlaySVG} />
|
||||
</>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
@ -454,17 +455,19 @@ function Embed({ link }) {
|
|||
// Image only embed
|
||||
if (image != null && urlPreviewInfo['og:title'] == null && urlPreviewInfo['og:description'] == null) {
|
||||
return (
|
||||
<div className="embed-container">
|
||||
<div className="file-container">
|
||||
{image}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const embedTitle = urlPreviewInfo['og:title'] || urlPreviewInfo['og:site_name'];
|
||||
|
||||
return (
|
||||
<div className="file-container">
|
||||
<div className="embed-container">
|
||||
<div className="file-container embed">
|
||||
<div className="embed-text">
|
||||
{(embedTitle != null) && (
|
||||
<Text className="embed-title" variant="h2">
|
||||
|
@ -536,6 +539,7 @@ function YoutubeEmbed({ link }) {
|
|||
|
||||
if (urlPreviewInfo !== null) {
|
||||
return (
|
||||
<div className="embed-container">
|
||||
<IframePlayer link={link} sitename="Youtube" title={urlPreviewInfo['og:title']} thumbnail={mx.mxcUrlToHttp(urlPreviewInfo['og:image'])}>
|
||||
<iframe
|
||||
src={embedURL}
|
||||
|
@ -545,6 +549,7 @@ function YoutubeEmbed({ link }) {
|
|||
allowFullScreen
|
||||
/>
|
||||
</IframePlayer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -90,6 +90,9 @@
|
|||
}
|
||||
|
||||
.embed-container {
|
||||
margin-top: 5px;
|
||||
|
||||
.embed {
|
||||
color: var(--tc-surface-low);
|
||||
background-color: var(--bg-surface-hover);
|
||||
border-radius: calc(var(--bo-radius) / 2);
|
||||
|
@ -99,3 +102,4 @@
|
|||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue