@realsee/vreo 1.0.0-alpha.17 → 1.0.0-alpha.19

package/lib/shared-utils/getMediaInfo.js

@@ -8,17 +8,22 @@ 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'
   });
@@ -29,6 +34,7 @@ function getMediaInfo(fileUrl) {
         error: 'onerror'
       });
     };
+
     mediaElement.onloadedmetadata = function () {
       resolve({
         duration: mediaElement.duration * 1000,
@@ -43,6 +49,7 @@ function getMediaType(url) {
   var type = getMediaTypeByExpandedName(fileExpandedName);
   return type;
 }
+
 function getMediaTypeByExpandedName(fileExpandedName) {
   if (!fileExpandedName) return 'unknown';
   if (/jpg|jpeg|png$/.test(fileExpandedName)) return 'image';
@@ -50,11 +57,13 @@ function getMediaTypeByExpandedName(fileExpandedName) {
   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('/');

package/lib/shared-utils/setElementDataset.js

@@ -4,10 +4,12 @@ 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) {

package/lib/typings/VreoUnit.d.ts

@@ -85,10 +85,10 @@ export interface VreoVideo {
  * 剧本结构
  */
 export interface VreoUnit {
-    categoryId: string;
-    categoryText: string;
-    frontRequestId: string;
-    index: string | number;
+    categoryId?: string;
+    categoryText?: string;
+    frontRequestId?: string;
+    index?: string | number;
     keyframes: VreoKeyframe[];
     video: VreoVideo;
 }
@@ -96,7 +96,7 @@ export interface VreoUnit {
  * 剧本事件
  */
 export declare type VreoKeyframeEvent = {
-    [key in VreoKeyframeEnum]: (keyframe: VreoKeyframe) => void;
+    [key in VreoKeyframeEnum]: (keyframe: VreoKeyframe, currentTime: number) => void;
 } & {
     loaded: (vreoUnit: VreoUnit) => void;
     paused: (ended?: boolean) => void;

package/lib/typings/VreoUnit.js

@@ -8,7 +8,9 @@ var VreoKeyframeEnum;
 /**
  * 支持自定义剧本关键帧配置项
  */
+
 exports.VreoKeyframeEnum = VreoKeyframeEnum;
+
 (function (VreoKeyframeEnum) {
   VreoKeyframeEnum["CameraMovement"] = "CameraMovement";
   VreoKeyframeEnum["PanoTag"] = "PanoTag";
@@ -23,6 +25,7 @@ exports.VreoKeyframeEnum = VreoKeyframeEnum;
   VreoKeyframeEnum["Exit"] = "Exit";
   VreoKeyframeEnum["Custom"] = "Custom";
 })(VreoKeyframeEnum || (exports.VreoKeyframeEnum = VreoKeyframeEnum = {}));
+
 /**
  * 全景标签枚举
  */
@@ -30,17 +33,22 @@ 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 = {}));
+
 /**
  * 全景特效枚举
  */
@@ -48,24 +56,31 @@ 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": "1.0.0-alpha.17",
+  "version": "1.0.0-alpha.19",
   "description": "Vreo (VR Video 缩写) 是基于如视三维渲染引擎 Five 和 用户界面构建库 React 实现的如视 3D 空间剧本播放器。",
   "keywords": [
     "realsee",

package/resources/PlayController/index.ts

@@ -85,7 +85,7 @@ export class PlayController extends Subscribe<VreoKeyframeEvent> {
       currentKeyframes.forEach((keyframe) => {
         if (keyframe.parsed) return
         keyframe.parsed = true
-        this.emit(keyframe.type, keyframe)
+        this.emit(keyframe.type, keyframe, this.currentTime)
       })
     })
 

package/resources/Player/Controller.ts

@@ -231,7 +231,7 @@ export class Controller extends Subscribe<VreoKeyframeEvent> {
     /**
      * 逐帧任务
      */
-    requestAnimationFrameLoop(callback: (type: VreoKeyframeEnum, keyframe: VreoKeyframe) => void) {
+    requestAnimationFrameLoop(callback: (type: VreoKeyframeEnum, keyframe: VreoKeyframe, currentTime: number) => void) {
         if (this.mediaInstance?.ended) {
             this.setEnded(true)
             this.setPlaying(false)
@@ -255,9 +255,9 @@ export class Controller extends Subscribe<VreoKeyframeEvent> {
         currentKeyframes.forEach((keyframe) => {
             if (keyframe.parsed) return
             keyframe.parsed = true
-            this.emit(keyframe.type, keyframe)
+            this.emit(keyframe.type, keyframe, this.currentTime)
             if (callback) {
-                callback(keyframe.type, keyframe)
+                callback(keyframe.type, keyframe, this.currentTime)
             }
         })
     }

package/resources/Player/index.tsx

@@ -163,7 +163,7 @@ export class Player extends Subscribe<VreoKeyframeEvent> {
         this.controller.setEnded(false)
         this.play()
 
-        this.controller.run((type, keyframe) => this.emit(type, keyframe))
+        this.controller.run((type, keyframe) => this.emit(type, keyframe, this.controller.currentTime))
         this.controller.setLoading(false)
         return true
     }

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

@@ -1,7 +1,7 @@
 import * as THREE from 'three'
 import { Preloader } from '../../../shared-utils/Preloader'
 import { makeObservable, observable, runInAction } from 'mobx'
-import AudioLike from '../../../shared-utils/AduioLike'
+import AudioLike from '../../../shared-utils/AudioLike'
 import { getMediaType } from '../../../shared-utils/getMediaInfo'
 
 const vertexShader = `
@@ -280,7 +280,7 @@ export class VideoAgentMesh extends THREE.Mesh {
   }
 
   /**
-   * 转成毫秒，保障精准度
+   * 秒转成毫秒，保障精准度
    */
   get currentTime() {
     return this.mediaInstance.currentTime * 1000

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

@@ -2,6 +2,23 @@ import * as React from 'react'
 import { BgMusicData, VreoKeyframe, VreoKeyframeEnum } from '../../../../typings/VreoUnit'
 import { useController } from '../../../hooks'
 
+const audioList: HTMLAudioElement[] = []
+function getAudio(src: string = '', currentTime: number = 0)  {
+  const audio = (() => {
+    const audio = audioList.find(audio => audio.src === src)
+    if (audio) return audio
+    else {
+      const newAudio = new Audio(src)
+      audioList.push(newAudio)
+      return newAudio
+    }
+  })()
+  audio.currentTime = currentTime
+  audio.setAttribute('playsinline', 'true')
+  audio.loop = true
+  return audio
+}
+
 export function BgMusic() {
   const controller = useController()
   const timeoutIdRef = React.useRef<NodeJS.Timeout | null>(null)
@@ -13,18 +30,10 @@ export function BgMusic() {
   }, [])
 
   React.useEffect(() => {
-    const audio = new Audio()
-    audio.setAttribute('id', 'vreo-singleton-bgmusic')
-    audio.style.display = 'none'
-
-    audio.setAttribute('playsinline', 'true')
-    audio.loop = true
-    document.body.append(audio)
-
-    const callback = (keyframe: VreoKeyframe) => {
+    const callback = (keyframe: VreoKeyframe, currentTime: number) => {
+      console.log({currentTime})
       const { start, end } = keyframe
-      const { url } = keyframe.data as BgMusicData
-      audio.src = url
+      const audio = getAudio(keyframe.data.url, Math.max(currentTime - start, 0))
       const playCallback = () => {
         audio.play()
       }
@@ -34,16 +43,17 @@ export function BgMusic() {
       cleanTimeout()
     
       const cleanAudio = () => {
+        console.log('cleanAudio', keyframe.start)
         audio.pause()
-        audio.currentTime = 0
         audio.src = ''
         cleanTimeout()
         audio.removeEventListener('canplaythrough', playCallback)
       }
   
-      const duration = (end - start) || 5000
+      const duration = end - start
     
       timeoutIdRef.current = setTimeout(() => {
+        console.log('timeout', duration)
         cleanAudio()
       }, duration)
 
@@ -57,7 +67,6 @@ export function BgMusic() {
 
     return () => {
       controller.off(VreoKeyframeEnum.BgMusic, callback)
-      document.body.removeChild(audio)
       cleanTimeout()
     }
   })

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

@@ -53,6 +53,7 @@ export function PanoTag() {
       timeoutRef.current = setTimeout(() => {
         // clear
         const tag = panoTagPlugin.current.getTagById(id)
+        if (!tag) return
         if (tag.state) {
           tag.state.unfolded = false
           ;(panoTagPlugin.current as any).updateRenderAllTags()

package/resources/shared-utils/{AduioLike.ts → AudioLike.ts}

@@ -43,7 +43,7 @@ export class AudioLike extends Subscribe<AudioLikeEvent> {
       this.$currentTime = 0
     }
     if (this.$timestamp === null) {
-      this.$timestamp = performance.now() - this.$currentTime
+      this.$timestamp = performance.now()
     }
     this.stopInterval = requestAnimationFrameInterval(() => this.requestAnimationFrameLoop())
     this.emit('play')
@@ -61,7 +61,8 @@ export class AudioLike extends Subscribe<AudioLikeEvent> {
   requestAnimationFrameLoop() {
     if (this.$timestamp === null) return
     const now = performance.now()
-    this.$currentTime = now - this.$timestamp
+    this.$currentTime += (now - this.$timestamp)
+    this.$timestamp = now
     this.emit('timeupdate')
     if (this.$currentTime >= this.$duration - 10) {
       this.$currentTime = this.$duration
@@ -75,7 +76,7 @@ export class AudioLike extends Subscribe<AudioLikeEvent> {
   }
 
   set currentTime(time: number) {
-    this.$currentTime = time
+    this.$currentTime = time * 1000
   }
 
   get duration() {
@@ -83,10 +84,7 @@ export class AudioLike extends Subscribe<AudioLikeEvent> {
   }
 
   set duration(duration: number) {
-    this.pause()
     this.$duration = duration
-    this.$timestamp = null
-    this.$currentTime = 0
   }
 
   get ended() {

package/resources/typings/VreoUnit.ts

@@ -91,10 +91,10 @@ export interface VreoVideo {
  * 剧本结构
  */
 export interface VreoUnit {
-  categoryId: string
-  categoryText: string
-  frontRequestId: string
-  index: string | number
+  categoryId?: string
+  categoryText?: string
+  frontRequestId?: string
+  index?: string | number
   keyframes: VreoKeyframe[]
   video: VreoVideo
 }
@@ -104,7 +104,7 @@ export interface VreoUnit {
 /**
  * 剧本事件
  */
-export type VreoKeyframeEvent = { [key in VreoKeyframeEnum]: (keyframe: VreoKeyframe) => void } & {
+export type VreoKeyframeEvent = { [key in VreoKeyframeEnum]: (keyframe: VreoKeyframe, currentTime: number) => void } & {
   // 新数据载入完成
   loaded: (vreoUnit: VreoUnit) => void
   // 语音状态 播放 -> 暂停