Started work on optional offial yotuube embed playback. Added basic client settings panel.

www/css/panel/settings.css

@@ -0,0 +1,33 @@
+/*Canopy - The next generation of stoner streaming software
+Copyright (C) 2024-2025 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/>.*/
+#settings-panel{
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+}
+
+#settings-panel h2{
+    text-align: center;
+    margin: 1em 0 0;
+}
+
+.settings-panel-setting{
+    display: flex;
+    flex-direction: row;
+    text-wrap: nowrap;
+    height: 1em;
+    align-items: center;
+}

www/js/channel/channel.js

@@ -32,6 +32,12 @@ class channel{
         this.userList = new userList(this);
         //Create the Canopy Panel Object
         this.cPanel = new cPanel(this);
+
+        //Set defaults for any unset settings and run any required process steps for the current config
+        this.setDefaults(false, true);
+
+        //Freak out any weirdos who take a peek in the dev console for gaffs
+        console.log("👁️👄👁️ ℬℴ𝓊𝓃𝒿ℴ𝓊𝓇.");
     }
 
     connect(){
@@ -91,6 +97,52 @@ class channel{
         //Store queue lock status
         this.queueLock = data.queueLock;
     }
+
+    setDefaults(force = false, processConfig = false){
+        //Iterate through default config 
+        for(let [key, value] of channel.defaultConfig){
+            //If the setting is unset or function was called forcefully
+            if(force || localStorage.getItem(key) == null){
+                //Set item from default map
+                localStorage.setItem(key, value);
+            }
+
+            //If we're running process steps for the config
+            if(processConfig){
+                //Process the current config value
+                this.processConfig(key, localStorage.getItem(key));
+            }
+        }
+    }
+
+    processConfig(key, value){
+        //Switch/case by config key
+        switch(key){
+            case 'ytPlayerType':
+                    console.log("FUCK");
+                //If the user is running the embedded player
+                if(value == 'embed'){
+                    //Find our footer
+                    const footer = document.querySelector('footer');
+
+                    //Create new script tag
+                    const ytEmbedAPI = document.createElement('script');
+                    //Link the iframe api from youtube
+                    ytEmbedAPI.src = "https://www.youtube.com/iframe_api";
+                    //set the iframe api script id
+                    ytEmbedAPI.classList.add('yt-embed-api');
+
+                    //Append the script tag to the top of the footer to give everything else access
+                    footer.prepend(ytEmbedAPI);
+                }
+                //Stop while we're ahead
+                return;
+        }
+    }
+
+    static defaultConfig = new Map([
+        ["ytPlayerType","raw"]
+    ]);
 }
 
 const client = new channel();

www/js/channel/chat.js

@@ -64,7 +64,7 @@ class chatBox{
         this.chatPrompt.addEventListener("input", this.displayAutocomplete.bind(this));
         this.autocompleteDisplay.addEventListener("click", this.tabComplete.bind(this));
         this.sendButton.addEventListener("click", this.send.bind(this));
-        this.settingsIcon.addEventListener("click", ()=>{this.client.cPanel.setActivePanel(new panelObj(client))});
+        this.settingsIcon.addEventListener("click", ()=>{this.client.cPanel.setActivePanel(new settingsPanel(client))});
         this.adminIcon.addEventListener("click", ()=>{this.client.cPanel.setActivePanel(new queuePanel(client))});
         this.emoteIcon.addEventListener("click", ()=>{this.client.cPanel.setActivePanel(new emotePanel(client))});
 

www/js/channel/panels/settingsPanel.js

@@ -0,0 +1,37 @@
+/*Canopy - The next generation of stoner streaming software
+Copyright (C) 2024-2025 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 settingsPanel extends panelObj{
+    constructor(client, panelDocument){
+        super(client, "Client Settings", "/panel/settings", panelDocument);
+    }
+
+    closer(){
+    }
+
+    docSwitch(){
+        this.youtubeSource = this.panelDocument.querySelector("#settings-panel-youtube-source select");
+
+        this.setupInput();
+    }
+
+    setupInput(){
+        this.youtubeSource.addEventListener('change', this.updateYoutubeSource.bind(this));
+    }
+
+    updateYoutubeSource(){
+        localStorage.setItem("ytPlayerType", this.youtubeSource.value);
+    }
+}