From 3180d2ddf93c4cc9ed2eaf1d8c106ff6e642fcfd Mon Sep 17 00:00:00 2001 From: Noah Petherbridge Date: Mon, 17 Mar 2025 22:14:09 -0700 Subject: [PATCH] Gentle nudge NSFW feature In profile cards, show a prompt to regular users to remind a user to mark their camera as Explicit, when the camera is blue and is currently being watched by the current user. Under the hood, this sends a 'react' message with a msgID of -451 and the target's username as the react message. Updated chat pages will look for this reaction and show a nice reminder in chat, if the user's camera is blue and they have at least 2 watchers. Old page versions at deployment time will simply ignore these react messages. --- src/App.vue | 54 +++++++++++++++++++++++++++++++++ src/components/ProfileModal.vue | 39 +++++++++++++++++++++++- 2 files changed, 92 insertions(+), 1 deletion(-) diff --git a/src/App.vue b/src/App.vue index 54c2d59..6fd4d86 100644 --- a/src/App.vue +++ b/src/App.vue @@ -41,6 +41,7 @@ const configuration = { const FileUploadMaxSize = 1024 * 1024 * 8; // 8 MB const DebugChannelID = "barertc-debug"; +const ReactNudgeNsfwMessageID = -451; // Webcam sizes: ideal is 640x480 as this is the most friendly for end users, e.g. if everyone // broadcasted at 720p users on weaker hardware would run into problems sooner. @@ -1307,6 +1308,12 @@ export default { who = msg.username, emoji = msg.message; + // Special react cases: nudge NSFW. + if (msgID === ReactNudgeNsfwMessageID) { + this.onNudgeNsfw(msg); + return; + } + if (this.messageReactions[msgID] == undefined) { this.messageReactions[msgID] = {}; } @@ -2040,6 +2047,13 @@ export default { username: username, }); }, + isWatching(username) { + // Is the current user watching this target user? + if (this.WebRTC.pc[username] != undefined && this.WebRTC.streams[username] != undefined) { + return true; + } + return false; + }, isWatchingMe(username) { // Return whether the user is watching your camera return this.webcam.watching[username] === true; @@ -2893,6 +2907,44 @@ export default { return false; }, + // Functions to help users 'nudge' each other into marking their cams as Explicit. + sendNudgeNsfw(username) { + // Send a nudge to the username. This is triggered by their profile modal: if the user is + // on blue camera, others on chat can anonymously nudge them into marking their camera as red. + + // Nudges are a special kind of emoji reaction (so we could add this feature in frontend only without + // a server side deployment to support it). + this.client.send({ + action: 'react', + msgID: ReactNudgeNsfwMessageID, + message: username, + }); + }, + onNudgeNsfw(msg) { + // Handler for a nudge NSFW react message. + if (msg.message !== this.username) { + return; // Not for us + } + + // Sanity check that we are on blue camera. + if (!this.webcam.active || this.webcam.nsfw) { + return; + } + + // Only show this if we have at least 2 watchers. + let watchers = Object.keys(this.webcam.watching).length; + if (watchers < 2) { + return; + } + + // Show a nice message on chat. + this.ChatServer( + `Your webcam is Hot!

` + + `Somebody who is watching your camera thinks that your webcam should be tagged as Explicit.

` + + `In case you forgot to do so, please click on the ' Explicit' button at the top of the page to turn your camera 'red.' Thank you! `, + ); + }, + // Show who watches our video. showViewers() { // TODO: for now, ChatClient is our bro. @@ -4787,10 +4839,12 @@ export default { :is-booted="isBooted(profileModal.username)" :profile-webhook-enabled="isWebhookEnabled('profile')" :vip-config="config.VIP" + :is-watching="isWatching(profileModal.username)" @send-dm="openDMs" @mute-user="muteUser" @boot-user="bootUser" @send-command="sendCommand" + @nudge-nsfw="sendNudgeNsfw" @report="doCustomReport" @cancel="profileModal.visible = false"> diff --git a/src/components/ProfileModal.vue b/src/components/ProfileModal.vue index b4dd5e9..1166879 100644 --- a/src/components/ProfileModal.vue +++ b/src/components/ProfileModal.vue @@ -10,6 +10,7 @@ export default { username: String, // the local user isViewerOp: Boolean, // the viewer is an operator (show buttons) websiteUrl: String, + isWatching: Boolean, // chat user is currently watching the profile user isDnd: Boolean, isMuted: Boolean, isBooted: Boolean, @@ -45,6 +46,9 @@ export default { callback() {}, }, + // The local user has sent a NSFW nudge already. + sentNsfwNudge: false, + // Error messaging from backend error: null, }; @@ -113,6 +117,7 @@ export default { if (!this.profileWebhookEnabled) return; if (!this.user || !this.user?.username) return; this.busy = true; + this.sentNsfwNudge = false; return fetch("/api/profile", { method: "POST", mode: "same-origin", @@ -185,6 +190,23 @@ export default { this.cancel(); }); }, + nudgeNsfw() { + // Gentler, public user-facing version to gently remind the user that + // their webcam should probably be marked as Explicit. + if (this.sentNsfwNudge) return; + + this.modalConfirm({ + title: "Mark a webcam as Explicit", + message: `Should @${this.user.username}'s webcam be marked as Explicit?\n\n` + + `If their webcam is 'blue' and they are behaving sexually on camera, you may send them a gentle reminder ` + + `and ask them to tag their webcam as Explicit.\n\n` + + `They will not know for sure that it was you who did this.`, + icon: "fa fa-fire", + }).then(() => { + this.$emit('nudge-nsfw', this.user.username); + this.sentNsfwNudge = true; + }); + }, cutCamera() { this.modalConfirm({ message: "Make this user stop broadcasting their camera?", @@ -431,7 +453,22 @@ export default {
- Online since: {{ onlineSince }} +
+
+ Online since: {{ onlineSince }} +
+ + +
+ + + {{ sentNsfwNudge ? 'Thank you for helping tag this camera as Explicit!' : 'Should their camera be marked as Explicit?' }} + +
+