Added video support to news

YARC-Official · Jul 12, 2023 · 7795eb7 · 7795eb7
1 parent 740c156
commit 7795eb7
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 1 deletion.
diff --git 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;
 }
diff --git 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>
  </>;