0
0
Fork 0
mirror of https://github.com/VueTubeApp/VueTube synced 2024-12-04 17:07:29 +00:00
VueTube/NUXT/components/Player/speed.vue

78 lines
2 KiB
Vue
Raw Normal View History

2022-05-28 05:16:27 +00:00
<template>
2022-05-29 18:13:09 +00:00
<div>
<v-bottom-sheet
v-model="sheet"
:attach="$parent.$refs.vidcontainer"
scrollable
>
<template #activator="{ on, attrs }">
<v-btn
fab
text
2022-05-29 22:14:00 +00:00
small
2022-05-31 02:17:03 +00:00
color="white"
2022-05-29 22:14:00 +00:00
style="position: absolute; bottom: 0.25rem; right: 6rem"
2022-05-29 18:13:09 +00:00
v-bind="attrs"
v-on="on"
>
{{ video.playbackRate }}X
</v-btn>
</template>
2022-06-07 18:39:26 +00:00
<v-card class="background">
<v-subheader
v-touch="{
down: () => (sheet = false),
}"
>
Playback Speed
<v-btn
fab
text
small
color="white"
style="position: absolute; right: 0.25rem"
@click="sheet = false"
>
<v-icon>mdi-close</v-icon>
</v-btn>
</v-subheader>
<v-divider />
2022-05-29 18:13:09 +00:00
<v-card-text style="height: 50vh" class="pa-0">
<v-list-item
v-for="sped in speeds"
:key="sped"
@click="(sheet = false), (video.playbackRate = sped)"
>
<!-- // TODO: save playbackRate to localStorage and manage via store/video/index.js -->
<v-list-item-avatar>
<v-icon
:color="
video.playbackRate === sped
? 'primary'
: $vuetify.theme.dark
? 'background lighten-2'
: 'background darken-2'
"
v-text="
video.playbackRate === sped ? 'mdi-check' : 'mdi-speedometer'
"
></v-icon>
</v-list-item-avatar>
<v-list-item-title>{{ sped }}X</v-list-item-title>
</v-list-item>
</v-card-text>
</v-card>
</v-bottom-sheet>
</div>
2022-05-28 05:16:27 +00:00
</template>
2022-05-29 18:13:09 +00:00
<script>
export default {
props: ["video"],
data: () => ({
sheet: false,
2022-05-29 18:42:39 +00:00
speeds: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 3, 4, 8, 16],
2022-05-29 18:13:09 +00:00
}),
};
</script>