2022-03-19 19:31:43 +00:00
< template >
< div >
<!-- Video Loading Animation -- >
< center v-if ="recommends.length == 0" >
< v -skeleton -loader type = "card-avatar, article, actions" / >
< v -skeleton -loader type = "card-avatar, article, actions" / >
< / center >
< v -list -item v-for ="(video, index) in recommends[0]" :key ="index" >
< v -card class = "entry" :to ="`/watch?v=${video.id}`" >
< v -card -text >
< div style = "position: relative" >
< v -img :src ="video.thumbnail" / >
2022-03-20 06:05:43 +00:00
< div
v - text = "video.metadata.overlay[0]"
class = "videoRuntimeFloat"
style = "color: #fff"
/ >
2022-03-19 19:31:43 +00:00
< / div >
< div v -text = " video.title " style = "margin-top: 0.5em" / >
< div v -text = " parseBottom ( video ) " / >
< / v - c a r d - t e x t >
< / v - c a r d >
< / v - l i s t - i t e m >
< / div >
< / template >
< style scoped >
. entry {
margin - top : 1 em ;
width : 100 % ; /* Prevent Loading Weirdness */
}
. videoRuntimeFloat {
position : absolute ;
bottom : 10 px ;
right : 10 px ;
background : rgba ( 0 , 0 , 0 , 0.5 ) ;
border - radius : 5 px ;
padding : 0 3 px 0 3 px ;
}
< / style >
< script >
export default {
data ( ) {
return {
recommends : [ ] ,
} ;
} ,
// The following code is only a demo for debugging purposes, note that each "shelfRenderer" has a "title" value that seems to align to the categories at the top of the vanilla yt app
mounted ( ) {
this . $youtube
. recommend ( )
. then ( ( result ) => {
console . log ( result ) ;
if ( result ) this . recommends = result ;
} )
. catch ( ( error ) => this . $logger ( "Home Page" , error , true ) ) ;
} ,
methods : {
parseBottom ( video ) {
const bottomText = [ video . channel , video . metadata . views ] ;
if ( video . metadata . published ) bottomText . push ( video . metadata . published ) ;
return bottomText . join ( " • " ) ;
} ,
} ,
} ;
< / script >