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 }),
},
});