Option to auto-mute your video by default

web/static/css/bulma-prefers-dark.css

@@ -28,6 +28,10 @@
     /* note: this css file otherwise didn't override this, dark's always dark, brighten it! */
     color: #b5b5b5 !important;
   }
+  .is-outlined.is-dark {
+    border-color: #b5b5b5 !important;
+    color: #b5b5b5 !important;
+  }
 
   a.has-text-dark:focus,
   a.has-text-dark:hover {

web/static/js/BareRTC.js

@@ -116,6 +116,7 @@ const app = Vue.createApp({
                 elem: null,   // <video id="localVideo"> element
                 stream: null, // MediaStream object
                 muted: false, // our outgoing mic is muted, not by default
+                autoMute: false, // mute our mic automatically when going live (user option)
                 nsfw: false,  // user has flagged their camera to be NSFW
                 mutual: false, // user wants viewers to share their own videos
                 mutualOpen: false, // user wants to open video mutually
@@ -506,6 +507,9 @@ const app = Vue.createApp({
             if (localStorage.videoMutualOpen === "true") {
                 this.webcam.mutualOpen = true;
             }
+            if (localStorage.videoAutoMute === "true") {
+                this.webcam.autoMute = true;
+            }
         },
 
         signIn() {
@@ -1408,6 +1412,22 @@ const app = Vue.createApp({
                 // Save our mutuality prefs.
                 localStorage.videoMutual = this.webcam.mutual;
                 localStorage.videoMutualOpen = this.webcam.mutualOpen;
+                localStorage.videoAutoMute = this.webcam.autoMute;
+
+                // Auto-mute our camera? Two use cases:
+                // 1. The user marked their cam as muted but then changed video device,
+                //    so we set the mute to match their preference as shown on their UI.
+                // 2. The user opted to auto-mute their camera from the get to on their
+                //    NSFW broadcast modal popup.
+                if (this.webcam.muted || this.webcam.autoMute) {
+                    // Mute their audio tracks.
+                    this.webcam.stream.getAudioTracks().forEach(track => {
+                        track.enabled = false;
+                    });
+
+                    // Set their front-end mute toggle to match (in case of autoMute).
+                    this.webcam.muted = true;
+                }
 
                 // Tell backend the camera is ready.
                 this.sendMe();

web/templates/chat.html

@@ -355,15 +355,24 @@
                     <p class="card-header-title has-text-light">Broadcast my webcam</p>
                 </header>
                 <div class="card-content">
-                    <p class="block">
+                    <p class="block mb-1">
                     You can turn on your webcam and enable others in the room to connect to yours.
-                    The controls to stop, <i class="fa fa-microphone-slash"></i> mute audio, and
+                    The controls to <i class="fa fa-stop has-text-danger"></i> stop and <i class="fa fa-microphone-slash has-text-danger"></i> mute audio
-                    <i class="fa fa-eye"></i> see who is watching will be at the top of the page.
+                    will be at the top of the page.
                     </p>
 
+                    <div class="field">
+                        <label class="checkbox">
+                            <input type="checkbox"
+                                v-model="webcam.autoMute">
+                            Start with my microphone on mute by default
+                        </label>
+                    </div>
+
                     <p class="block mb-1">
-                    If your camera will be featuring "<abbr title="Not Safe For Work">Explicit</abbr>" or sexual content, please mark it as such by
+                    If your camera will be featuring "<abbr title="Not Safe For Work">Explicit</abbr>" or sexual content, please
-                    clicking on the <i class="fa fa-fire has-text-danger"></i> button or checking the box below to start with it enabled.
+                    mark it as such by clicking on the "<small><i class="fa fa-fire mr-1 has-text-danger"></i> Explicit</small>"
+                    button at the top of the page, or check the box below to start with it enabled.
                     </p>
 
                     <div class="field">
@@ -519,7 +528,8 @@
                                  'is-danger': webcam.nsfw}"
                         @click.prevent="webcam.nsfw = !webcam.nsfw; sendMe()"
                         title="Toggle the NSFW setting for your camera broadcast">
-                        <i class="fa fa-fire mr-1"></i> Explicit
+                        <i class="fa fa-fire mr-1"
+                            :class="{'has-text-danger': !webcam.nsfw}"></i> Explicit
                     </button>
                 </div>
                 <div class="column is-narrow pl-1">