Webcam QR Code Tweaks + Misc

* Adjust the animation settings on QR code videos, to be more translucent
  most of the time but occasionally flash white and strong
* Alert Modal: Allow some alerts to be dismissed by clicking on the
  background curtain, e.g. for the QR code explanation or the Close DMs
  explanation.

src/App.vue

@@ -221,6 +221,7 @@ export default {
                 title: "Alert",
                 icon: "",
                 message: "",
+                backgroundDismissable: false,
                 callback() {},
             },
 
@@ -1486,7 +1487,7 @@ export default {
          */
 
         // Generic window.alert replacement modal.
-        async modalAlert({ message, title="Alert", icon="", isConfirm=false }) {
+        async modalAlert({ message, title="Alert", icon="", isConfirm=false, backgroundDismissable=false }) {
             return new Promise((resolve, reject) => {
                 this.alertModal.isConfirm = isConfirm;
                 this.alertModal.title = title;
@@ -1495,6 +1496,7 @@ export default {
                 this.alertModal.callback = () => {
                     resolve();
                 };
+                this.alertModal.backgroundDismissable = backgroundDismissable;
                 this.alertModal.visible = true;
             });
         },
@@ -2409,6 +2411,7 @@ export default {
         :title="alertModal.title"
         :icon="alertModal.icon"
         :message="alertModal.message"
+        :background-dismissable="alertModal.backgroundDismissable"
         @callback="alertModal.callback"
         @close="modalClose()"></AlertModal>
 
@@ -3315,7 +3318,7 @@ export default {
                             Ignore unsolicited DMs
 
                             <a href="#"
-                                @click.prevent="modalAlert({title: 'About Ignoring Unsolicited DMs', message: 'When this box is checked, your DMs will be closed to new conversations and the button for others to send you a DM will be greyed out/disabled.\n\nYou may still initiate new DMs with others yourself, and continue conversations with people who you already have DM threads open with.'})"
+                                @click.prevent="modalAlert({title: 'About Ignoring Unsolicited DMs', message: 'When this box is checked, your DMs will be closed to new conversations and the button for others to send you a DM will be greyed out/disabled.\n\nYou may still initiate new DMs with others yourself, and continue conversations with people who you already have DM threads open with.', backgroundDismissable: true})"
                                 class="fa fa-info-circle ml-2">
                             </a>
                         </label>

src/components/AlertModal.vue

@@ -6,6 +6,7 @@ export default {
         title: String,
         icon: String,
         message: String,
+        backgroundDismissable: Boolean,
     },
     data() {
         return {
@@ -32,14 +33,19 @@ export default {
         },
         close() {
             this.$emit('close');
-        }
+        },
+        backgroundClicked() {
+            if (this.backgroundDismissable) {
+                this.close();
+            }
+        },
     }
 }
 </script>
 
 <template>
     <div class="modal" :class="{ 'is-active': visible }">
-        <div class="modal-background"></div>
+        <div class="modal-background" @click="backgroundClicked()"></div>
 
         <div class="modal-content">
             <div class="card">

src/components/VideoFeed.vue

@@ -140,6 +140,7 @@ export default {
                     "There are two QR codes on each video: the one in the bottom-right corner is intentionally made visible and obvious " +
                     "to everybody, and a second (subtle) copy of the code spans across the center/middle of the video and pulsates in " +
                     "transparency over time.",
+                backgroundDismissable: true,
             });
         },
 
@@ -278,7 +279,7 @@ video {
     height: 40%;
     opacity: 0.02;
     animation-name: subtle-pulsate;
-    animation-duration: 10s;
+    animation-duration: 20s;
     animation-iteration-count: infinite;
 }
 .corner-watermark {
@@ -297,8 +298,14 @@ video {
 
 /* Animate the primary watermark to pulsate in opacity */
 @keyframes subtle-pulsate {
-    0% { opacity: 0.02; }
-    50% { opacity: 0.06; }
+    0% { opacity: 0.02; filter: invert(0%); }
+    25% { opacity: 0.05; }
+    50% { opacity: 0.02; }
+    75% { opacity: 0.05; }
+    90% { opacity: 0.1 }
+    91% { opacity: 0.2; filter: invert(0%); }
+    95% { opacity: 0.2; filter: invert(100%); }
+    99% { opacity: 0.1; filter: invert(0%); }
     100% { opacity: 0.02; }
 }
 </style>