MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix linting errors in touched files

This commit is contained in:
Georg Krause 2021-09-25 21:44:02 +02:00
parent 9bef230499
commit 5a74d1d3a0
3 changed files with 201 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
front/src/components/Queue.vue
View File

@ -207,20 +207,18 @@
</section> </section>
</template> </template>
<script> <script>
import { mapState, mapGetters, mapActions } from "vuex" import { mapState, mapGetters, mapActions } from 'vuex'
import $ from 'jquery' import $ from 'jquery'
import moment from "moment" import moment from 'moment'
import lodash from '@/lodash' import lodash from '@/lodash'
import time from "@/utils/time" import time from '@/utils/time'
import createFocusTrap from 'focus-trap' import createFocusTrap from 'focus-trap'
import store from "@/store"
export default { export default {
components: { components: {
TrackFavoriteIcon: () => import(/* webpackChunkName: "auth-audio" */ "@/components/favorites/TrackFavoriteIcon"), TrackFavoriteIcon: () => import(/* webpackChunkName: "auth-audio" */ '@/components/favorites/TrackFavoriteIcon'),
TrackPlaylistIcon: () => import(/* webpackChunkName: "auth-audio" */ "@/components/playlists/TrackPlaylistIcon"), TrackPlaylistIcon: () => import(/* webpackChunkName: "auth-audio" */ '@/components/playlists/TrackPlaylistIcon'),
VolumeControl: () => import(/* webpackChunkName: "audio" */ "@/components/audio/VolumeControl"), draggable: () => import(/* webpackChunkName: "draggable" */ 'vuedraggable')
draggable: () => import(/* webpackChunkName: "draggable" */ "vuedraggable"),
}, },
data () { data () {
return { return {
@ -232,14 +230,13 @@ export default {
} }
}, },
mounted () { mounted () {
let self = this this.focusTrap = createFocusTrap(this.$el, { allowOutsideClick: () => { return true } })
this.focusTrap = createFocusTrap(this.$el, {allowOutsideClick: () => { return true }})
this.focusTrap.activate() this.focusTrap.activate()
this.$nextTick(() => { this.$nextTick(() => {
setTimeout(() => { setTimeout(() => {
this.scrollToCurrent() this.scrollToCurrent()
// delay is to let transition work // delay is to let transition work
}, 400); }, 400)
}) })
}, },
computed: { computed: {
@ -256,18 +253,18 @@ export default {
queue: state => state.queue queue: state => state.queue
}), }),
...mapGetters({ ...mapGetters({
currentTrack: "queue/currentTrack", currentTrack: 'queue/currentTrack',
hasNext: "queue/hasNext", hasNext: 'queue/hasNext',
emptyQueue: "queue/isEmpty", emptyQueue: 'queue/isEmpty',
durationFormatted: "player/durationFormatted", durationFormatted: 'player/durationFormatted',
currentTimeFormatted: "player/currentTimeFormatted", currentTimeFormatted: 'player/currentTimeFormatted',
progress: "player/progress" progress: 'player/progress'
}), }),
tracks: { tracks: {
get() { get () {
return this.$store.state.queue.tracks return this.$store.state.queue.tracks
}, },
set(value) { set (value) {
this.tracksChangeBuffer = value this.tracksChangeBuffer = value
} }
}, },
@ -276,11 +273,11 @@ export default {
queue: this.$pgettext('*/*/*', 'Queue'), queue: this.$pgettext('*/*/*', 'Queue'),
duration: this.$pgettext('*/*/*', 'Duration'), duration: this.$pgettext('*/*/*', 'Duration'),
addArtistContentFilter: this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Hide content from this artist…'), addArtistContentFilter: this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Hide content from this artist…'),
restart: this.$pgettext('*/*/*', 'Restart track'), restart: this.$pgettext('*/*/*', 'Restart track')
} }
}, },
timeLeft () { timeLeft () {
let seconds = lodash.sum( const seconds = lodash.sum(
this.queue.tracks.slice(this.queue.currentIndex).map((t) => { this.queue.tracks.slice(this.queue.currentIndex).map((t) => {
return (t.uploads || []).map((u) => { return (t.uploads || []).map((u) => {
return u.duration || 0 return u.duration || 0
@ -294,7 +291,7 @@ export default {
return this.volume return this.volume
}, },
set (v) { set (v) {
this.$store.commit("player/volume", v) this.$store.commit('player/volume', v)
} }
}, },
playerFocused () { playerFocused () {
@ -303,58 +300,57 @@ export default {
}, },
methods: { methods: {
...mapActions({ ...mapActions({
cleanTrack: "queue/cleanTrack", cleanTrack: 'queue/cleanTrack',
mute: "player/mute", mute: 'player/mute',
unmute: "player/unmute", unmute: 'player/unmute',
clean: "queue/clean", clean: 'queue/clean',
toggleMute: "player/toggleMute", toggleMute: 'player/toggleMute',
resumePlayback: "player/resumePlayback", resumePlayback: 'player/resumePlayback',
pausePlayback: "player/pausePlayback", pausePlayback: 'player/pausePlayback'
}), }),
reorder: function(event) { reorder: function (event) {
this.$store.commit("queue/reorder", { this.$store.commit('queue/reorder', {
tracks: this.tracksChangeBuffer, tracks: this.tracksChangeBuffer,
oldIndex: event.oldIndex, oldIndex: event.oldIndex,
newIndex: event.newIndex newIndex: event.newIndex
}) })
}, },
scrollToCurrent() { scrollToCurrent () {
let current = $(this.$el).find('.queue-item.active')[0] const current = $(this.$el).find('.queue-item.active')[0]
if (!current) { if (!current) {
return return
} }
const elementRect = current.getBoundingClientRect(); const elementRect = current.getBoundingClientRect()
const absoluteElementTop = elementRect.top + window.pageYOffset; const absoluteElementTop = elementRect.top + window.pageYOffset
const middle = absoluteElementTop - (window.innerHeight / 2); const middle = absoluteElementTop - (window.innerHeight / 2)
window.scrollTo({top: middle, behaviour: 'smooth'}); window.scrollTo({ top: middle, behaviour: 'smooth' })
}, },
touchProgress(e) { touchProgress (e) {
let time const target = this.$refs.progress
let target = this.$refs.progress const time = (e.layerX / target.offsetWidth) * this.duration
time = (e.layerX / target.offsetWidth) * this.duration
this.$emit('touch-progress', time) this.$emit('touch-progress', time)
}, },
shuffle() { shuffle () {
let disabled = this.queue.tracks.length === 0 const disabled = this.queue.tracks.length === 0
if (this.isShuffling || disabled) { if (this.isShuffling || disabled) {
return return
} }
let self = this const self = this
let msg = this.$pgettext('Content/Queue/Message', "Queue shuffled!") const msg = this.$pgettext('Content/Queue/Message', 'Queue shuffled!')
this.isShuffling = true this.isShuffling = true
setTimeout(() => { setTimeout(() => {
self.$store.dispatch("queue/shuffle", () => { self.$store.dispatch('queue/shuffle', () => {
self.isShuffling = false self.isShuffling = false
self.$store.commit("ui/addMessage", { self.$store.commit('ui/addMessage', {
content: msg, content: msg,
date: new Date() date: new Date()
}) })
}) })
}, 100) }, 100)
}, }
}, },
watch: { watch: {
"$store.state.ui.queueFocused": { '$store.state.ui.queueFocused': {
handler (v) { handler (v) {
if (v === 'queue') { if (v === 'queue') {
this.$nextTick(() => { this.$nextTick(() => {
@ -369,7 +365,7 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
this.scrollToCurrent() this.scrollToCurrent()
}) })
}, }
}, },
'$store.state.queue.tracks': { '$store.state.queue.tracks': {
handler (v) { handler (v) {
@ -379,7 +375,7 @@ export default {
}, },
immediate: true immediate: true
}, },
"$route.fullPath" () { '$route.fullPath' () {
this.$store.commit('ui/queueFocused', null) this.$store.commit('ui/queueFocused', null)
} }
} }

260
front/src/components/audio/Player.vue
View File

@ -224,23 +224,22 @@
</template> </template>
<script> <script>
import { mapState, mapGetters, mapActions } from "vuex" import { mapState, mapGetters, mapActions } from 'vuex'
import GlobalEvents from "@/components/utils/global-events" import GlobalEvents from '@/components/utils/global-events'
import { toLinearVolumeScale } from '@/audio/volume' import { toLinearVolumeScale } from '@/audio/volume'
import { Howl } from "howler" import { Howl, Howler } from 'howler'
import $ from 'jquery'
import _ from '@/lodash' import _ from '@/lodash'
import url from '@/utils/url' import url from '@/utils/url'
import axios from 'axios' import axios from 'axios'
export default { export default {
components: { components: {
VolumeControl: () => import(/* webpackChunkName: "audio" */ "./VolumeControl"), VolumeControl: () => import(/* webpackChunkName: "audio" */ './VolumeControl'),
TrackFavoriteIcon: () => import(/* webpackChunkName: "auth-audio" */ "@/components/favorites/TrackFavoriteIcon"), TrackFavoriteIcon: () => import(/* webpackChunkName: "auth-audio" */ '@/components/favorites/TrackFavoriteIcon'),
TrackPlaylistIcon: () => import(/* webpackChunkName: "auth-audio" */ "@/components/playlists/TrackPlaylistIcon"), TrackPlaylistIcon: () => import(/* webpackChunkName: "auth-audio" */ '@/components/playlists/TrackPlaylistIcon'),
GlobalEvents, GlobalEvents
}, },
data() { data () {
return { return {
isShuffling: false, isShuffling: false,
sliderVolume: this.volume, sliderVolume: this.volume,
@ -260,10 +259,10 @@ export default {
nextTrackPreloaded: false nextTrackPreloaded: false
} }
}, },
mounted() { mounted () {
this.$store.dispatch('player/updateProgress', 0) this.$store.dispatch('player/updateProgress', 0)
this.$store.commit('player/playing', false) this.$store.commit('player/playing', false)
this.$store.commit("player/isLoadingAudio", false) this.$store.commit('player/isLoadingAudio', false)
Howler.unload() // clear existing cache, if any Howler.unload() // clear existing cache, if any
this.nextTrackPreloaded = false this.nextTrackPreloaded = false
// this is needed to unlock audio playing under some browsers, // this is needed to unlock audio playing under some browsers,
@ -272,7 +271,7 @@ export default {
this.dummyAudio = new Howl({ this.dummyAudio = new Howl({
preload: false, preload: false,
autoplay: false, autoplay: false,
src: ["noop.webm", "noop.mp3"] src: ['noop.webm', 'noop.mp3']
}) })
if (this.currentTrack) { if (this.currentTrack) {
this.getSound(this.currentTrack) this.getSound(this.currentTrack)
@ -280,29 +279,29 @@ export default {
} }
// Add controls for notification drawer // Add controls for notification drawer
if ('mediaSession' in navigator) { if ('mediaSession' in navigator) {
navigator.mediaSession.setActionHandler('play', this.resumePlayback); navigator.mediaSession.setActionHandler('play', this.resumePlayback)
navigator.mediaSession.setActionHandler('pause', this.pausePlayback); navigator.mediaSession.setActionHandler('pause', this.pausePlayback)
navigator.mediaSession.setActionHandler('seekforward', this.seekForward); navigator.mediaSession.setActionHandler('seekforward', this.seekForward)
navigator.mediaSession.setActionHandler('seekbackward', this.seekBackward); navigator.mediaSession.setActionHandler('seekbackward', this.seekBackward)
navigator.mediaSession.setActionHandler('nexttrack', this.next); navigator.mediaSession.setActionHandler('nexttrack', this.next)
navigator.mediaSession.setActionHandler('previoustrack', this.previous); navigator.mediaSession.setActionHandler('previoustrack', this.previous)
} }
}, },
beforeDestroy () { beforeDestroy () {
this.dummyAudio.unload() this.dummyAudio.unload()
this.observeProgress(false) this.observeProgress(false)
}, },
destroyed() { destroyed () {
}, },
methods: { methods: {
...mapActions({ ...mapActions({
resumePlayback: "player/resumePlayback", resumePlayback: 'player/resumePlayback',
pausePlayback: "player/pausePlayback", pausePlayback: 'player/pausePlayback',
togglePlayback: "player/togglePlayback", togglePlayback: 'player/togglePlayback',
mute: "player/mute", mute: 'player/mute',
unmute: "player/unmute", unmute: 'player/unmute',
clean: "queue/clean", clean: 'queue/clean',
toggleMute: "player/toggleMute", toggleMute: 'player/toggleMute'
}), }),
async getTrackData (trackData) { async getTrackData (trackData) {
// use previously fetched trackData // use previously fetched trackData
@ -312,51 +311,51 @@ export default {
return axios.get(`tracks/${trackData.id}/`) return axios.get(`tracks/${trackData.id}/`)
.then( .then(
response => response.data, response => response.data,
err => null () => null
) )
}, },
shuffle() { shuffle () {
let disabled = this.queue.tracks.length === 0 const disabled = this.queue.tracks.length === 0
if (this.isShuffling || disabled) { if (this.isShuffling || disabled) {
return return
} }
let self = this const self = this
let msg = this.$pgettext('Content/Queue/Message', "Queue shuffled!") const msg = this.$pgettext('Content/Queue/Message', 'Queue shuffled!')
this.isShuffling = true this.isShuffling = true
setTimeout(() => { setTimeout(() => {
self.$store.dispatch("queue/shuffle", () => { self.$store.dispatch('queue/shuffle', () => {
self.isShuffling = false self.isShuffling = false
self.$store.commit("ui/addMessage", { self.$store.commit('ui/addMessage', {
content: msg, content: msg,
date: new Date() date: new Date()
}) })
}) })
}, 100) }, 100)
}, },
next() { next () {
let self = this const self = this
this.$store.dispatch("queue/next").then(() => { this.$store.dispatch('queue/next').then(() => {
self.$emit("next") self.$emit('next')
}) })
}, },
previous() { previous () {
let self = this const self = this
this.$store.dispatch("queue/previous").then(() => { this.$store.dispatch('queue/previous').then(() => {
self.$emit("previous") self.$emit('previous')
}) })
}, },
handleError({ sound, error }) { handleError ({ sound, error }) {
this.$store.commit("player/isLoadingAudio", false) this.$store.commit('player/isLoadingAudio', false)
this.$store.dispatch("player/trackErrored") this.$store.dispatch('player/trackErrored')
}, },
getSound (trackData) { getSound (trackData) {
let cached = this.getSoundFromCache(trackData) const cached = this.getSoundFromCache(trackData)
if (cached) { if (cached) {
return cached.sound return cached.sound
} }
let srcs = this.getSrcs(trackData) const srcs = this.getSrcs(trackData)
let self = this const self = this
let sound = new Howl({ const sound = new Howl({
src: srcs.map((s) => { return s.url }), src: srcs.map((s) => { return s.url }),
format: srcs.map((s) => { return s.type }), format: srcs.map((s) => { return s.type }),
autoplay: false, autoplay: false,
@ -372,17 +371,17 @@ export default {
} }
}, },
onload: function () { onload: function () {
let sound = this const sound = this
let node = this._sounds[0]._node; const node = this._sounds[0]._node
node.addEventListener('progress', () => { node.addEventListener('progress', () => {
if (sound != self.currentSound) { if (sound !== self.currentSound) {
return return
} }
self.updateBuffer(node) self.updateBuffer(node)
}) })
}, },
onplay: function () { onplay: function () {
if (this != self.currentSound) { if (this !== self.currentSound) {
this.stop() this.stop()
return return
} }
@ -390,30 +389,29 @@ export default {
self.$store.commit('player/resetErrorCount') self.$store.commit('player/resetErrorCount')
self.$store.commit('player/errored', false) self.$store.commit('player/errored', false)
self.$store.commit('player/duration', this.duration()) self.$store.commit('player/duration', this.duration())
}, },
onloaderror: function (sound, error) { onloaderror: function (sound, error) {
self.removeFromCache(this) self.removeFromCache(this)
if (this != self.currentSound) { if (this !== self.currentSound) {
return return
} }
console.log('Error while playing:', sound, error) console.log('Error while playing:', sound, error)
self.handleError({sound, error}) self.handleError({ sound, error })
}, }
}) })
this.addSoundToCache(sound, trackData) this.addSoundToCache(sound, trackData)
return sound return sound
}, },
getSrcs: function (trackData) { getSrcs: function (trackData) {
let a = document.createElement('audio') const a = document.createElement('audio')
let allowed = ['probably', 'maybe'] const allowed = ['probably', 'maybe']
let sources = trackData.uploads.filter(u => { const sources = trackData.uploads.filter(u => {
let canPlay = a.canPlayType(u.mimetype) const canPlay = a.canPlayType(u.mimetype)
return allowed.indexOf(canPlay) > -1 return allowed.indexOf(canPlay) > -1
}).map(u => { }).map(u => {
return { return {
type: u.extension, type: u.extension,
url: this.$store.getters['instance/absoluteUrl'](u.listen_url), url: this.$store.getters['instance/absoluteUrl'](u.listen_url)
} }
}) })
a.remove() a.remove()
@ -433,12 +431,12 @@ export default {
// so authentication can be checked by the backend // so authentication can be checked by the backend
// because for audio files we cannot use the regular Authentication // because for audio files we cannot use the regular Authentication
// header // header
let param = "jwt" let param = 'jwt'
let value = this.$store.state.auth.token let value = this.$store.state.auth.token
if (this.$store.state.auth.scopedTokens && this.$store.state.auth.scopedTokens.listen) { if (this.$store.state.auth.scopedTokens && this.$store.state.auth.scopedTokens.listen) {
// used scoped tokens instead of JWT to reduce the attack surface if the token // used scoped tokens instead of JWT to reduce the attack surface if the token
// is leaked // is leaked
param = "token" param = 'token'
value = this.$store.state.auth.scopedTokens.listen value = this.$store.state.auth.scopedTokens.listen
} }
sources.forEach(e => { sources.forEach(e => {
@ -450,30 +448,30 @@ export default {
updateBuffer (node) { updateBuffer (node) {
// from https://github.com/goldfire/howler.js/issues/752#issuecomment-372083163 // from https://github.com/goldfire/howler.js/issues/752#issuecomment-372083163
let range = 0; let range = 0
let bf = node.buffered; const bf = node.buffered
let time = node.currentTime; const time = node.currentTime
try { try {
while(!(bf.start(range) <= time && time <= bf.end(range))) { while (!(bf.start(range) <= time && time <= bf.end(range))) {
range += 1; range += 1
} }
} catch (IndexSizeError) { } catch (IndexSizeError) {
return return
} }
let loadPercentage let loadPercentage
let start = bf.start(range) const start = bf.start(range)
let end = bf.end(range) const end = bf.end(range)
if (range === 0) { if (range === 0) {
// easy case, no user-seek // easy case, no user-seek
let loadStartPercentage = start / node.duration; const loadStartPercentage = start / node.duration
let loadEndPercentage = end / node.duration; const loadEndPercentage = end / node.duration
loadPercentage = loadEndPercentage - loadStartPercentage; loadPercentage = loadEndPercentage - loadStartPercentage
} else { } else {
let loaded = end - start const loaded = end - start
let remainingToLoad = node.duration - start const remainingToLoad = node.duration - start
// user seeked a specific position in the audio, our progress must be // user seeked a specific position in the audio, our progress must be
// computed based on the remaining portion of the track // computed based on the remaining portion of the track
loadPercentage = loaded / remainingToLoad; loadPercentage = loaded / remainingToLoad
} }
if (loadPercentage * 100 === this.bufferProgress) { if (loadPercentage * 100 === this.bufferProgress) {
return return
@ -483,18 +481,17 @@ export default {
updateProgress: function () { updateProgress: function () {
this.isUpdatingTime = true this.isUpdatingTime = true
if (this.currentSound && this.currentSound.state() === 'loaded') { if (this.currentSound && this.currentSound.state() === 'loaded') {
let t = this.currentSound.seek() const t = this.currentSound.seek()
let d = this.currentSound.duration() const d = this.currentSound.duration()
this.$store.dispatch('player/updateProgress', t) this.$store.dispatch('player/updateProgress', t)
this.updateBuffer(this.currentSound._sounds[0]._node) this.updateBuffer(this.currentSound._sounds[0]._node)
let toPreload = this.$store.state.queue.tracks[this.currentIndex + 1] const toPreload = this.$store.state.queue.tracks[this.currentIndex + 1]
if (!this.nextTrackPreloaded && toPreload && !this.getSoundFromCache(toPreload) && (t > this.preloadDelay || d - t < 30)) { if (!this.nextTrackPreloaded && toPreload && !this.getSoundFromCache(toPreload) && (t > this.preloadDelay || d - t < 30)) {
this.getSound(toPreload) this.getSound(toPreload)
this.nextTrackPreloaded = true this.nextTrackPreloaded = true
} }
if (t > (d / 2)) { if (t > (d / 2)) {
let onlyTrack = this.$store.state.queue.tracks.length === 1 if (this.listeningRecorded !== this.currentTrack) {
if (this.listeningRecorded != this.currentTrack) {
this.listeningRecorded = this.currentTrack this.listeningRecorded = this.currentTrack
this.$store.dispatch('player/trackListened', this.currentTrack) this.$store.dispatch('player/trackListened', this.currentTrack)
} }
@ -509,21 +506,20 @@ export default {
} else { } else {
this.next() // parenthesis where missing here this.next() // parenthesis where missing here
} }
} } else {
else {
// seek left // seek left
let position = Math.max(this.currentTime + step, 0) const position = Math.max(this.currentTime + step, 0)
this.$store.dispatch('player/updateProgress', position) this.$store.dispatch('player/updateProgress', position)
} }
}, },
seekForward () { seekForward () {
this.seek (5) this.seek(5)
}, },
seekBackward () { seekBackward () {
this.seek (-5) this.seek(-5)
}, },
observeProgress: function (enable) { observeProgress: function (enable) {
let self = this const self = this
if (enable) { if (enable) {
if (self.progressInterval) { if (self.progressInterval) {
clearInterval(self.progressInterval) clearInterval(self.progressInterval)
@ -555,7 +551,7 @@ export default {
} }
}, },
ended: function () { ended: function () {
let onlyTrack = this.$store.state.queue.tracks.length === 1 const onlyTrack = this.$store.state.queue.tracks.length === 1
if (this.looping === 1 || (onlyTrack && this.looping === 2)) { if (this.looping === 1 || (onlyTrack && this.looping === 2)) {
this.currentSound.seek(0) this.currentSound.seek(0)
this.$store.dispatch('player/updateProgress', 0) this.$store.dispatch('player/updateProgress', 0)
@ -574,7 +570,7 @@ export default {
})[0] })[0]
}, },
addSoundToCache (sound, trackData) { addSoundToCache (sound, trackData) {
let data = { const data = {
date: new Date(), date: new Date(),
track: trackData, track: trackData,
sound: sound sound: sound
@ -583,20 +579,19 @@ export default {
this.checkCache() this.checkCache()
}, },
checkCache () { checkCache () {
let self = this const self = this
let toKeep = [] const toKeep = []
_.reverse(this.soundsCache).forEach((e) => { _.reverse(this.soundsCache).forEach((e) => {
if (toKeep.length < self.maxPreloaded) { if (toKeep.length < self.maxPreloaded) {
toKeep.push(e) toKeep.push(e)
} else { } else {
let src = e.sound._src
e.sound.unload() e.sound.unload()
} }
}) })
this.soundsCache = _.reverse(toKeep) this.soundsCache = _.reverse(toKeep)
}, },
removeFromCache (sound) { removeFromCache (sound) {
let toKeep = [] const toKeep = []
this.soundsCache.forEach((e) => { this.soundsCache.forEach((e) => {
if (e.sound === sound) { if (e.sound === sound) {
e.sound.unload() e.sound.unload()
@ -608,7 +603,7 @@ export default {
}, },
async loadSound (newValue, oldValue) { async loadSound (newValue, oldValue) {
let trackData = newValue let trackData = newValue
let oldSound = this.currentSound const oldSound = this.currentSound
// stop all other sounds! // stop all other sounds!
// we do this here (before the track has loaded) to get a predictable // we do this here (before the track has loaded) to get a predictable
// song order. // song order.
@ -619,7 +614,7 @@ export default {
if (!trackData) { if (!trackData) {
return return
} }
if (!this.isShuffling && trackData != oldValue) { if (!this.isShuffling && trackData !== oldValue) {
trackData = await this.getTrackData(trackData) trackData = await this.getTrackData(trackData)
if (trackData == null) { if (trackData == null) {
this.handleError({}) this.handleError({})
@ -645,16 +640,15 @@ export default {
this.$store.commit('ui/queueFocused', 'queue') this.$store.commit('ui/queueFocused', 'queue')
} else { } else {
this.$store.commit('ui/queueFocused', 'player') this.$store.commit('ui/queueFocused', 'player')
} }
}, },
updateMetadata () { updateMetadata () {
// If the session is playing as a PWA, populate the notification // If the session is playing as a PWA, populate the notification
// with details from the track // with details from the track
if (this.currentTrack && 'mediaSession' in navigator) { if (this.currentTrack && 'mediaSession' in navigator) {
let metadata = { const metadata = {
title: this.currentTrack.title, title: this.currentTrack.title,
artist: this.currentTrack.artist.name, artist: this.currentTrack.artist.name
} }
if (this.currentTrack.album && this.currentTrack.album.cover) { if (this.currentTrack.album && this.currentTrack.album.cover) {
metadata.album = this.currentTrack.album.title metadata.album = this.currentTrack.album.title
@ -664,10 +658,10 @@ export default {
{ src: this.currentTrack.album.cover.urls.original, sizes: '192x192', type: 'image/png' }, { src: this.currentTrack.album.cover.urls.original, sizes: '192x192', type: 'image/png' },
{ src: this.currentTrack.album.cover.urls.original, sizes: '256x256', type: 'image/png' }, { src: this.currentTrack.album.cover.urls.original, sizes: '256x256', type: 'image/png' },
{ src: this.currentTrack.album.cover.urls.original, sizes: '384x384', type: 'image/png' }, { src: this.currentTrack.album.cover.urls.original, sizes: '384x384', type: 'image/png' },
{ src: this.currentTrack.album.cover.urls.original, sizes: '512x512', type: 'image/png' }, { src: this.currentTrack.album.cover.urls.original, sizes: '512x512', type: 'image/png' }
] ]
} }
navigator.mediaSession.metadata = new MediaMetadata(metadata) navigator.mediaSession.metadata = new window.MediaMetadata(metadata)
} }
} }
}, },
@ -685,38 +679,38 @@ export default {
queue: state => state.queue queue: state => state.queue
}), }),
...mapGetters({ ...mapGetters({
currentTrack: "queue/currentTrack", currentTrack: 'queue/currentTrack',
hasNext: "queue/hasNext", hasNext: 'queue/hasNext',
hasPrevious: "queue/hasPrevious", hasPrevious: 'queue/hasPrevious',
emptyQueue: "queue/isEmpty", emptyQueue: 'queue/isEmpty',
durationFormatted: "player/durationFormatted", durationFormatted: 'player/durationFormatted',
currentTimeFormatted: "player/currentTimeFormatted", currentTimeFormatted: 'player/currentTimeFormatted',
progress: "player/progress" progress: 'player/progress'
}), }),
updateProgressThrottled () { updateProgressThrottled () {
return _.throttle(this.updateProgress, 50) return _.throttle(this.updateProgress, 50)
}, },
labels() { labels () {
let audioPlayer = this.$pgettext('Sidebar/Player/Hidden text', "Media player") const audioPlayer = this.$pgettext('Sidebar/Player/Hidden text', 'Media player')
let previous = this.$pgettext('Sidebar/Player/Icon.Tooltip', "Previous track") const previous = this.$pgettext('Sidebar/Player/Icon.Tooltip', 'Previous track')
let play = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', "Play") const play = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Play')
let pause = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', "Pause") const pause = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Pause')
let next = this.$pgettext('Sidebar/Player/Icon.Tooltip', "Next track") const next = this.$pgettext('Sidebar/Player/Icon.Tooltip', 'Next track')
let unmute = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', "Unmute") const unmute = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Unmute')
let mute = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', "Mute") const mute = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Mute')
let expandQueue = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', "Expand queue") const expandQueue = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Expand queue')
let loopingDisabled = this.$pgettext('Sidebar/Player/Icon.Tooltip', const loopingDisabled = this.$pgettext('Sidebar/Player/Icon.Tooltip',
"Looping disabled. Click to switch to single-track looping." 'Looping disabled. Click to switch to single-track looping.'
) )
let loopingSingle = this.$pgettext('Sidebar/Player/Icon.Tooltip', const loopingSingle = this.$pgettext('Sidebar/Player/Icon.Tooltip',
"Looping on a single track. Click to switch to whole queue looping." 'Looping on a single track. Click to switch to whole queue looping.'
) )
let loopingWhole = this.$pgettext('Sidebar/Player/Icon.Tooltip', const loopingWhole = this.$pgettext('Sidebar/Player/Icon.Tooltip',
"Looping on whole queue. Click to disable looping." 'Looping on whole queue. Click to disable looping.'
) )
let shuffle = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', "Shuffle your queue") const shuffle = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Shuffle your queue')
let clear = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', "Clear your queue") const clear = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Clear your queue')
let addArtistContentFilter = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Hide content from this artist…') const addArtistContentFilter = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Hide content from this artist…')
return { return {
audioPlayer, audioPlayer,
previous, previous,
@ -731,9 +725,9 @@ export default {
shuffle, shuffle,
clear, clear,
expandQueue, expandQueue,
addArtistContentFilter, addArtistContentFilter
}
} }
},
}, },
watch: { watch: {
currentTrack: { currentTrack: {
@ -746,23 +740,23 @@ export default {
if (this.currentSound) { if (this.currentSound) {
this.currentSound.pause() this.currentSound.pause()
} }
this.$store.commit("player/isLoadingAudio", true) this.$store.commit('player/isLoadingAudio', true)
this.playTimeout = setTimeout(async () => { this.playTimeout = setTimeout(async () => {
await this.loadSound(newValue, oldValue) await this.loadSound(newValue, oldValue)
}, 100); }, 100)
this.updateMetadata() this.updateMetadata()
}, },
immediate: false immediate: false
}, },
volume: { volume: {
immediate: true, immediate: true,
handler(newValue) { handler (newValue) {
this.sliderVolume = newValue this.sliderVolume = newValue
Howler.volume(toLinearVolumeScale(newValue)) Howler.volume(toLinearVolumeScale(newValue))
}
}, },
}, sliderVolume (newValue) {
sliderVolume(newValue) { this.$store.commit('player/volume', newValue)
this.$store.commit("player/volume", newValue)
}, },
playing: async function (newValue) { playing: async function (newValue) {
if (this.currentSound) { if (this.currentSound) {

41
front/src/store/player.js
View File

@ -92,86 +92,85 @@ export default {
} }
}, },
actions: { actions: {
incrementVolume ({commit, state}, value) { incrementVolume ({ commit, state }, value) {
commit('volume', state.volume + value) commit('volume', state.volume + value)
}, },
stop ({commit}) { stop ({ commit }) {
commit('errored', false) commit('errored', false)
commit('resetErrorCount') commit('resetErrorCount')
}, },
togglePlayback ({commit, state, dispatch}) { togglePlayback ({ commit, state, dispatch }) {
commit('playing', !state.playing) commit('playing', !state.playing)
if (state.errored && state.errorCount < state.maxConsecutiveErrors) { if (state.errored && state.errorCount < state.maxConsecutiveErrors) {
setTimeout(() => { setTimeout(() => {
if (state.playing) { if (state.playing) {
dispatch('queue/next', null, {root: true}) dispatch('queue/next', null, { root: true })
} }
}, 3000) }, 3000)
} }
}, },
resumePlayback ({commit, state, dispatch}) { resumePlayback ({ commit, state, dispatch }) {
commit('playing', true) commit('playing', true)
if (state.errored && state.errorCount < state.maxConsecutiveErrors) { if (state.errored && state.errorCount < state.maxConsecutiveErrors) {
setTimeout(() => { setTimeout(() => {
if (state.playing) { if (state.playing) {
dispatch('queue/next', null, {root: true}) dispatch('queue/next', null, { root: true })
} }
}, 3000) }, 3000)
} }
}, },
pausePlayback ({commit}) { pausePlayback ({ commit }) {
commit('playing', false) commit('playing', false)
}, },
toggleMute({commit, state}) { toggleMute ({ commit, state }) {
if (state.volume > 0) { if (state.volume > 0) {
commit('tempVolume', state.volume) commit('tempVolume', state.volume)
commit('volume', 0) commit('volume', 0)
} } else {
else {
commit('volume', state.tempVolume) commit('volume', state.tempVolume)
} }
}, },
trackListened ({commit, rootState}, track) { trackListened ({ commit, rootState }, track) {
if (!rootState.auth.authenticated) { if (!rootState.auth.authenticated) {
return return
} }
return axios.post('history/listenings/', {'track': track.id}).then((response) => {}, (response) => { return axios.post('history/listenings/', { track: track.id }).then((response) => {}, (response) => {
logger.default.error('Could not record track in history') logger.default.error('Could not record track in history')
}) })
}, },
trackEnded ({commit, dispatch, rootState}, track) { trackEnded ({ commit, dispatch, rootState }, track) {
let queueState = rootState.queue const queueState = rootState.queue
if (queueState.currentIndex === queueState.tracks.length - 1) { if (queueState.currentIndex === queueState.tracks.length - 1) {
// we've reached last track of queue, trigger a reload // we've reached last track of queue, trigger a reload
// from radio if any // from radio if any
dispatch('radios/populateQueue', null, {root: true}) dispatch('radios/populateQueue', null, { root: true })
} }
dispatch('queue/next', null, {root: true}) dispatch('queue/next', null, { root: true })
if (queueState.ended) { if (queueState.ended) {
// Reset playback // Reset playback
commit('playing', false) commit('playing', false)
dispatch('updateProgress', 0) dispatch('updateProgress', 0)
} }
}, },
trackErrored ({commit, dispatch, state}) { trackErrored ({ commit, dispatch, state }) {
commit('errored', true) commit('errored', true)
commit('incrementErrorCount') commit('incrementErrorCount')
if (state.errorCount < state.maxConsecutiveErrors) { if (state.errorCount < state.maxConsecutiveErrors) {
setTimeout(() => { setTimeout(() => {
if (state.playing) { if (state.playing) {
dispatch('queue/next', null, {root: true}) dispatch('queue/next', null, { root: true })
} }
}, 3000) }, 3000)
} }
}, },
updateProgress ({commit}, t) { updateProgress ({ commit }, t) {
commit('currentTime', t) commit('currentTime', t)
}, },
mute({commit, state}) { mute ({ commit, state }) {
commit('tempVolume', state.volume) commit('tempVolume', state.volume)
commit('volume', 0) commit('volume', 0)
}, },
unmute({commit, state}) { unmute ({ commit, state }) {
commit('volume', state.tempVolume) commit('volume', state.tempVolume)
} }
} }