1
0
Fork 0

Add Video Item component

This commit is contained in:
Korbs 2024-06-22 16:50:07 -04:00
parent 14917037b6
commit 28da512bac
No known key found for this signature in database

View file

@ -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>