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

Added improved settings panel.

Browse source
This commit is contained in:
rainbow napkin 2025-09-06 10:34:06 -04:00
parent 306f22aa93
commit 132fdabb29
105 changed files with 3447 additions and 252 deletions
Download patch file Download diff file Expand all files Collapse all files

46
www/js/channel/channel.js
View file

@ -236,6 +236,46 @@ class channel{
this.player.hardReload();
}
return;
case 'syncTolerance':
//If the player isn't loaded
if(this.player == null){
//We're fuckin' done here
return;
}
//Set syncronization tolerance
this.player.syncTolerance = value;
return;
case 'liveSyncTolerance':
//If the player isn't loaded
if(this.player == null){
//We're fuckin' done here
return;
}
//Set syncronization tolerance
this.player.streamSyncTolerance = value;
return;
case 'syncDelta':
//If the player isn't loaded
if(this.player == null){
//We're fuckin' done here
return;
}
//Set syncronization delta
this.player.syncDelta = value;
return;
case 'chatWidthMin':
//If the chat isn't loaded
if(this.chatBox == null){
//We're fuckin' done here
return;
}
//Set Chat Box Width minimum while Locked to Aspect-Ratio
this.chatBox.chatWidthMinimum = value / 100;
return;
}
}
@ -245,7 +285,11 @@ class channel{
*/
static defaultConfig = new Map([
["ytPlayerType","raw"],
["IACDN",""]
["IACDN",""],
["syncTolerance",0.4],
["liveSyncTolerance", 2],
["syncDelta", 6],
["chatWidthMin", 20]
]);
}

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

@ -38,6 +38,11 @@ class chatBox{
*/
this.autoScroll = true;
/**
* Chat-Width Minimum while sized to media Aspect-Ratio
*/
this.chatWidthMinimum = localStorage.getItem('chatWidthMin') / 100;
/**
* Chat Buffer Scroll Top on last scroll
*/
@ -500,10 +505,10 @@ L /**
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 * .2;
const limit = window.innerWidth * this.chatWidthMinimum;
//Set width to target or 20vh depending on whether or not we've hit the width limit
this.chatPanel.style.flexBasis = targetChatWidth > limit ? `${targetChatWidth}px` : '20vh';
//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;

2
www/js/channel/mediaHandler.js
View file

@ -759,7 +759,7 @@ class hlsLiveStreamHandler extends hlsBase{
super.onBuffer(event);
//If we're synced by the end of buffering
//If we're supposed to be synced by the end of buffering
if(this.player.syncLock){
//Throw flag to manually sync since this works entirely differently from literally every other fucking media source
this.reSync = true;

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

@ -40,7 +40,27 @@ class settingsPanel extends panelObj{
/**
* Internet Archive CDN Server Input
*/
this.IACDNInput = this.panelDocument.querySelector("#settings-panel-ia-server input");
this.iaCDN = this.panelDocument.querySelector("#settings-panel-ia-server input");
/**
* Syncronization Tolerance Input
*/
this.syncTolerance = this.panelDocument.querySelector("#settings-panel-sync-tolerance input");
/**
* Livestream Syncronization Tolerance Input
*/
this.liveSyncTolerance = this.panelDocument.querySelector("#settings-panel-live-sync-tolerance input");
/**
* Syncronization Tolerance Delta
*/
this.syncDelta = this.panelDocument.querySelector("#settings-panel-sync-delta input");
/**
* Chat Width Minimum while Size-Locked to Media Aspect Ratio
*/
this.chatWidthMinimum = this.panelDocument.querySelector("#settings-panel-min-chat-width input");
this.renderSettings();
this.setupInput();
@ -51,7 +71,11 @@ class settingsPanel extends panelObj{
*/
setupInput(){
this.youtubeSource.addEventListener('change', this.updateYoutubeSource.bind(this));
this.IACDNInput.addEventListener('keydown', this.updateIACDN.bind(this));
this.iaCDN.addEventListener('keydown', this.updateIACDN.bind(this));
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.chatWidthMinimum.addEventListener('change', this.updateChatWidthMinimum.bind(this));
}
/**
@ -59,7 +83,11 @@ class settingsPanel extends panelObj{
*/
renderSettings(){
this.youtubeSource.value = localStorage.getItem("ytPlayerType");
this.IACDNInput.value = localStorage.getItem("IACDN");
this.iaCDN.value = localStorage.getItem("IACDN");
this.syncTolerance.value = localStorage.getItem("syncTolerance");
this.liveSyncTolerance.value = localStorage.getItem("liveSyncTolerance");
this.syncDelta.value = localStorage.getItem("syncDelta");
this.chatWidthMinimum.value = localStorage.getItem("chatWidthMin");
}
/**
@ -78,16 +106,84 @@ class settingsPanel extends panelObj{
//If we hit enter
if(event.key == "Enter"){
//If we have an invalid server string
if(!(this.IACDNInput.value.match(/^ia[0-9]{6}\...$/g) || this.IACDNInput.value == "")){
if(!(this.iaCDN.value.match(/^ia[0-9]{6}\...$/g) || this.iaCDN.value == "")){
//reset back to what was set before
this.IACDNInput.value = localStorage.getItem('IACDN');
this.iaCDN.value = localStorage.getItem('IACDN');
//BAIL!
return;
}
localStorage.setItem("IACDN", this.IACDNInput.value);
client.processConfig("IACDN", this.IACDNInput.value);
localStorage.setItem("IACDN", this.iaCDN.value);
client.processConfig("IACDN", this.iaCDN.value);
}
}
/**
* Handles Sync Tolerance Changes
*/
updateSyncTolerance(){
//If sync tolerance was set to a negative number
if(this.syncTolerance.value < 0){
//Reset setting back to stored value
this.syncTolerance.value = localStorage.getItem('syncTolerance');
//BAIL!
return;
}
localStorage.setItem("syncTolerance", this.syncTolerance.value);
client.processConfig("syncTolerance", this.syncTolerance.value);
}
/**
* Handles Live Sync Tolerance Changes
*/
updateLiveSyncTolerance(){
//If sync tolerance was set to a negative number
if(this.liveSyncTolerance.value < 0){
//Reset setting back to stored value
this.liveSyncTolerance.value = localStorage.getItem('liveSyncTolerance');
//BAIL!
return;
}
localStorage.setItem("liveSyncTolerance", this.liveSyncTolerance.value);
client.processConfig("liveSyncTolerance", this.liveSyncTolerance.value);
}
/**
* Handles Sync Delta Changes
*/
updateSyncDelta(){
//If sync tolerance was set to a negative number
if(this.syncDelta.value < 0){
//Reset setting back to stored value
this.syncDelta.value = localStorage.getItem('syncDelta');
//BAIL!
return;
}
localStorage.setItem("syncDelta", this.syncDelta.value);
client.processConfig("syncDelta", this.syncDelta.value);
}
/**
* Handles Chat Width minimum Changes
*/
updateChatWidthMinimum(){
//If sync tolerance was set to a negative number
if(this.chatWidthMinimum.value < 0 || this.chatWidthMinimum > 100){
//Reset setting back to stored value
this.syncDelta.value = localStorage.getItem('chatWidthMin');
//BAIL!
return;
}
localStorage.setItem("chatWidthMin", this.chatWidthMinimum.value);
client.processConfig("chatWidthMin", this.chatWidthMinimum.value);
}
}

6
www/js/channel/player.js
View file

@ -107,19 +107,19 @@ class player{
/**
* Tolerance between timestamp from server and actual media before corrective seek for pre-recorded media
*/
this.syncTolerance = 0.4;
this.syncTolerance = localStorage.getItem('syncTolerance');
/**
* Tolerance in livestream delay before corrective seek to live.
*
* Might seem weird to keep this here instead of the HLS handler, but remember we may want to support other livestream services in the future...
*/
this.streamSyncTolerance = 2;
this.streamSyncTolerance = localStorage.getItem('liveSyncTolerance');
/**
* Forced time to wait between sync checks, heavily decreases chance of seek-banging without reducing syncornization accuracy
*/
this.syncDelta = 6;
this.syncDelta = localStorage.getItem('syncDelta');
/**
* Current Player Volume