mirror of https://github.com/VueTubeApp/VueTube
player controls position improvements
This commit is contained in:
parent
6d4fde2dcc
commit
bee1f45701
|
@ -4,10 +4,13 @@
|
|||
text
|
||||
small
|
||||
color="white"
|
||||
style="position: absolute; bottom: 0.25rem; right: 0.25rem"
|
||||
style="position: absolute; right: 0.25rem"
|
||||
:style="fullscreen ? 'bottom: 3.5rem' : 'bottom: 0.25rem'"
|
||||
@click.stop="$emit('fullscreen')"
|
||||
>
|
||||
<v-icon>{{ fullscreen ? "mdi-fullscreen-exit" : "mdi-fullscreen" }}</v-icon>
|
||||
<v-icon size="1.25rem">{{
|
||||
fullscreen ? "mdi-fullscreen-exit" : "mdi-fullscreen"
|
||||
}}</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
|
|
|
@ -74,7 +74,11 @@
|
|||
|
||||
<div
|
||||
style="transition: opacity 0.15s ease-in-out"
|
||||
:style="controls ? 'opacity: 1;' : 'opacity: 0; pointer-events: none'"
|
||||
:style="
|
||||
controls && !seeking
|
||||
? 'opacity: 1;'
|
||||
: 'opacity: 0; pointer-events: none'
|
||||
"
|
||||
>
|
||||
<minimize />
|
||||
<loop />
|
||||
|
@ -143,7 +147,89 @@
|
|||
<v-icon size="1rem">mdi-fast-forward-5</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<watchtime v-if="$refs.player" :video="$refs.player" />
|
||||
<watchtime
|
||||
v-if="$refs.player"
|
||||
:video="$refs.player"
|
||||
:fullscreen="isFullscreen"
|
||||
/>
|
||||
<v-btn
|
||||
v-if="isFullscreen"
|
||||
fab
|
||||
text
|
||||
small
|
||||
outlined
|
||||
style="position: absolute; bottom: 0.25rem; left: 1rem"
|
||||
color="white"
|
||||
disabled
|
||||
@click.stop=""
|
||||
>
|
||||
<v-icon>mdi-thumb-up-outline</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
v-if="isFullscreen"
|
||||
fab
|
||||
text
|
||||
small
|
||||
outlined
|
||||
style="position: absolute; bottom: 0.25rem; left: 4rem"
|
||||
color="white"
|
||||
disabled
|
||||
@click.stop=""
|
||||
>
|
||||
<v-icon>mdi-thumb-down-outline</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
v-if="isFullscreen"
|
||||
fab
|
||||
text
|
||||
small
|
||||
outlined
|
||||
style="position: absolute; bottom: 0.25rem; left: 7rem"
|
||||
color="white"
|
||||
disabled
|
||||
@click.stop=""
|
||||
>
|
||||
<v-icon>mdi-share-outline</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
v-if="isFullscreen"
|
||||
fab
|
||||
text
|
||||
small
|
||||
outlined
|
||||
style="position: absolute; bottom: 0.25rem; left: 10rem"
|
||||
color="white"
|
||||
disabled
|
||||
@click.stop=""
|
||||
>
|
||||
<v-icon>mdi-plus-box-multiple-outline</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
v-if="isFullscreen"
|
||||
fab
|
||||
text
|
||||
small
|
||||
outlined
|
||||
style="position: absolute; bottom: 0.25rem; left: 13rem"
|
||||
color="white"
|
||||
disabled
|
||||
@click.stop=""
|
||||
>
|
||||
<v-icon>mdi-comment-text-outline</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<v-btn
|
||||
v-if="isFullscreen"
|
||||
fab
|
||||
text
|
||||
small
|
||||
style="position: absolute; bottom: 0.25rem; right: 0.25rem"
|
||||
color="white"
|
||||
disabled
|
||||
@click.stop=""
|
||||
>
|
||||
<v-icon>mdi-cards-outline</v-icon>
|
||||
</v-btn>
|
||||
<!-- // TODO: merge the bottom 2 into 1 reusable component -->
|
||||
<quality v-if="$refs.player" :video="$refs.player" :sources="sources" />
|
||||
<speed v-if="$refs.player" :video="$refs.player" />
|
||||
|
@ -151,6 +237,18 @@
|
|||
:fullscreen="isFullscreen"
|
||||
@fullscreen="(controls = $refs.player.paused), handleFullscreenChange()"
|
||||
/>
|
||||
<v-btn
|
||||
v-if="isFullscreen"
|
||||
fab
|
||||
text
|
||||
small
|
||||
style="position: absolute; bottom: 0.25rem; right: 0.25rem"
|
||||
color="white"
|
||||
disabled
|
||||
@click.stop=""
|
||||
>
|
||||
<v-icon>mdi-cards-outline</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
<progressbar
|
||||
v-if="$refs.player"
|
||||
|
|
|
@ -1,12 +1,7 @@
|
|||
<template>
|
||||
<div
|
||||
style="
|
||||
color: #fff;
|
||||
left: 1rem;
|
||||
bottom: 1rem;
|
||||
font-size: 0.75rem;
|
||||
position: absolute;
|
||||
"
|
||||
style="color: #fff; left: 1rem; font-size: 0.75rem; position: absolute"
|
||||
:style="fullscreen ? 'bottom: 4.25rem' : 'bottom: 1rem'"
|
||||
>
|
||||
{{ watched }}
|
||||
<span style="color: #aaa"> / {{ duration }} </span>
|
||||
|
@ -15,7 +10,16 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
props: ["video"],
|
||||
props: {
|
||||
video: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
fullscreen: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
watched: 0,
|
||||
|
|
Loading…
Reference in New Issue