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

mor fixes guh

This commit is contained in:
Nikita Krupin 2022-06-08 21:48:33 -04:00
parent 214b20e3ef
commit 5dc2f94da2
1 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -40,11 +40,14 @@
position: absolute; position: absolute;
transition: opacity 0.15s; transition: opacity 0.15s;
border-radius: 0 100vh 100vh 0; border-radius: 0 100vh 100vh 0;
text-transform: none;
font-size: 0.5rem;
" "
@click.self="controlsHandler()"
@dblclick.stop="skipHandler(-10)" @dblclick.stop="skipHandler(-10)"
@click.self="controlsHandler()"
> >
<v-icon>mdi-rewind</v-icon> <v-icon>mdi-rewind</v-icon>
<!-- {{ skipping }} seconds -->
</v-btn> </v-btn>
<v-btn <v-btn
@ -60,11 +63,14 @@
position: absolute; position: absolute;
transition: opacity 0.15s; transition: opacity 0.15s;
border-radius: 100vh 0 0 100vh; border-radius: 100vh 0 0 100vh;
text-transform: none;
font-size: 0.5rem;
" "
@click.self="controlsHandler()"
@dblclick.stop="skipHandler(10)" @dblclick.stop="skipHandler(10)"
@click.self="controlsHandler()"
> >
<v-icon>mdi-fast-forward</v-icon> <v-icon>mdi-fast-forward</v-icon>
<!-- {{ skipping }} seconds] -->
</v-btn> </v-btn>
<div <div
@ -130,8 +136,8 @@
<playpause <playpause
v-if="$refs.player" v-if="$refs.player"
:video="$refs.player" :video="$refs.player"
@play="$refs.player.play()"
@pause="$refs.player.pause()" @pause="$refs.player.pause()"
@play="$refs.player.play(), controlsHandler()"
/> />
<v-btn fab text color="white" class="px-4" disabled @click.stop=""> <v-btn fab text color="white" class="px-4" disabled @click.stop="">
<v-icon size="2rem">mdi-skip-next</v-icon> <v-icon size="2rem">mdi-skip-next</v-icon>
@ -163,7 +169,7 @@
<fullscreen <fullscreen
style="z-index: 2" style="z-index: 2"
:fullscreen="isFullscreen" :fullscreen="isFullscreen"
@fullscreen="(controls = $refs.player.paused), fullscreenHandler()" @fullscreen="controlsHandler(), fullscreenHandler()"
/> />
</div> </div>
<!-- time & fullscreen row end --> <!-- time & fullscreen row end -->
@ -299,9 +305,9 @@ export default {
return { return {
isFullscreen: false, isFullscreen: false,
controls: false, controls: false,
skipping: false,
seeking: false, seeking: false,
contain: true, contain: true,
skipping: 0,
progress: 0, progress: 0,
buffered: 0, buffered: 0,
watched: 0, watched: 0,
@ -357,23 +363,24 @@ export default {
if (this.isFullscreen) this.exitFullscreen(); if (this.isFullscreen) this.exitFullscreen();
}, },
methods: { methods: {
// TODO: make accumulative onclick after first dblclick (don't set timeout untill stopped clicking)
skipHandler(time) { skipHandler(time) {
this.skipping = time; this.skipping = time;
setTimeout(() => { setTimeout(() => {
this.skipping = false; this.skipping = false;
}, 300); }, 500);
this.$refs.player.currentTime += time; this.$refs.player.currentTime += time;
}, },
// TODO: fix dis
controlsHandler() { controlsHandler() {
if (!this.seeking) if (!this.seeking)
this.controls this.controls
? (clearTimeout(this.controls), (this.controls = false)) ? (clearTimeout(this.controls), (this.controls = false))
: setTimeout(() => { : setTimeout(() => {
if (!this.skipping) { if (!this.skipping && !this.$refs.player.paused) {
this.controls = setTimeout(() => { this.controls = setTimeout(() => {
if (!this.seeking) this.controls = false; if (!this.seeking && !this.$refs.player.paused)
this.controls = false;
}, 2345); }, 2345);
} }
}, 300); }, 300);