From 4828073e554c1aa4694dd454ac4a17a48611f64b Mon Sep 17 00:00:00 2001
From: Bojan Mojsilovic <bmojsilovic@itekako.com>
Date: Mon, 5 Feb 2024 17:50:48 +0100
Subject: [PATCH] Set embedded media border radius to 16px

---
 src/components/EmbeddedNote/EmbeddedNote.tsx |  4 ++--
 src/components/LinkPreview/LinkPreview.tsx   |  2 ++
 src/components/ParsedNote/ParsedNote.tsx     | 11 +++++++++--
 src/index.scss                               | 15 ++++++++++++---
 4 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/components/EmbeddedNote/EmbeddedNote.tsx b/src/components/EmbeddedNote/EmbeddedNote.tsx
index bee5465..a9d63bc 100644
--- a/src/components/EmbeddedNote/EmbeddedNote.tsx
+++ b/src/components/EmbeddedNote/EmbeddedNote.tsx
@@ -34,7 +34,7 @@ const EmbeddedNote: Component<{ note: PrimalNote, mentionedUsers?: Record<string
     if (props.includeEmbeds) {
       return (
         <div
-          class={styles.mentionedNote}
+          class={`${styles.mentionedNote} embeddedContent`}
           data-event={props.note.post.id}
           data-event-bech32={noteId()}
         >
@@ -46,7 +46,7 @@ const EmbeddedNote: Component<{ note: PrimalNote, mentionedUsers?: Record<string
     return (
       <A
         href={`/e/${noteId()}`}
-        class={styles.mentionedNote}
+        class={`${styles.mentionedNote} embeddedContent`}
         onClick={() => navToThread()}
         data-event={props.note.post.id}
         data-event-bech32={noteId()}
diff --git a/src/components/LinkPreview/LinkPreview.tsx b/src/components/LinkPreview/LinkPreview.tsx
index d3bb97b..4ee8df1 100644
--- a/src/components/LinkPreview/LinkPreview.tsx
+++ b/src/components/LinkPreview/LinkPreview.tsx
@@ -42,6 +42,8 @@ const LinkPreview: Component<{ preview: any, id?: string, bordered?: boolean }>
       k += ` ${styles.bordered}`;
     }
 
+    k += " embeddedContent";
+
     return k;
   };
 
diff --git a/src/components/ParsedNote/ParsedNote.tsx b/src/components/ParsedNote/ParsedNote.tsx
index d8d3cb8..9513a76 100644
--- a/src/components/ParsedNote/ParsedNote.tsx
+++ b/src/components/ParsedNote/ParsedNote.tsx
@@ -473,6 +473,8 @@ const ParsedNote: Component<{
           klass += ' redBorder';
         }
 
+        klass += ' embeddedContent';
+
         setWordsDisplayed(w => w + shortMentionInWords);
 
         const video = <video
@@ -504,7 +506,7 @@ const ParsedNote: Component<{
         const youtubeId = isYouTube(token) && RegExp.$1;
 
         return <iframe
-          class="w-max"
+          class="w-max embeddedContent"
           src={`https://www.youtube.com/embed/${youtubeId}`}
           title="YouTube video player"
           // @ts-ignore no property
@@ -527,6 +529,7 @@ const ParsedNote: Component<{
         const convertedUrl = token.replace(/\/(track|album|playlist|episode)\/([a-zA-Z0-9]+)/, "/embed/$1/$2");
 
         return <iframe
+          class="embeddedContent"
           style="borderRadius: 12"
           src={convertedUrl}
           width="100%"
@@ -552,6 +555,7 @@ const ParsedNote: Component<{
         const args = `?channel=${channel}&parent=${window.location.hostname}&muted=true`;
 
         return <iframe
+          class="embeddedContent"
           src={`https://player.twitch.tv/${args}`}
           // @ts-ignore no property
           className="w-max"
@@ -570,7 +574,7 @@ const ParsedNote: Component<{
 
         const feedPath = (isMixCloud(token) && RegExp.$1) + "%2F" + (isMixCloud(token) && RegExp.$2);
 
-        return <div>
+        return <div class="embeddedContent">
           <iframe
             title="SoundCloud player"
             width="100%"
@@ -592,6 +596,7 @@ const ParsedNote: Component<{
         setWordsDisplayed(w => w + shortMentionInWords);
 
         return <iframe
+          class="embeddedContent"
           width="100%"
           height="166"
           // @ts-ignore no property
@@ -614,6 +619,7 @@ const ParsedNote: Component<{
         const isSongLink = /\?i=\d+$/.test(convertedUrl);
 
         return <iframe
+          class="embeddedContent"
           allow="autoplay *; encrypted-media *; fullscreen *; clipboard-write"
           // @ts-ignore no property
           frameBorder="0"
@@ -636,6 +642,7 @@ const ParsedNote: Component<{
         const convertedUrl = token.replace(/(?:player\.|www\.)?wavlake\.com/, "embed.wavlake.com");
 
         return <iframe
+          class="embeddedContent"
           style="borderRadius: 12"
           src={convertedUrl}
           width="100%"
diff --git a/src/index.scss b/src/index.scss
index e126e1b..92a205e 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -46,6 +46,7 @@
 
   --border-radius-small: 8px;
   --border-radius-big: 12px;
+  --border-radius-large: 16px;
 
   --central-content-width: 600px;
 
@@ -183,13 +184,21 @@ a {
   overflow: hidden;
 }
 
+.embeddedContent {
+  margin-block: 12px !important;
+  display: block !important;
+  border-radius: var(--border-radius-large) !important;
+  overflow: hidden !important;
+}
+
 .imageGrid {
+  margin-block: 12px !important;
   display: grid;
 
   grid-template-columns: 1fr 1fr 1fr 1fr;
   grid-auto-rows: 125px;
-  border-radius: 8px;
-  overflow: hidden;
+  border-radius: var(--border-radius-large) !important;
+  overflow: hidden !important;
   grid-gap: 2px;
 
   img {
@@ -284,7 +293,7 @@ a {
 
 .roundedImage {
   img {
-    border-radius: var(--border-radius-small);
+    border-radius: var(--border-radius-large);
   }
 }