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"
|
2022-06-09 16:39:44 +00:00
|
|
|
style="z-index: 777777"
|
2022-05-29 18:13:09 +00:00
|
|
|
scrollable
|
|
|
|
>
|
|
|
|
<template #activator="{ on, attrs }">
|
2022-07-28 20:35:38 +00:00
|
|
|
<v-btn
|
|
|
|
fab
|
|
|
|
text
|
|
|
|
small
|
|
|
|
:color="$route.name === 'watch' ? 'white' : ''"
|
|
|
|
v-bind="attrs"
|
|
|
|
v-on="on"
|
|
|
|
>
|
2022-06-08 17:56:14 +00:00
|
|
|
{{ currentSpeed }}X
|
2022-05-29 18:13:09 +00:00
|
|
|
</v-btn>
|
|
|
|
</template>
|
2022-06-07 18:39:26 +00:00
|
|
|
<v-card class="background">
|
|
|
|
<v-subheader
|
|
|
|
v-touch="{
|
|
|
|
down: () => (sheet = false),
|
|
|
|
}"
|
|
|
|
>
|
|
|
|
Playback Speed
|
2022-06-08 19:24:47 +00:00
|
|
|
<v-spacer />
|
|
|
|
<v-btn fab text small color="white" @click="sheet = false">
|
2022-06-07 18:39:26 +00:00
|
|
|
<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"
|
2022-06-08 17:56:14 +00:00
|
|
|
@click="(sheet = false), $emit('speed', sped)"
|
2022-05-29 18:13:09 +00:00
|
|
|
>
|
|
|
|
<!-- // TODO: save playbackRate to localStorage and manage via store/video/index.js -->
|
|
|
|
<v-list-item-avatar>
|
|
|
|
<v-icon
|
|
|
|
:color="
|
2022-06-08 17:56:14 +00:00
|
|
|
currentSpeed === sped
|
2022-05-29 18:13:09 +00:00
|
|
|
? 'primary'
|
|
|
|
: $vuetify.theme.dark
|
|
|
|
? 'background lighten-2'
|
|
|
|
: 'background darken-2'
|
|
|
|
"
|
2022-06-08 17:56:14 +00:00
|
|
|
v-text="currentSpeed === sped ? 'mdi-check' : 'mdi-speedometer'"
|
2022-05-29 18:13:09 +00:00
|
|
|
></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 {
|
2022-06-08 17:56:14 +00:00
|
|
|
props: {
|
|
|
|
currentSpeed: {
|
|
|
|
type: Number,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
emits: ["speed"],
|
2022-05-29 18:13:09 +00:00
|
|
|
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>
|