From 7795eb7478a347b0e7e893448e017a3cbb543328 Mon Sep 17 00:00:00 2001
From: EliteAsian <29520859+EliteAsian123@users.noreply.github.com>
Date: Wed, 12 Jul 2023 00:15:46 -0400
Subject: [PATCH] Added video support to news

---
 src/routes/NewsPage/NewsPage.module.css | 13 +++++++++++++
 src/routes/NewsPage/index.tsx           | 14 +++++++++++++-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/routes/NewsPage/NewsPage.module.css b/src/routes/NewsPage/NewsPage.module.css
index 5af65df..ae0e788 100644
--- a/src/routes/NewsPage/NewsPage.module.css
+++ b/src/routes/NewsPage/NewsPage.module.css
@@ -93,4 +93,17 @@
     display: flex;
     align-items: center;
     gap: 10px;
+}
+
+.video_container {
+    padding: 24px 0 12px 0;
+    display: flex;
+    justify-content: center;
+}
+
+.video {
+    border: none;
+    border-radius: 8px;
+    aspect-ratio: calc(16 / 9);
+    height: 50vh;
 }
\ No newline at end of file
diff --git a/src/routes/NewsPage/index.tsx b/src/routes/NewsPage/index.tsx
index 0751614..e7df867 100644
--- a/src/routes/NewsPage/index.tsx
+++ b/src/routes/NewsPage/index.tsx
@@ -24,6 +24,17 @@ function NewsPage() {
     if (isSuccess) {
         const { data: articleData, content } = matter(data);
 
+        let videoElem = <></>;
+        if ("video" in articleData) {
+            videoElem = <div className={styles.video_container}>
+                <iframe
+                    className={styles.video}
+                    src="https://www.youtube.com/embed/Xk_HqhzvdgQ"
+                    title="YouTube video player"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" />
+            </div>;
+        }
+
         return <>
             <div className={styles.header} style={{ "--bannerURL": `url(https://raw.githubusercontent.com/YARC-Official/News/master/images/banners/${articleData.banner})` } as CSSProperties}>
                 <Link to="/" className={styles.header_back}>
@@ -54,11 +65,12 @@ function NewsPage() {
                         articleData.release ? (
                             <div className={styles.releaseDate}>
                                 <TimeIcon />
-                                { intlFormatDistance(new Date(articleData.release), new Date()) }
+                                {intlFormatDistance(new Date(articleData.release), new Date())}
                             </div>
                         ) : ""
                     }
                 </div>
+                {videoElem}
                 <SanitizedHTML dirtyHTML={marked.parse(content)} />
             </div>
         </>;