diff --git a/config/defaults.js b/config/defaults.js index 20256740..1c0112a9 100644 --- a/config/defaults.js +++ b/config/defaults.js @@ -48,6 +48,7 @@ const defaults = { slplayer_plex_timeline_update_interval: 10000, slplayer_controls_visible_checker_interval: 500, + sidebar_time_update_interval: 500, }; module.exports = defaults; diff --git a/src/components/sidebar.vue b/src/components/sidebar.vue index 1a1c1f1f..a63d0e6a 100644 --- a/src/components/sidebar.vue +++ b/src/components/sidebar.vue @@ -170,7 +170,7 @@ class="d-flex justify-space-between" >
- {{ getTimeFromMs(user.time) }} + {{ getTimeFromMs(getAdjustedTime(user)) }}
@@ -241,12 +241,20 @@ export default { playing: 'play_arrow', buffering: 'av_timer', }, + timeUpdateIntervalId: null, + + // This is updated periodically and is what makes the player times advance (if playing) + nowTimestamp: Date.now(), partyPauseCooldownRunning: false, }; }, computed: { ...mapState(['isRightSidebarOpen']), + ...mapGetters([ + 'GET_CONFIG', + ]), + ...mapGetters('synclounge', [ 'GET_ME', 'getPartyPausing', @@ -267,6 +275,16 @@ export default { }, }, + created() { + this.timeUpdateIntervalId = setInterval(() => { + this.nowTimestamp = Date.now(); + }, this.GET_CONFIG.sidebar_time_update_interval); + }, + + beforeDestroy() { + clearInterval(this.timeUpdateIntervalId); + }, + methods: { ...mapActions('synclounge', [ 'updatePartyPausing', @@ -317,12 +335,11 @@ export default { }, getImgStyle(user) { - const arr = [ + return [ { border: `3px solid ${this.getUserColor(user)}`, }, ]; - return arr; }, async handleDisconnect() { @@ -330,11 +347,12 @@ export default { this.$router.push('/'); }, - percent(user) { - let perc = (user.time / user.duration) * 100; + percent({ time, duration }) { + const perc = (this.getAdjustedTime(time) / duration) * 100; if (Number.isNaN(perc)) { - perc = 0; + return 0; } + return perc; }, @@ -345,6 +363,12 @@ export default { return 'Nothing'; }, + getAdjustedTime({ updatedAt, state, time }) { + return state === 'playing' + ? time + this.nowTimestamp - updatedAt + : time; + }, + getTimeFromMs(timeMs) { const displayTime = Math.round(timeMs / 1000); diff --git a/src/store/modules/synclounge/actions.js b/src/store/modules/synclounge/actions.js index 616b3b3f..28be18e4 100644 --- a/src/store/modules/synclounge/actions.js +++ b/src/store/modules/synclounge/actions.js @@ -80,21 +80,27 @@ export default { getters, rootGetters, dispatch, commit, }) => { const { user: { id, ...rest }, users, isPartyPausingEnabled } = await dispatch('JOIN_ROOM'); + const updatedAt = Date.now(); commit('SET_SOCKET_ID', id); console.log('users', users); - commit('SET_USERS', users); + commit('SET_USERS', Object.fromEntries( + Object.entries(users).map(([socketid, data]) => ([socketid, { + ...data, + updatedAt, + }])), + )); - console.log('aaaaa'); // Add ourselves to user list - const stuff = await dispatch('plexclients/FETCH_TIMELINE_POLL_DATA_CACHE', null, { root: true }); - console.log('stuff', stuff); commit('SET_USER', { id, data: { ...rest, + thumb: rootGetters['plex/GET_PLEX_USER'].thumb, media: rootGetters['plexclients/GET_ACTIVE_MEDIA_POLL_METADATA'], - ...stuff, + playerProduct: rootGetters['plexclients/GET_CHOSEN_CLIENT'].product, + updatedAt, + ...await dispatch('plexclients/FETCH_TIMELINE_POLL_DATA_CACHE', null, { root: true }), }, });