From 0dd31bfbd009465b4f1560c4b7f9cda30f5412dd Mon Sep 17 00:00:00 2001
From: Puyodead1 <puyodead@proton.me>
Date: Fri, 22 Dec 2023 23:55:57 -0500
Subject: [PATCH] more minor improvements to embeded media

---
 src/components/messaging/Embed.module.css | 18 ++++++++++
 src/components/messaging/EmbedMedia.tsx   | 44 ++++++++++++++---------
 src/components/messaging/MessageBase.tsx  |  4 ++-
 3 files changed, 48 insertions(+), 18 deletions(-)

diff --git a/src/components/messaging/Embed.module.css b/src/components/messaging/Embed.module.css
index 776fd27..41ea2b8 100644
--- a/src/components/messaging/Embed.module.css
+++ b/src/components/messaging/Embed.module.css
@@ -17,6 +17,7 @@ iframe {
 
 .embedImage {
 	cursor: pointer;
+	border-radius: 8px;
 }
 
 .website {
@@ -159,6 +160,7 @@ iframe {
 
 .embedThumbnail {
 	margin-left: 16px;
+	border-radius: 8px;
 }
 
 img.image {
@@ -170,3 +172,19 @@ img.image {
 a {
 	cursor: pointer;
 }
+
+.embedGifIcon {
+	position: absolute;
+	top: 5px;
+	left: 5px;
+}
+
+.embedGifIconBg {
+	position: absolute;
+	top: 8px;
+	left: 8px;
+	width: 18px;
+	height: 18px;
+	background: #000000;
+	border-radius: 4px;
+}
diff --git a/src/components/messaging/EmbedMedia.tsx b/src/components/messaging/EmbedMedia.tsx
index 125809b..03863de 100644
--- a/src/components/messaging/EmbedMedia.tsx
+++ b/src/components/messaging/EmbedMedia.tsx
@@ -3,6 +3,7 @@
 
 import { APIEmbed, EmbedType } from "@spacebarchat/spacebar-api-types/v9";
 import { modalController } from "../../controllers/modals";
+import Icon from "../Icon";
 import styles from "./Embed.module.css";
 
 interface Props {
@@ -31,7 +32,7 @@ function EmbedMedia({ embed, width, height, thumbnail }: Props) {
 
 			return (
 				<iframe
-					style={{ borderRadius: "12px", width: "400px", height: "80px" }}
+					style={{ width: "400px", height: "80px", borderRadius: 12 }}
 					src={`https://open.spotify.com/embed/${type}/${id}`}
 					frameBorder="0"
 					allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
@@ -93,22 +94,31 @@ function EmbedMedia({ embed, width, height, thumbnail }: Props) {
 				const url = embed.video.url;
 
 				return (
-					<video
-						className={styles.embedImage}
-						style={{ width, height }}
-						src={url}
-						loop={embed.type === EmbedType.GIFV}
-						controls={embed.type !== EmbedType.GIFV}
-						autoPlay={embed.type === EmbedType.GIFV}
-						muted={embed.type === EmbedType.GIFV ? true : undefined}
-						onClick={() => {
-							modalController.push({
-								type: "image_viewer",
-								attachment: embed.video!,
-								isVideo: true,
-							});
-						}}
-					/>
+					<div>
+						<video
+							className={styles.embedImage}
+							style={{ width, height }}
+							src={url}
+							loop={embed.type === EmbedType.GIFV}
+							controls={embed.type !== EmbedType.GIFV}
+							autoPlay={embed.type === EmbedType.GIFV}
+							muted={embed.type === EmbedType.GIFV ? true : undefined}
+							onClick={() => {
+								modalController.push({
+									type: "image_viewer",
+									attachment: embed.video!,
+									isVideo: true,
+								});
+							}}
+						/>
+
+						{embed.type === EmbedType.GIFV && (
+							<div>
+								<div className={styles.embedGifIconBg}></div>
+								<Icon icon="mdiFileGifBox" size={1} className={styles.embedGifIcon} />
+							</div>
+						)}
+					</div>
 				);
 			} else if (embed.image && !thumbnail) {
 				const url = embed.image.url;
diff --git a/src/components/messaging/MessageBase.tsx b/src/components/messaging/MessageBase.tsx
index ea040eb..527dd2c 100644
--- a/src/components/messaging/MessageBase.tsx
+++ b/src/components/messaging/MessageBase.tsx
@@ -16,8 +16,10 @@ export default styled.div<Props>`
 	overflow: none;
 	flex-direction: row;
 	${(props) => !props.header && "align-items: center;"}
-	${(props) => props.header && "margin-top: 20px;"}
+	${(props) => props.header && "margin-top: 10px;"}
 	${(props) => props.mention && "background-color: hsl(var(--warning-light-hsl)/0.1);"}
+	padding-top: 0.2rem;
+	padding-bottom: 0.2rem;
 
 	.message-details {
 		display: flex;