@realsee/vreo 0.1.6 → 0.2.0-alpha.3

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

@@ -0,0 +1,76 @@
+"use strict";
+
+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); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BgMusic = BgMusic;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _VreoUnit = require("../../../../typings/VreoUnit");
+
+var _hooks = require("../../../hooks");
+
+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); }
+
+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; }
+
+function BgMusic() {
+  var controller = (0, _hooks.useController)();
+  var timeoutIdRef = React.useRef(null);
+  var cleanTimeout = React.useCallback(function () {
+    if (timeoutIdRef.current) {
+      clearTimeout(timeoutIdRef.current);
+      timeoutIdRef.current = null;
+    }
+  }, []);
+  React.useEffect(function () {
+    var audio = new Audio();
+    audio.setAttribute('id', 'vreo-singleton-bgmusic');
+    audio.style.display = 'none';
+    audio.setAttribute('playsinline', 'true');
+    audio.loop = true;
+    document.body.append(audio);
+
+    var callback = function callback(keyframe) {
+      var start = keyframe.start,
+          end = keyframe.end;
+      var _ref = keyframe.data,
+          url = _ref.url;
+      audio.src = url;
+
+      var playCallback = function playCallback() {
+        audio.play();
+      };
+
+      audio.addEventListener('canplaythrough', playCallback);
+      cleanTimeout();
+
+      var cleanAudio = function cleanAudio() {
+        audio.pause();
+        audio.currentTime = 0;
+        audio.src = '';
+        cleanTimeout();
+        audio.removeEventListener('canplaythrough', playCallback);
+      };
+
+      var duration = end - start || 5000;
+      timeoutIdRef.current = setTimeout(function () {
+        cleanAudio();
+      }, duration);
+      controller.once('paused', function () {
+        cleanAudio();
+      });
+    };
+
+    controller.on(_VreoUnit.VreoKeyframeEnum.BgMusic, callback);
+    return function () {
+      controller.off(_VreoUnit.VreoKeyframeEnum.BgMusic, callback);
+      document.body.removeChild(audio);
+      cleanTimeout();
+    };
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null);
+}

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

@@ -18,27 +18,47 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 
 function InfoPanelImg(_ref) {
-  var url = _ref.url;
+  var url = _ref.url,
+      children = _ref.children;
   return /*#__PURE__*/React.createElement("div", {
     className: "vreo-infoPanel vreo-infoPanel--img"
-  }, /*#__PURE__*/React.createElement("img", {
+  }, children, /*#__PURE__*/React.createElement("div", {
     className: "vreo-infoPanelImg",
-    src: url
+    style: {
+      backgroundImage: "url(".concat(url, ")")
+    }
   }));
 }
 
 function InfoPanelVideo(_ref2) {
-  var url = _ref2.url;
+  var url = _ref2.url,
+      children = _ref2.children;
   return /*#__PURE__*/React.createElement("div", {
     className: "vreo-infoPanel vreo-infoPanel--video"
+  }, children, /*#__PURE__*/React.createElement("div", {
+    className: "vreo-infoPanelWrapper"
   }, /*#__PURE__*/React.createElement("video", {
     playsInline: true,
     autoPlay: true,
     className: "vreo-infoPanelVideo",
     src: url
-  }));
+  })));
 }
 
+var Title = function Title(props) {
+  if (!props.title && !props.subTitle) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "vreo-infoPanel-title"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "vreo-infoPanel-t1"
+  }, props.title), /*#__PURE__*/React.createElement("div", {
+    className: "vreo-infoPanel-t2"
+  }, props.subTitle));
+};
+
 function InfoPanel() {
   var timeoutRef = React.useRef();
   var controller = (0, _hooks.useController)();
@@ -54,19 +74,27 @@ function InfoPanel() {
           end = keyframe.end,
           data = keyframe.data;
       var infoPanelData = data;
+      var title = infoPanelData.title,
+          subTitle = infoPanelData.subTitle;
 
       if (infoPanelData.type === _VreoUnit.InfoPanelTypeEnum.Image) {
         controller.openDrawer({
           content: /*#__PURE__*/React.createElement(InfoPanelImg, {
             url: infoPanelData.url
-          }),
+          }, /*#__PURE__*/React.createElement(Title, {
+            title: title,
+            subTitle: subTitle
+          })),
           height: '60vh'
         });
       } else if (infoPanelData.type === _VreoUnit.InfoPanelTypeEnum.Video) {
         controller.openDrawer({
           content: /*#__PURE__*/React.createElement(InfoPanelVideo, {
             url: infoPanelData.url
-          }),
+          }, /*#__PURE__*/React.createElement(Title, {
+            title: title,
+            subTitle: subTitle
+          })),
           height: '60vh'
         });
       }
