From 28da512bacbb1c2211a03318c393dab0f5bcb4d7 Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.org>
Date: Sat, 22 Jun 2024 16:50:07 -0400
Subject: [PATCH] Add Video Item component

---
 src/components/common/VideoItem.astro | 76 +++++++++++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 src/components/common/VideoItem.astro

diff --git a/src/components/common/VideoItem.astro b/src/components/common/VideoItem.astro
new file mode 100644
index 0000000..c1906ee
--- /dev/null
+++ b/src/components/common/VideoItem.astro
@@ -0,0 +1,76 @@
+---
+// Properties
+const {
+    ID,
+    Title,
+    Creator,
+    Views,
+    UploadDate,
+    Length
+} = Astro.props
+
+// i18n
+import { t } from "i18next"
+
+// Format Published Date
+const DateFormat = new Date(UploadDate * 1000).toLocaleDateString()
+
+// Format Video Length
+// Thanks to "mingjunlu" for helping out with the time format
+
+// Format Views
+const ViewsConversion = Intl.NumberFormat('en', { notation: 'compact'})
+const ViewsFormat = ViewsConversion.format(Views)
+---
+
+<a href={'/watch?v=' + ID} class="video-item">
+    <div class="video-item-thumbnail">
+        <img src={'https://i.ytimg.com/vi/' + ID + '/maxresdefault.jpg'}/>
+    </div>
+    <div class="video-item-details">
+        <p id="vi-title">{Title}</p>
+        <p id="vi-author">{t("watch.By")} {Creator}</p>
+        <p id="vi-viewCount">{ViewsFormat} {t("watch.Views")} - {DateFormat}</p>
+    </div>
+</a>
+
+<style lang="scss">
+.video-item {
+    display: flex;
+    flex-direction: column;
+    color: white;
+    text-decoration: none;
+    .video-item-thumbnail {
+        img {
+            width: 100%;
+            border-radius: 6px;
+            aspect-ratio: 16/9;
+            object-fit: contain;
+            background: #cfcfcf;
+        }
+        p#vi-length {
+            margin: -41px 8px 0px 0px;
+            background: rgba(0,0,0,0.75);
+            padding: 6px 12px;
+            width: max-content;
+            border-radius: 3rem;
+            position: relative;
+            float: right;
+            font-size: 14px;
+        }
+    }
+    .video-item-details {
+        display: flex;
+        flex-direction: column;
+        p {
+            margin: 0px;
+            &#vi-title {
+                font-weight: bold;
+            }
+            &#vi-author {
+                color: darkgrey;
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file