/*
WebRTC and Webcam related functionality for BareRTC.

Most methods here are called by App.vue with some funcs reused by sub-components, e.g.
for showing the webcam video buttons on the Who List and other places.
*/

import interact from 'interactjs';
import hark from 'hark';

import VideoFlag from './VideoFlag.js';
import LocalStorage from './LocalStorage.js';

// WebRTC configuration.
const configuration = {
    iceServers: TURN.URLs.map(val => {
        let row = {
            urls: val,
        };

        if (val.indexOf('turn:') === 0) {
            row.username = TURN.Username;
            row.credential = TURN.Credential;
        }

        return row;
    })
};

// 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.
const WebcamWidth = 640,
    WebcamHeight = 480;

// For webcams that can not transmit at 640x480 (e.g. ultra widescreen), allow them to choose
// the nearest resolution but no more than 720p.
const WebcamMaxWidth = 1280,
    WebcamMaxHeight = 720;

const ReactNudgeNsfwMessageID = -451;

// An API surface layer of functions.
class WebRTCController {
    // The caller configures:
    // - nsfw (bool): the BareRTC PermitNSFW setting, which controls some status options.
    // - isAdmin (func): return a boolean if the current user is operator.
    // - currentStatus (func): return the name of the user's current status.
    constructor() {

    }

    // Vue mixin for the main App.vue
    getMixin() {
        return {
            data: this.getData(),
            watch: this.getWatches(),
            computed: this.getComputed(),
            methods: this.getMethods(),
        }
    }

    // Vue.js data mixin for App.vue to store all our webcam-related state.
    getData() {
        return {
            // The user's local webcam and settings.
            webcam: {
                busy: false,
                active: false,
                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
                nonExplicit: false, // user prefers not to see explicit cameras
                vipOnly: false, // only show camera to fellow VIP users
                rememberExpresslyClosed: true,  // remember cams we expressly closed
                autoMuteWebcams: false, // auto-mute other cameras' audio channels

                // My watermark image for screen recording protection.
                // Set after login in setWatermark.
                watermark: null,

                // Who all is watching me? map of users.
                watching: {},

                // Scaling setting for the videos drawer, so the user can
                // embiggen the webcam sizes so a suitable size.
                videoScale: "",
                videoScaleOptions: [
                    ["", "Default size"],
                    ["x1", "50% larger videos"],
                    ["x2", "2x larger videos"],
                    ["x3", "3x larger videos"],
                    ["x4", "4x larger videos (not recommended)"],
                ],

                // Available cameras and microphones for the Settings modal.
                gettingDevices: false, // busy indicator for refreshing devices
                videoDevices: [],
                videoDeviceID: null,
                audioDevices: [],
                audioDeviceID: null,

                // Advanced: automatically share your webcam when the page loads.
                autoshare: false,

                // After we get a device selected, remember it (by name) so that we
                // might hopefully re-select it by default IF we are able to enumerate
                // devices before they go on camera the first time.
                preferredDeviceNames: {
                    video: null,
                    audio: null,
                },

                // Detect dark video streams.
                darkVideo: {
                    canvas: null,    // <canvas> element to screenshot video into
                    ctx: null,       // Canvas context2d
                    interval: null,  // interval loop
                    lastImage: null, // data: uri of last screenshot taken
                    lastAverage: [], // last average RGB color
                    lastAverageColor: "rgba(255, 0, 255, 1)",
                    tooDarkFrames: 0,  // frame counter for dark videos
                    tooDarkFramesLimit: 4, // frames in a row of too dark before cut

                    // Configuration thresholds: how dark is too dark? (0-255)
                    // NOTE: 0=disable the feature.
                    threshold: 10,
                },
            },

            // WebRTC sessions with other users.
            WebRTC: {
                // Streams per username.
                streams: {},
                muted: {}, // muted bool per username
                booted: {}, // booted bool per username
                invited: {}, // usernames we had invited
                poppedOut: {}, // popped-out video per username
                speaking: {}, // speaking boolean per username

                // RTCPeerConnections per username.
                pc: {},

                // Video stream freeze detection.
                frozenStreamInterval: {}, // map usernames to intervals
                frozenStreamDetected: {}, // map usernames to bools

                // Debounce connection attempts since now every click = try to connect.
                debounceOpens: {}, // map usernames to bools

                // Timeouts for open camera attempts. e.g.: when you click to view
                // a camera, the icon changes to a spinner for a few seconds to see
                // whether the video goes on to open.
                openTimeouts: {}, // map usernames to timeouts

                // Map of usernames whose cameras were expressly closed by us.
                // Example: we have mutualOpen enabled, someone opens our cam
                // so we open theirs back, and then we expressly 'X' out and
                // close their camera. If they close and re-open ours, we don't
                // want to auto-open their cam back because we had previously
                // closed out of it manually.
                //
                // Usernames are added when we 'X' out of their video,
                // and usernames are removed when we expressly re-open their
                // video (e.g., by clicking their Who List video button).
                expresslyClosed: {},  // bool per username

                // Rate limit pre-emptive boots: to avoid a user coming thru the entire Who List
                // and kicking everyone off their cam when they aren't even watching yet.
                preemptBootRateLimit: {
                    counter: 0,       // how many people have they booted so far
                    cooldownAt: null, // Date for cooldown once they reach the threshold

                    // Configuration settings:
                    maxFreeBoots: 10, // first 10 are free
                    cooldownTTL: 60, // then must wait this number of seconds before each boot
                }
            },

            /* For internal use only */
            // VideoFlag: VideoFlag,
            // LocalStorage: LocalStorage,
        };
    }

    // Watchers to be imported for App.vue
    getWatches() {
        return {
            "webcam.videoScale": function () {
                document.querySelectorAll(".video-feeds > .feed").forEach(node => {
                    node.style.width = null;
                    node.style.height = null;
                });
                LocalStorage.set('videoScale', this.webcam.videoScale);
            },

            // Webcam preferences that the user can edit while live.
            "webcam.nsfw": function () {
                this.webcam.wasServerNSFW = false;
                LocalStorage.set('videoExplicit', this.webcam.nsfw);
                if (this.webcam.active) {
                    this.sendMe();
                }

                // Respect users who have the NonExplicit cam setting checked, and close
                // their cameras when you toggle to red.
                this.unWatchNonExplicitVideo();
            },
            "webcam.mutual": function () {
                LocalStorage.set('videoMutual', this.webcam.mutual);
                if (this.webcam.active) {
                    this.sendMe();
                }
            },
            "webcam.mutualOpen": function () {
                LocalStorage.set('videoMutualOpen', this.webcam.mutualOpen);
                if (this.webcam.active) {
                    this.sendMe();
                }
            },
            "webcam.nonExplicit": function () {
                LocalStorage.set('videoNonExplicit', this.webcam.nonExplicit);

                // Turn off NSFW if this is on.
                if (this.webcam.nonExplicit && this.webcam.nsfw) {
                    // Note: this toggle will also sendMe().
                    this.webcam.nsfw = false;
                } else if (this.webcam.active) {
                    this.sendMe();
                }
            },
            "webcam.vipOnly": function () {
                LocalStorage.set('videoVipOnly', this.webcam.vipOnly);
                if (this.webcam.active) {
                    this.sendMe();
                }

                // If we have toggled this while already connected to people:
                // Hang up on any that have a mutual viewership requirement, if
                // they can not see our VIP-only camera.
                for (let username of Object.keys(this.WebRTC.pc)) {
                    if (this.whoMap[username] != undefined && this.isVideoNotAllowed(this.whoMap[username])) {
                        this.closeVideo(username);
                    }
                }
            },
            "webcam.rememberExpresslyClosed": function () {
                LocalStorage.set('rememberExpresslyClosed', this.webcam.rememberExpresslyClosed);
            },
            "webcam.autoMuteWebcams": function () {
                LocalStorage.set('autoMuteWebcams', this.webcam.autoMuteWebcams);
            },
            "webcam.autoshare": function () {
                LocalStorage.set('videoAutoShare', this.webcam.autoshare);
            },
        };
    }

    // Vue.js mixin for the App.vue
    getComputed() {
        return {
            myVideoFlag() {
                // Compute the current user's video status flags.
                let status = 0;
                if (!this.webcam.active) return 0; // unset all flags if not active now
                if (this.webcam.active) status |= this.VideoFlag.Active;
                if (this.webcam.muted) status |= this.VideoFlag.Muted;
                if (this.webcam.nsfw && this.config.permitNSFW) status |= this.VideoFlag.NSFW;
                if (this.webcam.mutual) status |= this.VideoFlag.MutualRequired;
                if (this.webcam.mutualOpen) status |= this.VideoFlag.MutualOpen;
                if (this.webcam.nonExplicit) status |= this.VideoFlag.NonExplicit;
                if (this.webcam.vipOnly && this.isVIP) status |= this.VideoFlag.VipOnly;
                return status;
            },
            anyVideosOpen() {
                // Return if any videos are open.
                return this.webcam.active || this.numVideosOpen > 0;
            },
            numVideosOpen() {
                // Return the count of other peoples videos we have open.
                return Object.keys(this.WebRTC.streams).length;
            },
            sortedWatchingList() {
                let result = [];
                for (let username of Object.keys(this.webcam.watching)) {
                    let user = this.getUser(username);
                    result.push(user);
                }
    
                switch (this.whoSort) {
                    case "broadcasting":
                        result.sort((a, b) => {
                            return (b.video & this.VideoFlag.Active) - (a.video & this.VideoFlag.Active);
                        });
                        break;
                    case "nsfw":
                        result.sort((a, b) => {
                            let left = (a.video & (this.VideoFlag.Active | this.VideoFlag.NSFW)),
                                right = (b.video & (this.VideoFlag.Active | this.VideoFlag.NSFW));
                            return right - left;
                        });
                        break;
                    case "blue":
                        result.sort((a, b) => {
                            let left = (a.video & this.VideoFlag.Active) ? (a.video & this.VideoFlag.NSFW ? 1 : 2) : 0,
                                right = (b.video & this.VideoFlag.Active) ? (b.video & this.VideoFlag.NSFW ? 1 : 2) : 0;
                            return right - left;
                        });
                        break;
                    case "status":
                        result.sort((a, b) => {
                            if (a.status === b.status) return 0;
                            return b.status < a.status ? -1 : 1;
                        });
                        break;
                    case "op":
                        result.sort((a, b) => {
                            return b.op - a.op;
                        });
                        break;
                    case "emoji":
                        result.sort((a, b) => {
                            if (a.emoji === b.emoji) return 0;
                            return a.emoji < b.emoji ? -1 : 1;
                        })
                        break;
                    case "login":
                        result.sort((a, b) => {
                            return b.loginAt - a.loginAt;
                        });
                        break;
                    case "gender":
                        result.sort((a, b) => {
                            if (a.gender === b.gender) return 0;
                            let left = a.gender || 'z',
                                right = b.gender || 'z';
                            return left < right ? -1 : 1;
                        })
                        break;
                    case "z-a":
                        result = result.reverse();
                }
    
                // Default ordering from ChatServer = a-z
                return result;
            },
        };
    }

