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

Adjusted styling and classes

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -373,30 +373,31 @@ function IframePlayer({
}; };
return ( return (
<div className="file-container"> <div className="iframeplayer">
<div className="file-header"> <div className="file-container">
<Text className="file-name" variant="b3">{`${sitename} - ${title}`}</Text> <div className="file-header">
<Text className="file-name" variant="b3">{`${sitename} - ${title}`}</Text>
<IconButton <IconButton
size="extra-small" size="extra-small"
tooltip="Open in new tab" tooltip="Open in new tab"
src={ExternalSVG} src={ExternalSVG}
onClick={() => window.open(link)} onClick={() => window.open(link)}
/> />
</div> </div>
<div
className="video-container"
>
{!videoStarted && <img src={thumbnail} alt={`${sitename} thumbnail`} />}
{!videoStarted && <IconButton onClick={handlePlayVideo} tooltip="Play video" src={PlaySVG} />}
{videoStarted && (
<div>
{children}
</div>
)}
<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>
</div> </div>
); );
@ -454,8 +455,10 @@ 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="file-container"> <div className="embed-container">
{image} <div className="file-container">
{image}
</div>
</div> </div>
); );
} }
@ -463,8 +466,8 @@ function Embed({ link }) {
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,15 +539,17 @@ function YoutubeEmbed({ link }) {
if (urlPreviewInfo !== null) { if (urlPreviewInfo !== null) {
return ( return (
<IframePlayer link={link} sitename="Youtube" title={urlPreviewInfo['og:title']} thumbnail={mx.mxcUrlToHttp(urlPreviewInfo['og:image'])}> <div className="embed-container">
<iframe <IframePlayer link={link} sitename="Youtube" title={urlPreviewInfo['og:title']} thumbnail={mx.mxcUrlToHttp(urlPreviewInfo['og:image'])}>
src={embedURL} <iframe
title="YouTube video player" src={embedURL}
frameBorder="0" title="YouTube video player"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" frameBorder="0"
allowFullScreen allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
/> allowFullScreen
</IframePlayer> />
</IframePlayer>
</div>
); );
} }

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

@ -90,12 +90,16 @@
} }
.embed-container { .embed-container {
color: var(--tc-surface-low); margin-top: 5px;
background-color: var(--bg-surface-hover);
border-radius: calc(var(--bo-radius) / 2);
padding: 15px;
.embed-text { .embed {
margin-bottom: 5px; 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;
}
} }
} }