refactor(join): remove recent rooms

config/defaults.js

@@ -41,7 +41,6 @@ const defaults = {
   plex_auth_check_interval: 1000,
 
   socket_server_health_timeout: 2000,
-  synclounge_max_recent_room_history: 100,
 
   // TODO: investigate the average length of closing credits
   synclounge_upnext_trigger_time_from_end: 45000,

src/store/index.js

@@ -27,7 +27,6 @@ const persistedState = createPersistedState({
     'plexservers.lastServerId',
     'plexservers.blockedServerIds',
 
-    'synclounge.recentRooms',
     'synclounge.areNotificationsEnabled',
     'synclounge.areSoundNotificationsEnabled',
 

src/store/modules/synclounge/actions.js

@@ -82,9 +82,7 @@ export default {
     return rest;
   },
 
-  JOIN_ROOM_AND_INIT: async ({
-    getters, rootGetters, dispatch, commit,
-  }) => {
+  JOIN_ROOM_AND_INIT: async ({ rootGetters, dispatch, commit }) => {
     // Note: this is also called on rejoining, so be careful not to register handlers twice
     // or duplicate tasks
     const {
@@ -92,16 +90,6 @@ export default {
     } = await dispatch('JOIN_ROOM');
     const updatedAt = Date.now();
 
-    // Add this item to our recently-connected list
-    await dispatch(
-      'ADD_RECENT_ROOM',
-      {
-        server: getters.GET_SERVER,
-        room: getters.GET_ROOM,
-        time: Date.now(),
-      },
-    );
-
     commit('SET_HOST_ID', hostId);
 
     commit('SET_USERS', Object.fromEntries(
@@ -228,22 +216,6 @@ export default {
     commit('SET_SERVERS_HEALTH', aliveServerHealths);
   },
 
-  ADD_RECENT_ROOM: ({ commit, getters, rootGetters }, newRoom) => commit(
-    'SET_RECENT_ROOMS',
-    Array.of(newRoom).concat(
-      getters.GET_RECENT_ROOMS.filter(
-        (room) => room.server !== newRoom.server || room.room !== newRoom.room,
-      ),
-    ).slice(0, rootGetters.GET_CONFIG.synclounge_max_recent_room_history),
-  ),
-
-  REMOVE_RECENT_ROOM: ({ commit, getters }, roomToRemove) => commit(
-    'SET_RECENT_ROOMS',
-    getters.GET_RECENT_ROOMS.filter(
-      (room) => room.server !== roomToRemove.server || room.room !== roomToRemove.room,
-    ),
-  ),
-
   ADD_EVENT_HANDLERS: ({ dispatch }) => {
     const makeHandler = (action) => (data) => dispatch(action, data);
 

src/store/modules/synclounge/getters.js

@@ -60,8 +60,6 @@ export default {
 
   GET_SYNC_CANCEL_TOKEN: (state) => state.syncCancelToken,
 
-  GET_RECENT_ROOMS: (state) => state.recentRooms,
-
   IS_IN_ROOM: (state) => state.isInRoom,
 
   // Note: the host should really always have a playback rate of 1

src/store/modules/synclounge/mutations.js

@@ -42,10 +42,6 @@ export default {
     state.syncCancelToken = token;
   },
 
-  SET_RECENT_ROOMS: (state, rooms) => {
-    state.recentRooms = rooms;
-  },
-
   SET_IS_IN_ROOM: (state, isInRoom) => {
     state.isInRoom = isInRoom;
   },

src/store/modules/synclounge/state.js

@@ -10,7 +10,6 @@ const state = () => ({
   isAutoHostEnabled: null,
   serversHealth: null,
   syncCancelToken: null,
-  recentRooms: [],
   isInRoom: false,
   upnextTimeoutId: null,
 

src/views/AdvancedRoomJoin.vue

@@ -56,54 +56,6 @@
       <v-row
         justify="center"
       >
-        <v-col
-          v-if="GET_RECENT_ROOMS.length"
-          cols="12"
-          class="pa-4"
-        >
-          <v-subheader>Recent Rooms</v-subheader>
-
-          <v-list class="pa-0">
-            <v-list-item
-              v-for="(item, index) in GET_RECENT_ROOMS.slice(0, 3)"
-              :key="index"
-              @click="connect(item.server, item.room)"
-            >
-              <v-list-item-avatar
-                width="32px"
-              >
-                <v-img
-                  src="@/assets/images/logos/logo-small-light.png"
-                />
-              </v-list-item-avatar>
-
-              <v-list-item-content>
-                <v-list-item-title>{{ item.name || item.server || 'Custom' }}</v-list-item-title>
-
-                <v-list-item-subtitle>
-                  <b>{{ item.room }}</b>
-                  <span style="opacity: 0.5; float: right;">{{ sinceNow(item.time) }}</span>
-                </v-list-item-subtitle>
-              </v-list-item-content>
-
-              <v-list-item-action>
-                <v-tooltip top>
-                  <template #activator="{ on, attrs }">
-                    <v-icon
-                      v-bind="attrs"
-                      v-on="on"
-                      @click.stop="REMOVE_RECENT_ROOM(item)"
-                    >
-                      close
-                    </v-icon>
-                  </template>
-                  Remove
-                </v-tooltip>
-              </v-list-item-action>
-            </v-list-item>
-          </v-list>
-        </v-col>
-
         <v-col
           cols="12"
           class="pa-4"
@@ -254,7 +206,6 @@
 </template>
 
 <script>
-import { formatDistanceToNow } from 'date-fns';
 import {
   mapActions, mapGetters, mapMutations, mapState,
 } from 'vuex';
@@ -289,7 +240,6 @@ export default {
     ]),
 
     ...mapGetters('synclounge', [
-      'GET_RECENT_ROOMS',
       'GET_SERVER_HEALTH',
     ]),
 
@@ -316,16 +266,11 @@ export default {
     ]),
 
     ...mapActions('synclounge', [
-      'REMOVE_RECENT_ROOM',
       'FETCH_SERVERS_HEALTH',
       'SET_AND_CONNECT_AND_JOIN_ROOM',
       'DISCONNECT_IF_CONNECTED',
     ]),
 
-    sinceNow(x) {
-      return formatDistanceToNow(x);
-    },
-
     connectionQualityClass(value) {
       if (value < 50) {
         return ['green--text', 'text--lighten-1'];
@@ -352,14 +297,14 @@ export default {
       return ['white--text'];
     },
 
-    async connect(server, room) {
+    async connect(server) {
       this.serverError = null;
       this.connectionPending = true;
 
       try {
         await this.SET_AND_CONNECT_AND_JOIN_ROOM({
           server,
-          room: room || getRandomRoomId(),
+          room: getRandomRoomId(),
         });
 
         if (this.$route.name === 'AdvancedRoomJoin') {