@@ -76,7 +104,23 @@ function InfoPanel() {
       }, end - start);
     };
 
-    controller.on(_VreoUnit.VreoKeyframeEnum.InfoPanel, callback);
+    controller.on(_VreoUnit.VreoKeyframeEnum.InfoPanel, callback); // Object.assign(window, {
+    //   $setInfoPanel: () => {
+    //     controller.openDrawer({
+    //       content: (
+    //         // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/seesay/tools/cat_music___f68fb9bbe1f7cd6d00a16456dd0b09ad.gif'>
+    //         // <InfoPanelImg url="http://vrlab-public.ljcdn.com/common/images/web/d94e1bd7-0311-4b20-9c41-a1294fe43554.png">
+    //         //   <Title title="场景联动抓拍图片" subTitle={'2022.02.17 14:00'} />
+    //         // </InfoPanelImg>
+    //         <InfoPanelVideo url="//vrlab-public.ljcdn.com/release/seesay/tools/2022011713142___b320f74a5e1b5ad4bb46b4dc69d73ecc.mp4">
+    //         <Title title="场景联动抓拍图片" subTitle={'2022.02.17 14:00'} />
+    //       </InfoPanelVideo>
+    //       ),
+    //       height: '60vh',
+    //     })
+    //   },
+    // })
+
     return function () {
       controller.off(_VreoUnit.VreoKeyframeEnum.InfoPanel, callback);
 

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

@@ -22,29 +22,76 @@ 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 restoreCallback = React.useCallback(function () {
+    if (rawRef.current) {
+      var work = (0, _five.parseWork)(rawRef.current);
+      five.load(work);
+    }
+
+    workRef.current = null;
+  }, []);
+  var pausedCallback = React.useCallback(function () {
+    if (rawRef.current) {
+      var work = (0, _five.parseWork)(rawRef.current);
+      five.load(work);
+    }
+  }, []);
+  var playingCallback = React.useCallback(function () {
+    if (!workRef.current) {
+      return;
+    }
+
+    five.load(workRef.current);
+  }, []);
   React.useEffect(function () {
     var callback = function callback(keyframe) {
       var _five$work;
 
-      var _ref = keyframe.data,
-          panoIndex = _ref.panoIndex,
-          images = _ref.images;
-      var newWorkJSON = JSON.parse(JSON.stringify((_five$work = five.work) === null || _five$work === void 0 ? void 0 : _five$work.raw.work)); // // 原Work数据不能被修改
+      if (!rawRef.current) {
+        rawRef.current = five.work.raw.works;
+      }
 
-      if (newWorkJSON.panorama && newWorkJSON.panorama.list && newWorkJSON.panorama.list[panoIndex]) {
-        Object.assign(newWorkJSON.panorama.list[panoIndex], images);
-      } else if (newWorkJSON.observers && newWorkJSON.observers[panoIndex] && newWorkJSON.observers[panoIndex].images) {
-        Object.assign(newWorkJSON.observers[panoIndex].images, images);
+      var data = keyframe.data; // 如果数据中有新 work 数据，则直接载入
+
+      if (data.work) {
+        workRef.current = (0, _five.parseWork)(data.work);
+        five.load(workRef.current);
+        return;
       }
 
-      var newWork = (0, _five.parseWork)(newWorkJSON); // // 需要还原么？待定 ...
+      var lastRawWork = (_five$work = five.work) === null || _five$work === void 0 ? void 0 : _five$work.raw.works[0]; // 动态场景：不提供完成的签名数据，需重新整理
+
+      if (data.dynamic_scene && !data.panorama) {
+        var lastWork = JSON.parse(lastRawWork);
+        var panorama = lastWork.panorama;
+        var index = data.dynamic_scene.images.index;
+        panorama.list[index] = data.dynamic_scene.images;
+        data.panorama = panorama;
+        delete data.dynamic_scene;
+      }
 
-      five.load(newWork);
+      workRef.current = (0, _five.parseWork)([lastRawWork, data]);
+      five.load(workRef.current);
     };
 
-    controller.on(_VreoUnit.VreoKeyframeEnum.UpdateVRPanorama, callback);
+    controller.on(_VreoUnit.VreoKeyframeEnum.UpdateVRPanorama, callback); // 离开 将之前的内容清空
+
+    controller.on(_VreoUnit.VreoKeyframeEnum.Exit, restoreCallback); // 新载入数据 将之前的内容清空
+
+    controller.on('loaded', restoreCallback); // 暂停 回到默认状态
+
+    controller.on('paused', pausedCallback); // 播放 回归暂停前状态
+
+    controller.on('playing', playingCallback);
     return function () {
+      // 清理事件监听
       controller.off(_VreoUnit.VreoKeyframeEnum.UpdateVRPanorama, callback);
+      controller.off(_VreoUnit.VreoKeyframeEnum.Exit, restoreCallback);
+      controller.off('loaded', restoreCallback);
+      controller.off('paused', pausedCallback);
+      controller.off('playing', playingCallback);
     };
   }, [controller]);
   return /*#__PURE__*/React.createElement(React.Fragment, null);

package/lib/Player/typings.d.ts

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

package/lib/fivePlugins/CameraMovementPlugin/index.js

@@ -128,7 +128,7 @@ var CameraMovementPlugin = function CameraMovementPlugin(five) {
                 var panoIndex = args.panoIndex !== undefined ? args.panoIndex : five.panoIndex;
 
                 if (panoIndex !== undefined) {
-                  five.moveToPano(panoIndex, Object.assign({
+                  var movePanoOptions = {
                     duration: duration,
                     // 移动耗时
                     moveEndCallback: function moveEndCallback() {
@@ -137,9 +137,11 @@ var CameraMovementPlugin = function CameraMovementPlugin(five) {
                     // 移动结束
                     moveCancelCallback: function moveCancelCallback() {
                       return reject(false);
-                    } // 移动开始
-
-                  }, args));
+                    },
+                    // 移动开始
+                    effect: 'fade'
+                  };
+                  five.moveToPano(panoIndex, Object.assign(movePanoOptions, args));
                 } else {
                   reject(false);
                 }

package/lib/fivePlugins/CameraMovementPlugin/typings.d.ts

@@ -1,4 +1,4 @@
-import { Mode, Pose } from '@realsee/five';
+import { Mode, MovePanoOptions, Pose } from '@realsee/five';
 export interface CameraMovementPluginParameterType {
 }
 export interface CameraMovementPluginExportType {
@@ -33,7 +33,7 @@ export interface CameraMovementOptsCallback {
 export declare type MoveArgs = {
     mode: Mode;
     panoIndex: number;
-} & Pose;
+} & Pose & Pick<MovePanoOptions, 'effect'>;
 export declare type MoveOpts = {
     preload?: boolean;
 } & CameraMovementOptsCallback;

package/lib/react/index.d.ts

@@ -1,6 +1,10 @@
 import * as React from 'react';
+import { PlayerConfigs } from '../Player/typings';
 import { VreoKeyframeEvent, VreoUnit } from '../typings/VreoUnit';
-export declare const VreoProvider: React.FC;
+export interface VreoProviderProps {
+    configs?: Partial<PlayerConfigs>;
+}
+export declare const VreoProvider: React.FC<VreoProviderProps>;
 /**
  * VreoPlayer 命令集合。
  */

package/lib/react/index.js

@@ -44,7 +44,7 @@ var VreoProvider = function VreoProvider(props) {
 
   var playerRef = React.useRef(null);
   React.useEffect(function () {
-    playerRef.current = new _Player.Player(five);
+    playerRef.current = new _Player.Player(five, props.configs || {});
     setPlayer(playerRef.current);
     return function () {
       var _playerRef$current;

package/lib/typings/VreoUnit.d.ts

@@ -1,4 +1,4 @@
-import { Mode, Pose, WorkCubeImage } from '@realsee/five';
+import { Mode, Pose } from '@realsee/five';
 import { CameraMovementEffect, Rotation } from '../fivePlugins/CameraMovementPlugin/typings';
 export declare enum VreoKeyframeEnum {
     /** 运镜 */
@@ -35,6 +35,10 @@ export declare enum VreoKeyframeEnum {
      * 视频特效
      */
     VideoEffect = "VideoEffect",
+    /**
+     * 背景音乐
+     */
+    BgMusic = "BgMusic",
     /**
      * 结束
      */
@@ -57,6 +61,7 @@ export declare type VreoKeyframeConfigMap = {
  * 剧本关键帧
  */
 export interface VreoKeyframe {
+    uuid: string;
     type: VreoKeyframeEnum;
     start: number;
     end: number;
@@ -89,8 +94,10 @@ export interface VreoUnit {
 export declare type VreoKeyframeEvent = {
     [key in VreoKeyframeEnum]: (keyframe: VreoKeyframe) => void;
 } & {
+    loaded: (vreoUnit: VreoUnit) => void;
     paused: () => void;
     playing: () => void;
+    unknownKeyframeType: (keyframe: Record<string, any>) => void;
 };
 /**
  * 相机运动
@@ -113,8 +120,22 @@ export declare type PrompterData = {
  * VR 全景切换
  */
 export declare type UpdateVRPanoramaData = {
-    panoIndex: number;
-    images: WorkCubeImage;
+    _signature: string;
+    allow_hosts: string[];
+    certificate: string;
+    expire_at: string;
+    dynamic_scene?: {
+        images: {
+            index: number;
+            right: string;
+            left: string;
+            up: string;
+            down: string;
+            front: string;
+            back: string;
+        };
+    };
+    [key: string]: any;
 };
 /**
  * 顶点
@@ -195,6 +216,8 @@ export declare enum InfoPanelTypeEnum {
 export declare type InfoPanelData = {
     type: InfoPanelTypeEnum;
     url: string;
+    title?: string;
+    subTitle?: string;
 };
 /**
  * 视频特效
@@ -206,5 +229,11 @@ export declare type VideoEffectData = {
     direction?: Vertex;
     vector?: Pick<Pose, 'longitude' | 'latitude'>;
 };
+/**
+ * 背景音乐
+ */
+export declare type BgMusicData = {
+    url: string;
+};
 /** 自定义序列帧 */
 export declare type CustomData = Record<string, any>;

package/lib/typings/VreoUnit.js

@@ -21,6 +21,7 @@ exports.VreoKeyframeEnum = VreoKeyframeEnum;
   VreoKeyframeEnum["PanoEffect"] = "PanoEffect";
   VreoKeyframeEnum["InfoPanel"] = "InfoPanel";
   VreoKeyframeEnum["VideoEffect"] = "VideoEffect";
+  VreoKeyframeEnum["BgMusic"] = "BgMusic";
   VreoKeyframeEnum["Exit"] = "Exit";
   VreoKeyframeEnum["Custom"] = "Custom";
 })(VreoKeyframeEnum || (exports.VreoKeyframeEnum = VreoKeyframeEnum = {}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@realsee/vreo",
-  "version": "0.1.6",
+  "version": "0.2.0-alpha.3",
   "description": "Vreo (VR Video 缩写) 是基于如视三维渲染引擎 Five 和 用户界面构建库 React 实现的如视 3D 空间剧本播放器。",
   "keywords": [
     "realsee",
@@ -25,7 +25,7 @@
     "packages": "node ./dev-tools/build-packages.js"
   },
   "peerDependencies": {
-    "@realsee/five": "^5.0.0-alpha.53",
+    "@realsee/five": "^5.0.0-alpha.103",
     "react": "^16.0.0",
     "react-dom": "^16.0.0"
   },
@@ -35,7 +35,8 @@
     "@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/dnalogel": "^0.1.7-alpha.10",
+    "@realsee/five": "^5.0.0-alpha.103",
     "@types/offscreencanvas": "^2019.6.4",
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",

package/resources/Player/App.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import classNames from 'classnames'
 import { observer } from 'mobx-react'
 import { Controller } from './Controller'
-import { useController } from './hooks'
+import { useController, useFiveInstance } from './hooks'
 import { CameraMovement } from './modules/keyframes/CameraMovement'
 import { InfoPanel } from './modules/keyframes/InfoPanel'
 import { ModelVideo } from './modules/keyframes/ModelVideo'
@@ -13,6 +13,7 @@ import { Prompter } from './modules/keyframes/Prompter'
 import { UpdateVRPanorama } from './modules/keyframes/UpdateVRPanorama'
 import { VideoEffect } from './modules/keyframes/VideoEffect'
 import { VideoAgent } from './modules/VideoAgent'
+import { BgMusic } from './modules/keyframes/BgMusic'
 
 const AppView = observer(({ controller }: { controller: Controller }) => {
   return (
@@ -35,6 +36,7 @@ const AppView = observer(({ controller }: { controller: Controller }) => {
           }}
         />
         <Prompter />
+        {controller.configs?.customPanelChildren}
       </div>
     </div>
   )
@@ -53,6 +55,7 @@ export function App() {
         <PanoTextLabel />
         <InfoPanel />
         <PanoEffect />
+        <BgMusic />
       </>
       <AppView controller={controller} />
     </>