@realsee/vreo 0.1.3 → 0.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/docs/assets/search.js +1 -1
  2. package/docs/classes/Player.Player-1.html +6 -6
  3. package/docs/enums/Player.InfoPanelTypeEnum.html +1 -1
  4. package/docs/enums/Player.PanoEffectEnum.html +1 -1
  5. package/docs/enums/Player.PanoTagEnum.html +1 -1
  6. package/docs/enums/Player.VreoKeyframeEnum.html +10 -10
  7. package/docs/enums/fivePlugins.CameraMovementEffect.html +1 -1
  8. package/docs/enums/fivePlugins.Rotation.html +1 -1
  9. package/docs/interfaces/Player.PlayerConfigs.html +1 -1
  10. package/docs/interfaces/Player.Vertex.html +1 -1
  11. package/docs/interfaces/Player.VreoKeyframe.html +1 -1
  12. package/docs/interfaces/Player.VreoUnit.html +1 -1
  13. package/docs/interfaces/Player.VreoVideo.html +1 -1
  14. package/docs/interfaces/fivePlugins.CameraMovementOptsCallback.html +1 -1
  15. package/docs/interfaces/fivePlugins.CameraMovementPluginExportType.html +2 -2
  16. package/docs/interfaces/fivePlugins.ModelTVVideoPluginData.html +1 -1
  17. package/docs/interfaces/fivePlugins.ModelTVVideoPluginExportType.html +1 -1
  18. package/docs/interfaces/fivePlugins.ModelTVVideoPluginParameterType.html +1 -1
  19. package/docs/interfaces/react.VreoActionCallbacks.html +6 -6
  20. package/docs/modules/Player.html +11 -11
  21. package/docs/modules/fivePlugins.html +2 -2
  22. package/docs/modules/react.html +1 -1
  23. package/lib/Player/index.d.ts +1 -0
  24. package/lib/Player/index.js +33 -28
  25. package/lib/Player/modules/VideoAgent/VideoAgentMesh.d.ts +2 -0
  26. package/lib/Player/modules/VideoAgent/VideoAgentMesh.js +59 -21
  27. package/lib/Player/modules/VideoAgent/VideoAgentScene.d.ts +1 -0
  28. package/lib/Player/modules/VideoAgent/VideoAgentScene.js +6 -0
  29. package/lib/Player/modules/VideoAgent/index.js +6 -0
  30. package/lib/react/index.js +6 -2
  31. package/package.json +2 -2
  32. package/resources/Player/Controller.ts +0 -3
  33. package/resources/Player/index.tsx +31 -25
  34. package/resources/Player/modules/VideoAgent/VideoAgentMesh.ts +62 -19
  35. package/resources/Player/modules/VideoAgent/VideoAgentScene.ts +4 -0
  36. package/resources/Player/modules/VideoAgent/index.tsx +5 -0
  37. package/resources/react/index.tsx +5 -2
