@realsee/vreo 0.2.0-alpha.1 → 0.2.0-alpha.2

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 (52) hide show
  1. package/README.md +36 -13
  2. package/docs/assets/custom.css +2 -2
  3. package/docs/assets/search.js +1 -1
  4. package/docs/classes/Player.Controller.html +54 -0
  5. package/docs/classes/Player.Player-1.html +9 -9
  6. package/docs/classes/Player.VideoAgentMesh.html +142 -0
  7. package/docs/classes/Player.VideoAgentScene.html +1 -0
  8. package/docs/enums/Player.InfoPanelTypeEnum.html +1 -1
  9. package/docs/enums/Player.PanoEffectEnum.html +2 -2
  10. package/docs/enums/Player.PanoTagEnum.html +1 -1
  11. package/docs/enums/Player.VreoKeyframeEnum.html +13 -13
  12. package/docs/enums/fivePlugins.CameraMovementEffect.html +1 -1
  13. package/docs/enums/fivePlugins.Rotation.html +1 -1
  14. package/docs/index.html +25 -16
  15. package/docs/interfaces/Player.CustomVreoKeyframeProps.html +1 -0
  16. package/docs/interfaces/Player.PlayerConfigs.html +3 -3
  17. package/docs/interfaces/Player.Vertex.html +1 -1
  18. package/docs/interfaces/Player.VideoAgentMeshOptions.html +1 -0
  19. package/docs/interfaces/Player.VreoKeyframe.html +1 -1
  20. package/docs/interfaces/Player.VreoUnit.html +1 -1
  21. package/docs/interfaces/Player.VreoVideo.html +1 -1
  22. package/docs/interfaces/fivePlugins.CameraMovementOptsCallback.html +1 -1
  23. package/docs/interfaces/fivePlugins.CameraMovementPluginExportType.html +3 -3
  24. package/docs/interfaces/fivePlugins.CameraMovementPluginParameterType.html +1 -1
  25. package/docs/interfaces/fivePlugins.ModelTVVideoPluginData.html +1 -1
  26. package/docs/interfaces/fivePlugins.ModelTVVideoPluginExportType.html +1 -1
  27. package/docs/interfaces/fivePlugins.ModelTVVideoPluginParameterType.html +1 -1
  28. package/docs/interfaces/react.VreoActionCallbacks.html +7 -7
  29. package/docs/interfaces/react.VreoProviderProps.html +1 -0
  30. package/docs/modules/Player.html +13 -13
  31. package/docs/modules/custom.html +3 -0
  32. package/docs/modules/fivePlugins.html +2 -2
  33. package/docs/modules/react.html +1 -1
  34. package/docs/modules.html +1 -1
  35. package/lib/Player/custom/SpatialScenePanel/index.d.ts +22 -0
  36. package/lib/Player/custom/SpatialScenePanel/index.js +207 -0
  37. package/lib/Player/index.js +17 -1
  38. package/lib/Player/modules/keyframes/InfoPanel/index.js +31 -21
  39. package/lib/Player/typings.d.ts +9 -2
  40. package/lib/react/index.d.ts +5 -1
  41. package/lib/react/index.js +1 -1
  42. package/lib/typings/VreoUnit.d.ts +2 -1
  43. package/package.json +2 -1
  44. package/resources/Player/App.tsx +1 -1
  45. package/resources/Player/custom/SpatialScenePanel/index.tsx +161 -0
  46. package/resources/Player/index.tsx +13 -1
  47. package/resources/Player/modules/keyframes/InfoPanel/index.tsx +41 -19
  48. package/resources/Player/typings.ts +12 -2
  49. package/resources/react/index.tsx +7 -2
  50. package/resources/typings/VreoUnit.ts +10 -2
  51. package/stylesheets/custom/SpatialScenePanel.css +303 -0
  52. package/stylesheets/default.css +11 -0
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/11036b6/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/11036b6/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/11036b6/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;loaded&quot;</span><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/11036b6/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>
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><li class="tsd-kind-interface tsd-parent-kind-module"><a href="../interfaces/react.VreoProviderProps.html" class="tsd-kind-icon">Vreo<wbr/>Provider<wbr/>Props</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">&lt;</span><a href="../interfaces/react.VreoProviderProps.html" class="tsd-signature-type" data-tsd-kind="Interface">VreoProviderProps</a><span class="tsd-signature-symbol">&gt;</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/7ea5d6c/resources/react/index.tsx#L13">resources/react/index.tsx:13</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/7ea5d6c/resources/react/index.tsx#L72">resources/react/index.tsx:72</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/7ea5d6c/resources/react/index.tsx#L89">resources/react/index.tsx:89</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;loaded&quot;</span><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><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">&quot;unknownKeyframeType&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/7ea5d6c/resources/react/index.tsx#L109">resources/react/index.tsx:109</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="custom.html">custom</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-interface tsd-parent-kind-module"><a href="../interfaces/react.VreoProviderProps.html" class="tsd-kind-icon">Vreo<wbr/>Provider<wbr/>Props</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/docs/modules.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>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"><h1> Vreo</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>Modules</h3><ul class="tsd-index-list"><li class="tsd-kind-module"><a href="modules/Player.html" class="tsd-kind-icon">Player</a></li><li class="tsd-kind-module"><a href="modules/fivePlugins.html" class="tsd-kind-icon">five<wbr/>Plugins</a></li><li class="tsd-kind-module"><a href="modules/react.html" class="tsd-kind-icon">react</a></li></ul></section></div></section></section></div><div class="col-4 col-menu menu-sticky-wrap menu-highlight"><nav class="tsd-navigation primary"><ul><li class="current"><a href="modules.html">Modules</a></li><li class=" tsd-kind-module"><a href="modules/Player.html">Player</a></li><li class=" tsd-kind-module"><a href="modules/fivePlugins.html">five<wbr/>Plugins</a></li><li class=" tsd-kind-module"><a href="modules/react.html">react</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>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"><h1> Vreo</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>Modules</h3><ul class="tsd-index-list"><li class="tsd-kind-module"><a href="modules/Player.html" class="tsd-kind-icon">Player</a></li><li class="tsd-kind-module"><a href="modules/custom.html" class="tsd-kind-icon">custom</a></li><li class="tsd-kind-module"><a href="modules/fivePlugins.html" class="tsd-kind-icon">five<wbr/>Plugins</a></li><li class="tsd-kind-module"><a href="modules/react.html" class="tsd-kind-icon">react</a></li></ul></section></div></section></section></div><div class="col-4 col-menu menu-sticky-wrap menu-highlight"><nav class="tsd-navigation primary"><ul><li class="current"><a href="modules.html">Modules</a></li><li class=" tsd-kind-module"><a href="modules/Player.html">Player</a></li><li class=" tsd-kind-module"><a href="modules/custom.html">custom</a></li><li class=" tsd-kind-module"><a href="modules/fivePlugins.html">five<wbr/>Plugins</a></li><li class=" tsd-kind-module"><a href="modules/react.html">react</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/custom/SpatialScenePanel/index.d.ts ADDED
@@ -0,0 +1,22 @@
1
+ /// <reference types="react" />
2
+ import { CustomVreoKeyframeProps } from '../../typings';
3
+ export interface SpatialScenePanelData {
4
+ customType: 'SpatialScenePanel';
5
+ title: string;
6
+ temperature: string;
7
+ stateList: {
8
+ text: string;
9
+ icon: string;
10
+ }[];
11
+ position: {
12
+ x: number;
13
+ y: number;
14
+ z: number;
15
+ };
16
+ quaternion: [number, number, number, number];
17
+ }
18
+ /**
19
+ * 空间场景面板
20
+ * @returns
21
+ */
22
+ export declare function SpatialScenePanel(props: CustomVreoKeyframeProps): JSX.Element;
package/lib/Player/custom/SpatialScenePanel/index.js ADDED
@@ -0,0 +1,207 @@
1
+ "use strict";
2
+
3
+ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.SpatialScenePanel = SpatialScenePanel;
9
+
10
+ var React = _interopRequireWildcard(require("react"));
11
+
12
+ var _reactDom = _interopRequireDefault(require("react-dom"));
13
+
14
+ var _three = require("three");
15
+
16
+ var _BetterTween = require("@realsee/dnalogel/shared-utils/animationFrame/BetterTween");
17
+
18
+ var _CSS3DRenderPlugin = require("@realsee/dnalogel/plugins/CSS3DRenderPlugin");
19
+
20
+ var _VreoUnit = require("../../../typings/VreoUnit");
21
+
22
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
23
+
24
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
25
+
26
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
27
+
28
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
29
+
30
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
31
+
32
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
33
+
34
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
35
+
36
+ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
37
+
38
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
39
+
40
+ var searchV1 = function searchV1(_ref) {
41
+ var five = _ref.five,
42
+ position = _ref.position,
43
+ rotation = _ref.rotation,
44
+ dom = _ref.dom;
45
+ var cameraDirection = new _three.Vector3();
46
+ five.camera.getWorldDirection(cameraDirection);
47
+ var cameraPosition = five.camera.position;
48
+
49
+ var _five$model$intersect = five.model.intersectRaycaster(new _three.Raycaster(cameraPosition, cameraDirection)),
50
+ _five$model$intersect2 = _slicedToArray(_five$model$intersect, 1),
51
+ intersect = _five$model$intersect2[0];
52
+
53
+ var point = five.project2d(intersect.point); // const width = dom!.clientWidth
54
+
55
+ var height = dom.clientHeight;
56
+ dom.style.left = point.x + 'px';
57
+ dom.style.top = point.y - height / 2 + 'px';
58
+ var rect = dom.getBoundingClientRect();
59
+ var left = rect.left,
60
+ top = rect.top,
61
+ bottom = rect.bottom,
62
+ right = rect.right;
63
+ var leftBottom = new _three.Vector3(left, bottom);
64
+ var leftTop = new _three.Vector3(left, top);
65
+ var rightTop = new _three.Vector3(right, top);
66
+ var rightBottom = new _three.Vector3(right, bottom);
67
+ var points = [leftBottom, rightBottom, rightTop, leftTop].map(function (point) {
68
+ point.setX(point.x / window.innerWidth * 2 - 1);
69
+ point.setY(-(point.y / window.innerHeight) * 2 + 1);
70
+ point.setZ(0.5);
71
+ return point.unproject(five.camera).addScaledVector(cameraDirection, 0.2);
72
+ }); // const colors = [0xdc143c, 0xffff00, 0x0000ff, 0x008000]
73
+ // points.forEach((p, index) => five.scene.add(getSphere(p, colors[index])))
74
+
75
+ var ratio = leftBottom.distanceTo(rightBottom) / 160;
76
+ return {
77
+ points: points,
78
+ ratio: ratio
79
+ };
80
+ };
81
+ /**
82
+ * 空间场景面板
83
+ * @returns
84
+ */
85
+
86
+
87
+ function SpatialScenePanel(props) {
88
+ var ref = React.useRef(null);
89
+ var panelRef = React.useRef(null);
90
+ var rendererRef = React.useRef((0, _CSS3DRenderPlugin.CSS3DRenderPlugin)(props.five));
91
+ React.useEffect(function () {
92
+ if (!ref.current) {
93
+ return;
94
+ }
95
+
96
+ var callback = function callback(keyframe) {
97
+ if (keyframe.data.customType !== 'SpatialScenePanel') {
98
+ return;
99
+ }
100
+
101
+ var data = keyframe.data; // const data = mockData as SpatialScenePanelData
102
+
103
+ var _searchV = searchV1({
104
+ five: props.five,
105
+ position: new _three.Vector3(data.position.x, data.position.y, data.position.z),
106
+ quaternion: data.quaternion,
107
+ dom: ref.current
108
+ }),
109
+ points = _searchV.points,
110
+ ratio = _searchV.ratio;
111
+
112
+ console.log(points, ratio);
113
+
114
+ var _ref2 = rendererRef.current.create3DDomContainer(points, {
115
+ ratio: ratio,
116
+ autoRender: false
117
+ }) || {},
118
+ container = _ref2.container,
119
+ dispose = _ref2.dispose,
120
+ css3DObject = _ref2.css3DObject,
121
+ render = _ref2.render;
122
+
123
+ if (!container) return;
124
+
125
+ _reactDom["default"].render( /*#__PURE__*/React.createElement(Panel, {
126
+ ref: function ref(_ref3) {
127
+ return panelRef.current = _ref3;
128
+ },
129
+ data: data
130
+ }), container);
131
+
132
+ var startRotateY = -(Math.PI * 2) / 9;
133
+ var lastRotateY = 0;
134
+ (0, _BetterTween.tweenProgress)(1000).onUpdate(function (_ref4) {
135
+ var progress = _ref4.progress;
136
+ var needRotateY = Math.PI / 90 * 11 * progress;
137
+ var rotateY = needRotateY - lastRotateY;
138
+ css3DObject === null || css3DObject === void 0 ? void 0 : css3DObject.rotateY(rotateY);
139
+ lastRotateY = needRotateY;
140
+ }).onStart(function () {
141
+ css3DObject === null || css3DObject === void 0 ? void 0 : css3DObject.rotateY(startRotateY);
142
+ render();
143
+ }).onDispose(function () {
144
+ var _panelRef$current;
145
+
146
+ (_panelRef$current = panelRef.current) === null || _panelRef$current === void 0 ? void 0 : _panelRef$current.classList.add('show');
147
+ }).play();
148
+ var start = keyframe.start,
149
+ end = keyframe.end;
150
+ setTimeout(function () {
151
+ var _panelRef$current2;
152
+
153
+ (_panelRef$current2 = panelRef.current) === null || _panelRef$current2 === void 0 ? void 0 : _panelRef$current2.classList.add('hide');
154
+ setTimeout(function () {
155
+ return dispose === null || dispose === void 0 ? void 0 : dispose();
156
+ }, 1500);
157
+ }, end - start);
158
+ };
159
+
160
+ Object.assign(window, {
161
+ $SpatialScenePanelCallback: callback
162
+ });
163
+ props.subscribe.on(_VreoUnit.VreoKeyframeEnum.Custom, callback);
164
+ return function () {
165
+ props.subscribe.off(_VreoUnit.VreoKeyframeEnum.Custom, callback);
166
+ };
167
+ }, []);
168
+ return /*#__PURE__*/React.createElement("div", {
169
+ className: "vreo-SpatialScenePanel",
170
+ ref: ref
171
+ });
172
+ }
173
+
174
+ var Panel = /*#__PURE__*/React.forwardRef(function (props, myRef) {
175
+ var _props$data, _props$data2, _props$data3, _props$data3$stateLis;
176
+
177
+ return /*#__PURE__*/React.createElement("div", {
178
+ className: "SpatialScenePanel",
179
+ ref: myRef
180
+ }, /*#__PURE__*/React.createElement("div", {
181
+ className: "SpatialScenePanel-show-area"
182
+ }, /*#__PURE__*/React.createElement("div", {
183
+ className: "SpatialScenePanel-bg"
184
+ }), /*#__PURE__*/React.createElement("div", {
185
+ className: "SpatialScenePanel-header"
186
+ }, /*#__PURE__*/React.createElement("div", {
187
+ className: "SpatialScenePanel-title"
188
+ }, (_props$data = props.data) === null || _props$data === void 0 ? void 0 : _props$data.title), /*#__PURE__*/React.createElement("div", {
189
+ className: "SpatialScenePanel-temperature"
190
+ }, (_props$data2 = props.data) === null || _props$data2 === void 0 ? void 0 : _props$data2.temperature, "\u2103")), /*#__PURE__*/React.createElement("div", {
191
+ className: "SpatialScenePanel-body"
192
+ }, (_props$data3 = props.data) === null || _props$data3 === void 0 ? void 0 : (_props$data3$stateLis = _props$data3.stateList) === null || _props$data3$stateLis === void 0 ? void 0 : _props$data3$stateLis.map(function (state, index) {
193
+ return /*#__PURE__*/React.createElement("div", {
194
+ key: "scene-".concat(state.text),
195
+ className: "SpatialScenePanel-item index_".concat(index)
196
+ }, /*#__PURE__*/React.createElement("img", {
197
+ className: "SpatialScenePanel-icon",
198
+ src: state.icon
199
+ }), /*#__PURE__*/React.createElement("div", {
200
+ className: "SpatialScenePanel-text"
201
+ }, state.text), /*#__PURE__*/React.createElement("div", {
202
+ className: "SpatialScenePanel-dot"
203
+ }));
204
+ }))), /*#__PURE__*/React.createElement("div", {
205
+ className: "SpatialScenePanel-disappear-area"
206
+ }));
207
+ });
package/lib/Player/index.js CHANGED
@@ -79,7 +79,23 @@ var Player = /*#__PURE__*/function (_Subscribe) {
79
79
  _this.controller.configs = _this.configs;
80
80
  ReactDOM.render( /*#__PURE__*/React.createElement(_Controller.ControllerContext.Provider, {
81
81
  value: _this.controller
82
- }, /*#__PURE__*/React.createElement(_App.App, null), /*#__PURE__*/React.createElement(_Drawer.Drawer, null)), configs.containter); // 监听播放情况：抛出触发时机
82
+ }, /*#__PURE__*/React.createElement(_App.App, null), /*#__PURE__*/React.createElement(_Drawer.Drawer, null), _this.configs.customKeyframes && _this.configs.customKeyframes.map(function (CustomCmpt, key) {
83
+ return /*#__PURE__*/React.createElement(CustomCmpt, {
84
+ key: key,
85
+ subscribe: {
86
+ on: function on(name, callback) {
87
+ return _this.on(name, callback);
88
+ },
89
+ once: function once(name, callback) {
90
+ return _this.once(name, callback);
91
+ },
92
+ off: function off(name, callback) {
93
+ return _this.off(name, callback);
94
+ }
95
+ },
96
+ five: five
97
+ });
98
+ })), configs.containter); // 监听播放情况：抛出触发时机
83
99
 
