rainbownapkin/canopy
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
rainbow napkin 2026-10-01 02:52:11 -04:00
parent c2d78b8681
commit 294f0292ab
7 changed files with 883 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

10
www/js/channel/channel.js
View file

@ -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],

36
www/js/channel/panels/settingsPanel.js
View file

@ -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
*/