Add Video Item component
This commit is contained in:
parent
14917037b6
commit
28da512bac
76
src/components/common/VideoItem.astro
Normal file
76
src/components/common/VideoItem.astro
Normal 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>
|
Reference in a new issue