mirror of
https://github.com/VueTubeApp/VueTube
synced 2024-11-09 13:05:07 +00:00
88 lines
1.7 KiB
Vue
88 lines
1.7 KiB
Vue
<template>
|
|
<v-card
|
|
class="entry gridVideoRenderer background"
|
|
:to="`/watch?v=${video.videoId}`"
|
|
flat
|
|
>
|
|
<div id="details">
|
|
<a
|
|
:href="video.navigationEndpoint.browseEndpoint.canonicalBaseUrl"
|
|
class="avatar-link pt-2"
|
|
>
|
|
<v-img
|
|
class="avatar-thumbnail"
|
|
:src="
|
|
video.thumbnail.thumbnails[video.thumbnail.thumbnails.length - 1]
|
|
.url
|
|
"
|
|
/>
|
|
</a>
|
|
<v-card-text class="video-info pt-2">
|
|
<div
|
|
v-for="title in video.title.runs"
|
|
:key="title.text"
|
|
style="margin-top: 0.5em"
|
|
class="vid-title"
|
|
>
|
|
{{ title.text }}
|
|
</div>
|
|
|
|
<div class="grey--text caption" v-text="parseBottom(video)" />
|
|
</v-card-text>
|
|
</div>
|
|
</v-card>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.entry {
|
|
width: 100%; /* Prevent Loading Weirdness */
|
|
}
|
|
|
|
.vid-title {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.avatar-thumbnail {
|
|
margin-top: 0.5rem;
|
|
margin-left: 0.5rem;
|
|
border-radius: 50%;
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
|
|
#details {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-basis: auto;
|
|
padding: 10px;
|
|
}
|
|
|
|
@media screen and (orientation: landscape) {
|
|
.entry {
|
|
margin-bottom: 8px;
|
|
}
|
|
#details {
|
|
flex-direction: column-reverse;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
export default {
|
|
props: ["video"],
|
|
|
|
methods: {
|
|
parseBottom(video) {
|
|
const bottomText = [
|
|
video.subscriberCountText?.runs[0].text,
|
|
video.videoCountText?.runs.map((run) => run.text).join(" "),
|
|
];
|
|
return bottomText.join(" · ");
|
|
},
|
|
},
|
|
};
|
|
</script>
|