From 48b7310f6e12e3017523a6ff96ba0f7997da3b0c Mon Sep 17 00:00:00 2001
From: James <james@thecubicle.us>
Date: Sat, 23 May 2020 00:31:51 -0400
Subject: [PATCH] Implemented a spectator system and resolved #10 and #9

---
 .../interface/viewCuberRoomsInterface.vue     |   6 +-
 components/popover/previewCuberPopover.vue    |  13 +-
 gql/mutation/room.js                          |  23 +-
 gql/query/room.js                             |  11 +
 gql/query/round.js                            |   3 +
 gql/schema.graphql                            |  40 +++-
 gql/subscription/room.js                      |  22 ++
 package-lock.json                             |   5 +
 package.json                                  |   1 +
 pages/my-rooms.vue                            |   9 +-
 pages/room.vue                                | 217 +++++++++++++++---
 pages/rooms.vue                               |  16 +-
 pages/settings.vue                            |   3 +-
 13 files changed, 327 insertions(+), 42 deletions(-)

diff --git a/components/interface/viewCuberRoomsInterface.vue b/components/interface/viewCuberRoomsInterface.vue
index 001c67a..d13450f 100644
--- a/components/interface/viewCuberRoomsInterface.vue
+++ b/components/interface/viewCuberRoomsInterface.vue
@@ -272,7 +272,7 @@ export default {
       }
     },
     async loadData() {
-      this.loading.loadData = true
+      //this.loading.loadData = true
       try {
         let { data } = await this.$apollo.query({
           query: CUBER_ROOMS_QUERY,
@@ -294,11 +294,11 @@ export default {
       } catch (err) {
         sharedService.handleError(err, this.$root)
       }
-      this.loading.loadData = false
+      //this.loading.loadData = false
     },
 
     reset(initialLoad = false) {
-      if (!this.status) return
+      if (!this.status || !this.cuber) return
       if (initialLoad) this.options.initialLoad = true
 
       this.loadData()
diff --git a/components/popover/previewCuberPopover.vue b/components/popover/previewCuberPopover.vue
index 3f43d33..a7cbe46 100644
--- a/components/popover/previewCuberPopover.vue
+++ b/components/popover/previewCuberPopover.vue
@@ -6,7 +6,14 @@
     offset-x
   >
     <template v-slot:activator="{ on }">
-      <a v-if="selectedItem" v-on="on">
+      <v-chip v-if="chip && selectedItem" v-on="on">
+        <v-avatar left>
+          <v-img v-if="selectedItem.avatar" :src="selectedItem.avatar" />
+          <v-icon v-else>mdi-account</v-icon>
+        </v-avatar>
+        {{ selectedItem.name }}
+      </v-chip>
+      <a v-else-if="selectedItem" v-on="on">
         <v-avatar size="24" class="mr-1">
           <v-img v-if="selectedItem.avatar" :src="selectedItem.avatar" />
           <v-icon v-else>mdi-account</v-icon>
@@ -91,6 +98,10 @@ import {
 export default {
   props: {
     selectedItem: {},
+    chip: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
diff --git a/gql/mutation/room.js b/gql/mutation/room.js
index 09c1c58..ecbc7cc 100644
--- a/gql/mutation/room.js
+++ b/gql/mutation/room.js
@@ -53,8 +53,16 @@ export const DELETE_ROOM_MUTATION = gql`
 `
 
 export const JOIN_ROOM_MUTATION = gql`
-  mutation joinRoom($room_id: ID!, $secret: String) {
-    joinRoom(id: $room_id, secret: $secret) {
+  mutation joinRoom(
+    $room_id: ID!
+    $secret: String
+    $participationType: CuberRoomRelationTypeEnum
+  ) {
+    joinRoom(
+      id: $room_id
+      secret: $secret
+      participationType: $participationType
+    ) {
       id
     }
   }
@@ -181,3 +189,14 @@ export const UPDATE_SOLVE_MUTATION = gql`
   ${solveFragment}
   ${cuberBasicFragment}
 `
+
+export const CHANGE_ROOM_STATUS_MUTATION = gql`
+  mutation changeRoomStatus(
+    $room_id: ID!
+    $participationType: CuberRoomRelationTypeEnum
+  ) {
+    changeRoomStatus(room_id: $room_id, participationType: $participationType) {
+      id
+    }
+  }
+`
diff --git a/gql/query/room.js b/gql/query/room.js
index d642099..bc1661f 100644
--- a/gql/query/room.js
+++ b/gql/query/room.js
@@ -19,6 +19,17 @@ export const ROOM_QUERY = gql`
         ...CuberBasic
       }
       active_cubers(first: 10) {
+        data {
+          ...CuberBasic
+          pivot {
+            type
+          }
+        }
+      }
+      spectating_cubers(first: 10) {
+        paginatorInfo {
+          total
+        }
         data {
           ...CuberBasic
         }
diff --git a/gql/query/round.js b/gql/query/round.js
index dbd1717..0a2d412 100644
--- a/gql/query/round.js
+++ b/gql/query/round.js
@@ -62,6 +62,9 @@ export const ROUNDS_QUERY = gql`
           ...Solve
           cuber {
             ...CuberBasic
+            pivot {
+              type
+            }
           }
         }
         accumulated_results {
diff --git a/gql/schema.graphql b/gql/schema.graphql
index a667dab..a7ccd2c 100644
--- a/gql/schema.graphql
+++ b/gql/schema.graphql
@@ -337,6 +337,7 @@ type Cuber {
     first: Int!
     page: Int
   ): CuberPaginator
+  pivot: CuberRoomPivot
   created_at: DateTime!
   updated_at: DateTime
 }
@@ -355,6 +356,20 @@ type CuberRoom {
   room: Room!
 }
 
+type CuberRoomPivot {
+  type: CuberRoomRelationTypeEnum!
+  last_activity_at: DateTime!
+  cuber: Cuber!
+  room: Room!
+}
+
+enum CuberRoomRelationTypeEnum {
+  VISITED
+  PARTICIPATING
+  IDLING
+  SPECTATING
+}
+
 scalar Date
 
 scalar DateTime
@@ -418,13 +433,20 @@ scalar Milliseconds
 type Mutation {
   sendRoomChatMessage(room_id: ID!, message: String!): RoomChatMessage!
   updateCuber(input: UpdateCuberInput): Cuber!
-  idle: Cuber
   followCuber(id: ID): Cuber
   unfollowCuber(id: ID): Cuber
   inviteCuber(room_id: ID!, cuber_id: ID!): CuberRoom!
   createRoom(input: CreateRoomInput!): Room!
   updateRoom(input: UpdateRoomInput!): Room!
-  joinRoom(id: ID!, secret: String): Room!
+  joinRoom(
+    id: ID!
+    secret: String
+    participationType: CuberRoomRelationTypeEnum
+  ): Room!
+  changeRoomStatus(
+    room_id: ID!
+    participationType: CuberRoomRelationTypeEnum
+  ): Room!
   leaveRoom(id: ID!): Room!
   deleteRoom(id: ID!): Room!
   untrackSolvesFromRoom(room_id: ID!): [Solve!]
@@ -573,6 +595,18 @@ type Room {
     first: Int!
     page: Int
   ): CuberPaginator
+  participating_cubers(
+    first: Int!
+    page: Int
+  ): CuberPaginator
+  idling_cubers(
+    first: Int!
+    page: Int
+  ): CuberPaginator
+  spectating_cubers(
+    first: Int!
+    page: Int
+  ): CuberPaginator
   active_cubers(
     first: Int!
     page: Int
@@ -592,6 +626,7 @@ type Room {
   is_full: Boolean!
   creator: Cuber!
   accumulators: [Accumulator!]
+  pivot: CuberRoomPivot
   manager: Cuber
   created_at: DateTime!
   updated_at: DateTime
@@ -720,6 +755,7 @@ type Subscription {
   roomChatMessageReceived(room_id: ID!): RoomChatMessage
   cuberNotificationReceived: CuberNotification
   roomMembersUpdated(room_id: ID!): [Cuber!]
+  roomMemberStatusUpdated(room_id: ID!): CuberRoomPivot
   roomUpdated(room_id: ID!): Room
   roundStarted(room_id: ID!): Round
   roundFinished(room_id: ID!): Round
diff --git a/gql/subscription/room.js b/gql/subscription/room.js
index 53b9927..1ab2a10 100644
--- a/gql/subscription/room.js
+++ b/gql/subscription/room.js
@@ -13,6 +13,10 @@ export const ROOM_MEMBERS_UPDATED_SUBSCRIPTION = gql`
   subscription roomMembersUpdated($room_id: ID!) {
     roomMembersUpdated(room_id: $room_id) {
       ...CuberBasic
+      pivot {
+        type
+        last_activity_at
+      }
     }
   }
   ${cuberBasicFragment}
@@ -57,6 +61,10 @@ export const ROUND_STARTED_SUBSCRIPTION = gql`
         ...Solve
         cuber {
           ...CuberBasic
+          pivot {
+            type
+            last_activity_at
+          }
         }
       }
       accumulated_results {
@@ -101,3 +109,17 @@ export const SOLVE_UPDATED_SUBSCRIPTION = gql`
   ${solveFragment}
   ${cuberBasicFragment}
 `
+
+//not real subscription
+export const ROOM_MEMBER_STATUS_UPDATED_SUBSCRIPTION = gql`
+  subscription roomMemberStatusUpdated($room_id: ID!) {
+    roomMemberStatusUpdated(room_id: $room_id) {
+      type
+      last_activity_at
+      cuber {
+        ...CuberBasic
+      }
+    }
+  }
+  ${cuberBasicFragment}
+`
diff --git a/package-lock.json b/package-lock.json
index d8f6421..fc17461 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12611,6 +12611,11 @@
       "resolved": "https://registry.npmjs.org/stackmat/-/stackmat-1.0.0.tgz",
       "integrity": "sha512-qkuH3pCfvps3kgXgmTT3nPbvmYk0dgAnQZwYdeTfvXC0Mxa8Y6i+DF+ZW5uXoOyManrVyashqV9yeNDWotdyEw=="
     },
+    "stackmat-signal-processor": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/stackmat-signal-processor/-/stackmat-signal-processor-0.1.0.tgz",
+      "integrity": "sha512-HZXQz3J1PfwYa+yxlAbNAJZZBwdiqs+b0jeNeSGqaQWF6AN8GfIGdOhGZ+txWtDX+VTh9LkpGmH1TGJZp0qgyQ=="
+    },
     "static-extend": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
diff --git a/package.json b/package.json
index af97c87..03fc0c1 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "randomstring": "^1.1.5",
     "scramble-display": "^0.1.0",
     "stackmat": "^1.0.0",
+    "stackmat-signal-processor": "^0.1.0",
     "vue-tour": "^1.3.0"
   },
   "devDependencies": {
diff --git a/pages/my-rooms.vue b/pages/my-rooms.vue
index 73de5b5..71faeac 100644
--- a/pages/my-rooms.vue
+++ b/pages/my-rooms.vue
@@ -48,8 +48,6 @@ import AddRoomDialog from '~/components/dialog/room/addRoomDialog.vue'
 import { mapGetters } from 'vuex'
 
 export default {
-  middleware: 'router-auth',
-
   components: {
     ViewCuberRoomsInterface,
     AddRoomDialog,
@@ -76,7 +74,12 @@ export default {
     }),
   },
 
-  mounted() {},
+  mounted() {
+    //login required, else redirect to home
+    if (!this.$store.getters['auth/user']) {
+      this.$router.push('/')
+    }
+  },
 
   methods: {
     openAddRoomDialog() {
diff --git a/pages/room.vue b/pages/room.vue
index 927e659..8dc80e7 100644
--- a/pages/room.vue
+++ b/pages/room.vue
@@ -76,6 +76,12 @@
                       :scramble="activeRound.scramble"
                       :size="settingsObject.scrambleFontSize"
                     />
+                    <div v-if="settingsObject.inspectionTimer" class="overline">
+                      Inspection Mode On: Hit space bar to start inspection.
+                    </div>
+                    <div class="overline">
+                      Timer input method: {{ settingsObject.inputMethod }}
+                    </div>
                   </div>
                 </div>
               </div>
@@ -147,7 +153,10 @@
                             @click="assignNewManager(item.id)"
                             >mdi-gavel</v-icon
                           >
-                          <v-icon v-if="!item.isActive" small title="Away"
+                          <v-icon
+                            v-if="item.cuber.pivot.type !== 'PARTICIPATING'"
+                            small
+                            title="Away"
                             >mdi-sleep</v-icon
                           >
                         </td>
@@ -194,6 +203,7 @@
               v-if="isRoomManager"
               id="v-step-startroom"
               :loading="loading.startingNextRound"
+              color="primary"
               @click="startNextRound()"
               >{{ activeRound ? 'Start Next Round' : 'Start Room' }}</v-btn
             >
@@ -202,6 +212,22 @@
             <!--
             <v-btn @click="toggleIdleMode()" :loading="loading.idling">Spectator Mode</v-btn>
             -->
+            <v-menu offset-y>
+              <template v-slot:activator="{ on }">
+                <v-btn :loading="loading.updateRoomStatus" v-on="on">
+                  Your Status: {{ cuberStatusMap[currentUserStatus] }}
+                </v-btn>
+              </template>
+              <v-list>
+                <v-list-item
+                  v-for="(item, index) in cuberStatusOptions"
+                  :key="index"
+                  @click="updateRoomStatus(item.value)"
+                >
+                  <v-list-item-title>{{ item.text }}</v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </v-menu>
             <v-btn id="v-step-share" @click="copyShareLink()">Share Link</v-btn>
             <v-btn @click="openViewRoundsDialog()">All Rounds</v-btn>
             <v-btn @click="startTutorial()">Tutorial</v-btn>
@@ -214,6 +240,24 @@
             </v-btn>
           </v-col>
         </v-row>
+        <div v-if="room.spectating_cubers.paginatorInfo.total > 0">
+          <v-row justify="center">
+            <span class="caption grey--text">
+              {{ room.spectating_cubers.paginatorInfo.total }} Spectator(s):
+            </span>
+          </v-row>
+          <v-row justify="center">
+            <div>
+              <PreviewCuberPopover
+                v-for="(item, i) in room.spectating_cubers.data"
+                :key="item.id"
+                :selected-item="item"
+                chip
+              >
+              </PreviewCuberPopover>
+            </div>
+          </v-row>
+        </div>
       </div>
     </v-layout>
     <v-bottom-navigation :value="true" height="auto" absolute>
@@ -302,15 +346,16 @@ import {
   NEXT_ROUND_MUTATION,
   SEND_ROOM_CHAT_MESSAGE_MUTATION,
   UPDATE_SOLVE_MUTATION,
+  CHANGE_ROOM_STATUS_MUTATION,
 } from '~/gql/mutation/room.js'
 import { IDLE_MUTATION } from '~/gql/mutation/cuber.js'
 import {
-  ROOM_MEMBERS_UPDATED_SUBSCRIPTION,
   ROOM_UPDATED_SUBSCRIPTION,
   ROOM_CHAT_MESSAGE_RECEIVED_SUBSCRIPTION,
   ROUND_STARTED_SUBSCRIPTION,
   ROUND_FINISHED_SUBSCRIPTION,
   SOLVE_UPDATED_SUBSCRIPTION,
+  ROOM_MEMBER_STATUS_UPDATED_SUBSCRIPTION,
 } from '~/gql/subscription/room.js'
 import CubeTimerOverlay from '~/components/overlay/cubeTimerOverlay'
 import PreviewCuberPopover from '~/components/popover/previewCuberPopover'
@@ -418,6 +463,7 @@ export default {
         updatingSolve: false,
         idling: false,
         assigningManager: false,
+        updateRoomStatus: false,
       },
 
       dialogs: {
@@ -443,6 +489,21 @@ export default {
       timerState: 0,
       timerStatus: false,
       stopPropagation: false,
+
+      cuberStatusOptions: [
+        { value: 'PARTICIPATING', text: 'Active' },
+        { value: 'IDLING', text: 'Idle' },
+        { value: 'SPECTATING', text: 'Spectating' },
+      ],
+
+      cuberStatusMap: {
+        VISITED: 'Left',
+        PARTICIPATING: 'Active',
+        IDLING: 'IDLE',
+        SPECTATING: 'Spectating',
+      },
+
+      currentUserStatus: null,
     }
   },
 
@@ -654,7 +715,7 @@ export default {
     },
 
     //adds an array of active cubers to the cuberResults, if not already in there
-    addActiveCubers(activeCubers, initialLoad) {
+    updateActiveCubers(activeCubers, initialLoad) {
       if (!Array.isArray(activeCubers)) return
       activeCubers.forEach((active_cuber) => {
         let foundResult = this.cuberResults.find(
@@ -665,30 +726,79 @@ export default {
           !initialLoad &&
             this.handleChatMessageReceived({
               user: active_cuber,
-              message: 'has just joined the room!',
+              message:
+                'has just joined the room! (' + active_cuber.pivot.type + ')',
               system: true,
             })
 
-          this.cuberResults.push({
-            id: active_cuber.id,
-            cuber: active_cuber,
-            updating: false,
-            isActive: true,
-            recentActiveRound: null,
-          })
-        } else if (foundResult && !foundResult.isActive) {
+          //if joining as spectator or visited, do not add to cuberResults
+          if (
+            active_cuber.pivot.type !== 'SPECTATING' &&
+            active_cuber.pivot.type !== 'VISITED'
+          ) {
+            this.cuberResults.push({
+              id: active_cuber.id,
+              cuber: active_cuber,
+              updating: false,
+              recentActiveRound: null,
+            })
+          }
+        } else if (foundResult) {
           !initialLoad &&
             this.handleChatMessageReceived({
               user: active_cuber,
-              message: 'has just joined the room!',
+              message: 'has just set status to: ' + active_cuber.pivot.type,
               system: true,
             })
 
-          foundResult.isActive = true
+          //if cuber status is spectating or visited, user should be removed from cuberResults if they did not participate.
+          if (
+            active_cuber.pivot.type === 'SPECTATING' ||
+            active_cuber.pivot.type === 'VISITED'
+          ) {
+            //if result not found, remove if cuber didn't participate
+            if (!foundResult.recentActiveRound) {
+              let index = this.cuberResults.indexOf(foundResult)
+              if (index !== -1) {
+                this.cuberResults.splice(index, 1)
+              }
+            }
+          } else {
+            //else, update the cuber status
+            foundResult.cuber.pivot = active_cuber.pivot
+          }
+        }
+
+        //if cuber is spectating, add to room.spectating_cubers if not exists
+        if (active_cuber.pivot.type === 'SPECTATING') {
+          const foundSpectator = this.room.spectating_cubers.data.find(
+            (cuber) => cuber.id === active_cuber.id,
+          )
+
+          if (!foundSpectator) {
+            this.room.spectating_cubers.data.unshift(active_cuber)
+            this.room.spectating_cubers.paginatorInfo.total++
+          }
+        } else {
+          //else, check the room.spectating_cubers and remove if in there
+          const foundSpectator = this.room.spectating_cubers.data.find(
+            (cuber) => cuber.id === active_cuber.id,
+          )
+
+          if (foundSpectator) {
+            const index = this.room.spectating_cubers.data.indexOf(
+              foundSpectator,
+            )
+            if (index !== -1) {
+              this.room.spectating_cubers.data.splice(index, 1)
+              this.room.spectating_cubers.paginatorInfo.total--
+            }
+          }
         }
       })
     },
 
+    /*
     removeActiveCubers(activeCubers, initialLoad) {
       if (!Array.isArray(activeCubers)) return
 
@@ -718,12 +828,15 @@ export default {
         }
       })
     },
+    */
 
     //compares a list of activeCubers with the cuberResults array, and makes adjustments
+    /*
     updateActiveCubers(activeCubers, initialLoad = false) {
       this.addActiveCubers(activeCubers, initialLoad)
       this.removeActiveCubers(activeCubers, initialLoad)
     },
+    */
 
     handleChatMessageReceived(chatMessage) {
       this.chatMessages.push(chatMessage)
@@ -743,12 +856,17 @@ export default {
             (cuber) => cuber.id == solve.cuber.id,
           )
 
+          //if not found, means that cuber must be of type VISITED
           if (!foundResult) {
             this.cuberResults.push({
               id: solve.cuber.id,
-              cuber: solve.cuber,
+              cuber: {
+                ...solve.cuber,
+                pivot: {
+                  type: 'VISITED',
+                },
+              },
               updating: false,
-              isActive: true,
               recentActiveRound: round,
             })
           } else {
@@ -774,12 +892,17 @@ export default {
           (cuber) => cuber.id == solve.cuber.id,
         )
 
+        //if not found, means that cuber must be of type VISITED (should probably never happen)
         if (!foundResult) {
           this.cuberResults.push({
             id: solve.cuber.id,
-            cuber: solve.cuber,
+            cuber: {
+              ...solve.cuber,
+              pivot: {
+                type: 'VISITED',
+              },
+            },
             updating: false,
-            isActive: true,
             recentActiveRound: round,
           })
         } else {
@@ -805,11 +928,13 @@ export default {
     //checks the cuber results to see if anyone needs to be removed (if past 5 results are all null)
     checkCuberResults() {
       for (let i = this.cuberResults.length - 1; i >= 0; i--) {
-        //detect if off the scoreboard
+        //detect if off the scoreboard (allow to remain on scoreboard if not spectating or visited)
         if (
           !this.cuberResults[i].recentActiveRound ||
-          this.cuberResults[i].recentActiveRound.round_number <=
-            this.activeRoundNumber - this.tableRounds
+          (this.cuberResults[i].recentActiveRound.round_number <=
+            this.activeRoundNumber - this.tableRounds &&
+            (this.cuberResults[i].cuber.pivot.type === 'SPECTATING' ||
+              this.cuberResults[i].cuber.pivot.type === 'VISITED'))
         ) {
           this.cuberResults.splice(i, 1)
         }
@@ -825,13 +950,19 @@ export default {
           throw sharedService.generateError('Login required to join room.')
         }
 
+        const participationType = this.$route.query.status || 'PARTICIPATING'
+
         await this.$apollo.mutate({
           mutation: JOIN_ROOM_MUTATION,
           variables: {
             room_id: this.$route.query.id,
             secret: this.$route.query.secret,
+            participationType: participationType,
           },
         })
+
+        this.currentUserStatus = participationType
+
         this.$apollo.queries.room.skip = false
 
         this.$apollo.subscriptions.roomChatMessageReceived.skip = false
@@ -839,7 +970,7 @@ export default {
         this.$apollo.subscriptions.roundStarted.skip = false
         this.$apollo.subscriptions.solveUpdated.skip = false
         this.$apollo.subscriptions.roomUpdated.skip = false
-        this.$apollo.subscriptions.roomMembersUpdated.skip = false
+        this.$apollo.subscriptions.roomMemberStatusUpdated.skip = false
       } catch (err) {
         sharedService.handleError(err, this.$root)
         this.errorMessage = sharedService.sanitizeErrorMessage(err.message)
@@ -990,6 +1121,28 @@ export default {
       this.loading.idling = false
     },
 
+    async updateRoomStatus(status) {
+      this.loading.updateRoomStatus = true
+      try {
+        await this.$apollo.mutate({
+          mutation: CHANGE_ROOM_STATUS_MUTATION,
+          variables: {
+            room_id: this.$route.query.id,
+            participationType: status,
+          },
+        })
+
+        sharedService.generateSnackbar(
+          this.$root,
+          'Updated user status',
+          'success',
+        )
+      } catch (err) {
+        sharedService.handleError(err, this.$root)
+      }
+      this.loading.updateRoomStatus = false
+    },
+
     async assignNewManager(cuberId) {
       this.loading.assigningManager = true
       try {
@@ -1090,8 +1243,8 @@ export default {
             this.updateActiveRound(this.rounds[0])
             this.findCurrentUserSolve()
             this.updateSolvesMap(this.rounds)
-            this.buildCuberResults()
             this.updateActiveCubers(this.room.active_cubers.data, true)
+            this.buildCuberResults()
           }
         }
       },
@@ -1203,16 +1356,26 @@ export default {
         skip: true,
       },
 
-      roomMembersUpdated: {
-        query: ROOM_MEMBERS_UPDATED_SUBSCRIPTION,
+      roomMemberStatusUpdated: {
+        query: ROOM_MEMBER_STATUS_UPDATED_SUBSCRIPTION,
         variables() {
           return {
             room_id: this.$route.query.id,
           }
         },
         result({ data }) {
-          this.room.active_cubers.data = data.roomMembersUpdated
-          this.updateActiveCubers(this.room.active_cubers.data)
+          //re-organize the data
+          data.roomMemberStatusUpdated.cuber.pivot = {
+            type: data.roomMemberStatusUpdated.type,
+          }
+          //update the active cubers.
+          this.updateActiveCubers([data.roomMemberStatusUpdated.cuber])
+
+          //if the cuber is current user, also update currentUserStatus
+          if (data.roomMemberStatusUpdated.cuber.id === this.user.id) {
+            this.currentUserStatus =
+              data.roomMemberStatusUpdated.cuber.pivot.type
+          }
         },
         fetchPolicy: 'no-cache',
         skip: true,
diff --git a/pages/rooms.vue b/pages/rooms.vue
index ea92e02..6a71fff 100644
--- a/pages/rooms.vue
+++ b/pages/rooms.vue
@@ -162,6 +162,12 @@
                   {{ generateMomentString(props.item.created_at) }}
                 </td>
                 <td class="text-xs-left">
+                  <v-icon
+                    small
+                    title="Spectate room"
+                    @click.stop="enterRoom(props.item, 'SPECTATING')"
+                    >mdi-eye</v-icon
+                  >
                   <template v-if="isItemCreator(props.item)">
                     <v-icon small @click.stop="openEditRoomDialog(props.item)"
                       >mdi-pencil</v-icon
@@ -269,6 +275,7 @@ export default {
       },
 
       selectedItem: null,
+      enterRoomStatus: null,
 
       options: {
         page: 1,
@@ -346,7 +353,7 @@ export default {
           text: 'Actions',
           sortable: false,
           value: 'action',
-          width: '66px',
+          width: '90px',
         },
       ],
 
@@ -411,7 +418,7 @@ export default {
     },
 
     addItem(item, secret) {
-      this.enterRoom(item, secret)
+      this.enterRoom(item, null, secret)
     },
 
     deleteItem(_item) {
@@ -422,9 +429,10 @@ export default {
       //this.reset();
     },
 
-    enterRoom(room, secret = null) {
+    enterRoom(room, status = null, secret = null) {
       if (room.has_secret && !secret) {
         this.selectedItem = room
+        this.enterRoomStatus = status
         this.openDialog('inputSecret')
       } else {
         this.$router.push({
@@ -432,6 +440,7 @@ export default {
           query: {
             id: room.id,
             ...(secret && { secret }),
+            ...(status && { status }),
           },
         })
       }
@@ -443,6 +452,7 @@ export default {
         query: {
           id: this.selectedItem.id,
           secret: secret,
+          ...(this.enterRoomStatus && { status: this.enterRoomStatus }),
         },
       })
     },
diff --git a/pages/settings.vue b/pages/settings.vue
index 5903cdc..e011840 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -105,8 +105,9 @@ export default {
   mounted() {
     if (!this.$store.getters['auth/user']) {
       this.$router.push('/login')
+    } else {
+      this.reset()
     }
-    this.reset()
   },
 
   methods: {