package/docs/modules/react.html CHANGED
@@ -1 +1 @@
1
- <!DOCTYPE html><html class="default"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>react | Vreo</title><meta name="description" content="Documentation for Vreo"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><link rel="stylesheet" href="../assets/custom.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.body.classList.add(localStorage.getItem("tsd-theme") || "os")</script><header><div class="tsd-page-toolbar"><div class="container"><div class="table-wrap"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget search no-caption">Search</label><input type="text" id="tsd-search-field"/></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">Vreo</a></div><div class="table-cell" id="tsd-widgets"><div id="tsd-filter"><a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a><div class="tsd-filter-group"><div class="tsd-select" id="tsd-filter-visibility"><span class="tsd-select-label">All</span><ul class="tsd-select-list"><li data-value="public">Public</li><li data-value="protected">Public/Protected</li><li data-value="private" class="selected">All</li></ul></div> <input type="checkbox" id="tsd-filter-inherited" checked/><label class="tsd-widget" for="tsd-filter-inherited">Inherited</label><input type="checkbox" id="tsd-filter-externals" checked/><label class="tsd-widget" for="tsd-filter-externals">Externals</label></div></div><a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a></div></div></div></div><div class="tsd-page-title"><div class="container"><ul class="tsd-breadcrumb"><li><a href="../modules.html">Vreo</a></li><li><a href="react.html">react</a></li></ul><h1>Module react</h1></div></div></header><div class="container container-main"><div class="row"><div class="col-8 col-content"><section class="tsd-panel-group tsd-index-group"><h2>Index</h2><section class="tsd-panel tsd-index-panel"><div class="tsd-index-content"><section class="tsd-index-section "><h3>Interfaces</h3><ul class="tsd-index-list"><li class="tsd-kind-interface tsd-parent-kind-module"><a href="../interfaces/react.VreoActionCallbacks.html" class="tsd-kind-icon">Vreo<wbr/>Action<wbr/>Callbacks</a></li></ul></section><section class="tsd-index-section "><h3>Variables</h3><ul class="tsd-index-list"><li class="tsd-kind-variable tsd-parent-kind-module"><a href="react.html#VreoProvider" class="tsd-kind-icon">Vreo<wbr/>Provider</a></li></ul></section><section class="tsd-index-section "><h3>Functions</h3><ul class="tsd-index-list"><li class="tsd-kind-function tsd-parent-kind-module"><a href="react.html#useVreoAction" class="tsd-kind-icon">use<wbr/>Vreo<wbr/>Action</a></li><li class="tsd-kind-function tsd-parent-kind-module tsd-has-type-parameter"><a href="react.html#useVreoEventCallback" class="tsd-kind-icon">use<wbr/>Vreo<wbr/>Event<wbr/>Callback</a></li><li class="tsd-kind-function tsd-parent-kind-module"><a href="react.html#useVreoPausedState" class="tsd-kind-icon">use<wbr/>Vreo<wbr/>Paused<wbr/>State</a></li></ul></section></div></section></section><section class="tsd-panel-group tsd-member-group "><h2>Variables</h2><section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-module"><a id="VreoProvider" class="tsd-anchor"></a><h3>Vreo<wbr/>Provider</h3><div class="tsd-signature tsd-kind-icon">Vreo<wbr/>Provider<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">React.FC</span><span class="tsd-signature-symbol"> = ...</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/realsee-developer/vreo/blob/476eacf/resources/react/index.tsx#L8">resources/react/index.tsx:8</a></li></ul></aside></section></section><section class="tsd-panel-group tsd-member-group "><h2>Functions</h2><section class="tsd-panel tsd-member tsd-kind-function tsd-parent-kind-module"><a id="useVreoAction" class="tsd-anchor"></a><h3>use<wbr/>Vreo<wbr/>Action</h3><ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module"><li class="tsd-signature tsd-kind-icon">use<wbr/>Vreo<wbr/>Action<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">{ </span>dispose<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">; </span>hide<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">; </span>load<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span>vreoUnit<span class="tsd-signature-symbol">: </span><a href="../interfaces/Player.VreoUnit.html" class="tsd-signature-type" data-tsd-kind="Interface">VreoUnit</a>, currentTime<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">; </span>pause<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">; </span>play<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>show<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol"> }</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/realsee-developer/vreo/blob/476eacf/resources/react/index.tsx#L64">resources/react/index.tsx:64</a></li></ul></aside><h4 class="tsd-returns-title">Returns <span class="tsd-signature-symbol">{ </span>dispose<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">; </span>hide<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">; </span>load<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span>vreoUnit<span class="tsd-signature-symbol">: </span><a href="../interfaces/Player.VreoUnit.html" class="tsd-signature-type" data-tsd-kind="Interface">VreoUnit</a>, currentTime<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">; </span>pause<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">; </span>play<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>show<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol"> }</span></h4><ul class="tsd-parameters"><li class="tsd-parameter"><h5>dispose<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">void</span></h5><ul class="tsd-parameters"><li class="tsd-parameter-signature"><ul class="tsd-signatures tsd-kind-type-literal tsd-parent-kind-type-literal"><li class="tsd-signature tsd-kind-icon"><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></li></ul></li><li class="tsd-parameter"><h5>hide<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">void</span></h5><ul class="tsd-parameters"><li class="tsd-parameter-signature"><ul class="tsd-signatures tsd-kind-type-literal tsd-parent-kind-type-literal"><li class="tsd-signature tsd-kind-icon"><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></li></ul></li><li class="tsd-parameter"><h5>load<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span>vreoUnit<span class="tsd-signature-symbol">: </span><a href="../interfaces/Player.VreoUnit.html" class="tsd-signature-type" data-tsd-kind="Interface">VreoUnit</a>, currentTime<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">&gt;</span></h5><ul class="tsd-parameters"><li class="tsd-parameter-signature"><ul class="tsd-signatures tsd-kind-type-literal tsd-parent-kind-type-literal"><li class="tsd-signature tsd-kind-icon"><span class="tsd-signature-symbol">(</span>vreoUnit<span class="tsd-signature-symbol">: </span><a href="../interfaces/Player.VreoUnit.html" class="tsd-signature-type" data-tsd-kind="Interface">VreoUnit</a>, currentTime<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">&gt;</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>vreoUnit: <a href="../interfaces/Player.VreoUnit.html" class="tsd-signature-type" data-tsd-kind="Interface">VreoUnit</a></h5></li><li><h5><span class="tsd-flag ts-flagOptional">Optional</span> currentTime: <span class="tsd-signature-type">number</span></h5></li></ul><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">&gt;</span></h4></li></ul></li></ul></li><li class="tsd-parameter"><h5>pause<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">void</span></h5><ul class="tsd-parameters"><li class="tsd-parameter-signature"><ul class="tsd-signatures tsd-kind-type-literal tsd-parent-kind-type-literal"><li class="tsd-signature tsd-kind-icon"><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></li></ul></li><li class="tsd-parameter"><h5>play<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">boolean</span></h5><ul class="tsd-parameters"><li class="tsd-parameter-signature"><ul class="tsd-signatures tsd-kind-type-literal tsd-parent-kind-type-literal"><li class="tsd-signature tsd-kind-icon"><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4></li></ul></li></ul></li><li class="tsd-parameter"><h5>show<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">void</span></h5><ul class="tsd-parameters"><li class="tsd-parameter-signature"><ul class="tsd-signatures tsd-kind-type-literal tsd-parent-kind-type-literal"><li class="tsd-signature tsd-kind-icon"><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></li></ul></li></ul></li></ul></section><section class="tsd-panel tsd-member tsd-kind-function tsd-parent-kind-module tsd-has-type-parameter"><a id="useVreoEventCallback" class="tsd-anchor"></a><h3>use<wbr/>Vreo<wbr/>Event<wbr/>Callback</h3><ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module tsd-has-type-parameter"><li class="tsd-signature tsd-kind-icon">use<wbr/>Vreo<wbr/>Event<wbr/>Callback<span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">T</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span>name<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">T</span>, callback<span class="tsd-signature-symbol">: </span><a href="Player.html#VreoKeyframeEvent" class="tsd-signature-type" data-tsd-kind="Type alias">VreoKeyframeEvent</a><span class="tsd-signature-symbol">[</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">T</span><span class="tsd-signature-symbol">]</span>, deps<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">DependencyList</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/realsee-developer/vreo/blob/476eacf/resources/react/index.tsx#L81">resources/react/index.tsx:81</a></li></ul></aside><h4 class="tsd-type-parameters-title">Type parameters</h4><ul class="tsd-type-parameters"><li><h4>T<span class="tsd-signature-symbol">: </span><a href="../enums/Player.VreoKeyframeEnum.html" class="tsd-signature-type" data-tsd-kind="Enumeration">VreoKeyframeEnum</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">&quot;paused&quot;</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">&quot;playing&quot;</span></h4></li></ul><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>name: <span class="tsd-signature-type" data-tsd-kind="Type parameter">T</span></h5></li><li><h5>callback: <a href="Player.html#VreoKeyframeEvent" class="tsd-signature-type" data-tsd-kind="Type alias">VreoKeyframeEvent</a><span class="tsd-signature-symbol">[</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">T</span><span class="tsd-signature-symbol">]</span></h5></li><li><h5><span class="tsd-flag ts-flagOptional">Optional</span> deps: <span class="tsd-signature-type">DependencyList</span></h5></li></ul><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></section><section class="tsd-panel tsd-member tsd-kind-function tsd-parent-kind-module"><a id="useVreoPausedState" class="tsd-anchor"></a><h3>use<wbr/>Vreo<wbr/>Paused<wbr/>State</h3><ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module"><li class="tsd-signature tsd-kind-icon">use<wbr/>Vreo<wbr/>Paused<wbr/>State<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/realsee-developer/vreo/blob/476eacf/resources/react/index.tsx#L101">resources/react/index.tsx:101</a></li></ul></aside><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4></li></ul></section></section></div><div class="col-4 col-menu menu-sticky-wrap menu-highlight"><nav class="tsd-navigation primary"><ul><li class=""><a href="../modules.html">Modules</a></li><li class=" tsd-kind-module"><a href="Player.html">Player</a></li><li class=" tsd-kind-module"><a href="fivePlugins.html">five<wbr/>Plugins</a></li><li class="current tsd-kind-module"><a href="react.html">react</a></li></ul></nav><nav class="tsd-navigation secondary menu-sticky"><ul><li class="tsd-kind-interface tsd-parent-kind-module"><a href="../interfaces/react.VreoActionCallbacks.html" class="tsd-kind-icon">Vreo<wbr/>Action<wbr/>Callbacks</a></li><li class="tsd-kind-variable tsd-parent-kind-module"><a href="react.html#VreoProvider" class="tsd-kind-icon">Vreo<wbr/>Provider</a></li><li class="tsd-kind-function tsd-parent-kind-module"><a href="react.html#useVreoAction" class="tsd-kind-icon">use<wbr/>Vreo<wbr/>Action</a></li><li class="tsd-kind-function tsd-parent-kind-module tsd-has-type-parameter"><a href="react.html#useVreoEventCallback" class="tsd-kind-icon">use<wbr/>Vreo<wbr/>Event<wbr/>Callback</a></li><li class="tsd-kind-function tsd-parent-kind-module"><a href="react.html#useVreoPausedState" class="tsd-kind-icon">use<wbr/>Vreo<wbr/>Paused<wbr/>State</a></li></ul></nav></div></div></div><footer class=""><div class="container"><h2>Legend</h2><div class="tsd-legend-group"><ul class="tsd-legend"><li class="tsd-kind-variable"><span class="tsd-kind-icon">Variable</span></li><li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li><li class="tsd-kind-function tsd-has-type-parameter"><span class="tsd-kind-icon">Function with type parameter</span></li><li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li></ul><ul class="tsd-legend"><li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li></ul><ul class="tsd-legend"><li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li></ul><ul class="tsd-legend"><li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li></ul></div><h2>Settings</h2><p>Theme <select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></p></div></footer><div class="overlay"></div><script src="../assets/main.js"></script></body></html>
1
+ <!DOCTYPE html><html class="default"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>react | Vreo</title><meta name="description" content="Documentation for Vreo"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><link rel="stylesheet" href="../assets/custom.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.body.classList.add(localStorage.getItem("tsd-theme") || "os")</script><header><div class="tsd-page-toolbar"><div class="container"><div class="table-wrap"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget search no-caption">Search</label><input type="text" id="tsd-search-field"/></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">Vreo</a></div><div class="table-cell" id="tsd-widgets"><div id="tsd-filter"><a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a><div class="tsd-filter-group"><div class="tsd-select" id="tsd-filter-visibility"><span class="tsd-select-label">All</span><ul class="tsd-select-list"><li data-value="public">Public</li><li data-value="protected">Public/Protected</li><li data-value="private" class="selected">All</li></ul></div> <input type="checkbox" id="tsd-filter-inherited" checked/><label class="tsd-widget" for="tsd-filter-inherited">Inherited</label><input type="checkbox" id="tsd-filter-externals" checked/><label class="tsd-widget" for="tsd-filter-externals">Externals</label></div></div><a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a></div></div></div></div><div class="tsd-page-title"><div class="container"><ul class="tsd-breadcrumb"><li><a href="../modules.html">Vreo</a></li><li><a href="react.html">react</a></li></ul><h1>Module react</h1></div></div></header><div class="container container-main"><div class="row"><div class="col-8 col-content"><section class="tsd-panel-group tsd-index-group"><h2>Index</h2><section class="tsd-panel tsd-index-panel"><div class="tsd-index-content"><section class="tsd-index-section "><h3>Interfaces</h3><ul class="tsd-index-list"><li class="tsd-kind-interface tsd-parent-kind-module"><a href="../interfaces/react.VreoActionCallbacks.html" class="tsd-kind-icon">Vreo<wbr/>Action<wbr/>Callbacks</a></li></ul></section><section class="tsd-index-section "><h3>Variables</h3><ul class="tsd-index-list"><li class="tsd-kind-variable tsd-parent-kind-module"><a href="react.html#VreoProvider" class="tsd-kind-icon">Vreo<wbr/>Provider</a></li></ul></section><section class="tsd-index-section "><h3>Functions</h3><ul class="tsd-index-list"><li class="tsd-kind-function tsd-parent-kind-module"><a href="react.html#useVreoAction" class="tsd-kind-icon">use<wbr/>Vreo<wbr/>Action</a></li><li class="tsd-kind-function tsd-parent-kind-module tsd-has-type-parameter"><a href="react.html#useVreoEventCallback" class="tsd-kind-icon">use<wbr/>Vreo<wbr/>Event<wbr/>Callback</a></li><li class="tsd-kind-function tsd-parent-kind-module"><a href="react.html#useVreoPausedState" class="tsd-kind-icon">use<wbr/>Vreo<wbr/>Paused<wbr/>State</a></li></ul></section></div></section></section><section class="tsd-panel-group tsd-member-group "><h2>Variables</h2><section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-module"><a id="VreoProvider" class="tsd-anchor"></a><h3>Vreo<wbr/>Provider</h3><div class="tsd-signature tsd-kind-icon">Vreo<wbr/>Provider<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">React.FC</span><span class="tsd-signature-symbol"> = ...</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/realsee-developer/vreo/blob/8de06a2/resources/react/index.tsx#L8">resources/react/index.tsx:8</a></li></ul></aside></section></section><section class="tsd-panel-group tsd-member-group "><h2>Functions</h2><section class="tsd-panel tsd-member tsd-kind-function tsd-parent-kind-module"><a id="useVreoAction" class="tsd-anchor"></a><h3>use<wbr/>Vreo<wbr/>Action</h3><ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module"><li class="tsd-signature tsd-kind-icon">use<wbr/>Vreo<wbr/>Action<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">{ </span>dispose<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">; </span>hide<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">; </span>load<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span>vreoUnit<span class="tsd-signature-symbol">: </span><a href="../interfaces/Player.VreoUnit.html" class="tsd-signature-type" data-tsd-kind="Interface">VreoUnit</a>, currentTime<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">; </span>pause<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">; </span>play<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>show<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol"> }</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/realsee-developer/vreo/blob/8de06a2/resources/react/index.tsx#L67">resources/react/index.tsx:67</a></li></ul></aside><h4 class="tsd-returns-title">Returns <span class="tsd-signature-symbol">{ </span>dispose<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">; </span>hide<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">; </span>load<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span>vreoUnit<span class="tsd-signature-symbol">: </span><a href="../interfaces/Player.VreoUnit.html" class="tsd-signature-type" data-tsd-kind="Interface">VreoUnit</a>, currentTime<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">; </span>pause<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">; </span>play<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>show<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol"> }</span></h4><ul class="tsd-parameters"><li class="tsd-parameter"><h5>dispose<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">void</span></h5><ul class="tsd-parameters"><li class="tsd-parameter-signature"><ul class="tsd-signatures tsd-kind-type-literal tsd-parent-kind-type-literal"><li class="tsd-signature tsd-kind-icon"><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></li></ul></li><li class="tsd-parameter"><h5>hide<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">void</span></h5><ul class="tsd-parameters"><li class="tsd-parameter-signature"><ul class="tsd-signatures tsd-kind-type-literal tsd-parent-kind-type-literal"><li class="tsd-signature tsd-kind-icon"><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></li></ul></li><li class="tsd-parameter"><h5>load<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span>vreoUnit<span class="tsd-signature-symbol">: </span><a href="../interfaces/Player.VreoUnit.html" class="tsd-signature-type" data-tsd-kind="Interface">VreoUnit</a>, currentTime<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">&gt;</span></h5><ul class="tsd-parameters"><li class="tsd-parameter-signature"><ul class="tsd-signatures tsd-kind-type-literal tsd-parent-kind-type-literal"><li class="tsd-signature tsd-kind-icon"><span class="tsd-signature-symbol">(</span>vreoUnit<span class="tsd-signature-symbol">: </span><a href="../interfaces/Player.VreoUnit.html" class="tsd-signature-type" data-tsd-kind="Interface">VreoUnit</a>, currentTime<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">&gt;</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>vreoUnit: <a href="../interfaces/Player.VreoUnit.html" class="tsd-signature-type" data-tsd-kind="Interface">VreoUnit</a></h5></li><li><h5><span class="tsd-flag ts-flagOptional">Optional</span> currentTime: <span class="tsd-signature-type">number</span></h5></li></ul><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">&gt;</span></h4></li></ul></li></ul></li><li class="tsd-parameter"><h5>pause<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">void</span></h5><ul class="tsd-parameters"><li class="tsd-parameter-signature"><ul class="tsd-signatures tsd-kind-type-literal tsd-parent-kind-type-literal"><li class="tsd-signature tsd-kind-icon"><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></li></ul></li><li class="tsd-parameter"><h5>play<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">boolean</span></h5><ul class="tsd-parameters"><li class="tsd-parameter-signature"><ul class="tsd-signatures tsd-kind-type-literal tsd-parent-kind-type-literal"><li class="tsd-signature tsd-kind-icon"><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4></li></ul></li></ul></li><li class="tsd-parameter"><h5>show<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">void</span></h5><ul class="tsd-parameters"><li class="tsd-parameter-signature"><ul class="tsd-signatures tsd-kind-type-literal tsd-parent-kind-type-literal"><li class="tsd-signature tsd-kind-icon"><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></li></ul></li></ul></li></ul></section><section class="tsd-panel tsd-member tsd-kind-function tsd-parent-kind-module tsd-has-type-parameter"><a id="useVreoEventCallback" class="tsd-anchor"></a><h3>use<wbr/>Vreo<wbr/>Event<wbr/>Callback</h3><ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module tsd-has-type-parameter"><li class="tsd-signature tsd-kind-icon">use<wbr/>Vreo<wbr/>Event<wbr/>Callback<span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">T</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span>name<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type" data-tsd-kind="Type parameter">T</span>, callback<span class="tsd-signature-symbol">: </span><a href="Player.html#VreoKeyframeEvent" class="tsd-signature-type" data-tsd-kind="Type alias">VreoKeyframeEvent</a><span class="tsd-signature-symbol">[</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">T</span><span class="tsd-signature-symbol">]</span>, deps<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">DependencyList</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/realsee-developer/vreo/blob/8de06a2/resources/react/index.tsx#L84">resources/react/index.tsx:84</a></li></ul></aside><h4 class="tsd-type-parameters-title">Type parameters</h4><ul class="tsd-type-parameters"><li><h4>T<span class="tsd-signature-symbol">: </span><a href="../enums/Player.VreoKeyframeEnum.html" class="tsd-signature-type" data-tsd-kind="Enumeration">VreoKeyframeEnum</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">&quot;paused&quot;</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">&quot;playing&quot;</span></h4></li></ul><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>name: <span class="tsd-signature-type" data-tsd-kind="Type parameter">T</span></h5></li><li><h5>callback: <a href="Player.html#VreoKeyframeEvent" class="tsd-signature-type" data-tsd-kind="Type alias">VreoKeyframeEvent</a><span class="tsd-signature-symbol">[</span><span class="tsd-signature-type" data-tsd-kind="Type parameter">T</span><span class="tsd-signature-symbol">]</span></h5></li><li><h5><span class="tsd-flag ts-flagOptional">Optional</span> deps: <span class="tsd-signature-type">DependencyList</span></h5></li></ul><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></section><section class="tsd-panel tsd-member tsd-kind-function tsd-parent-kind-module"><a id="useVreoPausedState" class="tsd-anchor"></a><h3>use<wbr/>Vreo<wbr/>Paused<wbr/>State</h3><ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module"><li class="tsd-signature tsd-kind-icon">use<wbr/>Vreo<wbr/>Paused<wbr/>State<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/realsee-developer/vreo/blob/8de06a2/resources/react/index.tsx#L104">resources/react/index.tsx:104</a></li></ul></aside><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4></li></ul></section></section></div><div class="col-4 col-menu menu-sticky-wrap menu-highlight"><nav class="tsd-navigation primary"><ul><li class=""><a href="../modules.html">Modules</a></li><li class=" tsd-kind-module"><a href="Player.html">Player</a></li><li class=" tsd-kind-module"><a href="fivePlugins.html">five<wbr/>Plugins</a></li><li class="current tsd-kind-module"><a href="react.html">react</a></li></ul></nav><nav class="tsd-navigation secondary menu-sticky"><ul><li class="tsd-kind-interface tsd-parent-kind-module"><a href="../interfaces/react.VreoActionCallbacks.html" class="tsd-kind-icon">Vreo<wbr/>Action<wbr/>Callbacks</a></li><li class="tsd-kind-variable tsd-parent-kind-module"><a href="react.html#VreoProvider" class="tsd-kind-icon">Vreo<wbr/>Provider</a></li><li class="tsd-kind-function tsd-parent-kind-module"><a href="react.html#useVreoAction" class="tsd-kind-icon">use<wbr/>Vreo<wbr/>Action</a></li><li class="tsd-kind-function tsd-parent-kind-module tsd-has-type-parameter"><a href="react.html#useVreoEventCallback" class="tsd-kind-icon">use<wbr/>Vreo<wbr/>Event<wbr/>Callback</a></li><li class="tsd-kind-function tsd-parent-kind-module"><a href="react.html#useVreoPausedState" class="tsd-kind-icon">use<wbr/>Vreo<wbr/>Paused<wbr/>State</a></li></ul></nav></div></div></div><footer class=""><div class="container"><h2>Legend</h2><div class="tsd-legend-group"><ul class="tsd-legend"><li class="tsd-kind-variable"><span class="tsd-kind-icon">Variable</span></li><li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li><li class="tsd-kind-function tsd-has-type-parameter"><span class="tsd-kind-icon">Function with type parameter</span></li><li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li></ul><ul class="tsd-legend"><li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li></ul><ul class="tsd-legend"><li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li></ul><ul class="tsd-legend"><li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li></ul></div><h2>Settings</h2><p>Theme <select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></p></div></footer><div class="overlay"></div><script src="../assets/main.js"></script></body></html>
package/lib/Player/index.d.ts CHANGED
@@ -3,6 +3,7 @@ import { VreoKeyframeEvent, VreoUnit } from '../typings/VreoUnit';
3
3
  import { PlayerConfigs } from './typings';
