@realsee/vreo 0.2.0-alpha.6 → 0.2.0-alpha.9

package/lib/Player/custom/SpatialScenePanel/index.js

@@ -55,7 +55,8 @@ var searchV1 = function searchV1(_ref) {
       _five$model$intersect2 = _slicedToArray(_five$model$intersect, 1),
       intersect = _five$model$intersect2[0];
 
-  var point = five.project2d(intersect.point); // const width = dom!.clientWidth
+  var point = five.project2d(intersect.point);
+  var widescreen = window.innerWidth > 560 ? true : false; // const width = dom!.clientWidth
 
   var height = dom.clientHeight;
   dom.style.left = point.x + 'px';
@@ -70,15 +71,16 @@ var searchV1 = function searchV1(_ref) {
   var rightTop = new _three.Vector3(right, top);
   var rightBottom = new _three.Vector3(right, bottom);
   var points = [leftBottom, rightBottom, rightTop, leftTop].map(function (point) {
-    point.setX(point.x / window.innerWidth * 2 - 1.25);
-    point.setY(-(point.y / window.innerHeight) * 2 + 1);
+    point.setX(point.x / window.innerWidth * 2 - (widescreen ? 1.25 : 1.75));
+    point.setY(-(point.y / window.innerHeight) * 2 + (widescreen ? 1.35 : 1.125));
     point.setZ(0.5);
     return point.unproject(five.camera).addScaledVector(cameraDirection, 0.2);
   }); // __debug__
   // const colors = [0xdc143c, 0xffff00, 0x0000ff, 0x008000]
   // points.forEach((p, index) => five.scene.add(getSphere(p, colors[index])))
+  // 判断是手机 150
 
-  var ratio = leftBottom.distanceTo(rightBottom) / 150;
+  var ratio = leftBottom.distanceTo(rightBottom) / (widescreen ? 150 : 120);
   return {
     points: points,
     ratio: ratio
@@ -91,6 +93,7 @@ var searchV1 = function searchV1(_ref) {
 
 
 function SpatialScenePanel(props) {
+  var timeoutRef = React.useRef(null);
   var ref = React.useRef(null);
   var panelRef = React.useRef(null);
   var rendererRef = React.useRef((0, _CSS3DRenderPlugin.CSS3DRenderPlugin)(props.five));
@@ -122,6 +125,9 @@ function SpatialScenePanel(props) {
           css3DObject = _ref2.css3DObject,
           render = _ref2.render;
 
+      Object.assign(window, {
+        $css3DObject: css3DObject
+      });
       if (!container) return;
 
       _reactDom["default"].render( /*#__PURE__*/React.createElement(Panel, {
@@ -137,7 +143,8 @@ function SpatialScenePanel(props) {
         var progress = _ref4.progress;
         var needRotateY = Math.PI / 90 * 11 * progress;
         var rotateY = needRotateY - lastRotateY;
-        css3DObject === null || css3DObject === void 0 ? void 0 : css3DObject.rotateY(rotateY);
+        css3DObject === null || css3DObject === void 0 ? void 0 : css3DObject.rotateY(rotateY); // css3DObject?.rotateZ
+
         lastRotateY = needRotateY;
       }).onStart(function () {
         css3DObject === null || css3DObject === void 0 ? void 0 : css3DObject.rotateY(startRotateY);
@@ -146,23 +153,35 @@ function SpatialScenePanel(props) {
         var _panelRef$current;
 
         (_panelRef$current = panelRef.current) === null || _panelRef$current === void 0 ? void 0 : _panelRef$current.classList.add('show');
-      }).play();
+      }).play(); // Object.assign(window, {  $dispose: () => {
+      //   panelRef.current?.classList.add('hide')
+      //   setTimeout(() => dispose?.(), 1500)
+      // } })
+
       var start = keyframe.start,
           end = keyframe.end;
-      setTimeout(function () {
+      timeoutRef.current = setTimeout(function () {
         var _panelRef$current2;
 
         (_panelRef$current2 = panelRef.current) === null || _panelRef$current2 === void 0 ? void 0 : _panelRef$current2.classList.add('hide');
-        setTimeout(function () {
-          return dispose === null || dispose === void 0 ? void 0 : dispose();
+        timeoutRef.current = setTimeout(function () {
+          dispose === null || dispose === void 0 ? void 0 : dispose();
+          timeoutRef.current = null;
         }, 1500);
       }, end - start);
-    }; // Object.assign(window, { $callback: callback })
+    };
 
+    Object.assign(window, {
+      $callback: callback
+    }); // setTimeout(() => {callback()}, 8000)
 
     props.subscribe.on(_VreoUnit.VreoKeyframeEnum.Custom, callback);
     return function () {
       props.subscribe.off(_VreoUnit.VreoKeyframeEnum.Custom, callback);
+
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
     };
   }, []);
   return /*#__PURE__*/React.createElement("div", {
@@ -170,6 +189,38 @@ function SpatialScenePanel(props) {
     ref: ref
   });
 }
+/** 背景动画：控制延迟 */
+
+
+function SpatialScenePanelBg() {
+  var ref = React.useRef(null);
+  var timeoutRef = React.useRef(null);
+  React.useEffect(function () {
+    if (!ref.current) return;
+
+    var listener = function listener() {
+      var _ref$current;
+
+      (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.setAttribute('class', 'SpatialScenePanel-bg');
+      timeoutRef.current = setTimeout(function () {
+        var _ref$current2;
+
+        (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.setAttribute('class', 'SpatialScenePanel-bg SpatialScenePanel-bg--animation');
+        timeoutRef.current = null;
+      }, 3000);
+    };
+
+    ref.current.addEventListener('animationend', listener);
+    return function () {
+      if (ref.current) ref.current.removeEventListener('animationend', listener);
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: "SpatialScenePanel-bg SpatialScenePanel-bg--animation"
+  });
+}
 
 var Panel = /*#__PURE__*/React.forwardRef(function (props, myRef) {
   var _props$data, _props$data2, _props$data3, _props$data3$stateLis;
@@ -179,9 +230,7 @@ var Panel = /*#__PURE__*/React.forwardRef(function (props, myRef) {
     ref: myRef
   }, /*#__PURE__*/React.createElement("div", {
     className: "SpatialScenePanel-show-area"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "SpatialScenePanel-bg"
-  }), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(SpatialScenePanelBg, null), /*#__PURE__*/React.createElement("div", {
     className: "SpatialScenePanel-header"
   }, /*#__PURE__*/React.createElement("div", {
     className: "SpatialScenePanel-title"
@@ -204,4 +253,27 @@ var Panel = /*#__PURE__*/React.forwardRef(function (props, myRef) {
   }))), /*#__PURE__*/React.createElement("div", {
     className: "SpatialScenePanel-disappear-area"
   }));
-});
+}); // export function SpatialScenePanel() {
+//   // const data = mockData
+//   return (
+//     <div className="SpatialScenePanel" >
+//     <div className="SpatialScenePanel-show-area">
+//       <SpatialScenePanelBg />
+//       <div className="SpatialScenePanel-header">
+//         <div className="SpatialScenePanel-title">{data?.title}</div>
+//         <div className="SpatialScenePanel-temperature">{data?.temperature}℃</div>
+//       </div>
+//       <div className="SpatialScenePanel-body">
+//         {data?.stateList?.map((state, index) => (
+//           <div key={`scene-${state.text}`} className={`SpatialScenePanel-item index_${index}`}>
+//             <img className="SpatialScenePanel-icon" src={state.icon}></img>
+//             <div className="SpatialScenePanel-text">{state.text}</div>
+//             <div className="SpatialScenePanel-dot"></div>
+//           </div>
+//         ))}
+//       </div>
+//     </div>
+//     <div className="SpatialScenePanel-disappear-area"></div>
+//   </div>
+//   )
+// }

package/lib/Player/index.d.ts

@@ -6,7 +6,7 @@ export declare class Player extends Subscribe<VreoKeyframeEvent> {
     private controller;
     configs: Readonly<PlayerConfigs>;
     constructor(five: Five, configs?: Partial<PlayerConfigs>);
-    load(vreoUnit: VreoUnit, currentTime?: number): Promise<boolean>;
+    load(vreoUnit: VreoUnit, currentTime?: number, preload?: boolean): Promise<boolean>;
     get paused(): boolean;
     play(): boolean;
     pause(): void;

package/lib/Player/index.js

@@ -17,6 +17,8 @@ var _App = require("./App");
 
 var _Controller = require("./Controller");
 
+var _VreoUnit = require("../typings/VreoUnit");
+
 var _mobx = require("mobx");
 
 var _Drawer = require("./modules/Drawer");
@@ -112,9 +114,14 @@ var Player = /*#__PURE__*/function (_Subscribe) {
     value: function () {
       var _load = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(vreoUnit) {
         var _this$controller$vide,
+            _this$configs$imageOp,
             _this2 = this;
 
         var currentTime,
+            preload,
+            panoIndexMap,
+            panoIndexs,
+            i,
             _this$controller$vide2,
             _this$controller$vide3,
             _args = arguments;
@@ -124,34 +131,86 @@ var Player = /*#__PURE__*/function (_Subscribe) {
             switch (_context.prev = _context.next) {
               case 0:
                 currentTime = _args.length > 1 && _args[1] !== undefined ? _args[1] : 0;
+                preload = _args.length > 2 && _args[2] !== undefined ? _args[2] : false;
 
                 if (this.controller.visible) {
-                  _context.next = 5;
+                  _context.next = 6;
                   break;
                 }
 
                 this.controller.setVisible(true); // 延迟 500ms 规避跟 DOM 动画冲突
 
-                _context.next = 5;
+                _context.next = 6;
                 return new Promise(function (resolve) {
                   setTimeout(function () {
                     return resolve(true);
                   }, 500);
                 });
 
-              case 5:
+              case 6:
                 if (this.controller.stopInterval) {
                   this.controller.stopInterval();
                   this.controller.stopInterval = undefined;
                 }
 
                 this.controller.vreoUnit = vreoUnit;
-                (_this$controller$vide = this.controller.videoInstance) === null || _this$controller$vide === void 0 ? void 0 : _this$controller$vide.pause(); // 新数据载入就绪
+                (_this$controller$vide = this.controller.videoInstance) === null || _this$controller$vide === void 0 ? void 0 : _this$controller$vide.pause(); // 预载逻辑
+                // 是否降低图片分辨率
+
+                if (this.$five.imageOptions.size && (_this$configs$imageOp = this.configs.imageOptions) !== null && _this$configs$imageOp !== void 0 && _this$configs$imageOp.size && this.$five.imageOptions.size > this.configs.imageOptions.size) {
+                  this.$five.imageOptions.size = this.configs.imageOptions.size;
+                } // 预载数据中的点位
+
+
+                if (!(preload || preload === undefined && this.configs.autoPreload)) {
+                  _context.next = 20;
+                  break;
+                }
+
+                panoIndexMap = vreoUnit.keyframes.filter(function (vreoKeyframe) {
+                  if (vreoKeyframe.type !== _VreoUnit.VreoKeyframeEnum.CameraMovement) {
+                    return false;
+                  }
+
+                  var data = vreoKeyframe.data;
+
+                  if (data.panoIndex === undefined) {
+                    return false;
+                  }
+
+                  return true;
+                }).reduce(function (accu, curr) {
+                  var panoIndex = curr.data.panoIndex;
 
+                  if (!accu[panoIndex]) {
+                    accu[panoIndex] = true;
+                  }
+
+                  return accu;
+                }, {});
+                panoIndexs = Object.keys(panoIndexMap);
+                i = 0;
+
+              case 14:
+                if (!(i < panoIndexs.length)) {
+                  _context.next = 20;
+                  break;
+                }
+
+                _context.next = 17;
+                return this.$five.preloadPano(Number(panoIndexs[i]));
+
+              case 17:
+                i++;
+                _context.next = 14;
+                break;
+
+              case 20:
+                // 新数据载入就绪
                 this.emit('loaded', vreoUnit);
 
                 if (!vreoUnit.video.url) {
-                  _context.next = 14;
+                  _context.next = 26;
                   break;
                 }
 
@@ -159,19 +218,19 @@ var Player = /*#__PURE__*/function (_Subscribe) {
                   this.controller.videoAgentScene.videoAgentMesh.videoInstance.currentTime = currentTime / 1000;
                 }
 
-                _context.next = 13;
+                _context.next = 25;
                 return (_this$controller$vide3 = this.controller.videoAgentScene) === null || _this$controller$vide3 === void 0 ? void 0 : _this$controller$vide3.videoAgentMesh.play(vreoUnit.video.url);
 
-              case 13:
+              case 25:
                 this.play();
 
-              case 14:
+              case 26:
                 this.controller.run(function (type, keyframe) {
                   return _this2.emit(type, keyframe);
                 });
                 return _context.abrupt("return", true);
 
-              case 16:
+              case 28:
               case "end":
                 return _context.stop();
             }

package/lib/Player/modules/VideoAgent/VideoAgentMesh.d.ts

@@ -1,6 +1,7 @@
 import * as THREE from 'three';
 export interface VideoAgentMeshOptions {
     videoInstance?: HTMLVideoElement;
+    audioInstance?: HTMLAudioElement;
 }
 /**
  * 视频经纪人MESH

package/lib/Player/modules/VideoAgent/VideoAgentMesh.js

@@ -106,7 +106,8 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
     _this.options = options;
     _this.freeze = false;
     _this.paused = true;
-    {
+
+    if (!options.audioInstance) {
       if (cacheInstance.audioInstance) {
         _this.audioInstance = cacheInstance.audioInstance;
       } else {
@@ -122,7 +123,10 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
         _this.audioInstance = audioInstance;
         cacheInstance.audioInstance = audioInstance;
       }
+    } else {
+      _this.audioInstance = options.audioInstance;
     }
+
     (0, _mobx.makeObservable)(_assertThisInitialized(_this), {
       paused: _mobx.observable
     });

package/lib/Player/modules/VideoAgent/VideoAgentScene.d.ts

@@ -6,7 +6,10 @@ export declare class VideoAgentScene {
     camera: THREE.OrthographicCamera;
     renderer: THREE.WebGLRenderer;
     container: HTMLElement;
-    constructor(container: HTMLElement, needRender?: boolean);
+    constructor(container: HTMLElement, needRender?: boolean, options?: {
+        videoInstance?: HTMLVideoElement;
+        audioInstance?: HTMLAudioElement;
+    });
     run: () => void;
     dispose: () => void;
 }

package/lib/Player/modules/VideoAgent/VideoAgentScene.js

@@ -23,6 +23,7 @@ var VideoAgentScene = function VideoAgentScene(container) {
   var _this = this;
 
   var needRender = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
 
   _classCallCheck(this, VideoAgentScene);
 
@@ -74,7 +75,7 @@ var VideoAgentScene = function VideoAgentScene(container) {
 
   _domElement.setAttribute('style', "width: ".concat(state.width, "px;height: ").concat(state.height, "px;"));
 
-  this.videoAgentMesh = new _VideoAgentMesh.VideoAgentMesh(480, 270, 1, 1);
+  this.videoAgentMesh = new _VideoAgentMesh.VideoAgentMesh(480, 270, 1, 1, options);
 
   if (needRender) {
     container.append(_domElement);

package/lib/Player/modules/VideoAgent/index.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="react" />
+import { VideoAgentMeshOptions } from './VideoAgentMesh';
 export declare function VideoAgent(props: {
     onClick?: () => void;
+    options?: VideoAgentMeshOptions;
 }): JSX.Element;

package/lib/Player/modules/VideoAgent/index.js

@@ -28,7 +28,7 @@ function VideoAgent(props) {
       return;
     }
 
-    var videoAgentScene = new _VideoAgentScene.VideoAgentScene(ref.current);
+    var videoAgentScene = new _VideoAgentScene.VideoAgentScene(ref.current, true, props.options || {});
     controller.videoAgentScene = videoAgentScene;
     return function () {
       var _controller$videoAgen;

package/lib/Player/modules/keyframes/CameraMovement/index.js

@@ -45,13 +45,49 @@ function CameraMovement() {
                 cameraMovementData = data;
                 effect = cameraMovementData.effect;
 
-                if (effect === _typings.CameraMovementEffect.Rotate) {
-                  ref.current.rotate(data, end - start);
-                } else {
-                  ref.current.move(data, end - start);
+                if (!(effect === _typings.CameraMovementEffect.Rotate)) {
+                  _context.next = 9;
+                  break;
                 }
 
-              case 5:
+                _context.next = 7;
+                return ref.current.rotate(data, end - start);
+
+              case 7:
+                _context.next = 21;
+                break;
+
+              case 9:
+                if (!(effect === _typings.CameraMovementEffect.Move)) {
+                  _context.next = 14;
+                  break;
+                }
+
+                _context.next = 12;
+                return ref.current.move(data, end - start);
+
+              case 12:
+                _context.next = 21;
+                break;
+
+              case 14:
+                if (!(cameraMovementData.panoIndex !== undefined && cameraMovementData.panoIndex !== five.panoIndex)) {
+                  _context.next = 19;
+                  break;
+                }
+
+                _context.next = 17;
+                return ref.current.move(data, end - start);
+
+              case 17:
+                _context.next = 21;
+                break;
+
+              case 19:
+                _context.next = 21;
+                return ref.current.rotate(data, end - start);
+
+              case 21:
               case "end":
                 return _context.stop();
             }

package/lib/Player/modules/keyframes/UpdateVRPanorama/index.js

@@ -22,42 +22,45 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function UpdateVRPanorama() {
   var controller = (0, _hooks.useController)();
   var five = (0, _hooks.useFiveInstance)();
-  var rawRef = React.useRef(null);
-  var workRef = React.useRef(null);
+  var deafultWorkRef = React.useRef(null);
+  var updateWorkRef = React.useRef(null);
   var restoreCallback = React.useCallback(function () {
-    if (rawRef.current) {
-      var work = (0, _five.parseWork)(rawRef.current);
+    if (deafultWorkRef.current) {
+      var work = (0, _five.parseWork)(deafultWorkRef.current);
       five.load(work);
     }
 
-    workRef.current = null;
+    updateWorkRef.current = null;
   }, []);
   var pausedCallback = React.useCallback(function () {
-    if (rawRef.current) {
-      var work = (0, _five.parseWork)(rawRef.current);
+    if (deafultWorkRef.current) {
+      var work = (0, _five.parseWork)(deafultWorkRef.current);
+      Object.assign(window, {
+        $rawWork: work
+      });
       five.load(work);
     }
   }, []);
   var playingCallback = React.useCallback(function () {
-    if (!workRef.current) {
+    if (!updateWorkRef.current) {
       return;
     }
 
-    five.load(workRef.current);
+    five.load(updateWorkRef.current);
   }, []);
   React.useEffect(function () {
     var callback = function callback(keyframe) {
       var _five$work;
 
-      if (!rawRef.current) {
-        rawRef.current = five.work.raw.works;
+      if (!deafultWorkRef.current) {
+        deafultWorkRef.current = five.work.raw.works;
       }
 
       var data = keyframe.data; // 如果数据中有新 work 数据，则直接载入
 
       if (data.work) {
-        workRef.current = (0, _five.parseWork)(data.work);
-        five.load(workRef.current);
+        updateWorkRef.current = (0, _five.parseWork)(data.work);
+        five.load(updateWorkRef.current);
         return;
       }
 
@@ -72,8 +75,13 @@ function UpdateVRPanorama() {
         delete data.dynamic_scene;
       }
 
-      workRef.current = (0, _five.parseWork)([lastRawWork, data]);
-      five.load(workRef.current);
+      Object.assign(window, {
+        $work1: JSON.parse(lastRawWork),
+        $work2: data,
+        parseWork: _five.parseWork
+      });
+      updateWorkRef.current = (0, _five.parseWork)([lastRawWork, data]);
+      five.load(updateWorkRef.current);
     };
 
     controller.on(_VreoUnit.VreoKeyframeEnum.UpdateVRPanorama, callback); // 离开 将之前的内容清空

package/lib/Player/typings.d.ts

@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react';
 import { Subscribe, Five } from '@realsee/five';
 import { VreoKeyframeConfigMap, VreoKeyframeEvent } from '../typings/VreoUnit';
+import { VideoAgentMeshOptions } from './modules/VideoAgent/VideoAgentMesh';
 export interface PlayerConfigs {
     containter?: ReactDOM.Container;
     keyframeMap: VreoKeyframeConfigMap;
@@ -13,11 +14,16 @@ export interface PlayerConfigs {
         videoEffect?: HTMLVideoElement;
         modelTVVideo?: HTMLVideoElement;
     };
+    videoAgentMeshOptions?: VideoAgentMeshOptions;
     /**
      * 如果需要在 底部面板添加自定义内容，可以传递个 React 组件。
      */
     customPanelChildren?: ReactNode;
     customKeyframes?: React.FC<CustomVreoKeyframeProps>[];
+    imageOptions?: {
+        size: number;
+    };
+    autoPreload?: boolean;
 }
 export declare type VreoSubscribe = Pick<Subscribe<VreoKeyframeEvent>, 'on' | 'once' | 'off'>;
 export interface CustomVreoKeyframeProps {