etc/VueTube
0
0
Fork 0
mirror of https://github.com/VueTubeApp/VueTube synced 2024-11-05 03:05:03 +00:00
Code Issues Projects Releases Wiki Activity

feat: 🎨 Improve the style of the watch page

Browse source
This commit is contained in:
Front 2022-03-19 20:27:45 -04:00
parent 940e4965d5
commit ba690a9d1a
1 changed files with 53 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
NUXT/pages/watch.vue
View file

@ -1,29 +1,69 @@
<template> <template>
<div> <div>
<video controls autoplay :src="vidSrc" width="100%" height="300vh" /> <video controls autoplay :src="vidSrc" width="100%" height="300vh" />
<v-card class="ml-2 mr-2 flat light"> <v-card class="ml-2 mr-2 flat light" flat>
<h2>{{ title }}</h2> <v-card-title style="padding-top: 0;">{{ title }}</v-card-title>
<span>{{ views }} views • Published {{uploaded}}</span><br /> <v-card-text>
<span>{{ likes }} Likes / {{ dislikes }} Dislikes</span><br /> <span>{{ views }} views • {{uploaded}}</span><br />
<!-- Scrolling Div For Interactions --->
<div style="display: flex;">
<v-list-item v-for="(item, index) in interactions" :key="index">
<button class="vertical-button" style="padding: 0; margin: 0;" elevation=0 :disabled="item.disabled">
<v-icon v-text="item.icon" />
<div v-text="item.value || item.name" />
</button>
</v-list-item>
</div>
<!-- End Scrolling Div For Interactions --->
</v-card-text>
<p>{{ description }}</p> <p>{{ description }}</p>
</v-card> </v-card>
<recommended />
</div> </div>
</template> </template>
<style>
.vertical-button span.v-btn__content {
flex-direction: column;
justify-content: space-around;
}
</style>
<script> <script>
import recommended from '../components/recommended.vue';
export default { export default {
components: { recommended },
data() { data() {
return { return {
likes: this.likes,
uploaded: this.uploaded, interactions: [
dislikes: this.dislikes, { name: "Likes", icon: "mdi-thumb-up", action: null, value: this.likes, disabled: true },
vidSrc: this.vidSrc, { name: "Dislikes", icon: "mdi-thumb-down", action: null, value: this.dislikes, disabled: true },
description: this.description, { name: "Share", icon: "mdi-share", action: null, disabled: true },
views: this.views ],
title: null,
likes: 100,
dislikes: null,
uploaded: null,
vidSrc: null,
description: null,
views: null,
} }
}, },
mounted() { mounted() {
this.likes = 100
this.$youtube.getVid(this.$route.query.v).then(result => { this.$youtube.getVid(this.$route.query.v).then(result => {
console.log('Video info data', result) console.log('Video info data', result)
result = result.data; result = result.data;
@ -38,10 +78,13 @@ export default {
this.$youtube.getRemainingVideoInfo(this.$route.query.v, (data) => { this.$youtube.getRemainingVideoInfo(this.$route.query.v, (data) => {
this.likes = data.likes, this.likes = data.likes,
this.uploaded = data.uploadDate; this.uploaded = data.uploadDate;
this.interactions[0].value = data.likes;
}); });
this.$youtube.getReturnYoutubeDislike(this.$route.query.v, (data) => { this.$youtube.getReturnYoutubeDislike(this.$route.query.v, (data) => {
this.dislikes = data.dislikes; this.dislikes = data.dislikes;
this.interactions[1].value = data.dislikes;
}); });
} }