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

shorts vertical fullscreen controls layout, fixes #417

Browse source
This commit is contained in:
Nikita Krupin 2022-07-19 20:11:40 -04:00
parent e06364c1b2
commit 67151d794c
3 changed files with 76 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
NUXT/components/Player/fscontrols.vue Normal file
View file

@ -0,0 +1,64 @@
<template>
<div
v-if="isFullscreen"
class="debug"
:style="
verticalFullscreen
? 'position: absolute; height: calc(100vh - 14rem); bottom: 7rem; right: 0;'
: ''
"
:class="verticalFullscreen ? 'd-flex flex-column justify-end' : ''"
>
<v-btn
v-for="(item, index) in interactions"
:key="index"
fab
text
small
color="white"
:class="verticalFullscreen ? 'ma-2' : 'mr-2'"
:disabled="item.disabled"
>
<v-icon v-text="item.icon" />
</v-btn>
</div>
</template>
<script>
export default {
props: {
isFullscreen: {
type: Boolean,
required: true,
},
verticalFullscreen: {
type: Boolean,
required: true,
},
},
data: () => ({
interactions: [
{
icon: "mdi-thumb-up-outline",
disabled: true,
},
{
icon: "mdi-thumb-down-outline",
disabled: true,
},
{
icon: "mdi-share-outline",
disabled: true,
},
{
icon: "mdi-comment-text-outline",
disabled: true,
},
{
icon: "mdi-plus-box-multiple-outline",
disabled: true,
},
],
}),
};
</script>

25
NUXT/components/Player/index.vue
View file

@ -217,26 +217,13 @@
<!-- bottom controls row -->
<div
style="position: absolute; width: 100%; bottom: 0.5rem"
class="d-flex justify-between align-center px-2"
class="debug d-flex justify-between align-center px-2"
@click.self="controlsHandler()"
>
<div v-if="isFullscreen">
<v-btn fab text small color="white" class="mr-2" disabled>
<v-icon>mdi-thumb-up-outline</v-icon>
</v-btn>
<v-btn fab text small color="white" class="mr-2" disabled>
<v-icon>mdi-thumb-down-outline</v-icon>
</v-btn>
<v-btn fab text small color="white" class="mr-2" disabled>
<v-icon>mdi-share-outline</v-icon>
</v-btn>
<v-btn fab text small color="white" class="mr-2" disabled>
<v-icon>mdi-plus-box-multiple-outline</v-icon>
</v-btn>
<v-btn fab text small color="white" class="mr-2" disabled>
<v-icon>mdi-comment-text-outline</v-icon>
</v-btn>
</div>
<fscontrols
:is-fullscreen="isFullscreen"
:vertical-fullscreen="verticalFullscreen"
/>
<v-spacer />
<!-- // TODO: merge the bottom 2 into 1 reusable component -->
<quality
@ -313,6 +300,7 @@ import minimize from "~/components/Player/minimize.vue";
import captions from "~/components/Player/captions.vue";
import playpause from "~/components/Player/playpause.vue";
import watchtime from "~/components/Player/watchtime.vue";
import fscontrols from "~/components/Player/fscontrols.vue";
import fullscreen from "~/components/Player/fullscreen.vue";
import progressbar from "~/components/Player/progressbar.vue";
import sponsorblock from "~/components/Player/sponsorblock.vue";
@ -321,6 +309,7 @@ export default {
sponsorblock,
progressbar,
fullscreen,
fscontrols,
watchtime,
playpause,
captions,

13
NUXT/pages/watch.vue
View file

@ -27,13 +27,10 @@
>
<div class="d-flex flex-column">
<v-card-title
class="pa-0 text-wrap"
style="
font-size: 0.95rem;
line-height: 1.15rem;
"
v-text="video.title"
v-emoji
class="pa-0 text-wrap"
style="font-size: 0.95rem; line-height: 1.15rem"
v-text="video.title"
/>
<v-card-text
style="font-size: 0.75rem"
@ -52,8 +49,8 @@
</div>
</v-card-text>
</div>
<v-icon class="ml-4" v-if="showMore">mdi-chevron-up</v-icon>
<v-icon class="ml-4" v-else>mdi-chevron-down</v-icon>
<v-icon v-if="showMore" class="ml-4">mdi-chevron-up</v-icon>
<v-icon v-else class="ml-4">mdi-chevron-down</v-icon>
</div>
<div
class="d-flex px-4"