Added time updater to sidebar to advance time

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;

src/components/sidebar.vue

@@ -170,7 +170,7 @@
               class="d-flex justify-space-between"
             >
               <div>
-                {{ getTimeFromMs(user.time) }}
+                {{ getTimeFromMs(getAdjustedTime(user)) }}
               </div>
 
               <div>
@@ -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);
 

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