Started work on JSDoc for www/js/channel
This commit is contained in:
parent
5ad20f6823
commit
ac06f839ea
97 changed files with 18556 additions and 91 deletions
|
|
@ -14,26 +14,47 @@ GNU Affero General Public License for more details.
|
|||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.*/
|
||||
|
||||
/**
|
||||
* Class for object containing base code for the Canopy channel client.
|
||||
*/
|
||||
class channel{
|
||||
/**
|
||||
* Instantiates a new channel object
|
||||
*/
|
||||
constructor(){
|
||||
//Establish connetion to the server via socket.io
|
||||
this.connect();
|
||||
//Define socket listeners
|
||||
this.defineListeners();
|
||||
|
||||
//Flag youtube iframe-embed api as unloaded
|
||||
/**
|
||||
* Returns true once the ytEmbed API has loaded in from google (eww)
|
||||
*/
|
||||
this.ytEmbedAPILoaded = false;
|
||||
|
||||
//Scrape channel name off URL
|
||||
/**
|
||||
* Current connected channels name
|
||||
*/
|
||||
this.channelName = window.location.pathname.split('/c/')[1].split('/')[0];
|
||||
|
||||
//Create the Video Player Object
|
||||
/**
|
||||
* Child Video Player object
|
||||
*/
|
||||
this.player = new player(this);
|
||||
//Create the Chat Box Object
|
||||
|
||||
/**
|
||||
* Child Chat Box Object
|
||||
*/
|
||||
this.chatBox = new chatBox(this);
|
||||
//Create the User List Object
|
||||
|
||||
/**
|
||||
* Child User List Object
|
||||
*/
|
||||
this.userList = new userList(this);
|
||||
//Create the Canopy Panel Object
|
||||
|
||||
/**
|
||||
* Child Canopy Panel Object
|
||||
*/
|
||||
this.cPanel = new cPanel(this);
|
||||
|
||||
//Set defaults for any unset settings and run any required process steps for the current config
|
||||
|
|
@ -43,6 +64,9 @@ class channel{
|
|||
console.log("👁️👄👁️ ℬℴ𝓊𝓃𝒿ℴ𝓊𝓇.");
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles initial client connection
|
||||
*/
|
||||
connect(){
|
||||
this.socket = io({
|
||||
extraHeaders: {
|
||||
|
|
@ -52,6 +76,9 @@ class channel{
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines network-related listeners
|
||||
*/
|
||||
defineListeners(){
|
||||
this.socket.on("connect", () => {
|
||||
document.title = `${this.channelName} - Connected`
|
||||
|
|
@ -82,6 +109,10 @@ class channel{
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles initial client-metadata ingestion from server upon connection
|
||||
* @param {Object} data - Data glob from server
|
||||
*/
|
||||
handleClientInfo(data){
|
||||
//Ingest user data
|
||||
this.user = data.user;
|
||||
|
|
@ -107,6 +138,11 @@ class channel{
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Processes and applies default config on any unset settings
|
||||
* @param {Boolean} force - Whether or not to forcefully reset already set settings
|
||||
* @param {Boolean} processConfig - Whether or not to run the Process Config function once complete
|
||||
*/
|
||||
setDefaults(force = false, processConfig = false){
|
||||
//Iterate through default config
|
||||
for(let [key, value] of channel.defaultConfig){
|
||||
|
|
@ -124,6 +160,11 @@ class channel{
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Run once every config change to ensure settings are properly set
|
||||
* @param {String} key - Setting to change
|
||||
* @param {*} value - Value to set setting to
|
||||
*/
|
||||
processConfig(key, value){
|
||||
//Switch/case by config key
|
||||
switch(key){
|
||||
|
|
@ -179,12 +220,17 @@ class channel{
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Default channel config
|
||||
*/
|
||||
static defaultConfig = new Map([
|
||||
["ytPlayerType","raw"]
|
||||
]);
|
||||
}
|
||||
|
||||
//Youtube iframe-embed API load handler
|
||||
/**
|
||||
* Youtube iframe-embed API entry point
|
||||
*/
|
||||
function onYouTubeIframeAPIReady(){
|
||||
//Set embed api to true
|
||||
client.ytEmbedAPILoaded = true;
|
||||
|
|
|
|||
|
|
@ -13,25 +13,59 @@ GNU Affero General Public License for more details.
|
|||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.*/
|
||||
|
||||
/**
|
||||
* Class for Object which represents Canopy Chat Box UI
|
||||
*/
|
||||
class chatBox{
|
||||
/**
|
||||
* Instantiates a new Chat Box object
|
||||
* @param {channel} client - Parent client Management Object
|
||||
*/
|
||||
constructor(client){
|
||||
//Client Object
|
||||
/**
|
||||
* Parent CLient Management Object
|
||||
*/
|
||||
this.client = client
|
||||
|
||||
//Booleans
|
||||
/**
|
||||
* Whether or not chat-size should be locked to current media aspect ratio
|
||||
*/
|
||||
this.aspectLock = true;
|
||||
|
||||
/**
|
||||
* Whether or not the chat box should auto-scroll on new chat
|
||||
*/
|
||||
this.autoScroll = true;
|
||||
|
||||
//Numbers
|
||||
/**
|
||||
* Chat Buffer Scroll Top on last scroll
|
||||
*/
|
||||
this.lastPos = 0;
|
||||
|
||||
/**
|
||||
* Height of Chat Buffer on last scroll
|
||||
*/
|
||||
this.lastHeight = 0;
|
||||
|
||||
/**
|
||||
* Width of Chat Buffer on last scroll
|
||||
*/
|
||||
this.lastWidth = 0;
|
||||
|
||||
//clickDragger object
|
||||
/**
|
||||
* Click-Dragger Object for handling dynamic chat/video split re-sizing
|
||||
*/
|
||||
this.clickDragger = new canopyUXUtils.clickDragger("#chat-panel-drag-handle", "#chat-panel-div");
|
||||
|
||||
//Preprocessor objects
|
||||
/**
|
||||
* Command Pre-Processor Object
|
||||
*/
|
||||
this.commandPreprocessor = new commandPreprocessor(client);
|
||||
|
||||
/**
|
||||
* Chat Post-Processor Object
|
||||
*/
|
||||
this.chatPostprocessor = new chatPostprocessor(client);
|
||||
|
||||
//Element Nodes
|
||||
|
|
@ -145,8 +179,6 @@ class chatBox{
|
|||
chatBody.classList.add("chat-panel-buffer","chat-entry-body");
|
||||
chatEntry.appendChild(chatBody);
|
||||
|
||||
console.log(data);
|
||||
|
||||
//Append the post-processed chat-body to the chat buffer
|
||||
this.chatBuffer.appendChild(this.chatPostprocessor.postprocess(chatEntry, data));
|
||||
|
||||
|
|
|
|||
|
|
@ -13,10 +13,29 @@ GNU Affero General Public License for more details.
|
|||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.*/
|
||||
|
||||
/**
|
||||
* Class for object containing chat and command pre-processing logic
|
||||
*/
|
||||
class commandPreprocessor{
|
||||
/**
|
||||
* Instantiates a new commandPreprocessor object
|
||||
* @param {channel} client - Parent client Management Object
|
||||
*/
|
||||
constructor(client){
|
||||
/**
|
||||
* Parent Client Management object
|
||||
*/
|
||||
this.client = client;
|
||||
|
||||
/**
|
||||
* Child Command Processor object
|
||||
*/
|
||||
this.commandProcessor = new commandProcessor(client);
|
||||
|
||||
/**
|
||||
* Set of arrays containing site-wide, channel-wide, and user-specific emotes
|
||||
*/
|
||||
this.emotes = {
|
||||
site: [],
|
||||
chan: [],
|
||||
|
|
@ -27,6 +46,9 @@ class commandPreprocessor{
|
|||
this.defineListeners();
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines Network-Related Listeners
|
||||
*/
|
||||
defineListeners(){
|
||||
//When we receive site-wide emote list
|
||||
this.client.socket.on("siteEmotes", this.setSiteEmotes.bind(this));
|
||||
|
|
@ -35,21 +57,34 @@ class commandPreprocessor{
|
|||
this.client.socket.on("usedTokes", this.setUsedTokes.bind(this));
|
||||
}
|
||||
|
||||
/**
|
||||
* Pre-Processes a single chat/command before sending it off to the server
|
||||
* @param {String} command - Chat/Command to pre-process
|
||||
*/
|
||||
preprocess(command){
|
||||
//Set command and sendFlag
|
||||
this.command = command;
|
||||
this.sendFlag = true;
|
||||
|
||||
//Attempt to process as local command
|
||||
this.processLocalCommand();
|
||||
|
||||
//If we made it through the local command processor
|
||||
if(this.sendFlag){
|
||||
//Set the message to the command
|
||||
this.message = command;
|
||||
//Process message emotes into links
|
||||
this.processEmotes();
|
||||
//Process unmarked links into marked links
|
||||
this.processLinks();
|
||||
//Send command off to server
|
||||
this.sendRemoteCommand();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Processes local commands, starting with '/'
|
||||
*/
|
||||
processLocalCommand(){
|
||||
//Create an empty array to hold the command
|
||||
this.commandArray = [];
|
||||
|
|
@ -70,6 +105,9 @@ class commandPreprocessor{
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Processes emotes refrences in loaded message into links to be further processed by processLinks()
|
||||
*/
|
||||
processEmotes(){
|
||||
//inject invisible whitespace in-between emotes to prevent from mushing links together
|
||||
this.message = this.message.replaceAll('][',']ㅤ[');
|
||||
|
|
@ -84,6 +122,9 @@ class commandPreprocessor{
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Processes links into numbered file seperators, putting links into a dedicated array.
|
||||
*/
|
||||
processLinks(){
|
||||
//Strip out file seperators in-case the user is being a smart-ass
|
||||
this.message = this.message.replaceAll('␜','');
|
||||
|
|
@ -109,26 +150,50 @@ class commandPreprocessor{
|
|||
this.message = splitMessage.join('');
|
||||
}
|
||||
|
||||
/**
|
||||
* Transmits message/command off to server
|
||||
*/
|
||||
sendRemoteCommand(){
|
||||
this.client.socket.emit("chatMessage",{msg: this.message, links: this.links});
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets site emotes
|
||||
* @param {Object} data - Emote data from server
|
||||
*/
|
||||
setSiteEmotes(data){
|
||||
this.emotes.site = data;
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets channel emotes
|
||||
* @param {Object} data - Emote data from server
|
||||
*/
|
||||
setChanEmotes(data){
|
||||
this.emotes.chan = data;
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets personal emotes
|
||||
* @param {Object} data - Emote data from server
|
||||
*/
|
||||
setPersonalEmotes(data){
|
||||
this.emotes.personal = data;
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets used tokes
|
||||
* @param {Object} data - Used toke data from server
|
||||
*/
|
||||
setUsedTokes(data){
|
||||
this.usedTokes = data.tokes;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetches emote by link
|
||||
* @param {String} link - Link to fetch emote with
|
||||
* @returns {Object} found emote
|
||||
*/
|
||||
getEmoteByLink(link){
|
||||
//Create an empty variable to hold the found emote
|
||||
var foundEmote = null;
|
||||
|
|
@ -148,6 +213,10 @@ class commandPreprocessor{
|
|||
return foundEmote;
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates flat list of emote names
|
||||
* @returns {Array} List of strings containing emote names
|
||||
*/
|
||||
getEmoteNames(){
|
||||
//Create an empty array to hold names
|
||||
let names = [];
|
||||
|
|
@ -165,6 +234,10 @@ class commandPreprocessor{
|
|||
return names;
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates auto-complete dictionary from pre-written commands, emotes, and used tokes from servers for use with autocomplete
|
||||
* @returns {Object} Generated Dictionary object
|
||||
*/
|
||||
buildAutocompleteDictionary(){
|
||||
let dictionary = {
|
||||
tokes: {
|
||||
|
|
@ -226,11 +299,25 @@ class commandPreprocessor{
|
|||
|
||||
}
|
||||
|
||||
/**
|
||||
* Class for Object which contains logic for client-side commands
|
||||
*/
|
||||
class commandProcessor{
|
||||
/**
|
||||
* Instantiates a new Command Processor object
|
||||
* @param {channel} client - Parent client mgmt object
|
||||
*/
|
||||
constructor(client){
|
||||
/**
|
||||
* Parent Client Management object
|
||||
*/
|
||||
this.client = client
|
||||
}
|
||||
|
||||
/**
|
||||
* Method handling /high client command
|
||||
* @param {Array} argumentArray - Array of arguments passed down from Command Pre-Processor
|
||||
*/
|
||||
high(argumentArray){
|
||||
//If we have an argument
|
||||
if(argumentArray[1]){
|
||||
|
|
|
|||
|
|
@ -14,39 +14,114 @@ GNU Affero General Public License for more details.
|
|||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.*/
|
||||
|
||||
/**
|
||||
* Class for Object containing code for managing the Canopy Panel UX
|
||||
*/
|
||||
class cPanel{
|
||||
/**
|
||||
* Instantiates a new Canopy Panel Management object
|
||||
* @param {channel} client - Parent client Management Object
|
||||
*/
|
||||
constructor(client){
|
||||
//Client Object
|
||||
/**
|
||||
* Parent Client Management object
|
||||
*/
|
||||
this.client = client;
|
||||
|
||||
//Panel Objects
|
||||
/**
|
||||
* Active Panel Object
|
||||
*/
|
||||
this.activePanel = null;
|
||||
|
||||
/**
|
||||
* Pinned Panel Object
|
||||
*/
|
||||
this.pinnedPanel = null;
|
||||
|
||||
/**
|
||||
* Popped Panel Objects
|
||||
*/
|
||||
this.poppedPanels = [];
|
||||
|
||||
//ClickDragger Objects
|
||||
/**
|
||||
* Click-Dragger object for re-sizable active panel
|
||||
*/
|
||||
this.activePanelDragger = new canopyUXUtils.clickDragger("#cpanel-active-drag-handle", "#cpanel-active-div", false, null, false);
|
||||
|
||||
/**
|
||||
* Click-Dragger object for re-sizable pinned panel
|
||||
*/
|
||||
this.pinnedPanelDragger = new canopyUXUtils.clickDragger("#cpanel-pinned-drag-handle", "#cpanel-pinned-div", false, this.client.chatBox.clickDragger);
|
||||
|
||||
//Element Nodes
|
||||
//Active Panel
|
||||
/**
|
||||
* Active Panel Container
|
||||
*/
|
||||
this.activePanelDiv = document.querySelector("#cpanel-active-div");
|
||||
|
||||
/**
|
||||
* Active Panel Title
|
||||
*/
|
||||
this.activePanelTitle = document.querySelector("#cpanel-active-title");
|
||||
|
||||
/**
|
||||
* Active Title Document Div
|
||||
*/
|
||||
this.activePanelDoc = document.querySelector("#cpanel-active-doc");
|
||||
|
||||
/**
|
||||
* Active Panel Pin Icon
|
||||
*/
|
||||
this.activePanelPinIcon = document.querySelector("#cpanel-active-pin-icon");
|
||||
|
||||
/**
|
||||
* Active Panel Pop-Out Icon
|
||||
*/
|
||||
this.activePanelPopoutIcon = document.querySelector("#cpanel-active-popout-icon");
|
||||
|
||||
/**
|
||||
* Active Panel Close Icon
|
||||
*/
|
||||
this.activePanelCloseIcon = document.querySelector("#cpanel-active-close-icon");
|
||||
|
||||
//Pinned Panel
|
||||
/**
|
||||
* Pinned Panel Contianer
|
||||
*/
|
||||
this.pinnedPanelDiv = document.querySelector("#cpanel-pinned-div");
|
||||
|
||||
/**
|
||||
* Pinned Panel Title
|
||||
*/
|
||||
this.pinnedPanelTitle = document.querySelector("#cpanel-pinned-title");
|
||||
|
||||
/**
|
||||
* Pinned Panel Document Div
|
||||
*/
|
||||
this.pinnedPanelDoc = document.querySelector("#cpanel-pinned-doc");
|
||||
|
||||
/**
|
||||
* Pinned Panel Un-Pin Icon
|
||||
*/
|
||||
this.pinnedPanelUnpinIcon = document.querySelector("#cpanel-pinned-unpin-icon");
|
||||
|
||||
/**
|
||||
* Pinned Panel Pop-Out Icon
|
||||
*/
|
||||
this.pinnedPanelPopoutIcon = document.querySelector("#cpanel-pinned-popout-icon");
|
||||
|
||||
/**
|
||||
* Pinned Panel Close Icon
|
||||
*/
|
||||
this.pinnedPanelCloseIcon = document.querySelector("#cpanel-pinned-close-icon");
|
||||
|
||||
this.setupInput();
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines input-related event listeners
|
||||
*/
|
||||
setupInput(){
|
||||
this.activePanelCloseIcon.addEventListener("click", this.hideActivePanel.bind(this));
|
||||
this.activePanelPinIcon.addEventListener("click", this.pinPanel.bind(this));
|
||||
|
|
@ -56,6 +131,11 @@ class cPanel{
|
|||
this.pinnedPanelPopoutIcon.addEventListener("click", this.popPinnedPanel.bind(this));
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets Active Panel
|
||||
* @param {panelObj} panel - Panel Object to set as active
|
||||
* @param {String} panelBody - innerHTML of Panel, pulls from panelObj.getPage() if empty
|
||||
*/
|
||||
async setActivePanel(panel, panelBody){
|
||||
//Set active panel
|
||||
this.activePanel = panel;
|
||||
|
|
@ -73,6 +153,11 @@ class cPanel{
|
|||
this.activePanel.docSwitch();
|
||||
}
|
||||
|
||||
/**
|
||||
* Hides active panel
|
||||
* @param {Event} event - Event passed down from Input Handler
|
||||
* @param {Boolean} keepAlive - Prevents closing panel if true
|
||||
*/
|
||||
hideActivePanel(event, keepAlive = false){
|
||||
if(!keepAlive){
|
||||
this.activePanel.closer();
|
||||
|
|
@ -86,16 +171,27 @@ class cPanel{
|
|||
this.activePanel = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Pins active panel
|
||||
*/
|
||||
pinPanel(){
|
||||
this.setPinnedPanel(this.activePanel, this.activePanelDoc.innerHTML);
|
||||
this.hideActivePanel(null, true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Pop's out active panel
|
||||
*/
|
||||
popActivePanel(){
|
||||
this.popPanel(this.activePanel, this.activePanelDoc.innerHTML);
|
||||
this.hideActivePanel(null, true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets pinned panel
|
||||
* @param {panelObj} panel - Panel Object to apply to panel
|
||||
* @param {String} panelBody - Raw HTML to inject into panel body, defaults to panel page if null
|
||||
*/
|
||||
async setPinnedPanel(panel, panelBody){
|
||||
//Set pinned panel
|
||||
this.pinnedPanel = panel;
|
||||
|
|
@ -117,6 +213,11 @@ class cPanel{
|
|||
this.pinnedPanelDragger.fixCutoff();
|
||||
}
|
||||
|
||||
/**
|
||||
* Hides pinned panel
|
||||
* @param {Event} event - Passed down input event
|
||||
* @param {Boolean} keepAlive - Prevents panel.closer() from running if true
|
||||
*/
|
||||
hidePinnedPanel(event, keepAlive = false){
|
||||
this.pinnedPanelDiv.style.display = "none";
|
||||
|
||||
|
|
@ -127,16 +228,27 @@ class cPanel{
|
|||
this.pinnedPanel = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets pinned panel to active
|
||||
*/
|
||||
unpinPanel(){
|
||||
this.setActivePanel(this.pinnedPanel, this.pinnedPanelDoc.innerHTML);
|
||||
this.hidePinnedPanel(null, true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Pops pinned panel
|
||||
*/
|
||||
popPinnedPanel(){
|
||||
this.popPanel(this.pinnedPanel, this.pinnedPanelDoc.innerHTML);
|
||||
this.hidePinnedPanel(null, true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Pops a new pop-out panel
|
||||
* @param {panelObj} panel - panelObj to apply to the panel
|
||||
* @param {String} panelBody - Raw HTML to inject into panel body, injects panel default if left to null
|
||||
*/
|
||||
popPanel(panel, panelBody){
|
||||
var newPanel = new poppedPanel(panel, panelBody, this)
|
||||
|
||||
|
|
@ -145,15 +257,48 @@ class cPanel{
|
|||
|
||||
}
|
||||
|
||||
/**
|
||||
* Template Class for other Classes for Objects which represent a single Canopy Panel
|
||||
*/
|
||||
class panelObj{
|
||||
/**
|
||||
* Instantiates a new Panel Object
|
||||
* @param {channel} client - Parent client Management Object
|
||||
* @param {String} name - Panel Name
|
||||
* @param {String} pageURL - Panel Default Page URL
|
||||
* @param {Document} panelDocument - Panel Document
|
||||
*/
|
||||
constructor(client, name = "Placeholder Panel", pageURL = "/panel/placeholder", panelDocument = window.document){
|
||||
/**
|
||||
* Panel Name
|
||||
*/
|
||||
this.name = name;
|
||||
|
||||
/**
|
||||
* Panel Default Page URL
|
||||
*/
|
||||
this.pageURL = pageURL;
|
||||
|
||||
/**
|
||||
* Panel Document
|
||||
*/
|
||||
this.panelDocument = panelDocument;
|
||||
|
||||
/**
|
||||
* Current root document panel doc lives within
|
||||
*/
|
||||
this.ownerDoc = this.panelDocument.ownerDocument == null ? this.panelDocument : this.panelDocument.ownerDocument;
|
||||
|
||||
/**
|
||||
* Parent Client Management object
|
||||
*/
|
||||
this.client = client;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetches panel page from the server
|
||||
* @returns {String} Raw panel doc HTML
|
||||
*/
|
||||
async getPage(){
|
||||
var response = await fetch(this.pageURL,{
|
||||
method: "GET",
|
||||
|
|
@ -162,39 +307,84 @@ class panelObj{
|
|||
return await response.text();
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles Document/Panel Changes
|
||||
*/
|
||||
docSwitch(){
|
||||
//Set owner doc
|
||||
this.ownerDoc = this.panelDocument.ownerDocument == null ? this.panelDocument : this.panelDocument.ownerDocument;
|
||||
}
|
||||
|
||||
/**
|
||||
* Called upon panel close/exit
|
||||
*/
|
||||
closer(){
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Class for Objects which represent a single instance of a popped-out panel
|
||||
*/
|
||||
class poppedPanel{
|
||||
/**
|
||||
* Instantiates a new Popped Panel Object
|
||||
* @param {panelObj} panel - Panel Object to apply to Popped Panel
|
||||
* @param {String} panelBody - Raw HTML to inject into panel body, defaults to panel page if null
|
||||
* @param {cPanel} cPanel - Parent Canopy Panel Management Object
|
||||
*/
|
||||
constructor(panel, panelBody, cPanel){
|
||||
//Set Panel Object
|
||||
/**
|
||||
* Panel Object to apply to Popped Panel
|
||||
*/
|
||||
this.panel = panel;
|
||||
//Set Panel Body
|
||||
|
||||
/**
|
||||
* Raw HTML to inject into panel body, defaults to panel page if null
|
||||
*/
|
||||
this.panelBody = panelBody;
|
||||
//Set Window Placeholder
|
||||
|
||||
/**
|
||||
* Browser Window taken up by the Popped Panel
|
||||
*/
|
||||
this.window = null;
|
||||
|
||||
//Element Node Placeholders
|
||||
/**
|
||||
* Popped Panel Container Div
|
||||
*/
|
||||
this.pinnedPanelDiv = null;
|
||||
|
||||
/**
|
||||
* Popped Panel Title
|
||||
*/
|
||||
this.pinnedPanelTitle = null;
|
||||
|
||||
/**
|
||||
* Popped Panel Document Div
|
||||
*/
|
||||
this.pinnedPanelDoc = null;
|
||||
|
||||
/**
|
||||
* Popped Panel Close Icon
|
||||
*/
|
||||
this.pinnedPanelCloseIcon = null;
|
||||
|
||||
//Functions
|
||||
/**
|
||||
* Parent Canopy Panel Management Object
|
||||
*/
|
||||
this.cPanel = cPanel;
|
||||
|
||||
/**
|
||||
* Disables this.panel.closer() calls from this.closer()
|
||||
*/
|
||||
this.keepAlive = false;
|
||||
|
||||
//Continue constructor asynchrnously
|
||||
this.asyncConstructor();
|
||||
}
|
||||
|
||||
/**
|
||||
* Continuation of constructor method for asynchronous function calls
|
||||
*/
|
||||
async asyncConstructor(){
|
||||
//Set panel body properly
|
||||
this.panelBody = (this.panelBody == null || this.panelBody == "") ? await this.panel.getPage() : this.panelBody;
|
||||
|
|
@ -203,12 +393,18 @@ class poppedPanel{
|
|||
this.popContainer();
|
||||
}
|
||||
|
||||
/**
|
||||
* Pops/Opens container window upon start
|
||||
*/
|
||||
popContainer(){
|
||||
//Set Window Object
|
||||
this.window = window.open("/panel/popoutContainer","",`menubar=no,height=850,width=600`);
|
||||
this.window.addEventListener("load", this.fillContainer.bind(this));
|
||||
}
|
||||
|
||||
/**
|
||||
* Fills container window with Popped Panel container elements
|
||||
*/
|
||||
fillContainer(){
|
||||
//Set Element Nodes
|
||||
this.panelDiv = this.window.document.querySelector("#cpanel-div");
|
||||
|
|
@ -231,12 +427,18 @@ class poppedPanel{
|
|||
this.setupInput();
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines default input-related popped-panel Event Listeners
|
||||
*/
|
||||
setupInput(){
|
||||
this.panelPopinIcon.addEventListener("click", this.unpop.bind(this));
|
||||
this.panelPinIcon.addEventListener("click", this.pin.bind(this));
|
||||
this.window.addEventListener("unload", this.closer.bind(this));
|
||||
}
|
||||
|
||||
/**
|
||||
* Called upon close/exit of panel
|
||||
*/
|
||||
closer(){
|
||||
if(!this.keepAlive){
|
||||
this.panel.closer();
|
||||
|
|
@ -245,6 +447,9 @@ class poppedPanel{
|
|||
this.cPanel.poppedPanels.splice(this.cPanel.poppedPanels.indexOf(this),1);
|
||||
}
|
||||
|
||||
/**
|
||||
* Un-pops panel into active-panel slot
|
||||
*/
|
||||
unpop(){
|
||||
//Set active panel
|
||||
this.cPanel.setActivePanel(this.panel, this.panelDoc.innerHTML);
|
||||
|
|
@ -255,6 +460,9 @@ class poppedPanel{
|
|||
this.window.close();
|
||||
}
|
||||
|
||||
/**
|
||||
* Pins panel next to chat
|
||||
*/
|
||||
pin(){
|
||||
this.cPanel.setPinnedPanel(this.panel, this.panelDoc.innerHTML);
|
||||
|
||||
|
|
|
|||
|
|
@ -14,37 +14,116 @@ GNU Affero General Public License for more details.
|
|||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.*/
|
||||
|
||||
/**
|
||||
* Class for objects which represent Canopy Player UX
|
||||
*/
|
||||
class player{
|
||||
/**
|
||||
* Instantiates a new Canopy Player object
|
||||
* @param {channel} client - Parent client Management Object
|
||||
*/
|
||||
constructor (client){
|
||||
//client obj
|
||||
/**
|
||||
* Parent CLient Management Object
|
||||
*/
|
||||
this.client = client;
|
||||
|
||||
//booleans
|
||||
/**
|
||||
* Whether or not the mouse cursor is floating over player UX
|
||||
*/
|
||||
this.onUI = false;
|
||||
|
||||
/**
|
||||
* Whether or not player scrub is locked to sync signal from the server
|
||||
*/
|
||||
this.syncLock = true;
|
||||
|
||||
//timers
|
||||
/**
|
||||
* Player UX Stow-Away timer
|
||||
*/
|
||||
this.uiTimer = setTimeout(this.toggleUI.bind(this), 1500, false);
|
||||
|
||||
//elements
|
||||
/**
|
||||
* Top-Level Player Container Div
|
||||
*/
|
||||
this.playerDiv = document.querySelector("#media-panel-div");
|
||||
|
||||
/**
|
||||
* Player Element Container Div
|
||||
*/
|
||||
this.videoContainer = document.querySelector("#media-panel-video-container")
|
||||
|
||||
/**
|
||||
* Page Nav-Par
|
||||
*/
|
||||
this.navBar = document.querySelector("#navbar");
|
||||
|
||||
/**
|
||||
* Auto-Hiding Player UI
|
||||
*/
|
||||
this.uiBar = document.querySelector("#media-panel-head-div");
|
||||
|
||||
/**
|
||||
* Player Title Label
|
||||
*/
|
||||
this.title = document.querySelector("#media-panel-title-paragraph");
|
||||
|
||||
/**
|
||||
* Player Show Video Icon
|
||||
*/
|
||||
this.showVideoIcon = document.querySelector("#chat-panel-show-video-icon");
|
||||
|
||||
/**
|
||||
* Player Hide Video Icon
|
||||
*/
|
||||
this.hideVideoIcon = document.querySelector("#media-panel-div-toggle-icon");
|
||||
|
||||
/**
|
||||
* Player Syncronization Icon
|
||||
*/
|
||||
this.syncIcon = document.querySelector("#media-panel-sync-icon");
|
||||
|
||||
/**
|
||||
* Player Cinema-Mode Icon
|
||||
*/
|
||||
this.cinemaModeIcon = document.querySelector("#media-panel-cinema-mode-icon");
|
||||
|
||||
/**
|
||||
* Player Filp Video Y Icon
|
||||
*/
|
||||
this.flipYIcon = document.querySelector("#media-panel-flip-vertical-icon")
|
||||
|
||||
/**
|
||||
* Player Flip Video X Icon
|
||||
*/
|
||||
this.flipXIcon = document.querySelector("#media-panel-flip-horizontal-icon")
|
||||
|
||||
/**
|
||||
* Player Media Reload Icon
|
||||
*/
|
||||
this.reloadIcon = document.querySelector("#media-panel-reload-icon");
|
||||
|
||||
//Numbers
|
||||
/**
|
||||
* Tolerance between timestamp from server and actual media before corrective seek for pre-recorded media
|
||||
*/
|
||||
this.syncTolerance = 0.4;
|
||||
//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...
|
||||
|
||||
/**
|
||||
* 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;
|
||||
|
||||
/**
|
||||
* Forced time to wait between sync checks, heavily decreases chance of seek-banging without reducing syncornization accuracy
|
||||
*/
|
||||
this.syncDelta = 6;
|
||||
|
||||
/**
|
||||
* Current Player Volume
|
||||
*/
|
||||
this.volume = 1;
|
||||
|
||||
//run setup functions
|
||||
|
|
@ -52,6 +131,9 @@ class player{
|
|||
this.defineListeners();
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines Input-Related Event Listeners for the player
|
||||
*/
|
||||
setupInput(){
|
||||
//UIBar Movement Detection
|
||||
this.playerDiv.addEventListener("mousemove", this.popUI.bind(this));
|
||||
|
|
@ -69,6 +151,9 @@ class player{
|
|||
this.reloadIcon.addEventListener("click", this.reload.bind(this));
|
||||
}
|
||||
|
||||
/**
|
||||
* Define Network-Related Event Listeners for the player
|
||||
*/
|
||||
defineListeners(){
|
||||
this.client.socket.on("start", this.start.bind(this));
|
||||
this.client.socket.on("sync", this.sync.bind(this));
|
||||
|
|
@ -76,6 +161,10 @@ class player{
|
|||
this.client.socket.on("updateCurrentRawFile", this.updateCurrentRawFile.bind(this));
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles command from server to start media
|
||||
* @param {Object} data - Media Metadata from server
|
||||
*/
|
||||
start(data){
|
||||
//If we have an active media handler
|
||||
if(this.mediaHandler != null){
|
||||
|
|
@ -122,6 +211,10 @@ class player{
|
|||
this.mediaHandler.sync(data.timestamp);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles synchronization command from server
|
||||
* @param {Object} data - Syncrhonization Data from Server
|
||||
*/
|
||||
sync(data){
|
||||
if(this.mediaHandler != null){
|
||||
//Get timestamp
|
||||
|
|
@ -142,12 +235,18 @@ class player{
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Reloads the media player
|
||||
*/
|
||||
reload(){
|
||||
if(this.mediaHandler != null){
|
||||
this.mediaHandler.reload();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles End-Media Commands from the Server
|
||||
*/
|
||||
end(){
|
||||
//Call the media handler finisher
|
||||
this.mediaHandler.end();
|
||||
|
|
@ -159,6 +258,10 @@ class player{
|
|||
this.lockSync();
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles Raw-File Metadata Updates from the Server
|
||||
* @param {Object} data - Updadated Raw-File link from Server
|
||||
*/
|
||||
updateCurrentRawFile(data){
|
||||
//typecheck the media handler to see if we really need to do any of this shit, if not...
|
||||
if(this.mediaHandler.type == 'ytEmbed'){
|
||||
|
|
@ -176,6 +279,9 @@ class player{
|
|||
this.start({media: currentItem});
|
||||
}
|
||||
|
||||
/**
|
||||
* Locks player seek to synced timestamp from the server
|
||||
*/
|
||||
lockSync(){
|
||||
//Enable syncing
|
||||
this.syncLock = true;
|
||||
|
|
@ -195,6 +301,9 @@ class player{
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Un-locks player seek to synced timestamp from the server
|
||||
*/
|
||||
unlockSync(){
|
||||
//Unlight the sync icon since we're no longer actively synced
|
||||
this.syncIcon.classList.remove('positive');
|
||||
|
|
@ -203,6 +312,9 @@ class player{
|
|||
this.syncLock = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Flips the video horizontally
|
||||
*/
|
||||
flipX(){
|
||||
//I'm lazy
|
||||
const transform = this.videoContainer.style.transform;
|
||||
|
|
@ -222,6 +334,9 @@ class player{
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Flips the video vertically
|
||||
*/
|
||||
flipY(){
|
||||
//I'm lazy
|
||||
const transform = this.videoContainer.style.transform;
|
||||
|
|
@ -241,6 +356,10 @@ class player{
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Displays UI after player-related input
|
||||
* @param {Event} event - Event passed through by event handler
|
||||
*/
|
||||
popUI(event){
|
||||
this.toggleUI(true);
|
||||
clearTimeout(this.uiTimer);
|
||||
|
|
@ -249,10 +368,18 @@ class player{
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggles UI-Bar on or off
|
||||
* @param {Boolean} show - Whether or not to show the UI-Bar. Defaults to toggle if left unspecified.
|
||||
*/
|
||||
toggleUI(show = this.uiBar.style.display == "none"){
|
||||
this.uiBar.style.display = show ? "flex" : "none";
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggles video on or off
|
||||
* @param {Boolean} show - Whether or not to show the video player. Defaults to toggle if left unspecified
|
||||
*/
|
||||
toggleVideo(show = !this.playerDiv.checkVisibility()){
|
||||
if(show){
|
||||
this.playerDiv.style.display = "flex";
|
||||
|
|
@ -266,6 +393,10 @@ class player{
|
|||
this.client.chatBox.handleVideoToggle(show);
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggles Cinema Mode on or off
|
||||
* @param {Boolean} cinema - Whether or not to enter Cinema Mode. Defaults to toggle if left unspecified
|
||||
*/
|
||||
toggleCinemaMode(cinema = !this.navBar.checkVisibility()){
|
||||
if(cinema){
|
||||
this.navBar.style.display = "flex";
|
||||
|
|
@ -277,12 +408,19 @@ class player{
|
|||
this.client.chatBox.resizeAspect();
|
||||
}
|
||||
|
||||
/**
|
||||
* Informs the class when the user's mouse curosr enters and leaves the UI area
|
||||
* @param {Boolean} onUI - Whether or not onUI should be toggled true
|
||||
*/
|
||||
setOnUI(onUI){
|
||||
this.onUI = onUI;
|
||||
this.popUI();
|
||||
}
|
||||
|
||||
//This way other classes don't need to worry about media handler
|
||||
/**
|
||||
* Calculates ratio of current media object
|
||||
* @returns {Number} Current media aspect ratio as a single floating point number
|
||||
*/
|
||||
getRatio(){
|
||||
//If we have no media handler
|
||||
if(this.mediaHandler == null){
|
||||
|
|
|
|||
|
|
@ -14,15 +14,28 @@ GNU Affero General Public License for more details.
|
|||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.*/
|
||||
|
||||
/**
|
||||
* Class for object containing logic behind userlist UX
|
||||
*/
|
||||
class userList{
|
||||
/**
|
||||
* Instantiates a new userList object
|
||||
* @param {channel} client - Parent client mgmt object
|
||||
*/
|
||||
constructor(client){
|
||||
//Client object
|
||||
/**
|
||||
* Parent Client Management object
|
||||
*/
|
||||
this.client = client
|
||||
|
||||
//Click Dragger Object
|
||||
/**
|
||||
* Click Dragger object for handling userlist resizes
|
||||
*/
|
||||
this.clickDragger = new canopyUXUtils.clickDragger("#chat-panel-users-drag-handle", "#chat-panel-users-div", true, this.client.chatBox.clickDragger);
|
||||
|
||||
//Strings
|
||||
/**
|
||||
* Userlist color array (Maps to css classes)
|
||||
*/
|
||||
this.userColors = [
|
||||
"userlist-color0",
|
||||
"userlist-color1",
|
||||
|
|
@ -32,13 +45,29 @@ class userList{
|
|||
"userlist-color5",
|
||||
"userlist-color6"];
|
||||
|
||||
//Maps
|
||||
/**
|
||||
* Map of usernames to assigned username color
|
||||
*/
|
||||
this.colorMap = new Map();
|
||||
|
||||
//Element Nodes
|
||||
/**
|
||||
* users div
|
||||
*/
|
||||
this.userDiv = document.querySelector("#chat-panel-users-div");
|
||||
|
||||
/**
|
||||
* userlist div
|
||||
*/
|
||||
this.userList = document.querySelector("#chat-panel-users-list-div");
|
||||
|
||||
/**
|
||||
* user count label
|
||||
*/
|
||||
this.userCount = document.querySelector("#chat-panel-user-count");
|
||||
|
||||
/**
|
||||
* userlist toggle button
|
||||
*/
|
||||
this.toggleIcon = document.querySelector("#chat-panel-users-toggle");
|
||||
|
||||
//Call setup functions
|
||||
|
|
@ -46,12 +75,17 @@ class userList{
|
|||
this.defineListeners();
|
||||
}
|
||||
|
||||
//Setup functions
|
||||
/**
|
||||
* Defines input-related event listeners
|
||||
*/
|
||||
setupInput(){
|
||||
this.toggleIcon.addEventListener("click", ()=>{this.toggleUI()});
|
||||
this.userCount.addEventListener("click", ()=>{this.toggleUI()});
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines network-related event listeners
|
||||
*/
|
||||
defineListeners(){
|
||||
this.client.socket.on('userList', (data) => {
|
||||
this.updateList(data);
|
||||
|
|
@ -62,6 +96,10 @@ class userList{
|
|||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates UX after user list change
|
||||
* @param {Array} list - Userlist data from server
|
||||
*/
|
||||
updateList(list){
|
||||
//Clear list and set user count
|
||||
this.userCount.textContent = list.length == 1 ? '1 User' : `${list.length} Users`;
|
||||
|
|
@ -91,6 +129,11 @@ class userList{
|
|||
this.clickDragger.fixCutoff();
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders out a single username to the userlist
|
||||
* @param {String} user - Username to render
|
||||
* @param {String} flair - Flair to render as
|
||||
*/
|
||||
renderUser(user, flair){
|
||||
|
||||
//Create user span
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue