@realsee/vreo 0.1.1 → 0.1.2

package/lib/react/index.js

@@ -36,7 +36,19 @@ var VreoContext = /*#__PURE__*/React.createContext(null);
 
 var VreoProvider = function VreoProvider(props) {
   var five = (0, _react.unsafe__useFiveInstance)();
-  var player = new _Player.Player(five);
+
+  var _React$useState = React.useState(null),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      player = _React$useState2[0],
+      setPlayer = _React$useState2[1];
+
+  React.useEffect(function () {
+    setPlayer(new _Player.Player(five));
+    return function () {
+      player === null || player === void 0 ? void 0 : player.dispose();
+    };
+  }, []);
+  if (!player) return /*#__PURE__*/React.createElement(React.Fragment, null);
   return /*#__PURE__*/React.createElement(VreoContext.Provider, {
     value: player
   }, props.children);
@@ -105,10 +117,10 @@ function useVreoEventCallback(name, callback, deps) {
 function useVreoPausedState() {
   var player = useVreoInstance();
 
-  var _React$useState = React.useState(player.paused),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      state = _React$useState2[0],
-      setState = _React$useState2[1];
+  var _React$useState3 = React.useState(player.paused),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      state = _React$useState4[0],
+      setState = _React$useState4[1];
 
   useVreoEventCallback('paused', function () {
     return setState(true);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@realsee/vreo",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Vreo (VR Video 缩写) 是基于如视三维渲染引擎 Five 和 用户界面构建库 React 实现的如视 3D 空间剧本播放器。",
   "main": "lib/index.js",
   "author": "BEIKE REALSEE TECHNOLOGY (HK) LIMITED",

package/resources/react/index.tsx

@@ -7,8 +7,18 @@ const VreoContext = React.createContext<Player | null>(null)
 
 export const VreoProvider: React.FC = (props) => {
   const five = unsafe__useFiveInstance()
+  const [player, setPlayer] = React.useState<Player | null>(null)
+
+  React.useEffect(() => {
+    setPlayer(new Player(five))
+
+    return () => {
+      player?.dispose()
+    }
+  }, [])
+
+  if (!player) return <></>
 
-  const player = new Player(five)
   return <VreoContext.Provider value={player}>{props.children}</VreoContext.Provider>
 }