Theming system implemented, started work on "The Network" theme

www/js/channel/channel.js

@@ -287,6 +287,11 @@ class channel{
                 //Set syncronization delta
                 this.player.syncDelta = value;
                 return;
+            case 'theme':
+                //Set theme
+                ThemeManager.setTheme(value);
+                //We're fuckin' done here
+                return;
             case 'chatWidthMin':
                 //If the chat isn't loaded
                 if(this.chatBox == null){
@@ -336,9 +341,10 @@ class channel{
     static defaultConfig = new Map([
         ["ytPlayerType","raw"],
         ["IACDN",""],
-        ["syncTolerance",0.4],
-        ["liveSyncTolerance", 2],
+        ["syncTolerance",1],
+        ["liveSyncTolerance", 10],
         ["syncDelta", 6],
+        ["theme", "Movie Night"],
         ["chatWidthMin", 20],
         ["userlistHidden", false],
         ["cinemaMode", false],

www/js/channel/panels/settingsPanel.js

@@ -57,6 +57,11 @@ class settingsPanel extends panelObj{
          */
         this.syncDelta = this.panelDocument.querySelector("#settings-panel-sync-delta input");
 
+        /**
+         * Theme 
+         */
+        this.theme = this.panelDocument.querySelector("#settings-panel-theme");
+
         /**
          * Chat Width Minimum while Size-Locked to Media Aspect Ratio
          */
@@ -87,13 +92,33 @@ class settingsPanel extends panelObj{
          */
         this.endSeshSound = this.panelDocument.querySelector("#settings-panel-ping-on-end-sesh input");
 
+        //Fill Theme list
+        this.fillThemes();
+
+        //Render settings
         this.renderSettings();
+
+        //Setup input 
         this.setupInput();
 
         //Call derived method
         super.docSwitch();
     }
 
+    fillThemes(){
+        for(let themeName of ThemeManager.themes.keys()){
+            //Create theme option
+            let option = document.createElement('option');
+
+            //Set option value and innerText to theme name
+            option.value = themeName;
+            option.innerText = themeName;
+
+            //Add option to theme selector
+            this.theme.querySelector('select').appendChild(option);
+        }
+    }
+
     /**
      * Defines input-related event handlers
      */
@@ -103,6 +128,7 @@ class settingsPanel extends panelObj{
         this.syncTolerance.addEventListener('change', this.updateSyncTolerance.bind(this));
         this.liveSyncTolerance.addEventListener('change', this.updateLiveSyncTolerance.bind(this));
         this.syncDelta.addEventListener('change', this.updateSyncDelta.bind(this));
+        this.theme.addEventListener('change', this.updateTheme.bind(this));
         this.chatWidthMinimum.addEventListener('change', this.updateChatWidthMinimum.bind(this));
         this.disablePortrait.addEventListener('change', this.updateDisablePortrait.bind(this));
         this.rxPMSound.addEventListener('change', this.updateRXPMSound.bind(this));
@@ -120,6 +146,7 @@ class settingsPanel extends panelObj{
         this.syncTolerance.value = localStorage.getItem("syncTolerance");
         this.liveSyncTolerance.value = localStorage.getItem("liveSyncTolerance");
         this.syncDelta.value = localStorage.getItem("syncDelta");
+        this.theme.querySelector('select').value = localStorage.getItem("theme");
         this.chatWidthMinimum.value = localStorage.getItem("chatWidthMin");
         this.disablePortrait.checked = localStorage.getItem("disablePortrait") == 'true';
         this.rxPMSound.value = localStorage.getItem('rxPMSound');
@@ -208,6 +235,15 @@ class settingsPanel extends panelObj{
         client.processConfig("syncDelta", this.syncDelta.value);
     }
 
+    /**
+     * Update theme
+     */
+    updateTheme(){
+        let theme = this.theme.querySelector('select').value;
+        localStorage.setItem("theme", theme);
+        client.processConfig("theme", theme);
+    }
+
     /**
      * Handles Chat Width minimum Changes
      */

www/js/themeManager.js

@@ -0,0 +1,77 @@
+/*Canopy - The next generation of stoner streaming software
+Copyright (C) 2024-2026 Rainbownapkin and the TTN Community
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see <https://www.gnu.org/licenses/>.*/
+
+/**
+ * Class to manage
+ */
+class themeManager{
+    /**
+     * Instantiates new Theme Manager 
+     */
+    constructor(){
+        /**
+         * Map of all available themes
+         */
+        this.themes = new Map([
+            ["Movie Night", "/css/theme/movie-night.css"],
+            ["The Network", "/css/theme/the-network.css"]
+        ]);
+
+        /**
+         * Define property to hold theme link DOM node
+         */
+        this.themeLink = null;
+
+        //Set theme from preference
+        this.setTheme(localStorage.getItem("theme"));
+    }
+
+    /**
+     * Sets theme by name
+     * @param {String} theme - name of theme to set, keep blank for default theme
+     */
+    setTheme(theme){
+        //If we didnt get a theme to set
+        if(theme == null){
+            //Use the first theme in the list
+            theme = Array.from(this.themes.keys())[0];
+        }
+
+        //If we have a link already setup
+        if(this.themeLink != null){
+            //Get Ridda it!
+            this.themeLink.remove();
+        }
+
+        //Create new link element and use it to set themeLink
+        this.themeLink = document.createElement('link');
+
+        //Set themeLink attributes
+        this.themeLink.type = "text/css";
+        this.themeLink.rel = "stylesheet";
+
+        //Set theme href to theme location
+        this.themeLink.href = this.themes.get(theme);
+
+        //Append themeLink to header
+        document.querySelector('head').appendChild(this.themeLink);
+
+        //Save theme choice to local storage
+        localStorage.setItem("theme", theme);
+    }
+}
+
+ThemeManager = new themeManager();