From d41e9d1df92e261cd735a597668d97d6547ec4ab Mon Sep 17 00:00:00 2001 From: rainbow napkin Date: Mon, 18 May 2026 01:21:56 -0400 Subject: [PATCH] Added portrait-mode toggle --- src/views/partial/panels/settings.ejs | 10 +++++++--- www/js/channel/channel.js | 13 ++++++++++++- www/js/channel/chat.js | 8 +++++--- www/js/channel/panels/settingsPanel.js | 19 +++++++++++++++++++ 4 files changed, 43 insertions(+), 7 deletions(-) diff --git a/src/views/partial/panels/settings.ejs b/src/views/partial/panels/settings.ejs index 6fe53d2..320c3e7 100644 --- a/src/views/partial/panels/settings.ejs +++ b/src/views/partial/panels/settings.ejs @@ -16,7 +16,7 @@ along with this program. If not, see . %>

Client Settings

-

Player Settings

+

Playeback Settings

Youtube Player Type:

-

Chat Settings

+

Display Settings

-

Aspect-Ratio Lock Chat Width Minimum:

+

Chat Width Minimum While Locked to Aspect Ratio:

+ +

Disable Portrait/Mobile Layout:

+ +

Notification Settings

Play Sound for received PMs:

diff --git a/www/js/channel/channel.js b/www/js/channel/channel.js index 6da26c3..18a6996 100644 --- a/www/js/channel/channel.js +++ b/www/js/channel/channel.js @@ -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] ]); } diff --git a/www/js/channel/chat.js b/www/js/channel/chat.js index 2793cc5..ee15e7a 100644 --- a/www/js/channel/chat.js +++ b/www/js/channel/chat.js @@ -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; diff --git a/www/js/channel/panels/settingsPanel.js b/www/js/channel/panels/settingsPanel.js index e9f0519..73e5dc9 100644 --- a/www/js/channel/panels/settingsPanel.js +++ b/www/js/channel/panels/settingsPanel.js @@ -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); } } \ No newline at end of file