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

3471 lines
32 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#line283">line 283</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#line351">line 351</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#line373">line 373</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#line457">line 457</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="hardReload"><span class="type-signature"></span>hardReload<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Destroys and Re-Creates media handler
</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#line262">line 262</a>
</li></ul></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#line318">line 318</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#line396">line 396</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#line253">line 253</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#line448">line 448</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#line230">line 230</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#line433">line 433</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#line408">line 408</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#line416">line 416</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#line340">line 340</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#line298">line 298</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="clearPopup.html">clearPopup</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="queuePanel.html">queuePanel</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="reschedulePopup.html">reschedulePopup</a></li><li><a href="schedulePopup.html">schedulePopup</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 Sat Sep 06 2025 10:33:49 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