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

Added portrait orientation mode to channel UX.

Browse source
This commit is contained in:
rainbow napkin 2026-05-17 18:48:11 -04:00
parent 584dcf1ac7
commit 49684b32a1
1 changed files with 74 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -38,6 +38,11 @@ class chatBox{
*/
this.autoScroll = true;
/**
* Whether or not the screen is currently in portrait mode
*/
this.portrait = false;
/**
* Chat-Width Minimum while sized to media Aspect-Ratio
*/
@ -74,6 +79,11 @@ class chatBox{
this.chatPostprocessor = new chatPostprocessor(client);
//Element Nodes
/**
* Channel Div
*/
this.channelDiv = document.querySelector("#channel-flexbox");
/**
* Chat Panel Container Div
*/
@ -473,8 +483,14 @@ class chatBox{
resizeAspect(event){
const playerHidden = this.client.player.playerDiv.style.display == "none";
//If the aspect is locked and the player is hidden
if(this.aspectLock && !playerHidden){
//If window is taller than wide and not in portrait mode, or vice-versa
if(this.portrait != (window.innerWidth <= window.innerHeight)){
//Toggle portrait mode
this.togglePortrait();
}
//If the aspect is locked/the window is portrait and the player isn't hidden
if((this.aspectLock || this.portrait) && !playerHidden){
this.sizeToAspect();
//Otherwise
}else{
@ -490,18 +506,34 @@ class chatBox{
* Re-sizes chat box relative to media aspect ratio
*/
sizeToAspect(){
//If the chat panel is visible
if(this.chatPanel.style.display != "none"){
var targetVidWidth = this.client.player.getRatio() * this.chatPanel.getBoundingClientRect().height;
const targetChatWidth = window.innerWidth - targetVidWidth;
//This should be changeable in settings later on, for now it defaults to 20%
const limit = window.innerWidth * this.chatWidthMinimum;
//If our window width is more than or equal to window height (not portrait mode)
if(!this.portrait){
//Get target video width by multiplying media ratio by window height
var targetVidWidth = this.client.player.getRatio() * this.chatPanel.getBoundingClientRect().height;
//Get target chat width my subtracting target media width from total window width
const targetChatWidth = window.innerWidth - targetVidWidth;
//This should be changeable in settings later on, for now it defaults to 20%
const limit = window.innerWidth * this.chatWidthMinimum;
//Set width to target or 20vw depending on whether or not we've hit the width limit
this.chatPanel.style.flexBasis = targetChatWidth > limit ? `${targetChatWidth}px` : `${this.chatWidthMinimum * 100}vw`;
//Set width to target or 20vw depending on whether or not we've hit the width limit
this.chatPanel.style.flexBasis = targetChatWidth > limit ? `${targetChatWidth}px` : `${this.chatWidthMinimum * 100}vw`;
//Fix busted layout
var pageBreak = document.body.scrollWidth - document.body.getBoundingClientRect().width;
this.chatPanel.style.flexBasis = `${this.chatPanel.getBoundingClientRect().width + pageBreak}px`;
}else{
//Calculate target video height from media aspect ratio and window width
var targetVidHeight = window.innerWidth / this.client.player.getRatio();
//Calculate target chat height from the difference between the channel div height and the target video height
var targetChatHeight = this.channelDiv.getBoundingClientRect().height - targetVidHeight;
//Set div heights accordingly
this.client.player.playerDiv.style.height = `${targetVidHeight}px`;
this.chatPanel.style.height = `${targetChatHeight}px`;
}
//Fix busted layout
var pageBreak = document.body.scrollWidth - document.body.getBoundingClientRect().width;
this.chatPanel.style.flexBasis = `${this.chatPanel.getBoundingClientRect().width + pageBreak}px`;
//This sometimes gets called before userList ahs been initiated :p
if(this.client.userList != null){
this.client.userList.clickDragger.fixCutoff();
@ -509,6 +541,36 @@ class chatBox{
}
}
togglePortrait(){
//If our window width is more than or equal to window height (not portrait mode)
if(window.innerWidth >= window.innerHeight){
//Disable portrait CSS modifiers
this.channelDiv.style.flexDirection = "row";
this.clickDragger.enabled = true;
this.chatPanel.style.width = "";
this.client.player.playerDiv.style.height = "";
this.chatPanel.style.height = "";
//Disable portrait behavior modifiers
this.portrait = false;
//resize player in-case of empty flex basis
this.resizeAspect();
}else{
//Modify CSS for portrait displays
this.channelDiv.style.flexDirection = "column";
this.clickDragger.enabled = false;
this.chatPanel.style.width = "100%";
this.chatPanel.style.flexBasis = "";
//Enable portrait behavior modifiers
this.portrait = true;
//resize player to correct height
this.resizeAspect();
}
}
/**
* Toggles Chat Box UX
* @param {Boolean} show - Whether or not to show Chat Box UX