From 4ee6c106d216852714952707ade04a163c13c4f0 Mon Sep 17 00:00:00 2001
From: Noah Petherbridge <root@kirsle.net>
Date: Fri, 11 Aug 2023 18:42:06 -0700
Subject: [PATCH] Add live camera settings to the chat settings modal

---
 web/static/js/BareRTC.js | 23 ++++++++++-
 web/templates/chat.html  | 88 +++++++++++++++++++++++++++++++++++++++-
 2 files changed, 109 insertions(+), 2 deletions(-)

diff --git a/web/static/js/BareRTC.js b/web/static/js/BareRTC.js
index 1d9b05a..41818b0 100644
--- a/web/static/js/BareRTC.js
+++ b/web/static/js/BareRTC.js
@@ -312,7 +312,24 @@ const app = Vue.createApp({
         status() {
             // Send presence updates to the server.
             this.sendMe();
-        }
+        },
+
+        // Webcam preferences that the user can edit while live.
+        "webcam.nsfw": function() {
+            if (this.webcam.active) {
+                this.sendMe();
+            }
+        },
+        "webcam.mutual": function() {
+            if (this.webcam.active) {
+                this.sendMe();
+            }
+        },
+        "webcam.mutualOpen": function() {
+            if (this.webcam.active) {
+                this.sendMe();
+            }
+        },
     },
     computed: {
         chatHistory() {
@@ -630,6 +647,10 @@ const app = Vue.createApp({
                 }
             }
 
+            // Hang up on mutual cameras, if they changed their setting while we
+            // are already watching them.
+            this.unMutualVideo();
+
             // Has the back-end server forgotten we are on video? This can
             // happen if we disconnect/reconnect while we were streaming.
             if (this.webcam.active && !(this.whoMap[this.username]?.video & this.VideoFlag.Active)) {
diff --git a/web/templates/chat.html b/web/templates/chat.html
index f60ecbd..d53dd7e 100644
--- a/web/templates/chat.html
+++ b/web/templates/chat.html
@@ -82,7 +82,12 @@
                             </li>
                             <li :class="{'is-active': settingsModal.tab==='sounds'}">
                                 <a href="#" @click.prevent="settingsModal.tab='sounds'">
-                                    Sound effects
+                                    Sounds
+                                </a>
+                            </li>
+                            <li :class="{'is-active': settingsModal.tab==='webcam'}">
+                                <a href="#" @click.prevent="settingsModal.tab='webcam'">
+                                    Camera
                                 </a>
                             </li>
                         </ul>
@@ -247,6 +252,87 @@
                         </div>
                     </div>
 
+                    <!-- Webcam preferences -->
+                    <div v-if="settingsModal.tab==='webcam'">
+                        <h3 class="subtitle mb-2">
+                            Camera Settings
+                        </h3>
+
+                        <p class="block mb-1 is-size-7">
+                            The settings on this tab will be relevant only when you are already
+                            broadcasting your camera. They allow you to modify your broadcast settings
+                            while you are already live (for example, to change your mutual camera
+                            preference or select another audio/video device to broadcast from).
+                        </p>
+
+                        <p class="block mb-1" v-if="config.permitNSFW">
+                            <label class="label">Explicit</label>
+                        </p>
+                        <div class="field" v-if="config.permitNSFW">
+                            <label class="checkbox"
+                                :class="{'cursor-notallowed': !webcam.active}">
+                                <input type="checkbox"
+                                    v-model="webcam.nsfw"
+                                    :disabled="!webcam.active">
+                                Mark my camera as featuring explicit content
+                            </label>
+                        </div>
+
+                        <p class="block mb-1">
+                            <label class="label">Mutual webcam options</label>
+                        </p>
+
+                        <div class="field mb-1">
+                            <label class="checkbox"
+                                :class="{'cursor-notallowed': !webcam.active}">
+                                <input type="checkbox"
+                                    v-model="webcam.mutual"
+                                    :disabled="!webcam.active">
+                                People must be sharing their own camera before they can open mine
+                            </label>
+                        </div>
+
+                        <div class="field">
+                            <label class="checkbox"
+                                :class="{'cursor-notallowed': !webcam.active}">
+                                <input type="checkbox"
+                                    v-model="webcam.mutualOpen"
+                                    :disabled="!webcam.active">
+                                When someone opens my camera, I also open their camera automatically
+                            </label>
+                        </div>
+
+                        <h3 class="subtitle mb-2" v-if="webcam.videoDevices.length > 0 || webcam.audioDevices.length > 0">
+                            Webcam Devices
+                        </h3>
+                        <div class="columns is-mobile" v-if="webcam.videoDevices.length > 0 || webcam.audioDevices.length > 0">
+
+                            <div class="column">
+                                <label class="label">Video source</label>
+                                <div class="select is-fullwidth">
+                                    <select v-model="webcam.videoDeviceID" @change="startVideo({changeCamera: true, force: true})">
+                                        <option v-for="(d, i) in webcam.videoDevices"
+                                            :value="d.id">
+                                            [[ d.label || `Camera ${i}` ]]
+                                        </option>
+                                    </select>
+                                </div>
+                            </div>
+
+                            <div class="column">
+                                <label class="label">Audio source</label>
+                                <div class="select is-fullwidth">
+                                    <select v-model="webcam.audioDeviceID" @change="startVideo({changeCamera: true, force: true})">
+                                        <option v-for="(d, i) in webcam.audioDevices"
+                                            :value="d.id">
+                                            [[ d.label || `Microphone ${i}` ]]
+                                        </option>
+                                    </select>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
                 </div>
                 <footer class="card-footer">
                     <div class="card-footer-item">