From d510ac791f5aa513e9705a1af8976aa35ecc4c37 Mon Sep 17 00:00:00 2001
From: Noah Petherbridge <root@kirsle.net>
Date: Tue, 9 Apr 2024 17:57:37 -0700
Subject: [PATCH] Click names in video feeds to open their profile card

---
 src/App.vue                     |  4 +++-
 src/components/ProfileModal.vue |  6 +++---
 src/components/VideoFeed.vue    | 14 +++++++++-----
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b75581e..ce0dbb9 100644
--- a/src/App.vue
+++ b/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 -->
diff --git a/src/components/ProfileModal.vue b/src/components/ProfileModal.vue
index 0916bad..f1d3062 100644
--- a/src/components/ProfileModal.vue
+++ b/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,
diff --git a/src/components/VideoFeed.vue b/src/components/VideoFeed.vue
index e18f3a6..a948e5f 100644
--- a/src/components/VideoFeed.vue
+++ b/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="{
-            'has-text-camera-blue': !isExplicit,
-            'has-text-camera-red': isExplicit,
-        }">
+        <div class="caption" :class="textColorClass">
             <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>