diff --git a/public/config.json b/public/config.json index a3b7d4a..f966bb7 100644 --- a/public/config.json +++ b/public/config.json @@ -1,5 +1,5 @@ { - "backend_de": "http://localhost:31204", - "backend_dev": "https://webplay.rocks", + "backend_dev": "http://localhost:31204", + "backend_de": "https://webplay.rocks", "backend": "https://webplay.rocks" } \ No newline at end of file diff --git a/public/static/app.css b/public/static/app.css index aac381a..0339e37 100644 --- a/public/static/app.css +++ b/public/static/app.css @@ -95,6 +95,14 @@ td.fillCell>* { color: var(--yellow); } +.keepPlaying { + z-index: 1; + position: absolute; + cursor: pointer; + right: 0; +} + + /* DIALOGS */ diff --git a/src/components/Player.vue b/src/components/Player.vue index d5c8eff..d1ac890 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -1,26 +1,9 @@ @@ -105,7 +47,8 @@ export default { audio: {}, duration: 0, progress: 0, - interval: 0, + intervalProgress: 0, + intervalState: 0, preConvert: false, }; }, @@ -121,21 +64,31 @@ export default { play() { this.audio.play(); }, - pause() { - if (!this.audio.paused) { - this.audio.pause(); - } + this.audio.pause(); + + window.clearInterval(this.intervalProgress); + window.clearInterval(this.intervalState); + + this.pushState(); }, durationChanged() { this.duration = this.audio.duration; }, playing() { - window.clearInterval(this.interval); - this.interval = setInterval(() => { + window.clearInterval(this.intervalProgress); + window.clearInterval(this.intervalState); + + this.intervalProgress = setInterval(() => { this.progress = this.audio.currentTime; this.selectedTrack.percent = (100 / this.duration) * this.progress; }, 500); + + if (this.currentUser._id) { + this.intervalState = setInterval(() => { + this.pushState(); + }, 10000); + } }, audioReset() { this.audio.pause(); @@ -156,6 +109,14 @@ export default { this.audio.play(); } }, + skipToSecond(second) { + let was_paused = this.audio.paused; + this.audio.pause(); + this.audio.currentTime = second; + if (!was_paused) { + this.audio.play(); + } + }, playRadio(radio) { this.$store.commit("tracks/resetSelectedTrack"); this.audio.pause(); @@ -184,8 +145,13 @@ export default { this.pushHistoryItem(); - // Try to fix SAFARI - this.audio.play(); + if (this.currentTrackParent.progress) { + this.skipToSecond(this.currentTrackParent.progress.progress); + this.currentTrackParent.progress = undefined; + } else { + // Try to fix SAFARI + this.audio.play(); + } }, pushHistoryItem() { if (!this.currentUser._id) { @@ -232,13 +198,20 @@ export default { return; } if (!this.audio.paused) { - this.audio.pause(); + this.pause(); } else if (this.audio.src != "") { this.audio.play(); } }, - reset() { - window.clearInterval(this.interval); + reset(item) { + let parentId = item.parent._id; + if (item.parent.parent && item.parent.parent.tracks) { + parentId = item.parent.parent._id; + } + this.$store.dispatch("user/resetProgress", parentId); + + window.clearInterval(this.intervalProgress); + window.clearInterval(this.intervalState); if (!this.audio.paused) { this.audio.pause(); } @@ -299,6 +272,19 @@ export default { } this.$store.dispatch("user/savePlayerSettings"); }, + pushState() { + if (!this.currentUser._id) { + return; + } + this.progress = this.audio.currentTime; + let item = { + id: this.selectedTrack._id, + parentId: this.currentTrackParent._id, + type: "track", + progress: Math.round(this.progress) + } + this.$store.dispatch("user/saveProgress", item); + }, timeUpdate(event) { let percent = (event.target.currentTime / event.target.duration) * 100; if (percent > 10 && !this.preConvert) { @@ -390,11 +376,11 @@ export default { this.reset(); } }, - selectedTrack(newVal) { + selectedTrack(newVal, oldVal) { if (newVal._id) { this.playTrack(newVal); } else { - this.reset(); + this.reset(oldVal); } }, }, @@ -409,17 +395,21 @@ export default { z-index: 1001; box-shadow: 0 0px 4px var(--shadow); } + #player .cover { width: 52px; margin-right: 4px; } + #playerBar { overflow: hidden; max-height: 52px; } -#playerBar > div { + +#playerBar>div { align-items: center; } + #playerControls button { display: flex; padding: 4px 12px; diff --git a/src/components/dialogs/AlbumViewer.vue b/src/components/dialogs/AlbumViewer.vue index 487f0c7..83f4e08 100644 --- a/src/components/dialogs/AlbumViewer.vue +++ b/src/components/dialogs/AlbumViewer.vue @@ -1,25 +1,13 @@