mirror of
https://github.com/VueTubeApp/VueTube
synced 2024-11-25 20:55:17 +00:00
player settings: speed complete
This commit is contained in:
Nikita Krupin
parent
64636b3643
commit
815336f83f
5 changed files with 109 additions and 158 deletions
|
|
@ -162,7 +162,10 @@
|
|||
v-if="$refs.player"
|
||||
class="mx-2"
|
||||
:loop="$refs.player.loop"
|
||||
@loop="$refs.player.loop = !$refs.player.loop"
|
||||
@loop="
|
||||
($refs.player.loop = !$refs.player.loop),
|
||||
($refs.audio.loop = !$refs.audio.loop)
|
||||
"
|
||||
/>
|
||||
<close />
|
||||
</div>
|
||||
|
|
@ -258,7 +261,8 @@
|
|||
:current-speed="$refs.player.playbackRate"
|
||||
@speed="
|
||||
($refs.player.playbackRate = $event),
|
||||
($refs.audio.playbackRate = $event)
|
||||
($refs.audio.playbackRate = $event),
|
||||
$store.commit('player/setSpeed', $event)
|
||||
"
|
||||
/>
|
||||
<v-btn v-if="isFullscreen" fab text small disabled @click.stop="">
|
||||
|
|
@ -396,6 +400,8 @@ export default {
|
|||
if (vid.readyState >= 3) {
|
||||
this.$refs.audio.play();
|
||||
this.$refs.audio.currentTime = vid.currentTime;
|
||||
this.$refs.player.playbackRate = this.$store.state.player.speed;
|
||||
this.$refs.audio.playbackRate = this.$store.state.player.speed;
|
||||
vid.addEventListener("timeupdate", () => {
|
||||
if (!this.seeking) this.progress = vid.currentTime; // for seekbar
|
||||
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ export default {
|
|||
//--- Init Stuff ---//
|
||||
this.progressMsg = this.$lang("index").connecting;
|
||||
this.$store.commit("tweaks/initTweaks");
|
||||
this.$store.commit("player/initPlayer");
|
||||
|
||||
//--- Load Theming ---//
|
||||
await this.theming();
|
||||
|
|
|
|||
|
|
@ -6,71 +6,16 @@
|
|||
<!-- // TODO: quality auto-adjustment settings -->
|
||||
<!-- // TODO: Data saver -->
|
||||
<!-- // TODO: Player UI -->
|
||||
<h3 class="ml-8 mt-8">Interactions (preview)</h3>
|
||||
<!-- v-model = thumbs ui -->
|
||||
<v-radio-group>
|
||||
<div
|
||||
class="d-flex flex-row px-6 no-wrap"
|
||||
style="max-width: 100%; overflow-x: auto"
|
||||
>
|
||||
<div class="text-center">
|
||||
<v-radio
|
||||
color="primary"
|
||||
active-class="px-6 border-primary primary"
|
||||
off-icon="mdi-thumb-up-outline"
|
||||
on-icon="mdi-thumb-up"
|
||||
style="transition-duration: 0.3s"
|
||||
:style="{
|
||||
background: $vuetify.theme.dark
|
||||
? 'var(--v-primary-darken4) !important'
|
||||
: 'var(--v-primary-lighten4) !important',
|
||||
border: $vuetify.theme.dark
|
||||
? '2px solid var(--v-primary-darken4)'
|
||||
: '2px solid var(--v-primary-lighten4)',
|
||||
}"
|
||||
class="pa-4 ma-2 rounded-lg"
|
||||
>
|
||||
<template slot="label">
|
||||
<v-icon
|
||||
class="text--white"
|
||||
:class="
|
||||
$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'
|
||||
"
|
||||
>
|
||||
mdi-thumb-down
|
||||
</v-icon>
|
||||
<div class="ml-1" style="font-size: 0.6rem" v-text="'12,345'" />
|
||||
</template>
|
||||
</v-radio>
|
||||
New
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<v-btn
|
||||
text
|
||||
fab
|
||||
class="vertical-button px-4 rounded-lg ma-2"
|
||||
elevation="0"
|
||||
style="
|
||||
width: 4.2rem !important;
|
||||
height: 3.75rem !important;
|
||||
text-transform: none !important;
|
||||
border: 2px solid var(--v-primary-base) !important;
|
||||
"
|
||||
>
|
||||
<v-icon v-text="'mdi-thumb-up-outline'" />
|
||||
<div class="mt-1" style="font-size: 0.6rem" v-text="'12,345'" />
|
||||
</v-btn>
|
||||
<br />
|
||||
Current
|
||||
</div>
|
||||
</div>
|
||||
</v-radio-group>
|
||||
<!-- <v-divider v-if="!$store.state.tweaks.roundTweak" />
|
||||
|
||||
<h3 class="ml-8 mt-8">Pre-Fetch</h3>
|
||||
<h3 class="ml-8 mt-8">
|
||||
<v-icon class="mb-1 mr-1">mdi-play-speed</v-icon>
|
||||
Preload
|
||||
</h3>
|
||||
|
||||
<v-card
|
||||
flat
|
||||
class="mx-4 my-2 pa-4 pb-2 d-flex flex-row justify-between background"
|
||||
class="mx-4 my-2 pa-4 d-flex flex-row justify-between background"
|
||||
:class="
|
||||
$store.state.tweaks.roundTweak > 0
|
||||
? $vuetify.theme.dark
|
||||
|
|
@ -81,30 +26,30 @@
|
|||
:style="{
|
||||
borderRadius: `${$store.state.tweaks.roundTweak / 2}rem`,
|
||||
}"
|
||||
@click="(preload = !preload), $vuetube.haptics.hapticsImpactLight(1)"
|
||||
>
|
||||
<div class="my-auto">
|
||||
Pre-fetch video data before playback
|
||||
<!-- <b class="red--text">(can be data intensive it high quality presets)</b> -->
|
||||
<div>
|
||||
Pre-buffer video data before playback to avoid buffering pauses.
|
||||
<b class="red--text">(can be data intensive it high quality presets)</b>
|
||||
<br />
|
||||
_______________
|
||||
<br />
|
||||
<hr class="primary mr-6" style="opacity: 0.25" />
|
||||
<span class="overline">Buffering threshold: 15%</span>
|
||||
</div>
|
||||
<v-spacer />
|
||||
<v-switch
|
||||
disabled
|
||||
class="mt-2"
|
||||
v-model="preload"
|
||||
style="pointer-events: none"
|
||||
persistent-hint
|
||||
class="mt-0"
|
||||
inset
|
||||
/>
|
||||
</v-card>
|
||||
</v-card> -->
|
||||
|
||||
<v-divider v-if="!$store.state.tweaks.roundTweak" />
|
||||
|
||||
<h3 class="ml-8 mt-8">
|
||||
<v-icon>mdi-speedometer</v-icon>
|
||||
Speed · {{ speed }}x
|
||||
<v-icon class="mb-1 mr-1">mdi-speedometer</v-icon>
|
||||
Speed <b class="ml-1">·</b> {{ speed }}x
|
||||
</h3>
|
||||
|
||||
<v-card
|
||||
|
|
@ -133,7 +78,7 @@
|
|||
$vuetube.haptics.hapticsImpactLight(1)
|
||||
"
|
||||
>
|
||||
<div class="my-auto">
|
||||
<div>
|
||||
<div>Autosave</div>
|
||||
<div
|
||||
class="background--text pr-4"
|
||||
|
|
@ -148,70 +93,69 @@
|
|||
<v-switch
|
||||
v-model="speedAutosave"
|
||||
style="pointer-events: none"
|
||||
class="mt-2"
|
||||
persistent-hint
|
||||
class="mt-0"
|
||||
inset
|
||||
/>
|
||||
</v-card>
|
||||
<!-- <speed
|
||||
class="mx-2"
|
||||
style="z-index: 77777"
|
||||
:current-speed="$store.state.player.speed"
|
||||
@speed="speed = $event"
|
||||
/> -->
|
||||
<span v-if="speed > 4">
|
||||
<v-icon>mdi-alert-decagram</v-icon> Might cause issues with buffering
|
||||
<br />
|
||||
enable <b>Pre-Fetch</b> to avoid
|
||||
</span>
|
||||
<v-slider
|
||||
v-model="speed"
|
||||
style="transition-duration: 0.3s; transition-property: all"
|
||||
class="pr-8 pl-8 pt-4 pb-0 background"
|
||||
:max="16"
|
||||
:label="speed.toFixed(2) + 'x'"
|
||||
:color="speed > 4 ? 'green' : ''"
|
||||
thumb-size="64"
|
||||
step=".25"
|
||||
:class="
|
||||
$store.state.tweaks.roundTweak > 0
|
||||
? $vuetify.theme.dark
|
||||
? 'lighten-1'
|
||||
: 'darken-1'
|
||||
: ''
|
||||
"
|
||||
:style="{
|
||||
borderRadius: `${$store.state.tweaks.roundTweak / 12}rem`,
|
||||
filter: `invert(${speed > 4 ? '1' : '0'})`,
|
||||
}"
|
||||
@input="$vuetube.haptics.hapticsImpactLight(0)"
|
||||
>
|
||||
<template #thumb-label="{ value }">
|
||||
<b class="background--text">{{ value.toFixed(2) }}</b>
|
||||
</template>
|
||||
</v-slider>
|
||||
<v-card flat class="d-flex flex-row justify-between background">
|
||||
<speed
|
||||
class="background mr-1 px-4 d-flex justify-center align-center"
|
||||
style="
|
||||
z-index: 77777;
|
||||
font-size: 1.5rem !important;
|
||||
font-weight: bold !important;
|
||||
"
|
||||
:current-speed="speed"
|
||||
:class="
|
||||
$store.state.tweaks.roundTweak > 0
|
||||
? $vuetify.theme.dark
|
||||
? 'lighten-1'
|
||||
: 'darken-1'
|
||||
: ''
|
||||
"
|
||||
:style="{
|
||||
borderRadius: `${$store.state.tweaks.roundTweak / 12}rem`,
|
||||
}"
|
||||
@speed="speed = $event"
|
||||
/>
|
||||
<v-slider
|
||||
v-model="speed"
|
||||
step=".25"
|
||||
thumb-size="64"
|
||||
class="pa-0 pt-5 pl-6 pb-2 ma-0 background"
|
||||
style="transition-duration: 0.3s; transition-property: all"
|
||||
:rules="[(s) => s <= 4 || 'Might cause issues with buffering.']"
|
||||
:min="0.25"
|
||||
:max="16"
|
||||
:class="
|
||||
$store.state.tweaks.roundTweak > 0
|
||||
? $vuetify.theme.dark
|
||||
? 'lighten-1'
|
||||
: 'darken-1'
|
||||
: ''
|
||||
"
|
||||
:style="{
|
||||
borderRadius: `${$store.state.tweaks.roundTweak / 12}rem`,
|
||||
}"
|
||||
@input="$vuetube.haptics.hapticsImpactLight(0)"
|
||||
>
|
||||
<template #thumb-label="{ value }">
|
||||
<b class="background--text" style="font-size: 1.15rem">
|
||||
{{ value.toFixed(2) }}x
|
||||
</b>
|
||||
</template>
|
||||
</v-slider>
|
||||
</v-card>
|
||||
</v-card>
|
||||
<marquee bgcolor="#ffdddd">
|
||||
<b style="text-shadow: 0 0 1rem white" class="red--text">
|
||||
(NOTHING WORKS, WIP, incomplete)
|
||||
</b>
|
||||
</marquee>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.vertical-button span.v-btn__content {
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// import speed from "../../components/Player/speed.vue";
|
||||
import speed from "../../components/Player/speed.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
// speed,
|
||||
speed,
|
||||
},
|
||||
computed: {
|
||||
speed: {
|
||||
|
|
@ -219,7 +163,6 @@ export default {
|
|||
return this.$store.state.player.speed;
|
||||
},
|
||||
set(value) {
|
||||
console.warn(value);
|
||||
this.$store.commit("player/setSpeed", value);
|
||||
},
|
||||
},
|
||||
|
|
@ -231,30 +174,21 @@ export default {
|
|||
this.$store.commit("player/setSpeedAutosave", value);
|
||||
},
|
||||
},
|
||||
// preload: {
|
||||
// get() {
|
||||
// return this.$store.state.player.preload;
|
||||
// },
|
||||
// set(value) {
|
||||
// this.$store.commit("player/setPreload", value);
|
||||
// },
|
||||
// },
|
||||
// bufferThreshold: {
|
||||
// get() {
|
||||
// return this.$store.state.player.bufferThreshold;
|
||||
// },
|
||||
// set(value) {
|
||||
// this.$store.commit("player/setBufferThreshold", value);
|
||||
// },
|
||||
// },
|
||||
// quality: {
|
||||
// get() {
|
||||
// return this.$store.state.player.quality;
|
||||
// },
|
||||
// set(value) {
|
||||
// this.$store.commit("player/setQuality", value);
|
||||
// },
|
||||
// },
|
||||
preload: {
|
||||
get() {
|
||||
return this.$store.state.player.preload;
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit("player/setPreload", value);
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.vertical-button span.v-btn__content {
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ export const state = () => ({
|
|||
speed: 1,
|
||||
speedAutosave: null,
|
||||
preload: null,
|
||||
quality: null,
|
||||
// quality: null,
|
||||
// qualityAutoSwitch: null,
|
||||
// shortFullscreen: null,
|
||||
// autoplay: null,
|
||||
|
|
@ -11,19 +11,31 @@ export const state = () => ({
|
|||
// music: null,
|
||||
});
|
||||
export const mutations = {
|
||||
initPlayer(state) {
|
||||
if (process.client) {
|
||||
state.loop = JSON.parse(localStorage.getItem("loop")) === true; // defaults to false
|
||||
state.speed = JSON.parse(localStorage.getItem("speed")) || 1; // defaults to 1
|
||||
state.speedAutosave = !(
|
||||
// false if false, defaults to true
|
||||
(JSON.parse(localStorage.getItem("speedAutosave")) === false)
|
||||
);
|
||||
state.preload = JSON.parse(localStorage.getItem("preload")) === true; // defaults to false
|
||||
}
|
||||
},
|
||||
setLoop(state, payload) {
|
||||
state.loop = payload;
|
||||
localStorage.setItem("loop", payload);
|
||||
},
|
||||
setSpeed(state, payload) {
|
||||
state.speed = payload;
|
||||
localStorage.setItem("speed", payload);
|
||||
},
|
||||
setSpeedAutosave(state, payload) {
|
||||
state.speedAutosave = payload;
|
||||
localStorage.setItem("speedAutosave", payload);
|
||||
},
|
||||
setPreload(state, payload) {
|
||||
state.preload = payload;
|
||||
},
|
||||
setQuality(state, payload) {
|
||||
state.quality = payload;
|
||||
localStorage.setItem("preload", payload);
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,8 +5,6 @@ export const state = () => ({
|
|||
});
|
||||
export const mutations = {
|
||||
initTweaks(state) {
|
||||
// NOTE: localStorage is not reactive, so it will only be used on first load
|
||||
// currently called on mounted() in pages/index.vue
|
||||
if (process.client) {
|
||||
state.roundTweak = JSON.parse(localStorage.getItem("roundTweak")) || 0;
|
||||
state.roundThumb =
|
||||
|
|
|
|||
Loading…
Reference in a new issue