feat(comments): anon viewers part 2 - WIP

packages/frontend/src/main/components/comments/CommentThreadViewer.vue

@@ -283,6 +283,7 @@ export default {
         route += `&overlay=${res.map((r) => r.resourceId).join(',')}`
       }
       navigator.clipboard.writeText(route)
+      this.$mixpanel.track('Comment Action', { type: 'action', name: 'share' })
       this.$eventHub.$emit('notification', {
         text: 'Comment link copied to clipboard - paste away!'
       })
@@ -348,7 +349,6 @@ export default {
       }, 100)
     },
     async archiveComment() {
-      // TODO
       try {
         await this.$apollo.mutate({
           mutation: gql`

packages/frontend/src/main/components/viewer/Bubbles.vue

@@ -29,7 +29,7 @@
         <v-icon
           class="primary--text"
           large
-          style="position: relative; right: -60%; font-size: 4.2em"
+          :style="`opacity: ${user.hidden ? '0.2' : 1}; position: relative; right: -60%; font-size: 4.2em`"
         >
           mdi-menu-right
         </v-icon>
@@ -38,19 +38,21 @@
         v-for="sessionUser in users"
         :ref="`user-bubble-${sessionUser.uuid}`"
         :key="sessionUser.uuid"
-        class="absolute-pos rounded-pill user-bubble elevation-5"
-        :style="`opacity: ${sessionUser.hidden ? '0.2' : 1}; border: 4px solid ${
-          $vuetify.theme.dark ? '#047EFB' : '#047EFB'
-        }`"
+        :class="`${sessionUser.name === 'Anonymous Viewer' ? 'background' : '' } absolute-pos rounded-pill user-bubble elevation-5`"
+        :style="`opacity: ${sessionUser.hidden ? '0.2' : 1}; border: 4px solid #047EFB;`"
       >
-        <div @click="setUserPow(sessionUser)">
+        <div @click="setUserPow(sessionUser)" >
           <user-avatar
+            v-if="sessionUser.name !== 'Anonymous Viewer'"
             :id="sessionUser.id"
             v-tooltip="sessionUser.name"
             :show-hover="false"
             :size="30"
             :margin="false"
           ></user-avatar>
+          <v-avatar color="background" :size="30" v-else v-tooltip="sessionUser.name" style="cursor: pointer;">
+            👀
+          </v-avatar>
           <text-dots-typing v-if="sessionUser.status === 'writing'" />
         </div>
       </div>
@@ -110,11 +112,13 @@ export default {
           }
         },
         skip() {
-          return !this.$route.params.resourceId || !this.$loggedIn()
+          return !this.$route.params.resourceId //|| !this.$loggedIn()
         },
-        result({ data }) {
+        result( res ) {
+          let data = res.data
           // Note: swap user id checks for .userId (vs. uuid) if wanting to not allow same user two diff browsers
           // it's easier to test like this though :)
+          if(!data.userViewerActivity) return
           if (data.userViewerActivity.status && data.userViewerActivity.status === 'disconnect') {
             this.users = this.users.filter((u) => u.uuid !== data.userViewerActivity.uuid)
             this.updateBubbles(true)
@@ -239,7 +243,7 @@ export default {
       }
       this.users = this.users.filter((u) => Date.now() - u.lastUpdate < 40000)
 
-      if (!this.$loggedIn()) return
+      // if (!this.$loggedIn()) return
 
       let controls = window.__viewer.cameraHandler.activeCam.controls
       let pos = controls.getPosition()
@@ -268,7 +272,7 @@ export default {
         selectionCenter: this.selectionCenter,
         camera: c,
         userId: this.$userId(),
-        name: this.user.name,
+        name: this.user ? this.user.name : 'Anonymous Viewer',
         uuid: this.uuid,
         status: 'viewing'
       }

packages/frontend/src/main/components/viewer/CommentAddOverlay.vue

@@ -68,7 +68,7 @@
                 block
                 depressed
                 color="primary"
-                class="rounded-xl"
+                class="rounded-xl mouse"
                 to="/authn/login"
               >
                 <v-icon small class="mr-1">mdi-account</v-icon>

packages/frontend/src/main/pages/stream/Comments.vue

@@ -39,7 +39,7 @@
       <v-col cols="12" class="mb-0">
         <p class="mb-0 mt-2">All this stream's comments are listed below.</p>
       </v-col>
-      <v-col v-for="c in localComments" :key="c.id" cols="12" sm="6">
+      <v-col v-for="c in localComments" :key="c.id" cols="12" md="6">
         <comment-list-item :comment="c" :stream="stream" @deleted="handleDeletion"/>
       </v-col>
       <v-col cols="12" class="align-center">