@realsee/vreo 0.1.6-alpha.1 → 0.1.6-alpha.5

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

@@ -247,7 +247,7 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
             switch (_context3.prev = _context3.next) {
               case 0:
                 videoUrl = _args3.length > 0 && _args3[0] !== undefined ? _args3[0] : '';
-                videoUrl = (videoUrl || '').replace(/https*:/, '');
+                videoUrl = videoUrl || '';
 
                 if (videoUrl) {
                   _context3.next = 10;

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

@@ -35,9 +35,19 @@ var VideoAgentScene = function VideoAgentScene(container) {
   }));
 
   _defineProperty(this, "run", function () {
-    // 视频开始 1s 不渲染：规避某些设备黑屏闪烁问题。视频前 2s 是最好是静默的。
+    var _this$videoAgentMesh$;
+
+    var domElement = _this.renderer.domElement; // 视频开始 1s 不渲染：规避某些设备黑屏闪烁问题。视频前 2s 是最好是静默的。
+
     if (!(_this.videoAgentMesh.paused || _this.videoAgentMesh.freeze) && _this.videoAgentMesh.currentTime > 1000) {
       _this.renderer.render(_this.scene, _this.camera);
+    } // 兼容非视频场景
+
+
+    if (!((_this$videoAgentMesh$ = _this.videoAgentMesh.videoUrl) !== null && _this$videoAgentMesh$ !== void 0 && _this$videoAgentMesh$.endsWith('.mp4'))) {
+      if (domElement.style.display !== 'none') domElement.style.display = 'none';
+    } else {
+      if (domElement.style.display !== 'block') domElement.style.display = 'block';
     }
 
     requestAnimationFrame(_this.run);
@@ -56,14 +66,18 @@ var VideoAgentScene = function VideoAgentScene(container) {
     width: container.offsetWidth,
     height: container.offsetHeight
   };
-  var domElement = this.renderer.domElement;
-  domElement.classList.add('VideoAgent-canvas');
+  var _domElement = this.renderer.domElement;
+
+  _domElement.classList.add('VideoAgent-canvas');
+
   this.renderer.setSize(state.width * window.devicePixelRatio, state.height * window.devicePixelRatio);
-  domElement.setAttribute('style', "width: ".concat(state.width, "px;height: ").concat(state.height, "px;"));
+
+  _domElement.setAttribute('style', "width: ".concat(state.width, "px;height: ").concat(state.height, "px;"));
+
   this.videoAgentMesh = new _VideoAgentMesh.VideoAgentMesh(480, 270, 1, 1);
 
   if (needRender) {
-    container.append(domElement);
+    container.append(_domElement);
     this.scene.add(this.videoAgentMesh);
     this.run();
   }

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

@@ -48,8 +48,8 @@ function ModelVideo() {
                 ref.current.disable();
                 _context.next = 6;
                 return ref.current.load({
-                  video_src: videoSrc.replace(/https*:/, ''),
-                  video_poster_src: videoPosterSrc.replace(/https*:/, ''),
+                  video_src: videoSrc,
+                  video_poster_src: videoPosterSrc,
                   points: [vertexs]
                 }, (_controller$configs = controller.configs) === null || _controller$configs === void 0 ? void 0 : (_controller$configs$v = _controller$configs.videos) === null || _controller$configs$v === void 0 ? void 0 : _controller$configs$v.modelTVVideo);
 

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

@@ -28,11 +28,15 @@ function UpdateVRPanorama() {
 
       var _ref = keyframe.data,
           panoIndex = _ref.panoIndex,
-          images = _ref.images;
-      Object.keys(images).forEach(function (_key) {
-        var key = _key;
-        images[key] = images[key].replace(/https*:\/\//, '//');
-      });
+          images = _ref.images,
+          work = _ref.work;
+
+      if (work) {
+        five.load(work);
+        return;
+      }
+
+      console.warn('not support.');
       var newWorkJSON = JSON.parse(JSON.stringify((_five$work = five.work) === null || _five$work === void 0 ? void 0 : _five$work.raw.work)); // // 原Work数据不能被修改
 
       if (newWorkJSON.panorama && newWorkJSON.panorama.list && newWorkJSON.panorama.list[panoIndex]) {

package/lib/typings/VreoUnit.d.ts

@@ -1,4 +1,4 @@
-import { Mode, Pose, WorkCubeImage } from '@realsee/five';
+import { Mode, Pose, WorkCubeImage, Work } from '@realsee/five';
 import { CameraMovementEffect, Rotation } from '../fivePlugins/CameraMovementPlugin/typings';
 export declare enum VreoKeyframeEnum {
     /** 运镜 */
@@ -115,6 +115,7 @@ export declare type PrompterData = {
 export declare type UpdateVRPanoramaData = {
     panoIndex: number;
     images: WorkCubeImage;
+    work?: Work;
 };
 /**
  * 顶点

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@realsee/vreo",
-  "version": "0.1.6-alpha.1",
+  "version": "0.1.6-alpha.5",
   "description": "Vreo (VR Video 缩写) 是基于如视三维渲染引擎 Five 和 用户界面构建库 React 实现的如视 3D 空间剧本播放器。",
   "keywords": [
     "realsee",
@@ -35,7 +35,7 @@
     "@babel/preset-env": "^7.16.4",
     "@babel/preset-react": "^7.16.0",
     "@babel/preset-typescript": "^7.16.0",
-    "@realsee/five": "^5.0.0-alpha.80",
+    "@realsee/five": "^5.0.0-alpha.91",
     "@types/offscreencanvas": "^2019.6.4",
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",

package/resources/Player/modules/VideoAgent/VideoAgentMesh.ts

@@ -196,7 +196,7 @@ export class VideoAgentMesh extends THREE.Mesh {
   }
 
   async play(videoUrl = '') {
-    videoUrl = (videoUrl || '').replace(/https*:/, '')
+    videoUrl = videoUrl || ''
     if (!videoUrl) {
       if (this.videoUrl) await this.videoInstance.play()
       else console.warn('警告：视频资源未初始化。')

package/resources/Player/modules/VideoAgent/VideoAgentScene.ts

@@ -31,10 +31,19 @@ export class VideoAgentScene {
   }
 
   run = () => {
+    const domElement = this.renderer.domElement
+
     // 视频开始 1s 不渲染：规避某些设备黑屏闪烁问题。视频前 2s 是最好是静默的。
     if (!(this.videoAgentMesh.paused || this.videoAgentMesh.freeze) && this.videoAgentMesh.currentTime > 1000) {
       this.renderer.render(this.scene, this.camera)
     }
+
+    // 兼容非视频场景
+    if (!this.videoAgentMesh.videoUrl?.endsWith('.mp4')) {
+      if (domElement.style.display !== 'none') domElement.style.display = 'none'
+    } else {
+      if (domElement.style.display !== 'block') domElement.style.display = 'block'
+    }
     requestAnimationFrame(this.run)
   }
 

package/resources/Player/modules/keyframes/ModelVideo/index.tsx

@@ -20,8 +20,8 @@ export function ModelVideo() {
       ref.current.disable()
       await ref.current.load(
         {
-          video_src: videoSrc.replace(/https*:/, ''),
-          video_poster_src: videoPosterSrc.replace(/https*:/, ''),
+          video_src: videoSrc,
+          video_poster_src: videoPosterSrc,
           points: [vertexs],
         },
         controller.configs?.videos?.modelTVVideo

package/resources/Player/modules/keyframes/UpdateVRPanorama/index.tsx

@@ -9,12 +9,14 @@ export function UpdateVRPanorama() {
 
   React.useEffect(() => {
     const callback = (keyframe: VreoKeyframe) => {
-      const { panoIndex, images } = keyframe.data as UpdateVRPanoramaData
+      const { panoIndex, images, work } = keyframe.data as UpdateVRPanoramaData
 
-      Object.keys(images).forEach((_key) => {
-        const key = _key as keyof WorkCubeImage
-        images[key] = images[key].replace(/https*:\/\//, '//')
-      })
+      if (work) {
+        five.load(work)
+        return
+      }
+
+      console.warn('not support.')
       const newWorkJSON = JSON.parse(JSON.stringify(five.work?.raw.work))
 
       // // 原Work数据不能被修改

package/resources/typings/VreoUnit.ts

@@ -1,4 +1,4 @@
-import { Mode, Pose, WorkCubeImage } from '@realsee/five'
+import { Mode, Pose, WorkCubeImage, Work } from '@realsee/five'
 import { CameraMovementEffect, Rotation } from '../fivePlugins/CameraMovementPlugin/typings'
 
 export enum VreoKeyframeEnum {
@@ -125,6 +125,7 @@ export type PrompterData = {
 export type UpdateVRPanoramaData = {
   panoIndex: number
   images: WorkCubeImage
+  work?: Work
 }
 
 /**