84
100
  (0, _mobx.reaction)(function () {
85
101
  return _this.controller.playing;
package/lib/Player/modules/keyframes/InfoPanel/index.js CHANGED
@@ -35,12 +35,14 @@ function InfoPanelVideo(_ref2) {
35
35
  children = _ref2.children;
36
36
  return /*#__PURE__*/React.createElement("div", {
37
37
  className: "vreo-infoPanel vreo-infoPanel--video"
38
- }, children, /*#__PURE__*/React.createElement("video", {
38
+ }, children, /*#__PURE__*/React.createElement("div", {
39
+ className: "vreo-infoPanelWrapper"
40
+ }, /*#__PURE__*/React.createElement("video", {
39
41
  playsInline: true,
40
42
  autoPlay: true,
41
43
  className: "vreo-infoPanelVideo",
42
44
  src: url
43
- }));
45
+ })));
44
46
  }
45
47
 
46
48
  var Title = function Title(props) {
@@ -72,19 +74,27 @@ function InfoPanel() {
72
74
  end = keyframe.end,
73
75
  data = keyframe.data;
74
76
  var infoPanelData = data;
77
+ var title = infoPanelData.title,
78
+ subTitle = infoPanelData.subTitle;
75
79
 
76
80
  if (infoPanelData.type === _VreoUnit.InfoPanelTypeEnum.Image) {
77
81
  controller.openDrawer({
78
82
  content: /*#__PURE__*/React.createElement(InfoPanelImg, {
79
83
  url: infoPanelData.url
80
- }),
84
+ }, /*#__PURE__*/React.createElement(Title, {
85
+ title: title,
86
+ subTitle: subTitle
87
+ })),
81
88
  height: '60vh'
82
89
  });
83
90
  } else if (infoPanelData.type === _VreoUnit.InfoPanelTypeEnum.Video) {
84
91
  controller.openDrawer({
85
92
  content: /*#__PURE__*/React.createElement(InfoPanelVideo, {
86
93
  url: infoPanelData.url
87
- }),
94
+ }, /*#__PURE__*/React.createElement(Title, {
95
+ title: title,
96
+ subTitle: subTitle
97
+ })),
88
98
  height: '60vh'
89
99
  });