    // Vue.js mixin for the App.vue
    getMethods() {
        return {
            // Start WebRTC with the other username.
            startWebRTC(username, isOfferer) {
                // this.ChatClient(`Begin WebRTC with ${username}.`);
                let pc = new RTCPeerConnection(configuration);

                // Store uni-directional PeerConnections:
                // - If we are reading video from the other (offerer)
                // - If we are sending video to the other (answerer)
                if (this.WebRTC.pc[username] == undefined) {
                    this.WebRTC.pc[username] = {};
                }
                if (isOfferer) {
                    this.WebRTC.pc[username].offerer = pc;
                } else {
                    this.WebRTC.pc[username].answerer = pc;
                }

                this.DebugChannel(`[WebRTC] Starting WebRTC with: ${username} (I am the: ${isOfferer ? 'offerer' : 'answerer'})`);

                // Keep a pointer to the current channel being established (for candidate/SDP).
                this.WebRTC.pc[username].connecting = pc;

                // 'onicecandidate' notifies us whenever an ICE agent needs to deliver a
                // message to the other peer through the signaling server.
                pc.onicecandidate = event => {
                    if (event.candidate) {
                        this.client.send({
                            action: "candidate",
                            username: username,
                            candidate: JSON.stringify(event.candidate),
                        });
                    }
                };

                // If the user is offerer let the 'negotiationneeded' event create the offer.
                if (isOfferer) {
                    pc.onnegotiationneeded = () => {
                        pc.createOffer().then(this.localDescCreated(pc, username)).catch(this.ChatClient);
                    };
                }

                // When a remote stream arrives.
                pc.ontrack = event => {
                    // If we were not expecting to receive this video (e.g. somebody is requesting our
                    // cam and sending their video on the offer, but we don't want to auto-open their
                    // video, so don't use it)
                    if (!isOfferer && !this.webcam.mutualOpen) {
                        this.DebugChannel(`[WebRTC] The offerer ${username} gave us a video, but we don't auto-open their video.`);
                        return;
                    }

                    const stream = event.streams[0];

                    // Had we expressly closed this user's cam before? e.g.: if we have auto-open their
                    // video enabled, and we 'X' out, and they reopen ours - we may be receiving their
                    // video right now. If we had expressly closed it, do not accept their video
                    // and hang up the connection.
                    if (this.WebRTC.expresslyClosed[username] && this.webcam.rememberExpresslyClosed) {
                        if (!isOfferer) {
                            return;
                        }
                    }

                    // A booted admin?
                    if (this.isBootedAdmin(username)) {
                        return;
                    }

                    // We've received a video! If we had an "open camera spinner timeout",
                    // clear it before it expires.
                    if (this.WebRTC.openTimeouts[username] != undefined) {
                        clearTimeout(this.WebRTC.openTimeouts[username]);
                        delete (this.WebRTC.openTimeouts[username]);
                    }

                    // Do we already have it?
                    // this.ChatClient(`Received a video stream from ${username}.`);
                    if (this.WebRTC.streams[username] == undefined ||
                        this.WebRTC.streams[username].id !== stream.id) {
                        this.WebRTC.streams[username] = stream;
                    }

                    window.requestAnimationFrame(() => {
                        let $ref = document.getElementById(`videofeed-${username}`);
                        $ref.srcObject = stream;

                        // Are we muting their videos by default?
                        if (this.webcam.autoMuteWebcams) {
                            this.WebRTC.muted[username] = true;
                            $ref.muted = true;
                        }

                        // Set up the speech detector.
                        this.initSpeakingEvents(username, $ref);
                    });

                    // Inform them they are being watched.
                    this.sendWatch(username, true);

                    // Set a mute video handler to detect freezes.
                    stream.getVideoTracks().forEach(videoTrack => {
                        let freezeDetected = () => {
                            this.DebugChannel("[WebRTC] A video freeze was detected from:", username);
                            // Wait some seconds to see if the stream has recovered on its own
                            setTimeout(() => {
                                // Flag it as likely frozen.
                                if (videoTrack.muted) {
                                    this.WebRTC.frozenStreamDetected[username] = true;
                                }
                            }, 7500); // 7.5s
                        };

                        videoTrack.onmute = freezeDetected;

                        // Double check for frozen streams on an interval.
                        if (this.WebRTC.frozenStreamInterval[username]) {
                            // Clear the existing interval (e.g. audio+video track sets up the
                            // interval twice right now, don't overwrite and lose the interval)
                            clearInterval(this.WebRTC.frozenStreamInterval[username]);
                        }
                        this.WebRTC.frozenStreamInterval[username] = setInterval(() => {
                            if (videoTrack.muted) freezeDetected();
                        }, 3000);
                    });
                };

                // ANSWERER: add our video to the connection so that the offerer (the one who
                // clicked on our video icon to watch us) can receive it.
                if (!isOfferer && this.webcam.active) {
                    this.DebugChannel(`[WebRTC] Answerer: attaching my video to the connection with: ${username}`);
                    let stream = this.webcam.stream;
                    stream.getTracks().forEach(track => {
                        pc.addTrack(track, stream)
                    });
                }

                // OFFERER: If we were already broadcasting our own video, and the answerer
                // has the "auto-open your video" setting enabled, attach our video to the initial
                // offer right now.
                if (isOfferer) {
                    let shouldOfferVideo = (
                        (this.whoMap[username].video & this.VideoFlag.MutualOpen) // They auto-open us
                        && this.webcam.active             // Our camera is active (to add it)
                        && !this.isBooted(username)       // We had not booted them off ours before
                        && !this.isMutedUser(username)    // We had not muted them before

                        // If our webcam is NSFW and the viewer prefers not to see explicit,
                        // do not send our camera on this offer.
                        && (!this.webcam.nsfw || !(this.whoMap[username].video & this.VideoFlag.NonExplicit))
                    );

                    // Attach our video on the outgoing offer, so that on the answerer's side our
                    // local video pops up on their screen.
                    if (shouldOfferVideo) {
                        this.DebugChannel(`[WebRTC] Offerer: I am attaching my video to the connection with: ${username}`)
                        let stream = this.webcam.stream;
                        stream.getTracks().forEach(track => {
                            pc.addTrack(track, stream)
                        });
                    } else {
                        // We aren't offering video, but still want to receive audio/video. Add a receive-only
                        // transceiver to this offer. NOTE: in the legacy WebRTC API we could put offerToReceiveVideo
                        // and offerToReceiveAudio in the createOffer() call later, but the modern WebRTC has removed
                        // those options and Safari only supports the modern way. Adding a receive-only transceiver
                        // here is the modern way to do it that Safari will be happy with.
                        this.DebugChannel(`[WebRTC] Offer: I am attaching a receive-only video/audio transceiver to the connection with: ${username}`);
                        pc.addTransceiver('video', { direction: 'recvonly' });
                        pc.addTransceiver('audio', { direction: 'recvonly' });
                    }
                }

                // If we are the offerer, begin the connection.
                if (isOfferer) {
                    this.DebugChannel(`[WebRTC] Offerer: create the offer and send it to ${username}`);
                    pc.createOffer({
                        offerToReceiveVideo: true,
                        offerToReceiveAudio: true,
                    }).then(this.localDescCreated(pc, username)).catch(this.ChatClient);
                }
            },

            // Common handler function for
            localDescCreated(pc, username) {
                return (desc) => {
                    pc.setLocalDescription(desc).then(() => {
                        this.DebugChannel(`[WebRTC] Local description created; sending SDP message to ${username}:<br><br>${JSON.stringify(pc.localDescription)}`);
                        this.client.send({
                            action: "sdp",
                            username: username,
                            description: JSON.stringify(pc.localDescription),
                        });
                    }).catch(e => {
                        console.error(`Error sending WebRTC negotiation message (SDP): ${e}`);
                    });
                };
            },

            // BareRTC Protocol Handlers relating to WebRTC
            sendOpen(username) {
                // Sending an open message to connect to someone's camera
                this.DebugChannel(`[WebRTC] Sending "open" message to ask to connect to: ${username}`);
                this.client.send({
                    action: "open",
                    username: username,
                });
            },
            onOpen(msg) {
                // Response for the opener to begin WebRTC connection.
                this.DebugChannel(`[WebRTC] Received "open" echo from chat server to connect to: ${msg.username}`);
                this.startWebRTC(msg.username, true);
            },
            onRing(msg) {
                // Request from a viewer to see our broadcast.
                this.DebugChannel(`[WebRTC] Received "ring" message from chat server to share my video with: ${msg.username}`);
                this.startWebRTC(msg.username, false);
            },
            sendBoot(username) {
                this.client.send({
                    action: "boot",
                    username: username,
                });
            },
            sendUnboot(username) {
                this.client.send({
                    action: "unboot",
                    username: username,
                });
            },
            sendInviteVideo(username) {
                this.WebRTC.invited[username] = true;
                this.client.send({
                    action: "video-invite",
                    usernames: [username],
                });
            },
            sendInviteVideoBulk() {
                let usernames = Object.keys(this.WebRTC.invited);
                if (usernames.length === 0) return;

                // Re-send the invite list on reconnect to server.
                this.client.send({
                    action: "video-invite",
                    usernames: usernames,
                });
            },
            isInvited(username) {
                return this.WebRTC.invited[username] != undefined;
            },
            onCandidate(msg) {
                // Handle inbound WebRTC signaling messages proxied by the websocket.
                if (this.WebRTC.pc[msg.username] == undefined || !this.WebRTC.pc[msg.username].connecting) {
                    return;
                }
                let pc = this.WebRTC.pc[msg.username].connecting;

                // XX: WebRTC candidate/SDP messages JSON stringify their inner payload so that the
                // Go back-end server won't re-order their json keys (Safari on Mac OS is very sensitive
                // to the keys being re-ordered during the handshake, in ways that NO OTHER BROWSER cares
                // about at all). Re-parse the JSON stringified object here.
                let candidate = JSON.parse(msg.candidate);

                this.DebugChannel(`[WebRTC] ICE candidate from ${msg.username}:<br><br>${msg.candidate}`);

                // Add the new ICE candidate.
                pc.addIceCandidate(candidate).catch(e => {
                    console.error(`addIceCandidate: ${e}`);
                });
            },
            onSDP(msg) {
                // WebRTC Session Description Protocol messages proxied by the websocket.
                if (this.WebRTC.pc[msg.username] == undefined || !this.WebRTC.pc[msg.username].connecting) {
                    return;
                }
                let pc = this.WebRTC.pc[msg.username].connecting;

                this.DebugChannel(`[WebRTC] Received SDP message from ${msg.username}:<br><br>${msg.description}`);

                // XX: WebRTC candidate/SDP messages JSON stringify their inner payload so that the
                // Go back-end server won't re-order their json keys (Safari on Mac OS is very sensitive
                // to the keys being re-ordered during the handshake, in ways that NO OTHER BROWSER cares
                // about at all). Re-parse the JSON stringified object here.
                let message = JSON.parse(msg.description);

                // Add the new ICE candidate.
                pc.setRemoteDescription(new RTCSessionDescription(message)).then(() => {
                    this.DebugChannel(`[WebRTC] <strong>setRemoteDescription</strong> called back OK!<br>Our pc.remoteDescription.type is: ${pc.remoteDescription.type}`);
                    // When receiving an offer let's answer it.
                    if (pc.remoteDescription.type === 'offer') {
                        this.DebugChannel(`[WebRTC] Answerer: create SDP answer message for ${msg.username}`);
                        pc.createAnswer().then(this.localDescCreated(pc, msg.username)).catch(this.ChatClient);
                    } else {
                        this.DebugChannel(`[WebRTC] pc.remoteDescription.type was not 'offer', we do not need to create an SDP Answer message.`);
                    }
                }).catch(this.DebugChannel);
            },
            onWatch(msg) {
                // The user has our video feed open now.
                if (this.isBootedAdmin(msg.username)) return;

                // Notify in chat if this was the first watch (viewer may send multiple per each track they received)
                if (this.prefs.watchNotif && this.webcam.watching[msg.username] != true) {
                    this.ChatServer(
                        `<strong>${msg.username}</strong> is now watching your camera.`,
                    );
                }

                this.webcam.watching[msg.username] = true;
                this.playSound("Watch");
            },
            onUnwatch(msg) {
                // The user has closed our video feed.
                delete (this.webcam.watching[msg.username]);
                this.playSound("Unwatch");
                this.cleanupPeerConnections();
            },
            sendWatch(username, watching) {
                // Send the watch or unwatch message to backend.
                this.client.send({
                    action: watching ? "watch" : "unwatch",
                    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;
            },

            isUsernameCamNSFW(username) {
                // returns true if the username is broadcasting and NSFW, false otherwise.
                // (used for the color coding of their nickname on their video box - so assumed they are broadcasting)
                if (this.whoMap[username] != undefined && this.whoMap[username].video & this.VideoFlag.NSFW) {
                    return true;
                }
                return false;
            },

            /**********************************
             * Front-end methods and handlers *
             **********************************/

            // Start broadcasting my webcam.
            // - force=true to skip the NSFW modal prompt (this param is passed by the button in that modal)
            // - changeCamera=true to re-negotiate WebRTC connections with a new camera device (invoked by the Settings modal)
            startVideo({ force = false, changeCamera = false }) {
                if (this.webcam.busy) return;

                // Is a moderation rule in place?
                if (this.jwt.rules.IsNoBroadcastRule) {
                    return this.modalAlert({
                        title: "Broadcasting video is not allowed for you",
                        message: this.config.strings.ModRuleErrorNoBroadcast || "A chat room moderation rule is currently in place which restricts your ability to broadcast your webcam.\n\nPlease contact a chat operator for more information.",
                    });
                }

                // Before they go on cam the first time, ATTEMPT to get their device names.
                // - If they had never granted permission, we won't get the names of
                //   the devices and no big deal.
                // - If they had given permission before, we can present a nicer experience
                //   for them and enumerate their devices before they go on originally.
                if (!changeCamera && !force) {
                    // Initial broadcast: did they select device IDs?
                    this.getDevices();
                }

                // Show the broadcast settings modal the first time.
                if (!force) {
                    this.nsfwModalCast.visible = true;
                    return;
                }

                let mediaParams = {
                    audio: true,
                    video: {
                        width: { ideal: WebcamWidth, max: WebcamMaxWidth },
                        height: { ideal: WebcamHeight, max: WebcamMaxHeight },
                    },
                };

                // Name the specific devices chosen by the user.
                if (this.webcam.videoDeviceID) {
                    mediaParams.video.deviceId = { exact: this.webcam.videoDeviceID };
                }
                if (this.webcam.audioDeviceID) {
                    mediaParams.audio = {
                        deviceId: { exact: this.webcam.audioDeviceID },
                    };
                }

                this.webcam.busy = true;
                navigator.mediaDevices.getUserMedia(mediaParams).then(stream => {
                    this.webcam.active = true;
                    this.webcam.elem.srcObject = stream;
                    this.webcam.stream = stream;

                    // Save our mutuality prefs.
                    LocalStorage.set('videoMutual', this.webcam.mutual);
                    LocalStorage.set('videoMutualOpen', this.webcam.mutualOpen);
                    LocalStorage.set('videoAutoMute', this.webcam.autoMute);
                    LocalStorage.set('videoVipOnly', this.webcam.vipOnly);
                    LocalStorage.set('videoExplicit', this.webcam.nsfw);

                    // 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;
                    }

                    // If we started as Explicit, hang up on any NonExplicit camera we had open.
                    this.unWatchNonExplicitVideo();

                    // Tell backend the camera is ready.
                    this.sendMe();

                    // Record the selected device IDs.
                    this.webcam.videoDeviceID = stream.getVideoTracks()[0].getSettings().deviceId;
                    this.webcam.audioDeviceID = stream.getAudioTracks()[0].getSettings().deviceId;

                    // For debugging: log to the debug channel what the chosen resolution is for the user.
                    let videoSettings = stream.getVideoTracks()[0].getSettings();
                    this.DebugChannel(`navigator.getUserMedia(): chosen video resolution is ${videoSettings.width}x${videoSettings.height}`);

                    // Collect video and audio devices to let the user change them in their settings.
                    this.getDevices().then(() => {
                        // Store their names on localStorage in case we can reselect them by name
                        // on the user's next visit.
                        this.storePreferredDeviceNames();
                    });

                    // If we have changed devices, reconnect everybody's WebRTC channels for your existing watchers.
                    if (changeCamera) {
                        this.updateWebRTCStreams();
                    }

                    // Begin dark video detection as soon as the video is ready to capture frames.
                    this.webcam.elem.addEventListener("canplaythrough", this.initDarkVideoDetection);

                    // Begin monitoring for speaking events.
                    this.initSpeakingEvents(this.username, this.webcam.elem);
                }).catch(err => {
                    this.ChatClient(`Webcam error: ${err}<br><br>Please see the <a href="/about#troubleshooting">troubleshooting guide</a> for help.`);
                }).finally(() => {
                    this.webcam.busy = false;
                })
            },
            getDevices() {
                // Collect video and audio devices.
                if (!navigator.mediaDevices?.enumerateDevices) {
                    console.log("enumerateDevices() not supported.");
                    return;
                }

                this.webcam.gettingDevices = true;

                return navigator.mediaDevices.enumerateDevices().then(devices => {
                    this.webcam.videoDevices = [];
                    this.webcam.audioDevices = [];
                    devices.forEach(device => {
                        // If we can't get the device label, disregard it.
                        // It can happen if the user has not yet granted permission.
                        if (!device.label) {
                            return;
                        }

                        if (device.kind === 'videoinput') {
                            // console.log(`Video device ${device.deviceId} ${device.label}`);
                            this.webcam.videoDevices.push({
                                id: device.deviceId,
                                label: device.label,
                            });
                        } else if (device.kind === 'audioinput') {
                            // console.log(`Audio device ${device.deviceId} ${device.label}`);
                            this.webcam.audioDevices.push({
                                id: device.deviceId,
                                label: device.label,
                            });
                        }
                    });

                    // If we don't have the user's current active device IDs (e.g., they have
                    // not yet started their video the first time), see if we can pre-select
                    // by their preferred device names.
                    if (!this.webcam.videoDeviceID && this.webcam.preferredDeviceNames.video) {
                        for (let dev of this.webcam.videoDevices) {
                            if (dev.label === this.webcam.preferredDeviceNames.video) {
                                this.webcam.videoDeviceID = dev.id;
                            }
                        }
                    }
                    if (!this.webcam.audioDeviceID && this.webcam.preferredDeviceNames.audio) {
                        for (let dev of this.webcam.audioDevices) {
                            if (dev.label === this.webcam.preferredDeviceNames.audio) {
                                this.webcam.audioDeviceID = dev.id;
                            }
                        }
                    }
                }).catch(err => {
                    this.ChatClient(`Error listing your cameras and microphones: ${err.name}: ${err.message}`);
                }).finally(() => {
                    // In the settings modal, let the spinner spin for a moment.
                    setTimeout(() => {
                        this.webcam.gettingDevices = false;
                    }, 500);
                })
            },
            storePreferredDeviceNames() {
                // This function looks up the names of the user's selected video/audio device.
                // When they come back later, IF we are able to enumerate devices before they
                // go on for the first time, we might pre-select their last device by name.
                // NOTE: on iOS apparently device IDs shuffle every single time so only names
                // may be reliable!
                if (this.webcam.videoDeviceID) {
                    for (let dev of this.webcam.videoDevices) {
                        if (dev.id === this.webcam.videoDeviceID && dev.label) {
                            this.webcam.preferredDeviceNames.video = dev.label;
                        }
                    }
                }

                if (this.webcam.audioDeviceID) {
                    for (let dev of this.webcam.audioDevices) {
                        if (dev.id === this.webcam.audioDeviceID && dev.label) {
                            this.webcam.preferredDeviceNames.audio = dev.label;
                        }
                    }
                }

                // Put them on localStorage.
                LocalStorage.set('preferredDeviceNames', this.webcam.preferredDeviceNames);
            },

            // The 'Explicit' button at the top of the page: toggle the user's NSFW setting but
            // with some smarts in case the user was just marked NSFW by an admin.
            topNavExplicitButtonClicked() {
                if (this.webcam.wasServerNSFW) {
                    this.webcam.wasServerNSFW = false;
                    this.ChatClient(
                        `Notice: your webcam was already marked as "Explicit" recently by the chat server.<br><br>` +
                        `If you were recently notified that a chat moderator has marked your camera as 'explicit' (red) for you, then ` +
                        `you do not need to do anything: your camera is marked Explicit already. Please leave it as Explicit if you are ` +
                        `being sexual on camera.<br><br>` +
                        `If you really mean to <strong>remove</strong> the Explicit label (and turn your camera 'blue'), then click on the ` +
                        `Explicit button at the top of the page one more time to confirm.`,
                    );
                    return;
                }
                this.webcam.nsfw = !this.webcam.nsfw;
            },

            // Replace your video/audio streams for your watchers (on camera changes)
            updateWebRTCStreams() {
                console.log("Re-negotiating video and audio channels to your watchers.");
                for (let username of Object.keys(this.WebRTC.pc)) {
                    let pc = this.WebRTC.pc[username];
                    if (pc.answerer != undefined) {
                        let oldTracks = pc.answerer.getSenders();
                        let newTracks = this.webcam.stream.getTracks();

                        // Remove and replace the tracks.
                        for (let old of oldTracks) {
                            if (old.track.kind === 'audio') {
                                for (let replace of newTracks) {
                                    if (replace.kind === 'audio') {
                                        old.replaceTrack(replace);
                                    }
                                }
                            }
                            else if (old.track.kind === 'video') {
                                for (let replace of newTracks) {
                                    if (replace.kind === 'video') {
                                        old.replaceTrack(replace);
                                    }
                                }
                            }
                        }
                    }
                }
            },

            // Begin connecting to someone else's webcam.
            openVideoByUsername(username, force) {
                if (this.whoMap[username] != undefined) {
                    this.openVideo(this.whoMap[username], force);
                    return;
                }
                this.ChatClient("Couldn't open video by username: not found.");
            },
            setSkipNSFWModal() {
                // Set the "don't show again" on NSFW modal.
                LocalStorage.set("skip-nsfw-modal", true);
            },
            openVideo(user, force) {
                // Close the NSFW warning modal if it was open.
                this.nsfwModalView.visible = false;

                if (user.username === this.username) {
                    this.ChatClient("You can already see your own webcam.");
                    return;
                }

                // Operator safety when hidden.
                if (this.status === 'hidden') {
                    this.ChatClient("Your chat status is currently set to 'hidden' and you would break the illusion by opening this camera.");
                    return;
                }

                // A chat moderation rule?
                if (this.jwt.rules.IsNoVideoRule) {
                    return this.modalAlert({
                        title: "Videos are not available to you",
                        message: this.config.strings.ModRuleErrorNoVideo || "A chat room moderation rule is currently in place which restricts your ability to watch webcams.\n\n" +
                            "Please contact a chat operator for more information.",
                    });
                }

                // If we have muted the target, we shouldn't view their video.
                if (this.isMutedUser(user.username) && !this.isOp) {
                    this.ChatClient(`You have muted <strong>${user.username}</strong> and so should not see their camera.`);
                    return;
                }

                // If we have booted the target off our cam, we shouldn't view their video.
                if (this.isBooted(user.username) && !this.isOp) {
                    this.ChatClient(`You had kicked <strong>${user.username}</strong> off your camera and so it wouldn't be right to still watch their camera.`);
                    return;
                }

                // Is the target user NSFW? Go thru the modal.
                let dontShowAgain = LocalStorage.get("skip-nsfw-modal") === true;
                if ((user.video & this.VideoFlag.NSFW) && !dontShowAgain && !force) {
                    this.nsfwModalView.user = user;
                    this.nsfwModalView.visible = true;
                    return;
                }

                // If the local user had expressly closed this user's camera before, forget
                // this action because the user now is expressly OPENING this camera on purpose.
                delete (this.WebRTC.expresslyClosed[user.username]);

                // Debounce so we don't spam too much for the same user.
                if (this.WebRTC.debounceOpens[user.username]) return;
                this.WebRTC.debounceOpens[user.username] = true;
                setTimeout(() => {
                    delete (this.WebRTC.debounceOpens[user.username]);
                }, 5000);

                // Camera is already open? Then disconnect the connection.
                if (this.WebRTC.pc[user.username] != undefined && this.WebRTC.pc[user.username].offerer != undefined) {
                    this.DebugChannel(`OpenVideo(${user.username}): already had a connection open, closing it first.`);
                    this.closeVideo(user.username, "offerer");
                }

                // If this user is NonExplicit and your camera is red...
                let theirVideo = this.whoMap[user.username].video;
                if (this.webcam.active && this.webcam.nsfw && (theirVideo & VideoFlag.Active) && (theirVideo & VideoFlag.NonExplicit)) {
                    this.ChatClient(
                        `<strong>${user.username}</strong> prefers not to have Explicit cammers watch their video, and your camera is currently marked as Explicit.`
                    );
                    return;
                }

                // Conversely: if we are NonExplicit we should not open NSFW videos.
                if (this.webcam.active && this.webcam.nonExplicit && (theirVideo & VideoFlag.Active) && (theirVideo & VideoFlag.NSFW)) {
                    this.ChatClient(
                        `You have said you do not want to see Explicit videos and <strong>${user.username}</strong> has an Explicit camera.`
                    );
                    return;
                }

                // If this user requests mutual viewership...
                if (this.isVideoNotAllowed(user) && !this.isOp) {
                    this.ChatClient(
                        `<strong>${user.username}</strong> has requested that you should share your own camera too before opening theirs.`
                    );
                    return;
                }

                // Set a timeout: the video icon becomes a spinner and we wait a while
                // to see if the connection went thru. This gives the user feedback and we
                // can avoid a spammy 'ChatClient' notification message.
                if (this.WebRTC.openTimeouts[user.username] != undefined) {
                    clearTimeout(this.WebRTC.openTimeouts[user.username]);
                    delete (this.WebRTC.openTimeouts[user.username]);
                }
                this.WebRTC.openTimeouts[user.username] = setTimeout(() => {
                    this.ChatClient(
                        `There was an error opening <strong>${user.username}</strong>'s camera.`,
                    );
                    delete (this.WebRTC.openTimeouts[user.username]);
                }, 10000);

                // Send the ChatServer 'open' command.
                this.sendOpen(user.username);

                // Responsive CSS -> go to chat panel to see the camera
                this.openChatPanel();
            },
            closeVideo(username, name) {
                // Clean up any lingering camera freeze states.
                delete (this.WebRTC.frozenStreamDetected[username]);
                if (this.WebRTC.frozenStreamInterval[username]) {
                    clearInterval(this.WebRTC.frozenStreamInterval[username]);
                    delete (this.WebRTC.frozenStreamInterval[username]);
                }

                if (name === "offerer") {
                    // We are closing another user's video stream.
                    delete (this.WebRTC.streams[username]);
                    delete (this.WebRTC.muted[username]);
                    delete (this.WebRTC.poppedOut[username]);

                    // Should we close the WebRTC PeerConnection? If they were watching our video back, closing
                    // the connection MAY cause our video to freeze on their side: if we have the "auto-open my viewer's
                    // camera" option set, and our viewer sent their video on their open request, and they still have
                    // our camera open, do not close the connection so we don't freeze their side of the video.
                    if (this.WebRTC.pc[username] != undefined && this.WebRTC.pc[username].offerer != undefined) {
                        if (this.webcam.mutualOpen && this.isWatchingMe(username)) {
                            console.log(`OFFERER(${username}): Close video locally only: do not hang up the connection.`);
                        } else {
                            this.WebRTC.pc[username].offerer.close();
                            delete (this.WebRTC.pc[username]);
                        }
                    }

                    // Inform backend we have closed it.
                    this.sendWatch(username, false);
                    this.cleanupPeerConnections();
                    return;
                } else if (name === "answerer") {
                    // Should we close the WebRTC PeerConnection? If they were watching our video back, closing
                    // the connection MAY cause our video to freeze on their side: if we have the "auto-open my viewer's
                    // camera" option set, and our viewer sent their video on their open request, and they still have
                    // our camera open, do not close the connection so we don't freeze their side of the video.
                    if (this.WebRTC.pc[username] != undefined && this.WebRTC.pc[username].answerer != undefined) {
                        if (this.webcam.mutualOpen && this.isWatchingMe(username)) {
                            console.log(`ANSWERER(${username}): Close video locally only: do not hang up the connection.`);
                        } else {
                            this.WebRTC.pc[username].answerer.close();
                            delete (this.WebRTC.pc[username]);
                        }
                    }
                    this.cleanupPeerConnections();
                    return;
                }

                // A user has logged off the server. Clean up any WebRTC connections.
                delete (this.WebRTC.streams[username]);
                delete (this.webcam.watching[username]);
                if (this.WebRTC.pc[username] != undefined) {
                    if (this.WebRTC.pc[username].offerer) {
                        this.WebRTC.pc[username].offerer.close();
                    }
                    if (this.WebRTC.pc[username].answerer) {
                        this.WebRTC.pc[username].answerer.close();
                    }
                    delete (this.WebRTC.pc[username]);
                    delete (this.WebRTC.muted[username]);
                    delete (this.WebRTC.poppedOut[username]);
                }

                // Clean up any lingering camera freeze states.
                delete (this.WebRTC.frozenStreamDetected[username]);
                if (this.WebRTC.frozenStreamInterval[username]) {
                    clearInterval(this.WebRTC.frozenStreamInterval[username]);
                    delete (this.WebRTC.frozenStreamInterval[username]);
                }

                // Inform backend we have closed it.
                this.sendWatch(username, false);
                this.cleanupPeerConnections();
            },
            expresslyCloseVideo(username, name) {
                // Like closeVideo but communicates the user's intent to expressly
                // close the video for a user. e.g. they clicked the 'X' icon to
                // close it out. As opposed to a user went off camera and were closed
                // out automatically.
                this.WebRTC.expresslyClosed[username] = true;
                return this.closeVideo(username, name);
            },
            closeOpenVideos() {
                // Close all videos open of other users.
                for (let username of Object.keys(this.WebRTC.streams)) {
                    this.closeVideo(username, "offerer");
                }
            },
            cleanupPeerConnections() {
                // Helper function to check and clean up WebRTC PeerConnections.
                //
                // This is fired on Unwatch and CloseVideo events, to double check
                // which videos the local user has open + who online is watching our
                // video, to close out any lingering WebRTC connections.
                for (let username of Object.keys(this.WebRTC.pc)) {
                    let pc = this.WebRTC.pc[username];

                    // Is their video on our screen?
                    if (this.WebRTC.streams[username] != undefined) {
                        continue;
                    }

                    // Are they watching us?
                    if (this.isWatchingMe(username)) {
                        continue;
                    }

                    // Are they an admin that we booted?
                    if (this.isBootedAdmin(username)) {
                        continue;
                    }

                    // The WebRTC connections should be closed out.
                    if (pc.answerer != undefined) {
                        console.log("Clean up WebRTC answerer connection with " + username);
                        pc.answerer.close();
                        delete (this.WebRTC.pc[username]);
                    }
                    if (pc.offerer != undefined) {
                        console.log("Clean up WebRTC offerer connection with " + username);
                        pc.offerer.close();
                        delete (this.WebRTC.pc[username]);
                    }
                }
            },
            muteAllVideos() {
                // Mute the mic of all open videos.
                let count = 0;
                for (let username of Object.keys(this.WebRTC.streams)) {
                    if (this.WebRTC.muted[username]) continue;

                    // Find the <video> tag to mute it.
                    this.WebRTC.muted[username] = true;
                    let $ref = document.getElementById(`videofeed-${username}`);
                    if ($ref) {
                        $ref.muted = this.WebRTC.muted[username];
                    }

                    count++;
                }

                if (count > 0) {
                    this.ChatClient(`You have muted the audio on ${count} video${count === 1 ? '' : 's'}.`);
                }
            },
            unMutualVideo() {
                // If we had our camera on to watch a video of someone who wants mutual cameras,
                // and then we turn ours off: we should unfollow the ones with mutual video.
                if (this.webcam.active) return;
                for (let row of this.whoList) {
                    let username = row.username;

                    // If this user expressly invited us to watch, skip.
                    if ((row.video & this.VideoFlag.Active) && (row.video & this.VideoFlag.Invited)) {
                        continue;
                    }

                    if ((row.video & this.VideoFlag.MutualRequired) && this.WebRTC.pc[username] != undefined) {
                        this.closeVideo(username);
                    }
                }
            },
            unWatchNonExplicitVideo() {
                if (!this.webcam.active) return;

                // If we are watching cameras with the NonExplicit setting, and our camera has become
                // explicit, excuse ourselves from their watch list.
                if (this.webcam.nsfw) {
                    for (let username of Object.keys(this.WebRTC.streams)) {
                        let user = this.whoMap[username];

                        // Our video is Explicit and theirs is NonExplicit.
                        if ((user.video & VideoFlag.Active) && (user.video & VideoFlag.NonExplicit)) {
                            this.closeVideo(username);
                        }
                    }
                }

                // Conversely: if we are NonExplicit we do not watch Explicit videos.
                if (this.webcam.nonExplicit) {
                    for (let username of Object.keys(this.WebRTC.streams)) {
                        let user = this.whoMap[username];

                        if ((user.video & VideoFlag.Active) && (user.video & VideoFlag.NSFW)) {
                            this.closeVideo(username);
                        }
                    }
                }
            },

            // Invite a user to watch your camera even if they normally couldn't see.
            inviteToWatch(username) {
                this.modalConfirm({
                    title: "Invite to watch my webcam",
                    icon: "fa fa-video",
                    message: `Do you want to invite @${username} to watch your camera?\n\n` +
                        `This will give them permission to see your camera even if, normally, they would not be able to. ` +
                        `For example, if you have the option enabled to "require my viewer to be on webcam too" and @${username} is not on camera, ` +
                        `by inviting them to watch they will be allowed to see your camera anyway.\n\n` +
                        `This permission will be granted for the remainder of your chat session, but you can boot them ` +
                        `off your camera if you change your mind later.`,
                    buttons: ['Invite to watch', 'Cancel'],
                }).then(() => {
                    this.sendInviteVideo(username);

                    this.ChatClient(
                        `You have granted <strong>@${username}</strong> permission to watch your webcam. This will be in effect for the remainder of your chat session. ` +
                            "Note: if you change your mind later, you can boot them from your camera or block them from watching by using the button " +
                            "in their profile card.",
                    );
                });
            },

            isUsernameOnCamera(username) {
                return this.whoMap[username]?.video & VideoFlag.Active;
            },

            // Video button classes for a user.
            webcamIconClass(user) {
                // Return the icon to show on a video button.
                // - Usually a video icon
                // - May be a crossed-out video if isVideoNotAllowed
                // - Or an eyeball for cameras already opened
                // - Or a spinner if we are actively trying to open the video
        
                // Current user sees their own self camera always.
                if (user.username === this.username && this.webcam.active) {
                    return 'fa-eye';
                }
        
                // In spinner mode? (Trying to open the video)
                if (this.WebRTC.openTimeouts[user.username] != undefined) {
                    return 'fa-spinner fa-spin';
                }
        
                // Already opened?
                if (this.WebRTC.pc[user.username] != undefined && this.WebRTC.streams[user.username] != undefined) {
                    return 'fa-eye';
                }
        
                if (this.isVideoNotAllowed(user)) return 'fa-video-slash';
                return 'fa-video';
            },
            webcamButtonClass(username) {
                // This styles the convenient video button that appears in the header bar
                // of DM threads if your chat partner is on camera.
                let video = this.whoMap[username].video;
    
                if (!(video & VideoFlag.Active)) {
                    return "";
                }
    
                if (video & VideoFlag.NSFW) {
                    return "is-danger";
                }
    
                return "is-link";
            },

            isVideoNotAllowed(user) {
                // Returns whether the video button to open a user's cam will be not allowed (crossed out)
    
                // If the user is under the NoVideo rule, always cross it out.
                if (this.jwt.rules.IsNoVideoRule) return true;

                // If this user expressly invited us to watch.
                if ((user.video & this.VideoFlag.Active) && (user.video & this.VideoFlag.Invited)) {
                    return false;
                }

                // Mutual video sharing is required on this camera, and ours is not active
                if ((user.video & this.VideoFlag.Active) && (user.video & this.VideoFlag.MutualRequired)) {
                    // A nuance to the mutual video required: if we DO have our cam on, but ours is VIP only, and the
                    // user we want to watch can't see that our cam is on, then honor their wishes.
                    if (this.webcam.active && this.isVIP && this.webcam.vipOnly && this.whoMap[user.username] != undefined && !this.whoMap[user.username].vip) {
                        // Our cam is active, but the non-VIP user won't see it on, so they won't expect
                        // us to be able to open their camera.
                        return true;
                    }
    
                    if (!this.webcam.active) {
                        // Our cam is not broadcasting, but they requested it should be: not allowed.
                        return true;
                    }
                }
    
                // We have muted them and it wouldn't be appropriate to still watch their video but not get their messages.
                if (this.isMutedUser(user.username) || this.isBooted(user.username)) {
                    return true;
                }
    
                // This person is NonExplicit and our camera is Explicit.
                if (this.webcam.active && this.webcam.nsfw && (user.video & VideoFlag.Active) && (user.video & VideoFlag.NonExplicit)) {
                    return true;
                }
    
                // Conversely: if we are NonExplicit we should not be able to watch Explicit videos.
                if (this.webcam.active && this.webcam.nonExplicit && (user.video & VideoFlag.Active) && (user.video & VideoFlag.NSFW)) {
                    return true;
                }
    
                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(
                    `<strong>Your webcam is <span class="has-text-danger">Hot!</span></strong> <i class="fa fa-fire has-text-danger"></i><br><br>` +
                        `Somebody who is watching your camera thinks that your webcam should be tagged as <span class="has-text-danger"><i class="fa fa-fire mx-1"></i> Explicit</span>.<br><br>` +
                        `In case you forgot to do so, please click on the '<i class="fa fa-fire has-text-danger"></i> Explicit' button at the top of the page to turn your camera 'red.' Thank you! <i class="fa fa-heart has-text-danger"></i>`,
                );
            },
    
            // Show who watches our video.
            showViewers() {
                // TODO: for now, ChatClient is our bro.
                let users = Object.keys(this.webcam.watching);
                if (users.length === 0) {
                    this.ChatClient("There is currently nobody viewing your camera.");
                } else {
                    this.ChatClient("Your current webcam viewers are:<br><br>" + users.join(", "));
                }
    
                // Also focus the Watching list.
                this.whoTab = 'watching';
    
                // TODO: if mobile, show the panel - this width matches
                // the media query in chat.css
                if (screen.width < 1024) {
                    this.openWhoPanel();
                }
            },
    
            // Boot someone off your video.
            bootUser(username) {
                // Un-boot?
                if (this.isBooted(username)) {
                    this.modalConfirm({
                        title: "Unboot user",
                        icon: "fa fa-user-xmark",
                        message: `Allow ${username} to watch your webcam again?`
                    }).then(() => {
                        this.sendUnboot(username);
                        delete (this.WebRTC.booted[username]);
                    })
                    return;
                }
    
                // Check if they are currently rate limited from pre-emptive boots of folks
                // who are not even watching their camera yet.
                if (this.rateLimitPreemptiveBoots(username, false)) return;
    
                // Boot them off our webcam.
                this.modalConfirm({
                    title: "Boot user",
                    icon: "fa fa-user-xmark",
                    message: `Kick ${username} off your camera? This will also prevent them ` +
                        `from seeing that your camera is active for the remainder of your ` +
                        `chat session.`
                }).then(() => {
                    // Ping their rate limiter.
                    if (this.rateLimitPreemptiveBoots(username, true)) return;
    
                    this.doBootUser(username);
    
                    this.ChatClient(
                        `You have booted ${username} off your camera. They will no longer be able ` +
                        `to connect to your camera, or even see that your camera is active at all -- ` +
                        `to them it appears as though you had turned yours off.<br><br>This will be ` +
                        `in place for the remainder of your time in chat, until you log off. ` +
                        `<strong>Note:</strong> If you wish to undo this, you can allow them to watch again ` +
                        `by opening their profile card.`
                    );
                });
            },
            doBootUser(username) {
                // Inner function to actually boot a user, bypassing any confirm or rate limit modals.
                this.sendBoot(username);
                this.WebRTC.booted[username] = true;
    
                // Close the WebRTC peer connections.
                if (this.WebRTC.pc[username] != undefined) {
                    this.closeVideo(username);
                }
    
                // Remove them from our list.
                delete (this.webcam.watching[username]);
            },
            isBooted(username) {
                return this.WebRTC.booted[username] === true;
            },
            isBootedAdmin(username) {
                return (this.WebRTC.booted[username] === true || this.muted[username] === true) &&
                    this.whoMap[username] != undefined &&
                    this.whoMap[username].op;
            },
            rateLimitPreemptiveBoots(username, ping=false) {
                // Rate limit abusive pre-emptive booting behavior: if the target is not even currently watching
                // your camera, limit how many and how frequently you can boot them off.
                //
                // Returns true if limited, false otherwise.
    
                let cooldownAt = this.WebRTC.preemptBootRateLimit.cooldownAt,
                    cooldownTTL = this.WebRTC.preemptBootRateLimit.cooldownTTL,
                    now = new Date().getTime();
    
                if (!this.isWatchingMe(username)) {
                    // Within the 'free' boot limits?
                    if (this.WebRTC.preemptBootRateLimit.counter < this.WebRTC.preemptBootRateLimit.maxFreeBoots) {
                        if (!ping) return false;
                        this.WebRTC.preemptBootRateLimit.counter++;
                    }
    
                    // Begin enforcing a cooldown TTL after a while.
                    if (this.WebRTC.preemptBootRateLimit.counter >= this.WebRTC.preemptBootRateLimit.maxFreeBoots) {
    
                        // Currently throttled?
                        if (cooldownAt !== null) {
                            if (now < cooldownAt) {
                                let delta = cooldownAt - now;
                                this.modalAlert({
                                    title: "You are doing that too often",
                                    message: "You have been pre-emptively booting an unusual number of people who weren't even watching your camera yet.\n\n" +
                                        `Please wait ${cooldownTTL} seconds between any additional pre-emptive boots.\n\n` +
                                        `You may try again after ${delta/1000} seconds.`,
                                });
                                return true;
                            }
                        }
    
                        // Refresh the timer on pings.
                        if (ping) {
                            this.WebRTC.preemptBootRateLimit.cooldownAt = now + (cooldownTTL * 1000);
                        }
                    }
                }
    
                return false;
            },
    
            // Stop broadcasting.
            stopVideo() {
                this.stopDarkVideoDetection();
    
                // Close all WebRTC sessions.
                for (let username of Object.keys(this.WebRTC.pc)) {
                    this.closeVideo(username, "answerer");
                }
    
                // Hang up on mutual cameras.
                this.unMutualVideo();
    
                // Close the local camera devices completely.
                this.webcam.stream.getTracks().forEach(track => {
                    track.stop();
                });
    
                // Reset all front-end state.
                this.webcam.elem.srcObject = null;
                this.webcam.stream = null;
                this.webcam.active = false;
                this.webcam.muted = false;
                this.whoTab = "online";
    
                // Tell backend our camera state.
                this.sendMe();
            },
    
            // Mute my microphone if broadcasting.
            muteMe() {
                this.webcam.muted = !this.webcam.muted;
                this.webcam.stream.getAudioTracks().forEach(track => {
                    track.enabled = !this.webcam.muted;
                });
    
                // Communicate our local mute to others.
                this.sendMe();
            },
            isSourceMuted(username) {
                // See if the webcam broadcaster muted their mic at the source
                if (this.whoMap[username] != undefined && this.whoMap[username].video & this.VideoFlag.Muted) {
                    return true;
                }
                return false;
            },
            isMuted(username) {
                return this.WebRTC.muted[username] === true;
            },
            muteVideo(username) {
                this.WebRTC.muted[username] = !this.isMuted(username);
    
                // Find the <video> tag to mute it.
                let $ref = document.getElementById(`videofeed-${username}`);
                if ($ref) {
                    $ref.muted = this.WebRTC.muted[username];
                }
            },
            setVideoVolume(username, volume) {
                // Set the volume on their video.
                let $ref = document.getElementById(`videofeed-${username}`);
                if ($ref) {
                    $ref.volume = volume / 100;
                }
            },

            // Pop out a user's video.
            popoutVideo(username) {
                this.WebRTC.poppedOut[username] = !this.WebRTC.poppedOut[username];

                // If not popped out, reset CSS positioning.
                window.requestAnimationFrame(this.makeDraggableVideos);
            },

            // Outside of Vue, attach draggable video scripts to DOM.
            makeDraggableVideos() {
                let $panel = document.querySelector("#video-feeds");

                interact('.popped-in').unset();

                // Give popped out videos to the root of the DOM so they can
                // be dragged anywhere on the page.
                window.requestAnimationFrame(() => {
                    document.querySelectorAll('.popped-out').forEach(node => {
                        // $panel.removeChild(node);
                        document.body.appendChild(node);
                    });

                    document.querySelectorAll('.popped-in').forEach(node => {
                        // document.body.removeChild(node);
                        $panel.appendChild(node);
                        node.style.top = null;
                        node.style.left = null;
                        node.setAttribute('data-x', 0);
                        node.setAttribute('data-y', 0);
                    });
                });

                interact('.popped-out').draggable({
                    // enable inertial throwing
                    inertia: true,
                    // keep the element within the area of it's parent
                    modifiers: [
                        interact.modifiers.restrictRect({
                            restriction: 'parent',
                            endOnly: true
                        })
                    ],

                    listeners: {
                        // call this function on every dragmove event
                        move(event) {
                            let target = event.target;
                            let x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
                            let y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy

                            target.style.top = `${y}px`;
                            target.style.left = `${x}px`;

                            target.setAttribute('data-x', x);
                            target.setAttribute('data-y', y);
                        },

                        // call this function on every dragend event
                        end(event) {
                            console.log(
                                'moved a distance of ' +
                                (Math.sqrt(Math.pow(event.pageX - event.x0, 2) +
                                    Math.pow(event.pageY - event.y0, 2) | 0))
                                    .toFixed(2) + 'px')
                        }
                    }
                }).resizable({
                    edges: { left: true, right: true, bottom: true },
                    listeners: {
                        move(event) {
                            var target = event.target
                            var x = (parseFloat(target.getAttribute('data-x')) || 0)
                            var y = (parseFloat(target.getAttribute('data-y')) || 0)

                            // update the element's style
                            target.style.width = event.rect.width + 'px'
                            target.style.height = event.rect.height + 'px'

                            // translate when resizing from top or left edges
                            x += event.deltaRect.left
                            y += event.deltaRect.top

                            target.style.top = `${y}px`;
                            target.style.left = `${x}px`;

                            target.setAttribute('data-x', x)
                            target.setAttribute('data-y', y)
                        }
                    },
                    modifiers: [
                        // keep the edges inside the parent
                        interact.modifiers.restrictEdges({
                            outer: 'parent'
                        }),

                        // minimum size
                        interact.modifiers.restrictSize({
                            min: { width: 100, height: 50 }
                        })
                    ],

                    inertia: true
                })
            },

            // Webcam "is speaking" functions.
            initSpeakingEvents(username, element) {
                // element is the <video> element, with the video stream
                // (whether from getUserMedia or WebRTC) on srcObject.

                let stream = element.srcObject,
                    feedElem = element.closest('div.feed'),
                    options = {},
                    speechEvents = hark(stream, options);

                speechEvents.on('speaking', () => {
                    feedElem.classList.add('is-speaking');
                    this.WebRTC.speaking[username] = true;
                });

                speechEvents.on('stopped_speaking', () => {
                    feedElem.classList.remove('is-speaking');
                    this.WebRTC.speaking[username] = false;
                });
            },

            // Dark video detection.
            initDarkVideoDetection() {
                if (this.webcam.darkVideo.canvas === null) {
                    let canvas = document.querySelector("#darkVideoCanvas"),
                        ctx = canvas.getContext('2d');
                    canvas.width = WebcamWidth;
                    canvas.height = WebcamHeight;
                    this.webcam.darkVideo.canvas = canvas;
                    this.webcam.darkVideo.ctx = ctx;
                }

                // Reset the dark frame counter.
                this.webcam.darkVideo.tooDarkFrames = 0;

                if (this.webcam.darkVideo.interval !== null) {
                    clearInterval(this.webcam.darkVideo.interval);
                }
                this.webcam.darkVideo.interval = setInterval(() => {
                    this.darkVideoInterval();
                }, 5000);
            },
            stopDarkVideoDetection() {
                if (this.webcam.darkVideo.interval !== null) {
                    clearInterval(this.webcam.darkVideo.interval);
                }

                // Remove the canplaythrough event, it will be re-added if the user restarts their cam.
                this.webcam.elem.removeEventListener("canplaythrough", this.initDarkVideoDetection);
            },
            darkVideoInterval() {
                if (!this.webcam.active) { // safety
                    this.stopDarkVideoDetection();
                    return;
                }

                // Take a screenshot from the user's local webcam.
                let canvas = this.webcam.darkVideo.canvas,
                    ctx = this.webcam.darkVideo.ctx;
                ctx.drawImage(this.webcam.elem, 0, 0, canvas.width, canvas.height);

                // Debugging: export the screenshot to a data URI.
                let img = canvas.toDataURL('image/jpeg');
                this.webcam.darkVideo.lastImage = img;

                // Get average RGB value.
                let rgb = this.getAverageRGB(ctx);
                if (rgb === null) {
                    return;
                }

                this.webcam.darkVideo.lastAverage = rgb;
                this.webcam.darkVideo.lastAverageColor = `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 1)`;

                // If they are exempt from the dark video rule, do not check their camera color.
                if (this.jwt.rules.IsNoDarkVideoRule) return;

                // If the average total color is below the threshold (too dark of a video).
                let averageBrightness = Math.floor((rgb[0] + rgb[1] + rgb[2]) / 3);
                if (averageBrightness < this.webcam.darkVideo.threshold) {

                    // Count for how many frames their camera is too dark.
                    this.webcam.darkVideo.tooDarkFrames++;

                    // After too long, cut their camera.
                    if (this.webcam.darkVideo.tooDarkFrames >= this.webcam.darkVideo.tooDarkFramesLimit) {
                        this.stopVideo();
                        this.ChatClient(`
                            Your webcam was too dark to see anything and has been turned off.<br><br>
                            <strong>Note:</strong> if your camera did not look dark to you and you believe there
                            may have been an error, please
                            <button type="button" onclick="SendMessage('/debug-dark-video')" class="button is-small is-link is-outlined">click here</button> to see
                            diagnostic information and contact a chat room moderator for assistance.
                        `);
                    }
                } else {
                    this.webcam.darkVideo.tooDarkFrames = 0;
                }
            },
            getAverageRGB(ctx) {
                // Helper function to compute the average color of a <canvas>.
                // Ref: https://stackoverflow.com/a/2541680
                const blockSize = 16; // only visit every N pixels
                let img = null,
                    rgb = [0, 0, 0];

                try {
                    img = ctx.getImageData(0, 0, WebcamWidth, WebcamHeight);
                } catch(e) {
                    // Not supported.
                    return null;
                }

                let length = img.data.length,
                    i = 0,
                    count = 0,
                    firstColor = [],
                    allSame = true;
                while ((i += blockSize * 4) < length) {
                    count++;
                    let thisColor = [
                        img.data[i],
                        img.data[i+1],
                        img.data[i+2]
                    ]

                    rgb[0] += thisColor[0];
                    rgb[1] += thisColor[1];
                    rgb[2] += thisColor[2];

                    // Also check whether every sampled pixel is THE SAME color,
                    // to detect users broadcasting a solid (bright) color.
                    if (firstColor.length === 0) {
                        firstColor = [ rgb[0], rgb[1], rgb[2] ];
                    } else if (allSame) {
                        if (firstColor[0] !== thisColor[0] ||
                            firstColor[1] !== thisColor[1] ||
                            firstColor[2] !== thisColor[2]
                        ) {
                            allSame = false;
                        }
                    }
                }

                // If all sampled colors were the same solid image: red flag!
                if (allSame) {
                    return [0, 0, 0];
                }

                rgb[0] = Math.floor(rgb[0]/count);
                rgb[1] = Math.floor(rgb[1]/count);
                rgb[2] = Math.floor(rgb[2]/count);

                return rgb;
            },

            // Scale the video zoom setting up or down.
            scaleVideoSize(bigger) {
                // Find the current size index.
                let currentSize = 0;
                for (let option of this.webcam.videoScaleOptions) {
                    if (option[0] === this.webcam.videoScale) {
                        break;
                    }
                    currentSize++;
                }

                // Adjust it.
                if (bigger) {
                    currentSize++;
                } else {
                    currentSize--;
                }

                // Constrain it.
                if (currentSize < 0) {
                    currentSize = 0;
                } else if (currentSize >= this.webcam.videoScaleOptions.length) {
                    currentSize = this.webcam.videoScale.length - 1;
                }

                // Set it.
                this.webcam.videoScale = this.webcam.videoScaleOptions[currentSize][0];
            },
        }
    }

    /***************************
     * Common, stand-alone functions used by multiple components.
     * Important: these do not use Vue properties but are instead
     * self contained and safe to call from anywhere.
     ***************************/

    // Very similar to webcamIconClass but stand-alone and shared by
    // multiple components like WhoListRow and MessageBox.
    videoButtonClass(user, isVideoNotAllowed) {
        let result = "";

        // VIP background if their cam is set to VIPs only
        if ((user.video & VideoFlag.Active) && (user.video & VideoFlag.VipOnly)) {
            result = "has-background-vip ";
        }

        // Invited to watch: green border but otherwise red/blue icon.
        if ((user.video & VideoFlag.Active) && (user.video & VideoFlag.Invited)) {
            // Invited to watch; green border but blue/red icon.
            result += "video-button-invited ";
        }

        // Colors and/or cursors.
        if ((user.video & VideoFlag.Active) && (user.video & VideoFlag.NSFW)) {
            // Explicit camera: red border
            result += "is-danger is-outlined";
        } else if ((user.video & VideoFlag.Active) && !(user.video & VideoFlag.NSFW)) {
            // Normal camera: blue border
            result += "is-link is-outlined";
        } else if (isVideoNotAllowed) {
            // Default: grey border and not-allowed cursor.
            result += "cursor-notallowed";
        }

        return result;
    }

    videoButtonTitle(user) {
        // Mouse-over title text for the video button.
        let parts = ["Open video stream"];

        if (user.video & VideoFlag.MutualRequired) {
            parts.push("mutual video sharing required");
        }

        if (user.video & VideoFlag.MutualOpen) {
            parts.push("will auto-open your video");
        }

        if (user.video & VideoFlag.VipOnly) {
            parts.push(`${this.vipConfig.Name} only`);
        }

        if (user.video & VideoFlag.NonExplicit) {
            parts.push("prefers non-explicit video");
        }

        return parts.join("; ");
    }
}

const WebRTC = new WebRTCController();
export default WebRTC;