mirror of https://github.com/VueTubeApp/VueTube
video speed selector
This commit is contained in:
parent
8ecf13201f
commit
05cf9a7292
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<!-- TODO: down: () => minimize, -->
|
||||
<!-- // TODO: down: () => minimize, -->
|
||||
<div
|
||||
ref="vidcontainer"
|
||||
v-touch="{
|
||||
|
@ -32,7 +32,7 @@
|
|||
position: absolute;
|
||||
width: calc(100% - 13.5rem);
|
||||
left: 3.5rem;
|
||||
top: 0.5rem;
|
||||
top: 1rem;
|
||||
"
|
||||
>
|
||||
<h3>{{ video.title }}</h3>
|
||||
|
@ -75,8 +75,8 @@
|
|||
/>
|
||||
|
||||
<watchtime v-if="$refs.player" :video="$refs.player" />
|
||||
<quality />
|
||||
<speed />
|
||||
<quality v-if="$refs.player" :video="$refs.player" :sources="sources" />
|
||||
<speed v-if="$refs.player" :video="$refs.player" />
|
||||
<fullscreen
|
||||
:fullscreen="isFullscreen"
|
||||
@fullscreen="(controls = $refs.player.paused), handleFullscreenChange()"
|
||||
|
|
|
@ -1,10 +1,67 @@
|
|||
<template>
|
||||
<div>
|
||||
<v-bottom-sheet
|
||||
v-model="sheet"
|
||||
:attach="$parent.$refs.vidcontainer"
|
||||
scrollable
|
||||
>
|
||||
<template #activator="{ on, attrs }">
|
||||
<v-btn
|
||||
fab
|
||||
text
|
||||
disabled
|
||||
style="position: absolute; bottom: 0.25rem; right: 4rem"
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
>
|
||||
HD
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-card class="background">
|
||||
<v-subheader>Playback Speed</v-subheader>
|
||||
<v-card-text style="height: 50vh" class="ma-0 pa-0">
|
||||
<v-list>
|
||||
<v-list-item
|
||||
v-for="src in sources"
|
||||
:key="src"
|
||||
@click="(sheet = false), (video.src = src.url)"
|
||||
>
|
||||
<v-list-item-avatar>
|
||||
<v-icon
|
||||
:color="
|
||||
video.src === src.url
|
||||
? 'primary'
|
||||
: $vuetify.theme.dark
|
||||
? 'background lighten-2'
|
||||
: 'background darken-2'
|
||||
"
|
||||
v-text="
|
||||
video.src === src.url
|
||||
? 'mdi-checkbox-outline'
|
||||
: 'mdi-checkbox-blank-outline'
|
||||
"
|
||||
></v-icon>
|
||||
</v-list-item-avatar>
|
||||
<v-list-item-title>{{ sped }}X</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-bottom-sheet>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["video", "sources"],
|
||||
data: () => ({
|
||||
sheet: false,
|
||||
}),
|
||||
mounted() {
|
||||
console.log(
|
||||
"sourcessourcessourcessourcessourcessourcessources",
|
||||
this.sources
|
||||
);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
@ -11,14 +11,15 @@
|
|||
query
|
||||
active
|
||||
style="width: 100%"
|
||||
class="background"
|
||||
:class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
|
||||
:class="
|
||||
$vuetify.theme.dark ? 'transparent-lighten-1' : 'transparent-darken-1'
|
||||
"
|
||||
background-opacity="0.5"
|
||||
background-color="primary"
|
||||
:buffer-value="buffered"
|
||||
:value="percent"
|
||||
color="primary"
|
||||
height="2"
|
||||
height="3"
|
||||
:style="
|
||||
fullscreen
|
||||
? 'width: calc(100% - 3rem); left: 1.5rem; position: absolute; bottom: 3.75rem;'
|
||||
|
@ -33,7 +34,7 @@
|
|||
dense
|
||||
track-color="transparent"
|
||||
:class="!controls && !fullscreen && !scrubbing ? 'invisible' : ''"
|
||||
style="position: absolute; z-index: 69420"
|
||||
style="position: absolute; z-index: 2"
|
||||
:style="
|
||||
fullscreen
|
||||
? 'width: calc(100% - 3rem); left: 1.5rem; bottom: 3.75rem;'
|
||||
|
|
|
@ -1,10 +1,58 @@
|
|||
<template>
|
||||
<div>
|
||||
<v-bottom-sheet
|
||||
v-model="sheet"
|
||||
:attach="$parent.$refs.vidcontainer"
|
||||
scrollable
|
||||
>
|
||||
<template #activator="{ on, attrs }">
|
||||
<v-btn
|
||||
fab
|
||||
text
|
||||
disabled
|
||||
style="position: absolute; bottom: 0.25rem; right: 7.5rem"
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
>
|
||||
1X
|
||||
{{ video.playbackRate }}X
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-card class="background">
|
||||
<v-subheader>Playback Speed</v-subheader>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["video"],
|
||||
data: () => ({
|
||||
sheet: false,
|
||||
speeds: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 3, 4, 5, 10],
|
||||
}),
|
||||
};
|
||||
</script>
|
||||
|
|
|
@ -248,6 +248,12 @@ export default {
|
|||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
}
|
||||
.transparent-lighten-1 {
|
||||
background: #ffffff22;
|
||||
}
|
||||
.transparent-darken-1 {
|
||||
background: #00000022;
|
||||
}
|
||||
.debug {
|
||||
outline: 1px solid red;
|
||||
}
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<div class="background" id="watch-body">
|
||||
<div id="player-container">
|
||||
<!-- TODO: move component to default.vue -->
|
||||
<!-- TODO: pass sources through vuex instead of props -->
|
||||
<!-- // TODO: move component to default.vue -->
|
||||
<!-- // TODO: pass sources through vuex instead of props -->
|
||||
<player
|
||||
v-if="sources.length > 0 && video.title && video.channelName"
|
||||
ref="player"
|
||||
|
|
Loading…
Reference in New Issue