Click names in video feeds to open their profile card

src/App.vue

@@ -4210,6 +4210,7 @@ export default {
                     <VideoFeed v-show="webcam.active" :local-video="true" :username="username"
                         :popped-out="WebRTC.poppedOut[username]" :is-explicit="webcam.nsfw" :is-muted="webcam.muted"
                         :is-source-muted="webcam.muted" @mute-video="muteMe()" @popout="popoutVideo"
+                        @open-profile="showProfileModal"
                         @set-volume="setVideoVolume">
                     </VideoFeed>
 
@@ -4219,7 +4220,8 @@ export default {
                         :is-source-muted="isSourceMuted(username)" :is-muted="isMuted(username)"
                         :is-watching-me="isWatchingMe(username)" :is-frozen="WebRTC.frozenStreamDetected[username]"
                         @reopen-video="openVideoByUsername" @mute-video="muteVideo" @popout="popoutVideo"
-                        @close-video="expresslyCloseVideo" @set-volume="setVideoVolume">
+                        @close-video="expresslyCloseVideo" @set-volume="setVideoVolume"
+                        @open-profile="showProfileModal">
                     </VideoFeed>
 
                     <!-- Debugging - copy a lot of these to simulate more videos -->

src/components/ProfileModal.vue

@@ -192,7 +192,7 @@ export default {
                     <div v-if="user.username !== username" class="mt-4">
                         <!-- DMs button -->
                         <button type="button"
-                            class="button is-dark is-outlined is-small px-2 mb-1"
+                            class="button is-small px-2 mb-1"
                             @click="openDMs()"
                             :title="isDnd ? 'This person is not accepting new DMs' : 'Open a Direct Message (DM) thread'"
                             :disabled="isDnd">
@@ -202,7 +202,7 @@ export default {
 
                         <!-- Mute button -->
                         <button type="button"
-                            class="button is-dark is-outlined is-small px-2 ml-1 mb-1"
+                            class="button is-small px-2 ml-1 mb-1"
                             @click="muteUser()" title="Mute user">
                             <i class="fa fa-comment-slash mr-1" :class="{
                                 'has-text-success': isMuted,
@@ -213,7 +213,7 @@ export default {
 
                         <!-- Boot button -->
                         <button type="button"
-                            class="button is-dark is-outlined is-small px-2 ml-1 mb-1"
+                            class="button is-small px-2 ml-1 mb-1"
                             @click="bootUser()" title="Boot user off your webcam">
                             <i class="fa fa-user-xmark mr-1" :class="{
                                 'has-text-danger': !isBooted,

src/components/VideoFeed.vue

@@ -31,6 +31,9 @@ export default {
         videoID() {
             return this.localVideo ? 'localVideo' : `videofeed-${this.username}`;
         },
+        textColorClass() {
+            return this.isExplicit ? 'has-text-camera-red' : 'has-text-camera-blue';
+        },
     },
     methods: {
         closeVideo() {
@@ -44,6 +47,10 @@ export default {
             this.$emit('reopen-video', this.username, true);
         },
 
+        openProfile() {
+            this.$emit('open-profile', this.username);
+        },
+
         // Toggle the Mute button
         muteVideo() {
             this.$emit('mute-video', this.username);
@@ -84,12 +91,9 @@ export default {
         <video class="feed" :id="videoID" autoplay :muted="localVideo"></video>
 
         <!-- Caption -->
-        <div class="caption" :class="{
+        <div class="caption" :class="textColorClass">
-            'has-text-camera-blue': !isExplicit,
-            'has-text-camera-red': isExplicit,
-        }">
             <i class="fa fa-microphone-slash mr-1 has-text-grey" v-if="isSourceMuted"></i>
-            {{ username }}
+            <a href="#" @click.prevent="openProfile" :class="textColorClass">{{ username }}</a>
             <i class="fa fa-people-arrows ml-1 has-text-grey is-size-7" :title="username + ' is watching your camera too'"
                 v-if="isWatchingMe"></i>