@realsee/vreo 1.0.0-alpha.1 → 1.0.0-alpha.2

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

@@ -7,49 +7,39 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PanoTag = PanoTag;
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var React = _interopRequireWildcard(require("react"));
 
-var _three = require("three");
-
 var _hooks = require("../../../hooks");
 
 var _VreoUnit = require("../../../../typings/VreoUnit");
 
+var _dnalogel = require("@realsee/dnalogel");
+
 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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 _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 _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 function PanoTag() {
-  var _React$useState = React.useState(null),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      state = _React$useState2[0],
-      setState = _React$useState2[1];
-
-  var _React$useState3 = React.useState(null),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      pos = _React$useState4[0],
-      setPos = _React$useState4[1];
-
   var timeoutRef = React.useRef();
   var controller = (0, _hooks.useController)();
   var five = (0, _hooks.useFiveInstance)();
-  var project2d = (0, _hooks.useFiveProject2d)();
+  var panoTagPlugin = React.useRef((0, _dnalogel.PanoTagPlugin)(five, {
+    config: {
+      globalConfig: {
+        visibleConfig: {
+          keep: 'visible'
+        },
+        unfoldedConfig: {
+          autoUnfold: {
+            strategy: 'MinimumDistance'
+          },
+          unfoldDistance: {
+            max: 100
+          }
+        }
+      }
+    }
+  }));
   React.useEffect(function () {
     var _controller$configs;
 
@@ -58,33 +48,70 @@ function PanoTag() {
     }
 
     var callback = function callback(keyframe) {
+      if (!panoTagPlugin.current) return;
       var start = keyframe.start,
           end = keyframe.end,
           data = keyframe.data;
       var panoTagData = data;
-      var vertex = panoTagData.vertex;
-      var _panoTagData$vertex = panoTagData.vertex,
-          x = _panoTagData$vertex.x,
-          y = _panoTagData$vertex.y,
-          z = _panoTagData$vertex.z;
-      var res = project2d(new _three.Vector3(x, y, z));
-      if (!res) return;
-      var left = res.x,
-          top = res.y;
-      setState({
-        vertex: vertex,
-        text: panoTagData.text || _VreoUnit.PanoTagEnum.Text,
-        type: panoTagData.type,
-        imgUrl: panoTagData.imgUrl,
-        style: panoTagData.style || _VreoUnit.PanoTagStyleEnum.Growth
-      });
-      setPos({
-        left: left,
-        top: top
+      var id = 'any-id';
+      var pointType = _dnalogel.PointType.PointTag;
+      var dimensionType = _dnalogel.DimensionType.Two;
+      var position = [panoTagData.vertex.x, panoTagData.vertex.y, panoTagData.vertex.z];
+
+      var tag = function () {
+        if (panoTagData.imgUrl) {
+          return {
+            id: id,
+            pointType: pointType,
+            position: position,
+            dimensionType: dimensionType,
+            contentType: _dnalogel.ContentType.ImageText,
+            data: {
+              text: panoTagData.text,
+              mediaData: [{
+                type: 'Image',
+                url: panoTagData.imgUrl
+              }]
+            }
+          };
+        } else {
+          return {
+            id: id,
+            pointType: pointType,
+            position: position,
+            dimensionType: dimensionType,
+            contentType: _dnalogel.ContentType.Text,
+            data: {
+              text: panoTagData.text
+            }
+          };
+        }
+      }(); // show
+
+
+      panoTagPlugin.current.load({
+        tagList: [tag]
       });
       timeoutRef.current = setTimeout(function () {
-        setState(null);
-        setPos(null);
+        var _tag$hooks;
+
+        var id = Date.now(); // clear
+
+        var tag = panoTagPlugin.current.getTagById(id);
+
+        if (tag.state) {
+          tag.state.unfolded = false;
+          panoTagPlugin.current.updateRenderAllTags();
+        }
+
+        (_tag$hooks = tag.hooks) === null || _tag$hooks === void 0 ? void 0 : _tag$hooks.on('folded', function () {
+          setTimeout(function () {
+            if (tag.state) {
+              tag.state.visible = false;
+              panoTagPlugin.current.destroyTagById(id);
+            }
+          }, 1500);
+        });
       }, end - start);
     };
 
@@ -97,85 +124,5 @@ function PanoTag() {
       }
     };
   }, [controller]);
-  React.useEffect(function () {
-    var callback = function callback() {
-      if (!(state !== null && state !== void 0 && state.vertex)) return;
-      var _state$vertex = state.vertex,
-          x = _state$vertex.x,
-          y = _state$vertex.y,
-          z = _state$vertex.z;
-      var res = project2d(new _three.Vector3(x, y, z));
-      if (!res) return;
-      var left = res.x,
-          top = res.y;
-      setPos({
-        left: left,
-        top: top
-      });
-    };
-
-    five.on('currentStateChange', callback);
-    return function () {
-      five.off('currentStateChange', callback);
-    };
-  }, [state === null || state === void 0 ? void 0 : state.vertex]);
-
-  var boxContent = function () {
-    if (!state) return undefined;
-
-    if (state.type === _VreoUnit.PanoTagEnum.Text) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, state.text));
-    }
-
-    if (state.type === _VreoUnit.PanoTagEnum.Image) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", {
-        className: "PanoTag-img",
-        src: state.imgUrl,
-        alt: state.text || ''
-      }), /*#__PURE__*/React.createElement("span", {
-        className: "PanoTag-txt"
-      }, state.text));
-    }
-
-    return undefined;
-  }();
-
-  if ((state === null || state === void 0 ? void 0 : state.style) === _VreoUnit.PanoTagStyleEnum.Expand) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-      className: (0, _classnames["default"])('PanoTag', {
-        'PanoTag--expand': true,
-        'PanoTag--notHidden': state
-      }),
-      style: {
-        left: ((pos === null || pos === void 0 ? void 0 : pos.left) || 0) + 'px',
-        top: ((pos === null || pos === void 0 ? void 0 : pos.top) || 0) + 'px'
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      className: 'PanoTag-box PanoTag-box--' + ((state === null || state === void 0 ? void 0 : state.type) || '')
-    }, boxContent), /*#__PURE__*/React.createElement("div", {
-      className: "PanoTag-guideline"
-    })));
-  }
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames["default"])('PanoTag', {
-      'PanoTag--notHidden': state
-    }),
-    style: {
-      left: ((pos === null || pos === void 0 ? void 0 : pos.left) || 0) + 'px',
-      top: ((pos === null || pos === void 0 ? void 0 : pos.top) || 0) + 'px'
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "PanoTag-point"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "PanoTag-content"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "PanoTag-linewrap"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "PanoTag-slashline"
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "PanoTag-straightline"
-  })), /*#__PURE__*/React.createElement("div", {
-    className: 'PanoTag-box PanoTag-box--' + ((state === null || state === void 0 ? void 0 : state.type) || '')
-  }, boxContent))));
+  return null;
 }

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

