From d5100bae59137c7843e56b84bab9c386b40046ee Mon Sep 17 00:00:00 2001
From: Noah Petherbridge <root@kirsle.net>
Date: Tue, 13 May 2025 21:29:08 -0700
Subject: [PATCH] Popup alert to explain QR codes over webcams

---
 src/App.vue                  |  6 ++++--
 src/components/VideoFeed.vue | 22 +++++++++++++++++++---
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f069f21..1ac7876 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3408,7 +3408,8 @@ export default {
                         @mute-video="muteMe()"
                         @popout="popoutVideo"
                         @open-profile="showProfileModal"
-                        @set-volume="setVideoVolume">
+                        @set-volume="setVideoVolume"
+                        @modal-alert="modalAlert">
                     </VideoFeed>
 
                     <!-- Others' videos -->
@@ -3428,7 +3429,8 @@ export default {
                         @popout="popoutVideo"
                         @close-video="expresslyCloseVideo"
                         @set-volume="setVideoVolume"
-                        @open-profile="showProfileModal">
+                        @open-profile="showProfileModal"
+                        @modal-alert="modalAlert">
                     </VideoFeed>
 
                     <!-- Debugging - copy a lot of these to simulate more videos -->
diff --git a/src/components/VideoFeed.vue b/src/components/VideoFeed.vue
index 2609940..8cd132d 100644
--- a/src/components/VideoFeed.vue
+++ b/src/components/VideoFeed.vue
@@ -113,6 +113,21 @@ export default {
                 this.$emit('set-volume', this.username, this.volume);
             }, 200);
         },
+
+        // Show info about the watermark when the corner one is clicked.
+        showWatermarkInfo() {
+            this.$emit('modal-alert', {
+                icon: "fa-solid fa-qrcode",
+                title: "What are the QR codes on webcams?",
+                message: "This QR code is a safety feature to deter people from wanting to screen record webcams on chat. " +
+                    "The QR code contains the current viewer's username, the website's name, and the current date/time. The " +
+                    "idea is that if a webcam is recorded and then leaked online, the QR code would connect it directly back to who exactly " +
+                    "recorded it, and when.\n\n" +
+                    "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.",
+            });
+        }
     }
 }
 </script>
@@ -132,8 +147,8 @@ export default {
 
         <!-- Watermark layer -->
         <div v-if="watermarkImage">
-            <img :src="watermarkImage" class="watermark">
-            <img :src="watermarkImage" class="corner-watermark seethru invert-color">
+            <img :src="watermarkImage" class="watermark" oncontextmenu="return false">
+            <img :src="watermarkImage" class="corner-watermark seethru invert-color" @click="showWatermarkInfo()" oncontextmenu="return false">
         </div>
 
         <!-- Caption -->
@@ -236,6 +251,7 @@ video {
     min-width: 32px;
     min-height: 32px;
     max-height: 20%;
+    cursor: pointer;
 }
 .invert-color {
     filter: invert(100%);
@@ -244,7 +260,7 @@ video {
 /* Animate the primary watermark to pulsate in opacity */
 @keyframes subtle-pulsate {
     0% { opacity: 0.02; }
-    50% { opacity: 0.04; }
+    50% { opacity: 0.06; }
     100% { opacity: 0.02; }
 }
 </style>