4
4
  export declare class Player extends Subscribe<VreoKeyframeEvent> {
5
5
  $five: Five;
6
+ private controller;
6
7
  configs: Readonly<PlayerConfigs>;
7
8
  constructor(five: Five, configs?: Partial<PlayerConfigs>);
8
9
  load(vreoUnit: VreoUnit, currentTime?: number): Promise<boolean>;
package/lib/Player/index.js CHANGED
@@ -49,8 +49,6 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
49
49
 
50
50
  function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
51
51
 
52
- var controller = new _Controller.Controller();
53
-
54
52
  var Player = /*#__PURE__*/function (_Subscribe) {
55
53
  _inherits(Player, _Subscribe);
56
54
 
@@ -64,10 +62,12 @@ var Player = /*#__PURE__*/function (_Subscribe) {
64
62
  _classCallCheck(this, Player);
65
63
 
66
64
  _this = _super.call(this);
67
- _this.$five = controller.$five = five;
65
+ _this.controller = new _Controller.Controller();
66
+ _this.$five = _this.controller.$five = five;
68
67
 
69
68
  if (!configs.containter) {
70
- var containter = document.createElement('div');
69
+ var containter = document.querySelector('#vreo-app') || document.createElement('div');
70
+ ReactDOM.unmountComponentAtNode(containter);
71
71
  containter.setAttribute('id', 'vreo-app');
72
72
  configs.containter = containter;
73
73
  document.body.append(containter);
@@ -76,13 +76,13 @@ var Player = /*#__PURE__*/function (_Subscribe) {
76
76
  _this.configs = Object.freeze(Object.assign({
77
77
  keyframeMap: {}
78
78
  }, configs));
79
- controller.configs = _this.configs;
79
+ _this.controller.configs = _this.configs;
80
80
  ReactDOM.render( /*#__PURE__*/React.createElement(_Controller.ControllerContext.Provider, {
81
- value: controller
81
+ value: _this.controller
82
82
  }, /*#__PURE__*/React.createElement(_App.App, null), /*#__PURE__*/React.createElement(_Drawer.Drawer, null)), configs.containter); // 监听播放情况：抛出触发时机
83
83
 
84
84
  (0, _mobx.reaction)(function () {
85
- return controller.playing;
85
+ return _this.controller.playing;
86
86
  }, function (playing) {
87
87
  _this.emit(playing ? 'playing' : 'paused');
88
88
  });
@@ -93,12 +93,12 @@ var Player = /*#__PURE__*/function (_Subscribe) {
93
93
  key: "load",
94
94
  value: function () {
95
95
  var _load = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(vreoUnit) {
96
- var _controller$videoInst,
96
+ var _this$controller$vide,
97
97
  _this2 = this;
98
98
 
99
99
  var currentTime,
100
- _controller$videoAgen,
101
- _controller$videoAgen2,
100
+ _this$controller$vide2,
101
+ _this$controller$vide3,
102
102
  _args = arguments;
103
103
 
104
104
  return regeneratorRuntime.wrap(function _callee$(_context) {
@@ -107,12 +107,12 @@ var Player = /*#__PURE__*/function (_Subscribe) {
107
107
  case 0:
108
108
  currentTime = _args.length > 1 && _args[1] !== undefined ? _args[1] : 0;
109
109
 
110
- if (controller.visible) {
110
+ if (this.controller.visible) {
111
111
  _context.next = 5;
112
112
  break;
113
113
  }
114
114
 
115
- controller.setVisible(true);
115
+ this.controller.setVisible(true);
116
116
  _context.next = 5;
117
117
  return new Promise(function (resolve) {
118
118
  setTimeout(function () {
@@ -121,31 +121,31 @@ var Player = /*#__PURE__*/function (_Subscribe) {
121
121
  });
122
122
 
123
123
  case 5:
124
- if (controller.stopInterval) {
125
- controller.stopInterval();
126
- controller.stopInterval = undefined;
124
+ if (this.controller.stopInterval) {
125
+ this.controller.stopInterval();
126
+ this.controller.stopInterval = undefined;
127
127
  }
128
128
 
129
- controller.vreoUnit = vreoUnit;
130
- (_controller$videoInst = controller.videoInstance) === null || _controller$videoInst === void 0 ? void 0 : _controller$videoInst.pause();
129
+ this.controller.vreoUnit = vreoUnit;
130
+ (_this$controller$vide = this.controller.videoInstance) === null || _this$controller$vide === void 0 ? void 0 : _this$controller$vide.pause();
131
131
 
132
132
  if (!vreoUnit.video.url) {
133
133
  _context.next = 13;
134
134
  break;
135
135
  }
136
136
 
137
- if ((_controller$videoAgen = controller.videoAgentScene) !== null && _controller$videoAgen !== void 0 && _controller$videoAgen.videoAgentMesh.videoInstance) {
138
- controller.videoAgentScene.videoAgentMesh.videoInstance.currentTime = currentTime / 1000;
137
+ if ((_this$controller$vide2 = this.controller.videoAgentScene) !== null && _this$controller$vide2 !== void 0 && _this$controller$vide2.videoAgentMesh.videoInstance) {
138
+ this.controller.videoAgentScene.videoAgentMesh.videoInstance.currentTime = currentTime / 1000;
139
139
  }
140
140
 
141
141
  _context.next = 12;
142
- return (_controller$videoAgen2 = controller.videoAgentScene) === null || _controller$videoAgen2 === void 0 ? void 0 : _controller$videoAgen2.videoAgentMesh.play(vreoUnit.video.url);
142
+ return (_this$controller$vide3 = this.controller.videoAgentScene) === null || _this$controller$vide3 === void 0 ? void 0 : _this$controller$vide3.videoAgentMesh.play(vreoUnit.video.url);
143
143
 
144
144
  case 12:
145
145
  this.play();
146
146
 
147
147
  case 13:
148
- controller.run(function (type, keyframe) {
148
+ this.controller.run(function (type, keyframe) {
149
149
  return _this2.emit(type, keyframe);
150
150
  });
151
151
  return _context.abrupt("return", true);
@@ -167,34 +167,39 @@ var Player = /*#__PURE__*/function (_Subscribe) {
167
167
  }, {
168
168
  key: "paused",
169
169
  get: function get() {
170
- return !controller.playing;
170
+ return !this.controller.playing;
171
171
  }
172
172
  }, {
173
173
  key: "play",
174
174
  value: function play() {
175
- if (controller.playing) return true;
176
- controller.setPlaying(true);
175
+ if (this.controller.playing) return true;
176
+ this.controller.setPlaying(true);
177
177
  return true;
178
178
  }
179
179
  }, {
180
180
  key: "pause",
181
181
  value: function pause() {
182
- controller.setPlaying(false);
182
+ this.controller.setPlaying(false);
183
183
  }
184
184
  }, {
185
185
  key: "show",
186
186
  value: function show() {
187
- controller.setVisible(true);
187
+ this.controller.setVisible(true);
188
188
  }
189
189
  }, {
190
190
  key: "hide",
191
191
  value: function hide() {
192
- controller.setVisible(false);
192
+ this.controller.setVisible(false);
193
193
  }
194
194
  }, {
195
195
  key: "dispose",
196
196
  value: function dispose() {
197
- controller.dispose();
197
+ this.pause();
198
+ this.controller.dispose();
199
+
200
+ if (this.configs.containter) {
201
+ ReactDOM.unmountComponentAtNode(this.configs.containter);
202
+ }
198
203
  }
199
204
  }]);
200
205
 
package/lib/Player/modules/VideoAgent/VideoAgentMesh.d.ts CHANGED
@@ -11,6 +11,7 @@ export declare class VideoAgentMesh extends THREE.Mesh {
11
11
  freeze: boolean;
12
12
  paused: boolean;
13
13
  audioInstance: HTMLAudioElement;
14
+ $removeEventListener: () => void;
14
15
  get videoInstance(): HTMLAudioElement;
15
16
  /**
16
17
  *
@@ -27,4 +28,5 @@ export declare class VideoAgentMesh extends THREE.Mesh {
27
28
  * 转成毫秒，保障精准度
28
29
  */
29
30
  get currentTime(): number;
31
+ dispose(): void;
30
32
  }
package/lib/Player/modules/VideoAgent/VideoAgentMesh.js CHANGED
@@ -47,6 +47,8 @@ var fragmentShaderTpl = function fragmentShaderTpl() {
47
47
  return "\nuniform int enable;\nuniform sampler2D map;\nvarying vec2 vUv;\nvarying vec2 vColorUv;\nvarying vec2 vMaskUv;\n\nvec3 hsv2rgb(vec3 c) {\n const vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);\n vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);\n return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);\n}\n\nvec3 rgb2hsv(vec3 c) {\n const vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);\n vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));\n vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));\n\n float d = q.x - min(q.w, q.y);\n return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + 0.001)), d / (q.x + 0.001), q.x);\n}\n\nvoid main(void) {\n vec3 color = texture2D(map, vUv).xyz;\n float amask = 1.0;\n\n float ref = color.r;\n if (ref < color.b) ref = color.b;\n amask = color.g - ref + 0.1;\n amask = smoothstep(0.1, 0.3, amask);\n amask = 1.0 - amask;\n\n vec3 target = rgb2hsv(vec3(0.0 / 255.0, 255.0 / 255.0, 0.0 / 255.0));\n vec3 hsv = rgb2hsv(color);\n float distance = abs(hsv.x - target.x);\n if (distance < 0.15) {\n hsv.y = 0.0;\n }\n color = hsv2rgb(hsv);\n\n gl_FragColor = vec4(color.rgb, amask * float(enable));\n}\n";
48
48
  };
49
49
 
50
+ var cacheInstance = {};
51
+
50
52
  /**
51
53
  * 视频经纪人MESH
52
54
  */
@@ -71,13 +73,18 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
71
73
  _classCallCheck(this, VideoAgentMesh);
72
74
 
73
75
  if (!options.videoInstance) {
74
- var videoInstance = document.createElement('video');
75
- videoInstance.style.opacity = '0';
76
- videoInstance.style.display = 'none';
77
- document.body.append(videoInstance);
78
- options.videoInstance = videoInstance;
79
- videoInstance.playsInline = true;
80
- videoInstance.controls = false;
76
+ if (cacheInstance.videoInstance) {
77
+ options.videoInstance = cacheInstance.videoInstance;
78
+ } else {
79
+ var videoInstance = document.createElement('video');
80
+ videoInstance.style.opacity = '0';
81
+ videoInstance.style.display = 'none';
82
+ document.body.append(videoInstance);
83
+ options.videoInstance = videoInstance;
84
+ cacheInstance.videoInstance = videoInstance;
85
+ videoInstance.playsInline = true;
86
+ videoInstance.controls = false;
87
+ }
81
88
  }
82
89
 
83
90
  var geometry = new THREE.PlaneGeometry(width, height, widthSegments, heightSegments);
@@ -100,16 +107,21 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
100
107
  _this.freeze = false;
101
108
  _this.paused = true;
102
109
  {
103
- var audioInstance = document.createElement('audio');
104
- audioInstance.crossOrigin = ''; // videoInstance.muted = true
105
-
106
- audioInstance.muted = false;
107
- audioInstance.setAttribute('playsinline', 'true');
108
- audioInstance.setAttribute('webkit-playsinline', 'true');
109
- audioInstance.setAttribute('autoplay', 'false');
110
- audioInstance.setAttribute('style', 'display: none;');
111
- document.body.appendChild(audioInstance);
112
- _this.audioInstance = audioInstance;
110
+ if (cacheInstance.audioInstance) {
111
+ _this.audioInstance = cacheInstance.audioInstance;
112
+ } else {
113
+ var audioInstance = document.createElement('audio');
114
+ audioInstance.crossOrigin = ''; // videoInstance.muted = true
115
+
116
+ audioInstance.muted = false;
117
+ audioInstance.setAttribute('playsinline', 'true');
118
+ audioInstance.setAttribute('webkit-playsinline', 'true');
119
+ audioInstance.setAttribute('autoplay', 'false');
120
+ audioInstance.setAttribute('style', 'display: none;');
121
+ document.body.appendChild(audioInstance);
122
+ _this.audioInstance = audioInstance;
123
+ cacheInstance.audioInstance = audioInstance;
124
+ }
113
125
  }
114
126
  (0, _mobx.makeObservable)(_assertThisInitialized(_this), {
115
127
  paused: _mobx.observable
@@ -121,13 +133,23 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
121
133
  });
122
134
  };
123
135
 
124
- _this.videoInstance.addEventListener('pause', function () {
136
+ var onPause = function onPause() {
125
137
  return updatePaused(true);
126
- });
138
+ };
127
139
 
128
- _this.videoInstance.addEventListener('play', function () {
140
+ var onPlay = function onPlay() {
129
141
  return updatePaused(false);
130
- });
142
+ };
143
+
144
+ _this.videoInstance.addEventListener('pause', onPause);
145
+
146
+ _this.videoInstance.addEventListener('play', onPlay);
147
+
148
+ _this.$removeEventListener = function () {
149
+ _this.videoInstance.removeEventListener('pause', onPause);
150
+
151
+ _this.videoInstance.removeEventListener('play', onPlay);
152
+ };
131
153
 
132
154
  return _this;
133
155
  }
@@ -318,6 +340,22 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
318
340
  get: function get() {
319
341
  return this.videoInstance.currentTime * 1000;
320
342
  }
343
+ }, {
344
+ key: "dispose",
345
+ value: function dispose() {
346
+ // 销毁事件监听
347
+ this.$removeEventListener();
348
+
349
+ if (cacheInstance.audioInstance) {
350
+ document.body.removeChild(cacheInstance.audioInstance);
351
+ cacheInstance.audioInstance = undefined;
352
+ }
353
+
354
+ if (cacheInstance.videoInstance) {
355
+ document.body.removeChild(cacheInstance.videoInstance);
356
+ cacheInstance.videoInstance = undefined;
357
+ }
358
+ }
321
359
  }]);
322
360
 
323
361
  return VideoAgentMesh;
package/lib/Player/modules/VideoAgent/VideoAgentScene.d.ts CHANGED
@@ -8,4 +8,5 @@ export declare class VideoAgentScene {
8
8
  container: HTMLElement;
9
9
  constructor(container: HTMLElement, needRender?: boolean);
10
10
  run: () => void;
11
+ dispose: () => void;
11
12
  }
package/lib/Player/modules/VideoAgent/VideoAgentScene.js CHANGED
@@ -43,6 +43,12 @@ var VideoAgentScene = function VideoAgentScene(container) {
43
43
  requestAnimationFrame(_this.run);
44
44
  });
45
45
 
46
+ _defineProperty(this, "dispose", function () {
47
+ var _this$videoAgentMesh;
48
+
49
+ (_this$videoAgentMesh = _this.videoAgentMesh) === null || _this$videoAgentMesh === void 0 ? void 0 : _this$videoAgentMesh.dispose();
50
+ });
51
+
46
52
  this.container = container;
47
53
  this.camera.position.set(0, 0, 10);
48
54
  this.camera.lookAt(0, 0, 0);
package/lib/Player/modules/VideoAgent/index.js CHANGED
@@ -30,6 +30,12 @@ function VideoAgent(props) {
30
30
 
31
31
  var videoAgentScene = new _VideoAgentScene.VideoAgentScene(ref.current);
32
32
  controller.videoAgentScene = videoAgentScene;
33
+ return function () {
34
+ var _controller$videoAgen;
35
+
36
+ controller.dispose();
37
+ (_controller$videoAgen = controller.videoAgentScene) === null || _controller$videoAgen === void 0 ? void 0 : _controller$videoAgen.dispose();
38
+ };
33
39
  }, []);
34
40
  return /*#__PURE__*/React.createElement("div", {
35
41
  className: "VideoAgent",
package/lib/react/index.js CHANGED
@@ -42,10 +42,14 @@ var VreoProvider = function VreoProvider(props) {
42
42
  player = _React$useState2[0],
43
43
  setPlayer = _React$useState2[1];
44
44
 
45
+ var playerRef = React.useRef(null);
45
46
  React.useEffect(function () {
46
- setPlayer(new _Player.Player(five));
47
+ playerRef.current = new _Player.Player(five);
48
+ setPlayer(playerRef.current);
47
49
  return function () {
48
- player === null || player === void 0 ? void 0 : player.dispose();
50
+ var _playerRef$current;
51
+
52
+ (_playerRef$current = playerRef.current) === null || _playerRef$current === void 0 ? void 0 : _playerRef$current.dispose();
49
53
  };
50
54
  }, []);
51
55
  if (!player) return /*#__PURE__*/React.createElement(React.Fragment, null);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@realsee/vreo",
3
- "version": "0.1.3",
3
+ "version": "0.1.4",
4
4
  "description": "Vreo (VR Video 缩写) 是基于如视三维渲染引擎 Five 和 用户界面构建库 React 实现的如视 3D 空间剧本播放器。",
5
5
  "keywords": [
6
6
  "realsee",
@@ -35,7 +35,7 @@
35
35
  "@babel/preset-env": "^7.16.4",
36
36
  "@babel/preset-react": "^7.16.0",
37
37
  "@babel/preset-typescript": "^7.16.0",
38
- "@realsee/five": "^5.0.0-alpha.57",
38
+ "@realsee/five": "^5.0.0-alpha.80",
39
39
  "@types/offscreencanvas": "^2019.6.4",
40
40
  "@types/react": "^17.0.37",
41
41
  "@types/react-dom": "^17.0.11",
package/resources/Player/Controller.ts CHANGED
@@ -152,6 +152,3 @@ export class Controller extends Subscribe<VreoKeyframeEvent> {
152
152
  }
153
153
 
154
154
  export const ControllerContext = React.createContext<Controller | null>(null)
155
-
156
-
157
-