[web] Use constant for interval

Instead of having the number 1000 written in multiple places, it is now a constant.
This commit is contained in:
Alain Nussbaumer 2023-06-23 22:24:37 +02:00
parent 979e60630e
commit 82db8141ea

View File

@ -11,8 +11,8 @@
/> />
<input <input
v-model.number="item_progress_ms" v-model.number="item_progress_ms"
:step="1000" :step="INTERVAL"
:max="is_live ? 1000 : track.length_ms" :max="is_live ? INTERVAL : track.length_ms"
type="range" type="range"
class="slider mt-5" class="slider mt-5"
:style="{ '--ratio': progress }" :style="{ '--ratio': progress }"
@ -30,15 +30,15 @@
v-text="$filters.durationInHours(track.length_ms)" v-text="$filters.durationInHours(track.length_ms)"
/> />
</div> </div>
<h1 class="title is-5" v-text="track.title" /> <p class="title is-5" v-text="track.title" />
<h2 class="title is-6" v-text="track.artist" /> <p class="title is-6" v-text="track.artist" />
<h2 <p
v-if="composer" v-if="composer"
class="subtitle is-6 has-text-grey has-text-weight-bold" class="subtitle is-6 has-text-grey has-text-weight-bold"
v-text="composer" v-text="composer"
/> />
<h3 class="subtitle is-6" v-text="track.album" /> <p v-if="track.album" class="subtitle is-6" v-text="track.album" />
<h3 <p
v-if="filepath" v-if="filepath"
class="subtitle is-6 has-text-grey" class="subtitle is-6 has-text-grey"
v-text="filepath" v-text="filepath"
@ -65,6 +65,8 @@ import CoverArtwork from '@/components/CoverArtwork.vue'
import webapi from '@/webapi' import webapi from '@/webapi'
import * as types from '@/store/mutation_types' import * as types from '@/store/mutation_types'
const INTERVAL = 1000
export default { export default {
name: 'PageNowPlaying', name: 'PageNowPlaying',
components: { components: {
@ -74,6 +76,7 @@ export default {
data() { data() {
return { return {
INTERVAL,
item_progress_ms: 0, item_progress_ms: 0,
interval_id: 0, interval_id: 0,
is_dragged: false, is_dragged: false,
@ -147,7 +150,7 @@ export default {
} }
this.item_progress_ms = this.player.item_progress_ms this.item_progress_ms = this.player.item_progress_ms
if (this.player.state === 'play') { if (this.player.state === 'play') {
this.interval_id = window.setInterval(this.tick, 1000) this.interval_id = window.setInterval(this.tick, INTERVAL)
} }
} }
}, },
@ -157,7 +160,7 @@ export default {
webapi.player_status().then(({ data }) => { webapi.player_status().then(({ data }) => {
this.$store.commit(types.UPDATE_PLAYER_STATUS, data) this.$store.commit(types.UPDATE_PLAYER_STATUS, data)
if (this.player.state === 'play') { if (this.player.state === 'play') {
this.interval_id = window.setInterval(this.tick, 1000) this.interval_id = window.setInterval(this.tick, INTERVAL)
} }
}) })
}, },
@ -173,11 +176,11 @@ export default {
tick() { tick() {
if (!this.is_dragged) { if (!this.is_dragged) {
if (this.is_live) { if (this.is_live) {
this.item_progress_ms += 1000 this.item_progress_ms += INTERVAL
} else if (this.item_progress_ms + 1000 > this.track.length_ms) { } else if (this.item_progress_ms + INTERVAL > this.track.length_ms) {
this.item_progress_ms = this.track.length_ms this.item_progress_ms = this.track.length_ms
} else { } else {
this.item_progress_ms += 1000 this.item_progress_ms += INTERVAL
} }
} }
}, },