Buck9195/doesitarm
1
0
Fork 0
mirror of https://github.com/ThatGuySam/doesitarm.git synced 2026-05-15 06:35:20 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Preprocess thumbnail attributes

Browse source
This commit is contained in:
Sam Carlton 2021-01-23 15:28:36 -06:00
parent a1b2594b4a
commit 9d4d447802
2 changed files with 30 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

28
components/video/card.vue
View file

@ -10,12 +10,12 @@
<div class="relative overflow-hidden w-full pb-16/9">
<picture>
<source
:sizes="thumbnailSizes"
:data-srcset="thumbnailSrcset"
:sizes="video.thumbnail.sizes"
:data-srcset="video.thumbnail.srcset"
type="image/jpg"
>
<img
:data-src="video.thumbnails.default.url"
:data-src="video.thumbnail.src"
:alt="video.name"
class="lazyload absolute h-full w-full object-cover"
>
@ -64,8 +64,6 @@
import 'lazysizes'
// import { getVideoEndpoint } from '~/helpers/app-derived.js'
export default {
props: {
video: {
@ -74,26 +72,6 @@ export default {
}
},
computed: {
thumbnailSizes () {
let maxWidth = 0
Object.entries(this.video.thumbnails).forEach(([thumbnailKey, thumbnail]) => {
if (thumbnail.width > maxWidth) maxWidth = thumbnail.width
})
// example:
// "(max-width: 640px) 100vw, 640px"
return `(max-width: ${maxWidth}px) 100vw, ${maxWidth}px`
},
thumbnailSrcset () {
// console.log('this.video', this.video)
// example:
// https://vumbnail.com/358629078.jpg 640w, https://vumbnail.com/358629078_large.jpg 640w, https://vumbnail.com/358629078_medium.jpg 200w, https://vumbnail.com/358629078_small.jpg 100w
return Object.entries(this.video.thumbnails).map(([thumbnailKey, thumbnail]) => {
// console.log('thumbnail', thumbnail)
return `${thumbnail.url} ${thumbnail.width}w`
}).join(', ')
},
pill () {
// if this video has a banchmark tag
// then pill is 'Benchmark'