From dd22a92e33e916bc75f3c74c22b91e9e3dd72700 Mon Sep 17 00:00:00 2001
From: Ayes <ayes2022@protonmail.com>
Date: Fri, 18 Nov 2022 22:11:12 +0200
Subject: [PATCH] Adjusted styling and classes

---
 src/app/molecules/media/Media.jsx  | 75 ++++++++++++++++--------------
 src/app/molecules/media/Media.scss | 16 ++++---
 2 files changed, 50 insertions(+), 41 deletions(-)

diff --git a/src/app/molecules/media/Media.jsx b/src/app/molecules/media/Media.jsx
index 5bbff64e..dea58a60 100644
--- a/src/app/molecules/media/Media.jsx
+++ b/src/app/molecules/media/Media.jsx
@@ -373,30 +373,31 @@ function IframePlayer({
   };
 
   return (
-    <div className="file-container">
-      <div className="file-header">
-        <Text className="file-name" variant="b3">{`${sitename} - ${title}`}</Text>
+    <div className="iframeplayer">
+      <div className="file-container">
+        <div className="file-header">
+          <Text className="file-name" variant="b3">{`${sitename} - ${title}`}</Text>
 
-        <IconButton
-          size="extra-small"
-          tooltip="Open in new tab"
-          src={ExternalSVG}
-          onClick={() => window.open(link)}
-        />
-      </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>
-        )}
+          <IconButton
+            size="extra-small"
+            tooltip="Open in new tab"
+            src={ExternalSVG}
+            onClick={() => window.open(link)}
+          />
+        </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>
   );
@@ -454,8 +455,10 @@ function Embed({ link }) {
     // Image only embed
     if (image != null && urlPreviewInfo['og:title'] == null && urlPreviewInfo['og:description'] == null) {
       return (
-        <div className="file-container">
-          {image}
+        <div className="embed-container">
+          <div className="file-container">
+            {image}
+          </div>
         </div>
       );
     }
@@ -463,8 +466,8 @@ function Embed({ link }) {
     const embedTitle = urlPreviewInfo['og:title'] || urlPreviewInfo['og:site_name'];
 
     return (
-      <div className="file-container">
-        <div className="embed-container">
+      <div className="embed-container">
+        <div className="file-container embed">
           <div className="embed-text">
             {(embedTitle != null) && (
               <Text className="embed-title" variant="h2">
@@ -536,15 +539,17 @@ function YoutubeEmbed({ link }) {
 
   if (urlPreviewInfo !== null) {
     return (
-      <IframePlayer link={link} sitename="Youtube" title={urlPreviewInfo['og:title']} thumbnail={mx.mxcUrlToHttp(urlPreviewInfo['og:image'])}>
-        <iframe
-          src={embedURL}
-          title="YouTube video player"
-          frameBorder="0"
-          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-          allowFullScreen
-        />
-      </IframePlayer>
+      <div className="embed-container">
+        <IframePlayer link={link} sitename="Youtube" title={urlPreviewInfo['og:title']} thumbnail={mx.mxcUrlToHttp(urlPreviewInfo['og:image'])}>
+          <iframe
+            src={embedURL}
+            title="YouTube video player"
+            frameBorder="0"
+            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+            allowFullScreen
+          />
+        </IframePlayer>
+      </div>
     );
   }
 
diff --git a/src/app/molecules/media/Media.scss b/src/app/molecules/media/Media.scss
index 4bd1d894..5b4a8662 100644
--- a/src/app/molecules/media/Media.scss
+++ b/src/app/molecules/media/Media.scss
@@ -90,12 +90,16 @@
 }
 
 .embed-container {
-  color: var(--tc-surface-low);
-  background-color: var(--bg-surface-hover);
-  border-radius: calc(var(--bo-radius) / 2);
-  padding: 15px;
+  margin-top: 5px;
 
-  .embed-text {
-    margin-bottom: 5px;
+  .embed {
+    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;
+    }
   }
 }
\ No newline at end of file