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

Added portrait-mode toggle

Browse source
This commit is contained in:
rainbow napkin 2026-05-18 01:21:56 -04:00
parent f9a6321b7b
commit d41e9d1df9
4 changed files with 43 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/views/partial/panels/settings.ejs
View file

@ -16,7 +16,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>. %>
<link rel="stylesheet" type="text/css" href="/css/panel/settings.css">
<div id="settings-panel">
<h2>Client Settings</h2>
<h4>Player Settings</h4>
<h4>Playeback Settings</h4>
<span id="settings-panel-youtube-source" class="settings-panel-setting">
<p>Youtube Player Type: </p>
<select>
@ -40,11 +40,15 @@ along with this program. If not, see <https://www.gnu.org/licenses/>. %>
<p>Syncronization Delta: </p>
<input type="number">
</span>
<h4>Chat Settings</h4>
<h4>Display Settings</h4>
<span id="settings-panel-min-chat-width" class="settings-panel-setting">
<p>Aspect-Ratio Lock Chat Width Minimum: </p>
<p>Chat Width Minimum While Locked to Aspect Ratio: </p>
<input type="number">
</span>
<span id="settings-panel-disable-portrait" class="settings-panel-setting">
<p>Disable Portrait/Mobile Layout: </p>
<input type="checkbox">
</span>
<h4>Notification Settings</h4>
<span id="settings-panel-ping-on-pm-rx" class="settings-panel-setting">
<p>Play Sound for received PMs: </p>

13
www/js/channel/channel.js
View file

@ -288,6 +288,16 @@ class channel{
//Set Chat Box Width minimum while Locked to Aspect-Ratio
this.chatBox.chatWidthMinimum = value / 100;
return;
case 'disablePortrait':
//If the chat isn't loaded
if(this.chatBox == null){
//We're fuckin' done here
return;
}
//Toggle portrait mode
this.chatBox.togglePortrait();
return;
case 'userlistHidden':
//If the userlist class isn't loaded in yet
if(this.userList == null){
@ -326,7 +336,8 @@ class channel{
["rxPMSound", 'unread'],
["txPMSound", false],
["newSeshSound", true],
["endSeshSound", true]
["endSeshSound", true],
["disablePortrait", false]
]);
}

8
www/js/channel/chat.js
View file

@ -542,8 +542,8 @@ class chatBox{
}
togglePortrait(){
//If our window width is more than or equal to window height (not portrait mode)
if(window.innerWidth >= window.innerHeight){
//If our window width is more than or equal to window height (not portrait mode), or portrait mode is on while its supposed to be disabled
if(window.innerWidth >= window.innerHeight || (localStorage.getItem("disablePortrait") == 'true' && this.portrait)){
//Disable portrait CSS modifiers
this.channelDiv.style.flexDirection = "row";
this.clickDragger.enabled = true;
@ -556,7 +556,9 @@ class chatBox{
//resize player in-case of empty flex basis
this.resizeAspect();
}else{
//Otherwise, if portrait mode is enabled
}else if(localStorage.getItem("disablePortrait") != 'true'){
//Modify CSS for portrait displays
this.channelDiv.style.flexDirection = "column";
this.clickDragger.enabled = false;

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

@ -62,6 +62,11 @@ class settingsPanel extends panelObj{
*/
this.chatWidthMinimum = this.panelDocument.querySelector("#settings-panel-min-chat-width input");
/**
* Disable Portrait/Mobile Layout
*/
this.disablePortrait = this.panelDocument.querySelector("#settings-panel-disable-portrait input");
/**
* Audible Ping on PM Recieved
*/
@ -99,6 +104,7 @@ class settingsPanel extends panelObj{
this.liveSyncTolerance.addEventListener('change', this.updateLiveSyncTolerance.bind(this));
this.syncDelta.addEventListener('change', this.updateSyncDelta.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));
this.txPMSound.addEventListener('change', this.updateTXPMSound.bind(this));
this.newSeshSound.addEventListener('change', this.updateNewPMSeshSound.bind(this));
@ -115,6 +121,7 @@ class settingsPanel extends panelObj{
this.liveSyncTolerance.value = localStorage.getItem("liveSyncTolerance");
this.syncDelta.value = localStorage.getItem("syncDelta");
this.chatWidthMinimum.value = localStorage.getItem("chatWidthMin");
this.disablePortrait.checked = localStorage.getItem("disablePortrait") == 'true';
this.rxPMSound.value = localStorage.getItem('rxPMSound');
this.txPMSound.checked = localStorage.getItem('txPMSound') == 'true';
this.newSeshSound.checked = localStorage.getItem('newSeshSound') == 'true';
@ -218,11 +225,20 @@ class settingsPanel extends panelObj{
client.processConfig("chatWidthMin", this.chatWidthMinimum.value);
}
/**
* Handles change toggle of disable/enable portrait
*/
updateDisablePortrait(){
localStorage.setItem('disablePortrait', this.disablePortrait.checked);
client.processConfig("disablePortrait", this.disablePortrait.checked);
}
/**
* Handles changes to RX PM Sound setting
*/
updateRXPMSound(){
localStorage.setItem('rxPMSound', this.rxPMSound.value);
client.processConfig("rxPMSound", this.rxPMSound.value);
}
/**
@ -230,6 +246,7 @@ class settingsPanel extends panelObj{
*/
updateTXPMSound(){
localStorage.setItem('txPMSound', this.txPMSound.checked);
client.processConfig("txPMSound", this.txPMSound.checked);
}
/**
@ -237,6 +254,7 @@ class settingsPanel extends panelObj{
*/
updateNewPMSeshSound(){
localStorage.setItem('newSeshSound', this.newSeshSound.checked);
client.processConfig("newSeshSound", this.newSeshSound.checked);
}
/**
@ -244,5 +262,6 @@ class settingsPanel extends panelObj{
*/
updateEndPMSeshSound(){
localStorage.setItem('endSeshSound', this.endSeshSound.checked);
client.processConfig("endSeshSound", this.endSeshSound.checked);
}
}