rainbownapkin/canopy
1
0
Fork 0
Code Issues 2 Pull requests Actions Packages Projects Releases Wiki Activity
canopy/www/doc/client/player.html

3383 lines
31 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSDoc: Class: player</title>
<script src="scripts/prettify/prettify.js"> </script>
<script src="scripts/prettify/lang-css.js"> </script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
<div id="main">
<h1 class="page-title">Class: player</h1>
<section>
<header>
<h2><span class="attribs"><span class="type-signature"></span></span>player<span class="signature">(client)</span><span class="type-signature"></span></h2>
<div class="class-description">Class which represents Canopy Player UX</div>
</header>
<article>
<div class="container-overview">
<h2>Constructor</h2>
<h4 class="name" id="player"><span class="type-signature"></span>new player<span class="signature">(client)</span><span class="type-signature"></span></h4>
<div class="description">
Instantiates a new Canopy Player object
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>client</code></td>
<td class="type">
<span class="param-type"><a href="channel.html">channel</a></span>
</td>
<td class="description last">Parent client Management Object</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="player.js.html">player.js</a>, <a href="player.js.html#line20">line 20</a>
</li></ul></dd>
</dl>
</div>
<h3 class="subsection-title">Members</h3>
<h4 class="name" id="cinemaModeIcon"><span class="type-signature"></span>cinemaModeIcon<span class="type-signature"></span></h4>
<div class="description">
Player Cinema-Mode Icon
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="player.js.html">player.js</a>, <a href="player.js.html#line90">line 90</a>
</li></ul></dd>
</dl>
<h4 class="name" id="client"><span class="type-signature"></span>client<span class="type-signature"></span></h4>
<div class="description">
Parent CLient Management Object
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="player.js.html">player.js</a>, <a href="player.js.html#line29">line 29</a>
</li></ul></dd>
</dl>
<h4 class="name" id="flipXIcon"><span class="type-signature"></span>flipXIcon<span class="type-signature"></span></h4>
<div class="description">
Player Flip Video X Icon
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="player.js.html">player.js</a>, <a href="player.js.html#line100">line 100</a>
</li></ul></dd>
</dl>
<h4 class="name" id="flipYIcon"><span class="type-signature"></span>flipYIcon<span class="type-signature"></span></h4>
<div class="description">
Player Filp Video Y Icon
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="player.js.html">player.js</a>, <a href="player.js.html#line95">line 95</a>
</li></ul></dd>
</dl>
<h4 class="name" id="hideVideoIcon"><span class="type-signature"></span>hideVideoIcon<span class="type-signature"></span></h4>
<div class="description">
Player Hide Video Icon
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="player.js.html">player.js</a>, <a href="player.js.html#line80">line 80</a>
</li></ul></dd>
</dl>
<h4 class="name" id="navBar"><span class="type-signature"></span>navBar<span class="type-signature"></span></h4>
<div class="description">
Page Nav-Par
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="player.js.html">player.js</a>, <a href="player.js.html#line60">line 60</a>
</li></ul></dd>
</dl>
<h4 class="name" id="onUI"><span class="type-signature"></span>onUI<span class="type-signature"></span></h4>
<div class="description">
Whether or not the mouse cursor is floating over player UX
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="player.js.html">player.js</a>, <a href="player.js.html#line34">line 34</a>
</li></ul></dd>
</dl>
<h4 class="name" id="playerDiv"><span class="type-signature"></span>playerDiv<span class="type-signature"></span></h4>
<div class="description">
Top-Level Player Container Div
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="player.js.html">player.js</a>, <a href="player.js.html#line50">line 50</a>
</li></ul></dd>
</dl>
<h4 class="name" id="reloadIcon"><span class="type-signature"></span>reloadIcon<span class="type-signature"></span></h4>
<div class="description">
Player Media Reload Icon
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="player.js.html">player.js</a>, <a href="player.js.html#line105">line 105</a>
</li></ul></dd>
</dl>
<h4 class="name" id="showVideoIcon"><span class="type-signature"></span>showVideoIcon<span class="type-signature"></span></h4>
<div class="description">
Player Show Video Icon
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="player.js.html">player.js</a>, <a href="player.js.html#line75">line 75</a>
</li></ul></dd>
</dl>
<h4 class="name" id="streamSyncTolerance"><span class="type-signature"></span>streamSyncTolerance<span class="type-signature"></span></h4>
<div class="description">
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...
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="player.js.html">player.js</a>, <a href="player.js.html#line117">line 117</a>
</li></ul></dd>
</dl>
<h4 class="name" id="syncDelta"><span class="type-signature"></span>syncDelta<span class="type-signature"></span></h4>
<div class="description">
Forced time to wait between sync checks, heavily decreases chance of seek-banging without reducing syncornization accuracy
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="player.js.html">player.js</a>, <a href="player.js.html#line122">line 122</a>
</li></ul></dd>
</dl>
<h4 class="name" id="syncIcon"><span class="type-signature"></span>syncIcon<span class="type-signature"></span></h4>
<div class="description">
Player Syncronization Icon
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="player.js.html">player.js</a>, <a href="player.js.html#line85">line 85</a>
</li></ul></dd>
</dl>
<h4 class="name" id="syncLock"><span class="type-signature"></span>syncLock<span class="type-signature"></span></h4>
<div class="description">
Whether or not player scrub is locked to sync signal from the server
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="player.js.html">player.js</a>, <a href="player.js.html#line39">line 39</a>
</li></ul></dd>
</dl>
<h4 class="name" id="syncTolerance"><span class="type-signature"></span>syncTolerance<span class="type-signature"></span></h4>
<div class="description">
Tolerance between timestamp from server and actual media before corrective seek for pre-recorded media
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="player.js.html">player.js</a>, <a href="player.js.html#line110">line 110</a>
</li></ul></dd>
</dl>
<h4 class="name" id="title"><span class="type-signature"></span>title<span class="type-signature"></span></h4>
<div class="description">
Player Title Label
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="player.js.html">player.js</a>, <a href="player.js.html#line70">line 70</a>
</li></ul></dd>
</dl>
<h4 class="name" id="uiBar"><span class="type-signature"></span>uiBar<span class="type-signature"></span></h4>
<div class="description">
Auto-Hiding Player UI
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="player.js.html">player.js</a>, <a href="player.js.html#line65">line 65</a>
</li></ul></dd>
</dl>
<h4 class="name" id="uiTimer"><span class="type-signature"></span>uiTimer<span class="type-signature"></span></h4>
<div class="description">
Player UX Stow-Away timer
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="player.js.html">player.js</a>, <a href="player.js.html#line44">line 44</a>
</li></ul></dd>
</dl>
<h4 class="name" id="videoContainer"><span class="type-signature"></span>videoContainer<span class="type-signature"></span></h4>
<div class="description">
Player Element Container Div
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="player.js.html">player.js</a>, <a href="player.js.html#line55">line 55</a>
</li></ul></dd>
</dl>
<h4 class="name" id="volume"><span class="type-signature"></span>volume<span class="type-signature"></span></h4>
<div class="description">
Current Player Volume
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="player.js.html">player.js</a>, <a href="player.js.html#line127">line 127</a>
</li></ul></dd>
</dl>
<h3 class="subsection-title">Methods</h3>
<h4 class="name" id="defineListeners"><span class="type-signature"></span>defineListeners<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Define Network-Related Event Listeners for the player
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="player.js.html">player.js</a>, <a href="player.js.html#line157">line 157</a>
</li></ul></dd>
</dl>
<h4 class="name" id="end"><span class="type-signature"></span>end<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Handles End-Media Commands from the Server
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="player.js.html">player.js</a>, <a href="player.js.html#line250">line 250</a>
</li></ul></dd>
</dl>
<h4 class="name" id="flipX"><span class="type-signature"></span>flipX<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Flips the video horizontally
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="player.js.html">player.js</a>, <a href="player.js.html#line318">line 318</a>
</li></ul></dd>
</dl>
<h4 class="name" id="flipY"><span class="type-signature"></span>flipY<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Flips the video vertically
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="player.js.html">player.js</a>, <a href="player.js.html#line340">line 340</a>
</li></ul></dd>
</dl>
<h4 class="name" id="getRatio"><span class="type-signature"></span>getRatio<span class="signature">()</span><span class="type-signature"> &rarr; {Number}</span></h4>
<div class="description">
Calculates ratio of current media object
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="player.js.html">player.js</a>, <a href="player.js.html#line424">line 424</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Current media aspect ratio as a single floating point number
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Number</span>
</dd>
</dl>
<h4 class="name" id="lockSync"><span class="type-signature"></span>lockSync<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Locks player seek to synced timestamp from the server
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="player.js.html">player.js</a>, <a href="player.js.html#line285">line 285</a>
</li></ul></dd>
</dl>
<h4 class="name" id="popUI"><span class="type-signature"></span>popUI<span class="signature">(event)</span><span class="type-signature"></span></h4>
<div class="description">
Displays UI after player-related input
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>event</code></td>
<td class="type">
<span class="param-type">Event</span>
</td>
<td class="description last">Event passed through by event handler</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="player.js.html">player.js</a>, <a href="player.js.html#line363">line 363</a>
</li></ul></dd>
</dl>
<h4 class="name" id="reload"><span class="type-signature"></span>reload<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Reloads the media player
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="player.js.html">player.js</a>, <a href="player.js.html#line241">line 241</a>
</li></ul></dd>
</dl>
<h4 class="name" id="setOnUI"><span class="type-signature"></span>setOnUI<span class="signature">(onUI)</span><span class="type-signature"></span></h4>
<div class="description">
Informs the class when the user's mouse curosr enters and leaves the UI area
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>onUI</code></td>
<td class="type">
<span class="param-type">Boolean</span>
</td>
<td class="description last">Whether or not onUI should be toggled true</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="player.js.html">player.js</a>, <a href="player.js.html#line415">line 415</a>
</li></ul></dd>
</dl>
<h4 class="name" id="setupInput"><span class="type-signature"></span>setupInput<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Defines Input-Related Event Listeners for the player
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="player.js.html">player.js</a>, <a href="player.js.html#line137">line 137</a>
</li></ul></dd>
</dl>
<h4 class="name" id="start"><span class="type-signature"></span>start<span class="signature">(data)</span><span class="type-signature"></span></h4>
<div class="description">
Handles command from server to start media
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>data</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="description last">Media Metadata from server</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="player.js.html">player.js</a>, <a href="player.js.html#line168">line 168</a>
</li></ul></dd>
</dl>
<h4 class="name" id="sync"><span class="type-signature"></span>sync<span class="signature">(data)</span><span class="type-signature"></span></h4>
<div class="description">
Handles synchronization command from server
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>data</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="description last">Syncrhonization Data from Server</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="player.js.html">player.js</a>, <a href="player.js.html#line218">line 218</a>
</li></ul></dd>
</dl>
<h4 class="name" id="toggleCinemaMode"><span class="type-signature"></span>toggleCinemaMode<span class="signature">(cinema)</span><span class="type-signature"></span></h4>
<div class="description">
Toggles Cinema Mode on or off
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>cinema</code></td>
<td class="type">
<span class="param-type">Boolean</span>
</td>
<td class="description last">Whether or not to enter Cinema Mode. Defaults to toggle if left unspecified</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="player.js.html">player.js</a>, <a href="player.js.html#line400">line 400</a>
</li></ul></dd>
</dl>
<h4 class="name" id="toggleUI"><span class="type-signature"></span>toggleUI<span class="signature">(show)</span><span class="type-signature"></span></h4>
<div class="description">
Toggles UI-Bar on or off
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>show</code></td>
<td class="type">
<span class="param-type">Boolean</span>
</td>
<td class="description last">Whether or not to show the UI-Bar. Defaults to toggle if left unspecified.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="player.js.html">player.js</a>, <a href="player.js.html#line375">line 375</a>
</li></ul></dd>
</dl>
<h4 class="name" id="toggleVideo"><span class="type-signature"></span>toggleVideo<span class="signature">(show)</span><span class="type-signature"></span></h4>
<div class="description">
Toggles video on or off
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>show</code></td>
<td class="type">
<span class="param-type">Boolean</span>
</td>
<td class="description last">Whether or not to show the video player. Defaults to toggle if left unspecified</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="player.js.html">player.js</a>, <a href="player.js.html#line383">line 383</a>
</li></ul></dd>
</dl>
<h4 class="name" id="unlockSync"><span class="type-signature"></span>unlockSync<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Un-locks player seek to synced timestamp from the server
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="player.js.html">player.js</a>, <a href="player.js.html#line307">line 307</a>
</li></ul></dd>
</dl>
<h4 class="name" id="updateCurrentRawFile"><span class="type-signature"></span>updateCurrentRawFile<span class="signature">(data)</span><span class="type-signature"></span></h4>
<div class="description">
Handles Raw-File Metadata Updates from the Server
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>data</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="description last">Updadated Raw-File link from Server</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="player.js.html">player.js</a>, <a href="player.js.html#line265">line 265</a>
</li></ul></dd>
</dl>
</article>
</section>
</div>
<nav>
<h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="addURLPopup.html">addURLPopup</a></li><li><a href="cPanel.html">cPanel</a></li><li><a href="channel.html">channel</a></li><li><a href="chatBox.html">chatBox</a></li><li><a href="chatPostprocessor.html">chatPostprocessor</a></li><li><a href="commandPreprocessor.html">commandPreprocessor</a></li><li><a href="commandProcessor.html">commandProcessor</a></li><li><a href="defaultTitlesPopup.html">defaultTitlesPopup</a></li><li><a href="emotePanel.html">emotePanel</a></li><li><a href="hlsBase.html">hlsBase</a></li><li><a href="hlsLiveStreamHandler.html">hlsLiveStreamHandler</a></li><li><a href="mediaHandler.html">mediaHandler</a></li><li><a href="newPlaylistPopup.html">newPlaylistPopup</a></li><li><a href="nullHandler.html">nullHandler</a></li><li><a href="panelObj.html">panelObj</a></li><li><a href="player.html">player</a></li><li><a href="playlistManager.html">playlistManager</a></li><li><a href="poppedPanel.html">poppedPanel</a></li><li><a href="rawFileBase.html">rawFileBase</a></li><li><a href="rawFileHandler.html">rawFileHandler</a></li><li><a href="renamePopup.html">renamePopup</a></li><li><a href="settingsPanel.html">settingsPanel</a></li><li><a href="userList.html">userList</a></li><li><a href="youtubeEmbedHandler.html">youtubeEmbedHandler</a></li></ul><h3>Global</h3><ul><li><a href="global.html#onYouTubeIframeAPIReady">onYouTubeIframeAPIReady</a></li></ul>
</nav>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Fri Sep 05 2025 05:55:09 GMT-0400 (Eastern Daylight Time)
</footer>
<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>
Reference in a new issue View git blame Copy permalink