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,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){
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue