2022-02-24 22:29:34 +00:00
< template >
< div >
2022-03-14 00:41:03 +00:00
< video controls autoplay :src ="vidSrc" width = "100%" height = "300vh" / >
2022-03-20 00:27:45 +00:00
< v -card class = "ml-2 mr-2 flat light" flat >
2022-03-21 00:30:59 +00:00
< v -card -title
style = "padding-top: 0; padding-bottom: 0; font-size: 0.95em"
v - text = "title"
/ >
2022-03-20 00:27:45 +00:00
< v -card -text >
2022-03-21 00:30:59 +00:00
< div style = "margin-bottom: 1em" > { { views } } views • { { uploaded } } < / div >
2022-03-20 07:24:38 +00:00
2022-03-20 00:27:45 +00:00
<!-- Scrolling Div For Interactions -- - >
2022-03-21 00:30:59 +00:00
< div style = "display: flex; margin-bottom: 1em" >
< v -list -item
v - for = "(item, index) in interactions"
: key = "index"
style = "padding: 0; flex: 0 0 20%"
>
< v -btn
text
2022-03-20 07:24:38 +00:00
class = "vertical-button"
style = "padding: 0; margin: 0"
elevation = "0"
: disabled = "item.disabled"
2022-03-21 23:47:11 +00:00
@ click = "item.action"
2022-03-20 07:24:38 +00:00
>
2022-03-20 00:27:45 +00:00
< v -icon v -text = " item.icon " / >
< div v -text = " item.value | | item.name " / >
2022-03-20 16:13:58 +00:00
< / v - b t n >
2022-03-20 00:27:45 +00:00
< / v - l i s t - i t e m >
2022-03-20 13:17:26 +00:00
2022-03-20 16:29:29 +00:00
< v -spacer / >
2022-03-20 18:42:12 +00:00
< v -btn text @ click = "showMore = !showMore" >
< v -icon v-if ="showMore" > mdi -chevron -up < / v-icon >
< v -icon v-else > mdi -chevron -down < / v-icon >
< / v - b t n >
2022-03-20 00:27:45 +00:00
< / div >
<!-- End Scrolling Div For Interactions -- - >
2022-03-21 00:30:59 +00:00
< hr / >
2022-03-20 16:55:25 +00:00
< p > Channel Stuff < / p >
2022-03-21 00:30:59 +00:00
< hr / >
2022-03-20 00:27:45 +00:00
< / v - c a r d - t e x t >
2022-03-21 23:47:11 +00:00
< div v-if ="showMore" class="scroll-y ml-2 mr-2" >
2022-03-21 00:30:59 +00:00
{ { description } }
< / div >
2022-03-20 13:17:26 +00:00
2022-03-21 13:21:18 +00:00
< v -bottom -sheet
v - model = "showMore"
color = "accent2"
style = "z-index: 9999999"
>
< v -sheet style = "padding: 1em" >
< v -btn block @ click = "showMore = !showMore"
> < v -icon > mdi - chevron - down < / v - i c o n > < / v - b t n
> < br / >
2022-03-20 13:32:28 +00:00
< div class = "scroll-y" >
{ { description } }
< / div >
2022-03-20 18:42:12 +00:00
< / v - s h e e t >
2022-03-21 13:21:18 +00:00
< / v - b o t t o m - s h e e t >
<!-- < v -bottom -sheet v-model ="share" color="accent2" style="z-index: 9999999" >
2022-03-21 00:30:59 +00:00
< v -sheet style = "padding: 1em" >
2022-03-20 18:42:12 +00:00
< div class = "scroll-y" >
{ { description } }
< / div >
2022-03-20 13:17:26 +00:00
< / v - s h e e t >
2022-03-21 13:21:18 +00:00
< / v - b o t t o m - s h e e t > - - >
2022-03-19 06:18:07 +00:00
< / v - c a r d >
2022-03-20 00:27:45 +00:00
2022-03-21 00:27:41 +00:00
< recommended :recommends ="recommends" / >
2022-02-24 22:29:34 +00:00
< / div >
< / template >
2022-03-20 00:27:45 +00:00
< style >
. vertical - button span . v - btn _ _content {
flex - direction : column ;
justify - content : space - around ;
}
< / style >
2022-02-24 22:29:34 +00:00
< script >
export default {
data ( ) {
return {
2022-03-20 00:27:45 +00:00
interactions : [
2022-03-21 00:30:59 +00:00
{
name : "Likes" ,
icon : "mdi-thumb-up" ,
action : null ,
value : this . likes ,
disabled : true ,
} ,
{
name : "Dislikes" ,
icon : "mdi-thumb-down" ,
action : this . dislike ( ) ,
value : this . dislikes ,
disabled : true ,
} ,
{
name : "Share" ,
icon : "mdi-share" ,
action : this . share ( ) ,
disabled : true ,
} ,
2022-03-20 00:27:45 +00:00
] ,
2022-03-20 13:17:26 +00:00
showMore : false ,
2022-03-20 18:42:12 +00:00
share : false ,
2022-03-20 00:27:45 +00:00
title : null ,
uploaded : null ,
vidSrc : null ,
description : null ,
views : null ,
2022-03-21 00:27:41 +00:00
recommends : [ ] ,
2022-03-20 07:24:38 +00:00
} ;
2022-03-13 23:21:41 +00:00
} ,
mounted ( ) {
2022-03-20 07:24:38 +00:00
this . likes = 100 ;
this . $youtube . getVid ( this . $route . query . v ) . then ( ( result ) => {
console . log ( "Video info data" , result ) ;
console . log ( result . availableResolutions ) ;
2022-03-21 13:21:18 +00:00
this . vidSrc =
result . availableResolutions [ result . availableResolutions . length - 1 ] . url ; // Takes the highest available resolution with both video and Audio. Note this will be lower than the actual highest resolution
2022-03-20 07:24:38 +00:00
this . title = result . title ;
this . description = result . metadata . description ; // While this works, I do recommend using the rendered description instead in the future as there are some things a pure string wouldn't work with
this . views = result . metadata . viewCount . toLocaleString ( ) ;
this . likes = result . metadata . likes . toLocaleString ( ) ;
this . uploaded = result . metadata . uploadDate ;
this . interactions [ 0 ] . value = result . metadata . likes ;
2022-03-21 00:27:41 +00:00
this . recommends = this . $youtube
. viewRecommends ( result . renderedData . recommendations )
. filter ( ( element ) => {
return element !== undefined ;
} ) ;
// .catch((error) => this.$logger("Watch", error, true));
console . log ( "recommendations:" , this . recommends ) ;
2022-03-19 06:18:07 +00:00
} ) ;
this . $youtube . getReturnYoutubeDislike ( this . $route . query . v , ( data ) => {
2022-03-20 00:10:18 +00:00
this . dislikes = data . dislikes . toLocaleString ( ) ;
2022-03-20 00:43:55 +00:00
this . interactions [ 1 ] . value = data . dislikes . toLocaleString ( ) ;
2022-03-19 06:18:07 +00:00
} ) ;
2022-03-20 07:24:38 +00:00
} ,
2022-03-21 23:47:11 +00:00
methods : {
dislike ( ) { } ,
share ( ) {
this . share = ! this . share ;
} ,
} ,
2022-03-20 07:24:38 +00:00
} ;
2022-02-24 22:29:34 +00:00
< / script >