@@ -59,7 +59,6 @@ var calcPoints = function calcPoints(centerPoint, normal, wrapperLength, wrapper
   //   size: 0.4,
   // })
   // _point = new THREE.Points(pointgeometry, pointmaterial)
-  // console.log(cameraPosition)
 
 
   var material = new THREE.MeshBasicMaterial({

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

@@ -21,6 +21,8 @@ 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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -80,10 +82,9 @@ function Prompter() {
     };
   }, [controller]);
   return /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames["default"])('vreo-prompter', {
-      'vreo-prompter--hidden': hidden,
-      'vreo-prompter--audio': controller.isAudio
-    })
+    className: (0, _classnames["default"])('vreo-prompter', _defineProperty({
+      'vreo-prompter--hidden': hidden
+    }, "vreo-prompter-left--".concat(controller.agentType), true))
   }, /*#__PURE__*/React.createElement("div", {
     className: "vreo-prompter-text"
   }, /*#__PURE__*/React.createElement("div", {

package/lib/Player/typings.d.ts

@@ -6,8 +6,8 @@ export interface PlayerConfigs {
     /**
      * @deprecated rename to container
      */
-    containter?: ReactDOM.Container;
-    container?: ReactDOM.Container;
+    containter?: Element;
+    container?: Element;
     keyframeMap: VreoKeyframeConfigMap;
     /**
      * 微信端自动播放功能实现需要提前初始化 Video 实例。
@@ -28,6 +28,13 @@ export interface PlayerConfigs {
         size: number;
     };
     autoPreload?: boolean;
+    appSize?: AppSize;
+    appearance?: Appearance;
+}
+export declare type AppSize = 'S' | 'M' | 'L' | 'XL';
+export declare type WaveAppearance = 'single' | 'double' | 'solid' | 'swap' | 'expand';
+export interface Appearance {
+    waveStyle?: 'wave' | 'solid';
 }
 export declare type VreoSubscribe = Pick<Subscribe<VreoKeyframeEvent>, 'on' | 'once' | 'off'>;
 export interface CustomVreoKeyframeProps {

package/lib/fivePlugins/CameraMovementPlugin/index.js

@@ -259,8 +259,7 @@ var CameraMovementPlugin = function CameraMovementPlugin(five) {
                 opts.asyncEndCallback();
               }
 
-              _getAnimeParams = getAnimeParams(args), from = _getAnimeParams.from, to = _getAnimeParams.to; // console.log(from, to)
-
+              _getAnimeParams = getAnimeParams(args), from = _getAnimeParams.from, to = _getAnimeParams.to;
               _context2.next = 15;
               return new Promise(function (resolve, reject) {
                 var onUpdate = function onUpdate(_ref3) {
@@ -268,9 +267,7 @@ var CameraMovementPlugin = function CameraMovementPlugin(five) {
                   var state = {};
                   state.longitude = progressNumber(from.longitude, to.longitude, progress) % PI_2;
                   state.latitude = progressNumber(from.latitude, to.latitude, progress);
-                  state.fov = progressNumber(from.fov, to.fov, progress); // console.log(state.longitude)
-
-                  // console.log(state.longitude)
+                  state.fov = progressNumber(from.fov, to.fov, progress);
                   five.setState(state, true);
                 };
 

package/lib/react/index.d.ts

@@ -39,10 +39,10 @@ export interface VreoActionCallbacks {
     dispose: () => void;
 }
 export declare function useVreoAction(): {
-    load: (vreoUnit: VreoUnit, currentTime?: number | undefined) => Promise<boolean>;
+    load: (vreoUnit: VreoUnit, currentTime?: number) => Promise<boolean>;
     pause: () => void;
     show: () => void;
-    play: (currentTime?: number | undefined) => boolean;
+    play: (currentTime?: number) => boolean;
     hide: () => void;
     dispose: () => void;
 };

package/lib/shared-utils/AduioLike.js

@@ -51,7 +51,7 @@ var AudioLike = /*#__PURE__*/function (_Subscribe) {
 
     _this = _super.call(this);
 
-    _defineProperty(_assertThisInitialized(_this), "$timestamp", 0);
+    _defineProperty(_assertThisInitialized(_this), "$timestamp", null);
 
     _defineProperty(_assertThisInitialized(_this), "$currentTime", 0);
 
@@ -77,14 +77,14 @@ var AudioLike = /*#__PURE__*/function (_Subscribe) {
     value: function play() {
       var _this2 = this;
 
-      if (this.$timestamp === 0) {
-        this.$timestamp = performance.now();
-      }
-
       if (this.$currentTime === this.$duration) {
         this.$currentTime = 0;
       }
 
+      if (this.$timestamp === null) {
+        this.$timestamp = performance.now() - this.$currentTime;
+      }
+
       this.stopInterval = (0, _animationFrame.requestAnimationFrameInterval)(function () {
         return _this2.requestAnimationFrameLoop();
       });
@@ -99,11 +99,12 @@ var AudioLike = /*#__PURE__*/function (_Subscribe) {
         this.stopInterval = undefined;
       }
 
-      this.$timestamp = 0;
+      this.$timestamp = null;
     }
   }, {
     key: "requestAnimationFrameLoop",
     value: function requestAnimationFrameLoop() {
+      if (this.$timestamp === null) return;
       var now = performance.now();
       this.$currentTime = now - this.$timestamp;
       this.emit('timeupdate');
@@ -130,7 +131,7 @@ var AudioLike = /*#__PURE__*/function (_Subscribe) {
     set: function set(duration) {
       this.pause();
       this.$duration = duration;
-      this.$timestamp = 0;
+      this.$timestamp = null;
       this.$currentTime = 0;
     }
   }, {

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

@@ -0,0 +1,4 @@
+declare type ResizeHandler = (width: number, height: number) => void;
+export declare function addResizeListener(element: Element | undefined | null, resizeHandler: ResizeHandler, immediate?: boolean): () => void;
+export declare function hasResizeListener(element?: Element | null): number | boolean;
+export {};

package/lib/shared-utils/addResizeListener.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.addResizeListener = addResizeListener;
+exports.hasResizeListener = hasResizeListener;
+var resizeObserverCache = new Map();
+
+function addResizeListener(element, resizeHandler) {
+  var immediate = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  if (!element) return function () {};
+  if (immediate) resizeHandler(element.clientWidth, element.clientHeight);
+
+  if (typeof ResizeObserver !== 'undefined' && ResizeObserver) {
+    var resizeObserver = new ResizeObserver(function () {
+      return resizeHandler(element.clientWidth, element.clientHeight);
+    });
+    resizeObserver.observe(element);
+    resizeObserverCache.set(element, resizeObserverCache.get(element) || 0 + 1);
+    return function () {
+      if (element) resizeObserver.unobserve(element);
+
+      if (resizeObserverCache.get(element) === 1) {
+        resizeObserverCache["delete"](element);
+      }
+    };
+  } else {
+    var iframe = document.createElement('iframe');
+    iframe.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;opacity:0;visibility:hidden;margin:0;border:0;padding:0;z-index:-1;';
+    iframe.classList.add('resize-sensor-iframe');
+    element.appendChild(iframe);
+    if (!iframe.contentWindow) return function () {};
+    iframe.contentWindow.addEventListener('resize', function () {
+      resizeHandler(iframe.clientWidth, iframe.clientHeight);
+    });
+    resizeObserverCache.set(element, resizeObserverCache.get(element) || 0 + 1);
+    return function () {
+      element.removeChild(iframe);
+
+      if (resizeObserverCache.get(element) === 1) {
+        resizeObserverCache["delete"](element);
+      }
+    };
+  }
+}
+
+function hasResizeListener(element) {
+  if (!element) return false;
+  return resizeObserverCache.get(element) || 0 > 0;
+}

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,13 @@
+"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,75 @@
+"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,24 @@
+"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;
+    };
 }
 /**
  * 剧本结构

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@realsee/vreo",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.2",
   "description": "Vreo (VR Video 缩写) 是基于如视三维渲染引擎 Five 和 用户界面构建库 React 实现的如视 3D 空间剧本播放器。",
   "keywords": [
     "realsee",