Merge pull request #12 from DamienPup/feat-autoreload

feat: autoreload

README.md

@@ -17,13 +17,13 @@ Inspired by [liyunze-coding/Chat-Task-Tic-Overlay](https://github.com/liyunze-co
 ## Latest changes
 
 The last few changes made to the overlay (oldest first):
+- Added support for automatically reloading the overlay if it fails to sign in. **Important:** `auth.js` needs to be updated for this to work, however, the bot will function without this update.
 - Added a feature to have the commands of the bot show in the title. See `settings.js` for details and config.
 - **MAJOR**: Added a new feature to group tasks by username. This is a **breaking change**!
   - Tasks are now grouped by username *by default*.
   - Task numbers now only target your own tasks, and you can target other users tasks by adding their names before the number. (e.g. `!task done 1` finishes your first task, while `!task done User123 1` finishes User123's first task)
   - There are some new style settings to control the look of the new username headers.
   - The old behavior can be restored by disabling `enableUsernameGrouping` in `settings.js`. This disables ALL of this features changes. At least for now, the ungrouped (old) behavior will continue to be maintained and updated.
-- `!task show` can now show all commands for you or another user; the task number is no longer required. 
 
 ## List of commands
 
@@ -87,7 +87,7 @@ By default everyone can use `help`, `credits` and `github`, `show` and `add` tas
 >
 > `auth.js`:
 >  - Last **major** update: Commit b807cf3 on Oct 18th, 2023.
->  - Last *minor* update: None since the last major update.
+>  - Last *minor* update: Commit f852dbf on Aug 29th 2024.
 >
 > `CLIENT_ID.txt` has not been updated. Updates that don't change functionality are not counted.
 
@@ -129,6 +129,17 @@ const OAUTH_TOKEN = "YOUR_TOKEN_HERE";
 
 ### Minor Updates
 
+`auth.js`:
+  1. Commit f852dbf made a small refactor to `auth.js` to make automatic reload possible. Here are all the changes:
+      - Delete line 1 (with ```const OAUTH_TOKEN = "<your token here>";```). Save your oauth token!
+         - You can also delete the blank line following it.
+      - On line 3 (old file) or 1 (new file), change:
+          - From: ```const auth =``` 
+          - To: ```window.auth =```
+      - On line 7 (old file) or 5 (new file), change:
+          - From: ```const oauth = OAUTH_TOKEN;```
+          - To: ```const oauth = "<your token here>"```
+
 `settings.js`:
   1. Commit 6c19327 made a small change to `settings.js`. If updating from commit a9191c9 or later, simply change line 120 of `settings.js`:
       - From: ```show: `${taskSyntax}`,```

auth.js

@@ -1,10 +1,8 @@
-const OAUTH_TOKEN = ""; // View the README to fill this out!
-
-const auth = (function () {
+window.auth = (function () {
     // Authentication and channels - required
     const channel = ""; // Your channel username. The bot will listen to chat in this channel.
     const username = ""; // The bot account's username. This is the account the bot will login to.
-    const oauth = OAUTH_TOKEN;
+    const oauth = ""; // View the README to fill this out!
 
     return {
         channel,

generate_token.py

@@ -3,6 +3,7 @@
 import time
 from urllib.parse import urlparse, parse_qs
 import webbrowser
+import re
 
 SERVER: HTTPServer | None = None
 GOT_TOKEN = False
@@ -37,7 +38,7 @@ def do_GET(self):
         with open("auth.js") as fp:
             lines = fp.readlines()
 
-        lines[0] = f"const OAUTH_TOKEN = \"{token[0]}\"; // View the README to fill this out!\n"
+        lines[4] = re.sub(r'oauth = ".*?"', f'oauth = "{token[0]}"', lines[4])
 
         with open("auth.js", "w") as fp:
             fp.writelines(lines)

scripts/index.js

@@ -723,16 +723,31 @@ ComfyJS.onCommand = (user, command, message, flags, extra) => {
 
 function criticalError(error) {
     // show error
-    let errorP = document.createElement("p");
+    let errorP = document.querySelector("p.critical-error");
+    if (!errorP) {
+        errorP = document.createElement("p");    
+        errorP.classList.add("critical-error");
+        document.querySelector(".main-content").append(errorP);
+    }
     errorP.innerText = error;
-    errorP.classList.add("critical-error");
-    document.querySelector(".main-content").append(errorP);
 
     // hide task list
     document.querySelector(".header").style.display = "none";
     document.querySelector(".task-wrapper").style.display = "none";
 }
 
+function clearCriticalError() {
+    // remove error
+    let errorP = document.querySelector("p.critical-error");
+    if (errorP) {
+        errorP.remove();
+    }
+
+    // show task list
+    document.querySelector(".header").style.display = "";
+    document.querySelector(".task-wrapper").style.display = "";
+}
+
 function showErrorNotification(error) {
     // make notification
     let errorDiv = document.createElement("div");
@@ -823,23 +838,47 @@ window.onload = function () {
 ComfyJS.onError = function(error) {
     if (typeof error === 'string') {
         if (error.toLowerCase().includes("login") ||
-            error.toLowerCase().includes("logging in")) {
+            error.toLowerCase().includes("logging in") ||
+            error.toLowerCase().includes("auth")) {
             // failed to login, oauth token likely incorrect
             criticalError(error + "\nTry logging in again.");
+            setTimeout(reloadAuthJS, 5000); // Try again in 5 seconds.
             return;
-        } else if (error.toLowerCase().includes("NICK")) {
+        } else if (error.toLowerCase().includes("nick")) {
             // bad NICK, chat username was wrong
-            criticalError(error + "\nEnsure you typed your account/bot username correctly.")
-            return;
-        } else if (error.toLowerCase().includes("auth")) {
-            // improper auth flow, should never happen
-            // if this happens likely a Comfy.js or TMI.js issue, or Twitch is having a bad time
-            criticalError(error + "\nTry again later or ask the developer for help.")
+            criticalError(error + "\nEnsure you typed your account/bot username correctly.");
+            setTimeout(reloadAuthJS, 5000); // Try again in 5 seconds.
             return;
         }
     }
     // Something else went wrong
     showErrorNotification(error);
 };
 
+ComfyJS.onConnected = function(_, _, _) {
+    clearCriticalError();
+}
+
+/// Magic to reload auth.js on failure
+async function reloadAuthJS() {
+    const lastToken = auth.oauth;
+
+    const existingScript = document.querySelector('script[src="auth.js"]');
+    if (existingScript) existingScript.remove();
+
+    const script = document.createElement("script");
+    script.src = "auth.js"
+    script.onload = function() {
+        if (auth.oauth !== lastToken) {
+            // got a new token, try again
+            ComfyJS.Init(auth.username, `oauth:${auth.oauth}`, [auth.channel]);
+        }
+        else {
+            setTimeout(reloadAuthJS, 5000); // Try again in 5 seconds.
+        }
+    }
+    document.head.appendChild(script);
+}
+/// ====
+
 ComfyJS.Init(auth.username, `oauth:${auth.oauth}`, [auth.channel]);