@realsee/vreo 0.2.0-alpha.9 → 1.0.0-alpha.10

package/lib/shared-utils/createTransMatrix.d.ts

@@ -0,0 +1 @@
+export declare function createTransMatrix(arr1: number[]): (arr2: number[]) => number[];

package/lib/shared-utils/createTransMatrix.js

@@ -0,0 +1,28 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createTransMatrix = createTransMatrix;
+var THREE = _interopRequireWildcard(require("three"));
+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 _construct(Parent, args, Class) { if (_isNativeReflectConstruct()) { _construct = Reflect.construct.bind(); } else { _construct = function _construct(Parent, args, Class) { var a = [null]; a.push.apply(a, args); var Constructor = Function.bind.apply(Parent, a); var instance = new Constructor(); if (Class) _setPrototypeOf(instance, Class.prototype); return instance; }; } return _construct.apply(null, arguments); }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+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); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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; }
+function createTransMatrix(arr1) {
+  var matrix4 = new THREE.Matrix4();
+  matrix4.fromArray(arr1);
+  return function (arr2) {
+    var vector3 = _construct(THREE.Vector3, _toConsumableArray(arr2));
+    vector3.applyMatrix4(matrix4);
+    return vector3.toArray();
+  };
+}

package/lib/shared-utils/getFileExpandedName.d.ts

@@ -0,0 +1 @@
+export default function getFileExpandedName(filePath?: string | null): string;

package/lib/shared-utils/getFileExpandedName.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = getFileExpandedName;
+function getFileExpandedName(filePath) {
+  if (!filePath) return '';
+  var index = filePath.lastIndexOf('.');
+  var ext = filePath.substring(index + 1);
+  return ext.toLowerCase();
+}

package/lib/shared-utils/getMediaInfo.d.ts

@@ -0,0 +1,9 @@
+export default function getMediaInfo(fileUrl: string): Promise<{
+    duration?: number | undefined;
+    type?: 'video' | 'audio' | 'image' | 'unknown' | undefined;
+    error?: string | undefined;
+}>;
+export declare function getMediaType(url?: string): "audio" | "video" | "image" | "unknown";
+export declare function getMediaTypeByExpandedName(fileExpandedName?: string | null): "audio" | "video" | "image" | "unknown";
+export declare function getMediaTypeByUrl(fileUrl?: string | null): "audio" | "video" | "image" | "unknown" | undefined;
+export declare function getFileName(fileUrl?: string): string;

