Removing OBS copy link and background colour when applicable now

The OBS copy link won't work with local file:// URLs(it sets it to "Local file" and disables all URL parameters) so we don't show it on local files Also removing the user name background colour selector for when bubbles aren't enabled, since there the option isn't used. This also includes a bugfix for the recent changes in the colour overrides when not using bubbles. This previously did not work as intended because the naming of these variable is suboptimal and could be improved upon in a refactor. Also added some code documentation.
izzy · Jul 12, 2022 · 3ec74f9 · 3ec74f9
1 parent b31dfd3
commit 3ec74f9
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 12 deletions.
diff --git a/chat.html b/chat.html
@@ -73,7 +73,7 @@
 
         .msg-user {
             font-weight: bold;
-            
+
         }
 
         .msg-user::after {
@@ -328,6 +328,12 @@
             pronouns = data;
         });
 
+        /**
+         * Get the pronoun for a user and cache it for future use
+         *
+         * @param {string} user The user to get the pronoun for
+         * @returns {string} The pronoun for the user
+         */
         async function fetch_pronoun(user) {
             if (user in pronouns_users) {
                 return pronouns_users[user];
@@ -343,6 +349,14 @@
 
         }
 
+        /**
+         * Get the pronoun for a user.
+         * This is a wrapper for fetch_pronoun() that returns either the pronoun or false when pronouns are disabled,
+         * when pronouns for the user aren't set or the API is unavailable.
+         *
+         * @param {string} user The user to get the pronoun for
+         * @returns {string|bool} The pronoun for the user
+         */
         function get_pronoun(user) {
             if (config['pronouns'] === true && (user in pronouns_users && pronouns_users[user] !== undefined)) {
                 return pronouns.filter(p => p.name === pronouns_users[user]['pronoun_id'])[0].display;
@@ -373,10 +387,16 @@
             }
         }
 
-        function get_background_color(color) {
+        /**
+         * Get the background color for a user.
+         * @param {string} color A six digit hex color code
+         * @param {string} override_source Config attribute to take for overrides
+         * @returns {string} The background color for the user
+         */
+        function get_user_color(color, override_source = "background_color") {
             // TODO pastel mode for background color
-            if (config['background_color'] !== null) {
-                return config['background_color'];
+            if (config[override_source] !== null) {
+                return config[override_source];
             }
 
             if (!color) {
@@ -414,7 +434,9 @@
             }
 
             // Get colors based on settings / user data
-            let background_color = get_background_color(author_color);
+            // I hate the names of these variables because they're used inconsistently,
+            // but I'm not sure what else to call them
+            let background_color = get_user_color(author_color);
             let text_color = get_text_color(background_color);
 
             let message_style = '';
@@ -454,7 +476,7 @@
 
             // If we don't use bubbles, we don't use the user colour as background
             if (config['bubbles'] === false) {
-                text_color = background_color;
+                text_color = get_user_color(author_color, "text_color");
                 background_color = "transparent";
             }
             let el_user = createElement('span', {

diff --git a/generator.html b/generator.html
@@ -95,6 +95,7 @@
       color: #41145F;
       transition: opacity .4s ease-in-out;
       opacity: 0;
+      text-shadow: none;
     }
 
     #chat-frame {
@@ -131,7 +132,8 @@
     }
 
     .help {
-      position: relative;padding: 0.5rem;
+      position: relative;
+      padding: 0.5rem;
       border-radius: 2rem;
       cursor: help;
     }
@@ -175,8 +177,7 @@ <h2 class="subtitle">based on <a href="https://github.com/izzy/stream-chat" targ
         <a id="copy-button" class="button">Copy</a>
 
         <a id="obs-url" class="button">Drag me into OBS</a>
-        <span class="help">?<span id="drag-help">Drag and drop does not work when OBS is running with Administrator
-            privileges</span></span>
+        <span id="obs-url-help" class="help">?<span id="drag-help">Drag and drop does not work when OBS is running with Administrator privileges</span></span>
       </div>
 
       <div>

diff --git a/generator.js b/generator.js
@@ -1,6 +1,3 @@
-
-
-
 const fontCheck = new Set([
     // Windows 10
     'Arial', 'Arial Black', 'Bahnschrift', 'Calibri', 'Cambria', 'Cambria Math', 'Candara', 'Comic Sans MS', 'Consolas', 'Constantia', 'Corbel', 'Courier New', 'Ebrima', 'Franklin Gothic Medium', 'Gabriola', 'Gadugi', 'Georgia', 'HoloLens MDL2 Assets', 'Impact', 'Ink Free', 'Javanese Text', 'Leelawadee UI', 'Lucida Console', 'Lucida Sans Unicode', 'Malgun Gothic', 'Marlett', 'Microsoft Himalaya', 'Microsoft JhengHei', 'Microsoft New Tai Lue', 'Microsoft PhagsPa', 'Microsoft Sans Serif', 'Microsoft Tai Le', 'Microsoft YaHei', 'Microsoft Yi Baiti', 'MingLiU-ExtB', 'Mongolian Baiti', 'MS Gothic', 'MV Boli', 'Myanmar Text', 'Nirmala UI', 'Palatino Linotype', 'Segoe MDL2 Assets', 'Segoe Print', 'Segoe Script', 'Segoe UI', 'Segoe UI Historic', 'Segoe UI Emoji', 'Segoe UI Symbol', 'SimSun', 'Sitka', 'Sylfaen', 'Symbol', 'Tahoma', 'Times New Roman', 'Trebuchet MS', 'Verdana', 'Webdings', 'Wingdings', 'Yu Gothic',
@@ -225,3 +222,27 @@ debugSwitch.addEventListener("change", generateURL)
 dragButton.addEventListener("click", (e) => {e.preventDefault();})
 
 buildMarkup();
+
+// OBS will relentlessly ignore any options when dragging a local file:// URL
+// into it. To reduce issues with people getting confused over the settings 
+// not working we just disable the drag button and instead leave the user with
+// the copy button. 
+// It's not ideal but it's the best we can do.
+const isLocal = window.location.protocol === "file:";
+if (isLocal === true) {
+    document.getElementById("obs-url").style.display = "none";
+    document.getElementById("obs-url-help").style.display = "none";
+}
+
+const bubbles = document.querySelector("input[name=bubbles]");
+const background_color = document.querySelector("input[name=background_color]").parentNode;
+bubbles.addEventListener("change", (e) => {
+    if (e.target.checked) {
+        background_color.style.display = "block";
+    } else {
+        background_color.style.display = "none";
+        document.getElementById("background_color_nullable").checked = false;
+    }
+});
+
+bubbles.dispatchEvent(new Event("change"));