90
100
  }
@@ -94,23 +104,23 @@ function InfoPanel() {
94
104
  }, end - start);
95
105
  };
96
106
 
97
- controller.on(_VreoUnit.VreoKeyframeEnum.InfoPanel, callback);
98
- Object.assign(window, {
99
- $setInfoPanel: function $setInfoPanel() {
100
- controller.openDrawer({
101
- content:
102
- /*#__PURE__*/
103
- // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/seesay/tools/cat_music___f68fb9bbe1f7cd6d00a16456dd0b09ad.gif'>
104
- React.createElement(InfoPanelImg, {
105
- url: "http://vrlab-public.ljcdn.com/common/images/web/d94e1bd7-0311-4b20-9c41-a1294fe43554.png"
106
- }, /*#__PURE__*/React.createElement(Title, {
107
- title: "\u573A\u666F\u8054\u52A8\u6293\u62CD\u56FE\u7247",
108
- subTitle: "2022.02.17 14:00"
109
- })),
110
- height: '60vh'
111
- });
112
- }
113
- });
107
+ controller.on(_VreoUnit.VreoKeyframeEnum.InfoPanel, callback); // Object.assign(window, {
108
+ // $setInfoPanel: () => {
109
+ // controller.openDrawer({
110
+ // content: (
111
+ // // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/seesay/tools/cat_music___f68fb9bbe1f7cd6d00a16456dd0b09ad.gif'>
112
+ // // <InfoPanelImg url="http://vrlab-public.ljcdn.com/common/images/web/d94e1bd7-0311-4b20-9c41-a1294fe43554.png">
113
+ // // <Title title="场景联动抓拍图片" subTitle={'2022.02.17 14:00'} />
114
+ // // </InfoPanelImg>
115
+ // <InfoPanelVideo url="//vrlab-public.ljcdn.com/release/seesay/tools/2022011713142___b320f74a5e1b5ad4bb46b4dc69d73ecc.mp4">
116
+ // <Title title="场景联动抓拍图片" subTitle={'2022.02.17 14:00'} />
117
+ // </InfoPanelVideo>
118
+ // ),
119
+ // height: '60vh',
120
+ // })
121
+ // },
122
+ // })
123
+
114
124
  return function () {
115
125
  controller.off(_VreoUnit.VreoKeyframeEnum.InfoPanel, callback);
116
126
 
package/lib/Player/typings.d.ts CHANGED
@@ -1,5 +1,6 @@
1
- import { ReactNode } from 'react';
2
- import { VreoKeyframeConfigMap } from '../typings/VreoUnit';
1
+ import React, { ReactNode } from 'react';
2
+ import { Subscribe, Five } from '@realsee/five';
3
+ import { VreoKeyframeConfigMap, VreoKeyframeEvent } from '../typings/VreoUnit';
3
4
  export interface PlayerConfigs {
4
5
  containter?: ReactDOM.Container;
5
6
  keyframeMap: VreoKeyframeConfigMap;
@@ -16,4 +17,10 @@ export interface PlayerConfigs {
16
17
  * 如果需要在 底部面板添加自定义内容，可以传递个 React 组件。
17
18
  */
18
19
  customPanelChildren?: ReactNode;
20
+ customKeyframes?: React.FC<CustomVreoKeyframeProps>[];
21
+ }
22
+ export declare type VreoSubscribe = Pick<Subscribe<VreoKeyframeEvent>, 'on' | 'once' | 'off'>;
23
+ export interface CustomVreoKeyframeProps {
24
+ subscribe: VreoSubscribe;
25
+ five: Five;
19
26
  }
package/lib/react/index.d.ts CHANGED
@@ -1,6 +1,10 @@
1
1
  import * as React from 'react';
2
+ import { PlayerConfigs } from '../Player/typings';
2
3
  import { VreoKeyframeEvent, VreoUnit } from '../typings/VreoUnit';
3
- export declare const VreoProvider: React.FC;
4
+ export interface VreoProviderProps {
5
+ configs?: Partial<PlayerConfigs>;
6
+ }
7
+ export declare const VreoProvider: React.FC<VreoProviderProps>;
4
8
  /**
5
9
  * VreoPlayer 命令集合。
6
10
  */
package/lib/react/index.js CHANGED
@@ -44,7 +44,7 @@ var VreoProvider = function VreoProvider(props) {
44
44
 
45
45
  var playerRef = React.useRef(null);
46
46
  React.useEffect(function () {
47
- playerRef.current = new _Player.Player(five);
47
+ playerRef.current = new _Player.Player(five, props.configs || {});
48
48
  setPlayer(playerRef.current);
49
49
  return function () {
50
50
  var _playerRef$current;
package/lib/typings/VreoUnit.d.ts CHANGED
@@ -97,6 +97,7 @@ export declare type VreoKeyframeEvent = {
97
97
  loaded: (vreoUnit: VreoUnit) => void;
98
98
  paused: () => void;
99
99
  playing: () => void;
100
+ unknownKeyframeType: (keyframe: Record<string, any>) => void;
100
101
  };
101
102
  /**
102
103
  * 相机运动
@@ -215,7 +216,7 @@ export declare enum InfoPanelTypeEnum {
215
216
  export declare type InfoPanelData = {
216
217
  type: InfoPanelTypeEnum;
217
218
  url: string;
218
- tilte?: string;
219
+ title?: string;
219
220
  subTitle?: string;
220
221
  };
221
222
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@realsee/vreo",
3
- "version": "0.2.0-alpha.1",
3
+ "version": "0.2.0-alpha.2",
4
4
  "description": "Vreo (VR Video 缩写) 是基于如视三维渲染引擎 Five 和 用户界面构建库 React 实现的如视 3D 空间剧本播放器。",
5
5
  "keywords": [
6
6
  "realsee",
@@ -35,6 +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/dnalogel": "^0.1.7-alpha.10",
38
39
  "@realsee/five": "^5.0.0-alpha.103",
39
40
  "@types/offscreencanvas": "^2019.6.4",
40
41
  "@types/react": "^17.0.37",
package/resources/Player/App.tsx CHANGED
@@ -2,7 +2,7 @@ import * as React from 'react'
2
2
  import classNames from 'classnames'
3
3
  import { observer } from 'mobx-react'
4
4
  import { Controller } from './Controller'
5
- import { useController } from './hooks'
5
+ import { useController, useFiveInstance } from './hooks'
6
6
  import { CameraMovement } from './modules/keyframes/CameraMovement'
7
7
  import { InfoPanel } from './modules/keyframes/InfoPanel'
8
8
  import { ModelVideo } from './modules/keyframes/ModelVideo'