package/lib/shared-utils/getMediaInfo.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = getMediaInfo;
+exports.getFileName = getFileName;
+exports.getMediaType = getMediaType;
+exports.getMediaTypeByExpandedName = getMediaTypeByExpandedName;
+exports.getMediaTypeByUrl = getMediaTypeByUrl;
+var _getFileExpandedName = _interopRequireDefault(require("./getFileExpandedName"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function getMediaInfo(fileUrl) {
+  var type = getMediaType(fileUrl);
+  if (!type) return Promise.resolve({
+    error: '未知的文件类型: ' + fileUrl
+  });
+  var mediaElement = function () {
+    if (type === 'video') return document.createElement('video');
+    if (type === 'audio') return document.createElement('audio');
+  }();
+  if (!mediaElement) return Promise.resolve({
+    error: 'Unknown media element'
+  });
+  mediaElement.src = fileUrl;
+  return new Promise(function (resolve) {
+    mediaElement.onerror = function () {
+      return resolve({
+        error: 'onerror'
+      });
+    };
+    mediaElement.onloadedmetadata = function () {
+      resolve({
+        duration: mediaElement.duration * 1000,
+        type: type
+      }); // s => ms
+    };
+  });
+}
+
+function getMediaType(url) {
+  var fileExpandedName = (0, _getFileExpandedName["default"])(url);
+  var type = getMediaTypeByExpandedName(fileExpandedName);
+  return type;
+}
+function getMediaTypeByExpandedName(fileExpandedName) {
+  if (!fileExpandedName) return 'unknown';
+  if (/jpg|jpeg|png$/.test(fileExpandedName)) return 'image';
+  if (/mp3|wav$/.test(fileExpandedName)) return 'audio';
+  if (/avi|wmv|mpeg|mp4|m4v|mov|asf|flv|f4v|rmvb|rm|3gp|vob$/.test(fileExpandedName)) return 'video';
+  return 'unknown';
+}
+function getMediaTypeByUrl(fileUrl) {
+  if (!fileUrl) return;
+  var fileExpandedName = (0, _getFileExpandedName["default"])(fileUrl);
+  return getMediaTypeByExpandedName(fileExpandedName);
+}
+function getFileName(fileUrl) {
+  if (!fileUrl) return '';
+  var index1 = fileUrl.lastIndexOf('/');
+  var index2 = fileUrl.lastIndexOf('\\');
+  var index3 = fileUrl.lastIndexOf('\\\\');
+  var index = Math.max(index1, index2, index3);
+  var ext = fileUrl.substring(index + 1);
+  return ext;
+}

package/lib/shared-utils/setElementDataset.d.ts

@@ -0,0 +1 @@
+export default function setElementDataset(element: any, dataset: Record<string, string | number>): void;

package/lib/shared-utils/setElementDataset.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = setElementDataset;
+function setElementDataset(element, dataset) {
+  if (element) {
+    Object.keys(dataset).forEach(function (key) {
+      var value = dataset[key].toString();
+      if (element instanceof Element) {
+        element.setAttribute("data-".concat(key), value);
+      } else if (element instanceof Document) {
+        element.documentElement.setAttribute("data-".concat(key), value);
+      } else if (element instanceof HTMLElement) {
+        element.dataset[key] = value;
+      } else {
+        element.setAttribute("data-".concat(key), value);
+      }
+    });
+  }
+}

package/lib/typings/VreoUnit.d.ts

@@ -76,6 +76,10 @@ export interface VreoVideo {
     start: number;
     end: number;
     url: string;
+    avatar?: {
+        url?: string;
+        force?: true;
+    };
 }
 /**
  * 剧本结构
@@ -98,6 +102,7 @@ export declare type VreoKeyframeEvent = {
     paused: (ended?: boolean) => void;
     playing: () => void;
     unknownKeyframeType: (keyframe: Record<string, any>) => void;
+    ended: () => void;
 };
 /**
  * 相机运动
@@ -147,9 +152,13 @@ export interface Vertex {
     z: number;
 }
 /**
- * 四个顶点元组
+ * 矩形顶点
  */
 export declare type QuadrangleVertexs = [Vertex, Vertex, Vertex, Vertex];
+/**
+ * 顶点数组
+ */
+export declare type Vertexs = Vertex[];
 /**
  * 视频广告
  */
@@ -165,7 +174,17 @@ export declare type ModelVideoData = {
     /**
      * 视频映射在模型中的顶点
      */
-    vertexs: QuadrangleVertexs;
+    vertexs: QuadrangleVertexs | Vertexs;
+    matrixWorld?: number[];
+};
+/**
+ * 四元数
+ */
+export declare type Quaternion = {
+    x: number;
+    y: number;
+    z: number;
+    w: number;
 };
 /**
  * 全景文本标签
@@ -173,6 +192,8 @@ export declare type ModelVideoData = {
 export declare type PanoTextLabelData = {
     text: string;
     vertex: Vertex;
+    normal?: Vertex;
+    quaternion?: Quaternion;
     fontSize?: number;
 };
 /**
@@ -182,8 +203,22 @@ export declare enum PanoTagEnum {
     Text = "Text",
     Image = "Image"
 }
+/**
+ * 标签样式种类
+ */
+export declare enum PanoTagStyleEnum {
+    /**
+     * 生长动画：默认值
+     */
+    Growth = "Growth",
+    /**
+     * 展开动画
+     */
+    Expand = "Expand"
+}
 export declare type PanoTagData = {
     type: PanoTagEnum;
+    style: PanoTagStyleEnum;
     text: string;
     vertex: Vertex;
     imgUrl?: string;

package/lib/typings/VreoUnit.js

@@ -3,14 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VreoKeyframeEnum = exports.PanoTagEnum = exports.PanoEffectEnum = exports.InfoPanelTypeEnum = exports.InfoPanelStyleEnum = void 0;
+exports.VreoKeyframeEnum = exports.PanoTagStyleEnum = exports.PanoTagEnum = exports.PanoEffectEnum = exports.InfoPanelTypeEnum = exports.InfoPanelStyleEnum = void 0;
 var VreoKeyframeEnum;
 /**
  * 支持自定义剧本关键帧配置项
  */
-
 exports.VreoKeyframeEnum = VreoKeyframeEnum;
-
 (function (VreoKeyframeEnum) {
   VreoKeyframeEnum["CameraMovement"] = "CameraMovement";
   VreoKeyframeEnum["PanoTag"] = "PanoTag";
@@ -25,18 +23,24 @@ exports.VreoKeyframeEnum = VreoKeyframeEnum;
   VreoKeyframeEnum["Exit"] = "Exit";
   VreoKeyframeEnum["Custom"] = "Custom";
 })(VreoKeyframeEnum || (exports.VreoKeyframeEnum = VreoKeyframeEnum = {}));
-
 /**
  * 全景标签枚举
  */
 var PanoTagEnum;
+/**
+ * 标签样式种类
+ */
 exports.PanoTagEnum = PanoTagEnum;
-
 (function (PanoTagEnum) {
   PanoTagEnum["Text"] = "Text";
   PanoTagEnum["Image"] = "Image";
 })(PanoTagEnum || (exports.PanoTagEnum = PanoTagEnum = {}));
-
+var PanoTagStyleEnum;
+exports.PanoTagStyleEnum = PanoTagStyleEnum;
+(function (PanoTagStyleEnum) {
+  PanoTagStyleEnum["Growth"] = "Growth";
+  PanoTagStyleEnum["Expand"] = "Expand";
+})(PanoTagStyleEnum || (exports.PanoTagStyleEnum = PanoTagStyleEnum = {}));
 /**
  * 全景特效枚举
  */
@@ -44,31 +48,24 @@ var PanoEffectEnum;
 /**
  * 全景特效
  */
-
 exports.PanoEffectEnum = PanoEffectEnum;
-
 (function (PanoEffectEnum) {
   PanoEffectEnum["Distance"] = "Distance";
 })(PanoEffectEnum || (exports.PanoEffectEnum = PanoEffectEnum = {}));
-
 /**
  * 信息面板类型枚举
  */
 var InfoPanelTypeEnum;
 exports.InfoPanelTypeEnum = InfoPanelTypeEnum;
-
 (function (InfoPanelTypeEnum) {
   InfoPanelTypeEnum["Image"] = "Image";
   InfoPanelTypeEnum["Video"] = "Video";
 })(InfoPanelTypeEnum || (exports.InfoPanelTypeEnum = InfoPanelTypeEnum = {}));
-
 var InfoPanelStyleEnum;
 /**
  * 信息面板
  */
-
 exports.InfoPanelStyleEnum = InfoPanelStyleEnum;
-
 (function (InfoPanelStyleEnum) {
   InfoPanelStyleEnum["Drawer"] = "Drawer";
   InfoPanelStyleEnum["PopUp"] = "PopUp";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@realsee/vreo",
-  "version": "0.2.0-alpha.9",
+  "version": "1.0.0-alpha.10",
   "description": "Vreo (VR Video 缩写) 是基于如视三维渲染引擎 Five 和 用户界面构建库 React 实现的如视 3D 空间剧本播放器。",
   "keywords": [
     "realsee",
@@ -15,19 +15,20 @@
     "resources",
     "docs",
     "stylesheets",
-    "LICENSE"
+    "LICENSE",
+    "CHANGELOG.md"
   ],
   "scripts": {
     "dev": "vite --port=3088 --host 0.0.0.0",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "docs": "npx typedoc",
+    "docs": "npx typedoc && yarn run build",
     "packages": "node ./dev-tools/build-packages.js"
   },
   "peerDependencies": {
     "@realsee/five": "^5.0.0-alpha.103",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.16.0",
@@ -35,8 +36,8 @@
     "@babel/preset-env": "^7.16.4",
     "@babel/preset-react": "^7.16.0",
     "@babel/preset-typescript": "^7.16.0",
-    "@realsee/dnalogel": "^0.1.7-alpha.10",
-    "@realsee/five": "^5.0.0-alpha.103",
+    "@realsee/dnalogel": "^2.1.0-alpha.18",
+    "@realsee/five": "5.0.0-alpha.149",
     "@types/offscreencanvas": "^2019.6.4",
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",
@@ -47,14 +48,13 @@
     "react-dom": "^16.0.0",
     "three": "^0.117.1",
     "typedoc": "^0.22.10",
-    "typescript": "^4.5.2",
+    "typescript": "4.7.4",
     "vite": "^2.6.14"
   },
   "dependencies": {
     "@tweenjs/tween.js": "18.6.4",
     "classnames": "^2.3.1",
     "mobx": "^6.3.7",
-    "mobx-react": "^7.2.1",
-    "react-transition-group": "^4.4.2"
+    "mobx-react": "^7.2.1"
   }
 }

package/resources/PlayController/index.ts

@@ -152,16 +152,3 @@ export class PlayController extends Subscribe<VreoKeyframeEvent> {
     }
   }
 }
-
-console.log(`
-
-┏━━━┓━━━━━━━━━┏┓━━━━━━━━━━━━━
-┃┏━┓┃━━━━━━━━━┃┃━━━━━━━━━━━━━
-┃┗━┛┃┏━━┓┏━━┓━┃┃━┏━━┓┏━━┓┏━━┓
-┃┏┓┏┛┃┏┓┃┗━┓┃━┃┃━┃━━┫┃┏┓┃┃┏┓┃
-┃┃┃┗┓┃┃━┫┃┗┛┗┓┃┗┓┣━━┃┃┃━┫┃┃━┫
-┗┛┗━┛┗━━┛┗━━━┛┗━┛┗━━┛┗━━┛┗━━┛
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 
-
-`)

package/resources/Player/App.tsx

@@ -2,8 +2,9 @@ import * as React from 'react'
 import classNames from 'classnames'
 import { observer } from 'mobx-react'
 import { Controller } from './Controller'
-import { useController, useFiveInstance } from './hooks'
+import { useController } from './hooks'
 import { CameraMovement } from './modules/keyframes/CameraMovement'
+import { ResizeObserver } from './modules/ResizeObserver'
 import { InfoPanel } from './modules/keyframes/InfoPanel'
 import { ModelVideo } from './modules/keyframes/ModelVideo'
 import { PanoEffect } from './modules/keyframes/PanoEffect'
@@ -14,6 +15,7 @@ import { UpdateVRPanorama } from './modules/keyframes/UpdateVRPanorama'
 import { VideoEffect } from './modules/keyframes/VideoEffect'
 import { VideoAgent } from './modules/VideoAgent'
 import { BgMusic } from './modules/keyframes/BgMusic'
+import { Wave } from './modules/Wave'
 
 const AppView = observer(({ controller }: { controller: Controller }) => {
   
@@ -24,11 +26,9 @@ const AppView = observer(({ controller }: { controller: Controller }) => {
       })}
     >
       <div className="vreo-panel-inner">
+        {controller.waveAppearance && <Wave appearance={controller.waveAppearance}/>}
         <VideoAgent
           onClick={() => {
-            if (controller.isAudio) {
-              return
-            }
             if (controller.playing) {
               controller.setPlaying(false)
             } else {
@@ -49,6 +49,7 @@ export function App() {
   return (
     <>
       <>
+        <ResizeObserver />
         <CameraMovement />
         <ModelVideo />
         <UpdateVRPanorama />