etc
/
VueTube
mirror of https://github.com/VueTubeApp/VueTube
0
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor: better scrolling on the watch page

This commit is contained in:
Alex 2022-04-10 21:19:37 +12:00
parent 3f18325ca3
commit 2eafe89a85
1 changed files with 160 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
NUXT/pages/watch.vue
View File

@ -1,8 +1,11 @@
<template> <template>
<div class="background"> <div class="background" id="watch-body">
<div
class="player-container"
style="position: sticky; top: 0; z-index: 696969"
>
<!-- Stock Player --> <!-- Stock Player -->
<videoPlayer <videoPlayer
style="position: sticky; top: 0; z-index: 696969"
:vid-src="vidSrc" :vid-src="vidSrc"
ref="player" ref="player"
v-if="useBetaPlayer !== 'true'" v-if="useBetaPlayer !== 'true'"
@ -10,7 +13,8 @@
<!-- VueTube Player V1 --> <!-- VueTube Player V1 -->
<vuetubePlayer :sources="sources" v-if="useBetaPlayer === 'true'" /> <vuetubePlayer :sources="sources" v-if="useBetaPlayer === 'true'" />
</div>
<div class="content-container">
<v-card v-if="loaded" class="ml-2 mr-2 background" flat> <v-card v-if="loaded" class="ml-2 mr-2 background" flat>
<v-card-title <v-card-title
class="mt-2" class="mt-2"
@ -70,14 +74,15 @@
color="background" color="background"
style="z-index: 9999999" style="z-index: 9999999"
> >
<v-sheet style="padding: 1em"> <v-sheet style="padding: 12px">
<v-btn block @click="showMore = !showMore" <v-btn block @click="showMore = !showMore"
><v-icon>mdi-chevron-down</v-icon></v-btn ><v-icon>mdi-chevron-down</v-icon></v-btn
><br /> ><br />
<div class="scroll-y"> <slim-video-description-renderer
{{ response.renderedData.description }} class="scroll-y"
</div> :render="video.renderedData.description"
/>
</v-sheet> </v-sheet>
</v-bottom-sheet> --> </v-bottom-sheet> -->
<!-- <v-bottom-sheet v-model="share" color="background" style="z-index: 9999999"> <!-- <v-bottom-sheet v-model="share" color="background" style="z-index: 9999999">
@ -104,7 +109,9 @@
<div class="channel-name" v-text="video.channelName" /> <div class="channel-name" v-text="video.channelName" />
<div <div
class="caption background--text" class="caption background--text"
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'" :class="
$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'
"
v-text="video.channelSubs" v-text="video.channelSubs"
/> />
</div> </div>
@ -153,6 +160,7 @@
</div> </div>
<item-section-renderer v-else :render="recommends" /> <item-section-renderer v-else :render="recommends" />
</div> </div>
</div>
</template> </template>
<script> <script>
@ -334,6 +342,18 @@ export default {
</script> </script>
<style> <style>
#watch-body {
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
}
.content-container {
overflow-y: auto;
height: 100%;
}
.vertical-button span.v-btn__content { .vertical-button span.v-btn__content {
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;