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

playpause cleanup

This commit is contained in:
Nikita Krupin 2022-06-08 14:05:00 -04:00
parent e2b91e5677
commit 0777b687ca
2 changed files with 73 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,8 +38,7 @@
<h4>{{ video.title }}</h4>
<div style="color: #aaa; font-size: 0.75rem">{{ video.channelName }}</div>
</div>
<!-- // TODO: merge the bottom 2 into 1 reusable component -->
<!-- // TODO: merge the bottom 2 into 1 reusable component and add animation -->
<v-btn
text
tile
@ -85,67 +84,70 @@
<captions />
<close />
<v-btn
fab
text
small
style="
position: absolute;
top: calc(50% - 1.25rem);
left: calc(50% - 10rem);
"
color="white"
@click.stop="$refs.player.currentTime -= 5"
>
<v-icon size="1rem">mdi-rewind-5</v-icon>
</v-btn>
<v-btn
fab
text
style="
position: absolute;
top: calc(50% - 1.75rem);
left: calc(50% - 6.5rem);
"
color="white"
disabled
@click.stop=""
>
<v-icon size="2rem">mdi-skip-previous</v-icon>
</v-btn>
<playpause
v-if="$refs.player"
:video="$refs.player"
@close="controls = false"
/>
<v-btn
fab
text
style="
position: absolute;
top: calc(50% - 1.75rem);
left: calc(50% + 3rem);
"
color="white"
disabled
@click.stop=""
>
<v-icon size="2rem">mdi-skip-next</v-icon>
</v-btn>
<v-btn
fab
text
small
style="
position: absolute;
top: calc(50% - 1.25rem);
left: calc(50% + 7rem);
"
color="white"
@click.stop="$refs.player.currentTime += 5"
>
<v-icon size="1rem">mdi-fast-forward-5</v-icon>
</v-btn>
<div>
<v-btn
fab
text
small
style="
position: absolute;
top: calc(50% - 1.25rem);
left: calc(50% - 10rem);
"
color="white"
@click.stop="$refs.player.currentTime -= 5"
>
<v-icon size="1rem">mdi-rewind-5</v-icon>
</v-btn>
<v-btn
fab
text
style="
position: absolute;
top: calc(50% - 1.75rem);
left: calc(50% - 6.5rem);
"
color="white"
disabled
@click.stop=""
>
<v-icon size="2rem">mdi-skip-previous</v-icon>
</v-btn>
<playpause
v-if="$refs.player"
:video="$refs.player"
@pause="$refs.player.pause()"
@play="$refs.player.play(), (controls = false)"
/>
<v-btn
fab
text
style="
position: absolute;
top: calc(50% - 1.75rem);
left: calc(50% + 3rem);
"
color="white"
disabled
@click.stop=""
>
<v-icon size="2rem">mdi-skip-next</v-icon>
</v-btn>
<v-btn
fab
text
small
style="
position: absolute;
top: calc(50% - 1.25rem);
left: calc(50% + 7rem);
"
color="white"
@click.stop="$refs.player.currentTime += 5"
>
<v-icon size="1rem">mdi-fast-forward-5</v-icon>
</v-btn>
</div>
<watchtime
v-if="$refs.player"

12
NUXT/components/Player/playpause.vue
View File

@ -6,8 +6,7 @@
style="position: absolute; top: calc(50% - 2rem); left: calc(50% - 2rem)"
color="white"
@click.stop="
(paused = !video.paused),
video.paused ? (video.play(), $emit('close')) : video.pause()
(paused = !video.paused), video.paused ? $emit('play') : $emit('pause')
"
>
<v-icon size="3.5rem">
@ -18,8 +17,13 @@
<script>
export default {
props: ["video"],
emits: ["close"],
props: {
video: {
type: Object,
required: true,
},
},
emits: ["play", "pause"],
data: () => ({
paused: false,
}),