Tweaks to profile cards

Protocol.md

@@ -388,7 +388,7 @@ The chat server holds onto blocklists temporarily in memory: when that user load
 
 The reason for this workflow is in case the chat server is rebooted _while_ the user is in the room. The cached blocklist pushed by your website is forgotten by the chat server back-end, but the client's page was still open with the cached blocklist already, and it will send the `blocklist` command to the server when it reconnects, eliminating any gaps.
 
-## Boot
+## Boot, Unboot
 
 Sent by: Client.
 
@@ -409,6 +409,16 @@ When a user is booted:
 
 Note: it is designed that the person being booted off can not detect that they have been booted. They will see your RTC PeerConnection close + get a Who List that says you are not sharing video - exactly the same as if you had simply turned off your camera completely.
 
+There is also a client side Unboot command, to undo the effects of a boot:
+
+```javascript
+// Client Unboot
+{
+    "action": "unboot",
+    "username": "target"
+}
+```
+
 ## WebRTC Signaling
 
 Sent by: Client, Server.

src/App.vue

@@ -393,21 +393,25 @@ export default {
 
         // Webcam preferences that the user can edit while live.
         "webcam.nsfw": function () {
+            LocalStorage.set('videoExplicit', this.webcam.nsfw);
             if (this.webcam.active) {
                 this.sendMe();
             }
         },
         "webcam.mutual": function () {
+            LocalStorage.set('videoMutual', this.webcam.mutual);
             if (this.webcam.active) {
                 this.sendMe();
             }
         },
         "webcam.mutualOpen": function () {
+            LocalStorage.set('videoMutualOpen', this.webcam.videoMutualOpen);
             if (this.webcam.active) {
                 this.sendMe();
             }
         },
         "webcam.vipOnly": function () {
+            LocalStorage.set('videoVipOnly', this.webcam.vipOnly);
             if (this.webcam.active) {
                 this.sendMe();
             }
@@ -939,7 +943,7 @@ export default {
             // The server can set our webcam NSFW flag.
             let myNSFW = this.webcam.nsfw;
             let theirNSFW = (msg.video & this.VideoFlag.NSFW) > 0;
-            if (this.webcam.active && myNSFW != theirNSFW) {
+            if (this.webcam.active && myNSFW != theirNSFW && theirNSFW) {
                 this.webcam.nsfw = theirNSFW;
             }
 

src/components/ProfileModal.vue

@@ -143,7 +143,7 @@ export default {
                             <a :href="profileURL"
                                 @click.prevent="openProfile()"
                                 :class="{ 'cursor-default': !profileURL }">
-                                <figure class="image is-48x48">
+                                <figure class="image is-96x96">
                                     <img v-if="avatarURL"
                                         :src="avatarURL">
                                     <img v-else src="/static/img/shy.png">
@@ -165,24 +165,24 @@ export default {
                                     <span v-else class="has-text-grey">@{{ user.username }}</span>
                                 </small>
                             </div>
+
+                            <!-- User badges -->
+                            <div v-if="user.op || user.vip" class="mt-4">
+                                <!-- Operator? -->
+                                <span v-if="user.op" class="tag is-warning is-light mr-2">
+                                    <i class="fa fa-peace mr-1"></i> Operator
+                                </span>
+
+                                <!-- VIP? -->
+                                <span v-if="vipConfig && user.vip" class="tag is-success is-light mr-2"
+                                    :title="vipConfig.Name">
+                                    <i class="mr-1" :class="vipConfig.Icon"></i>
+                                    {{ vipConfig.Name }}
+                                </span>
+                            </div>
                         </div>
                     </div>
 
-                    <!-- User badges -->
-                    <div v-if="user.op || user.vip" class="mt-4">
-                        <!-- Operator? -->
-                        <span v-if="user.op" class="tag is-warning is-light mr-2">
-                            <i class="fa fa-peace mr-1"></i> Operator
-                        </span>
-
-                        <!-- VIP? -->
-                        <span v-if="vipConfig && user.vip" class="tag is-success is-light mr-2"
-                            :title="vipConfig.Name">
-                            <i class="mr-1" :class="vipConfig.Icon"></i>
-                            {{ vipConfig.Name }}
-                        </span>
-                    </div>
-
                     <!-- Action buttons -->
                     <div v-if="user.username !== username" class="mt-4">
                         <!-- DMs button -->
@@ -244,7 +244,8 @@ export default {
                 </div>
                 <footer class="card-footer">
                     <a :href="profileURL" target="_blank"
-                        v-if="profileURL" class="card-footer-item">
+                        v-if="profileURL" class="card-footer-item"
+                        @click="cancel()">
                         Full profile <i class="fa fa-external-link ml-2"></i>
                     </a>
                     <a href="#" @click.prevent="cancel()" class="card-footer-item">

src/components/WhoListRow.vue

@@ -102,6 +102,15 @@ export default {
             this.$emit('open-profile', this.user.username);
         },
 
+        // Directly open the profile page.
+        openProfilePage() {
+            if (this.profileURL) {
+                window.open(this.profileURL);
+            } else {
+                this.openProfile();
+            }
+        },
+
         openDMs() {
             this.$emit('send-dm', {
                 username: this.user.username,
@@ -192,7 +201,7 @@ export default {
 
             <!-- Profile button -->
             <button type="button" class="button is-small px-2 py-1"
-                :class="profileButtonClass" @click="openProfile()"
+                :class="profileButtonClass" @click="openProfilePage()"
                 :title="'Open profile page' + (user.gender ? ` (gender: ${user.gender})` : '') + (user.vip ? ` (${vipConfig.Name})` : '')">
                 <i class="fa fa-user"></i>
             </button>