@realsee/vreo 1.0.0-alpha.9 → 1.1.0-dev.0

package/resources/shared-utils/AduioLike.ts

@@ -1,109 +0,0 @@
-import { Subscribe } from '@realsee/five'
-import { requestAnimationFrameInterval } from './animationFrame'
-
-/**
- * 模拟 `<Audio>` 事件。
- */
-export type AudioLikeEvent = {
-  // 播放
-  play: () => void
-  // 语音状态 播放 -> 暂停
-  pause: () => void
-  // 语音时间刷新
-  timeupdate: () => void
-  // 播放
-  ended: () => void
-}
-
-
-/**
- * 模拟 `<Audio>` 功能：没有音频，但执行逻辑跟 `<Audio>` 相似。
- */
-export class AudioLike extends Subscribe<AudioLikeEvent> {
-  private $timestamp: number | null = null
-  private $currentTime = 0
-  private $duration = 0
-  private stopInterval?: () => void
-  muted = false
-  src = ''
-
-  setAttribute(name: string, value: string) {
-    // nothing todo
-  }
-
-  constructor({ duration }: { duration?: number } = {}) {
-    super()
-    if (duration) {
-      this.$duration = duration
-    }
-  }
-
-  play() {
-    if (this.$currentTime === this.$duration) {
-      this.$currentTime = 0
-    }
-    if (this.$timestamp === null) {
-      this.$timestamp = performance.now() - this.$currentTime
-    }
-    this.stopInterval = requestAnimationFrameInterval(() => this.requestAnimationFrameLoop())
-    this.emit('play')
-  }
-
-  pause() {
-    if (this.stopInterval) {
-      this.stopInterval()
-      this.emit('pause')
-      this.stopInterval = undefined
-    }
-    this.$timestamp = null
-  }
-
-  requestAnimationFrameLoop() {
-    if (this.$timestamp === null) return
-    const now = performance.now()
-    this.$currentTime = now - this.$timestamp
-    this.emit('timeupdate')
-    if (this.$currentTime >= this.$duration - 10) {
-      this.$currentTime = this.$duration
-      this.pause()
-      this.emit('ended')
-    }
-  }
-
-  get currentTime() {
-    return this.$currentTime / 1000
-  }
-
-  set currentTime(time: number) {
-    this.$currentTime = time
-  }
-
-  get duration() {
-    return this.$duration
-  }
-
-  set duration(duration: number) {
-    this.pause()
-    this.$duration = duration
-    this.$timestamp = null
-    this.$currentTime = 0
-  }
-
-  get ended() {
-    return this.$currentTime === this.$duration
-  }
-
-  get paused() {
-    return !this.stopInterval
-  }
-
-  addEventListener(evtName: keyof AudioLikeEvent, callback: () => void, useCapture = false) {
-    this.on(evtName, callback)
-  }
-
-  removeEventListener(evtName: keyof AudioLikeEvent, callback: () => void, useCapture = false) {
-    this.off(evtName, callback)
-  }
-}
-
-export default AudioLike

package/resources/shared-utils/Preloader.ts

@@ -1,35 +0,0 @@
-/**
- * 预载器
- */
-export const Preloader = {
-  blob: (url: string) => {
-    const noop = () => null
-    return new Promise<string>((resolve, reject) => {
-      const xhr = new XMLHttpRequest()
-      const clear = () => {
-        xhr.ontimeout = noop
-        xhr.onreadystatechange = noop
-        xhr.onprogress = noop
-        xhr.onabort = noop
-      }
-      xhr.ontimeout = () => {
-        reject(new Error('timeout'))
-        clear()
-      }
-      xhr.onreadystatechange = () => {
-        if (xhr.readyState !== 4) return
-        if (xhr.status === 0 && !xhr.response) return
-        if (xhr.status === 200 || xhr.status === 0) {
-          resolve(xhr.response)
-          clear()
-        } else {
-          reject(new Error('status:' + xhr.status))
-          clear()
-        }
-      }
-      xhr.open('GET', url, true)
-      xhr.responseType = 'blob'
-      xhr.send(null)
-    })
-  },
-}

package/resources/shared-utils/addResizeListener.ts

@@ -1,46 +0,0 @@
-type ResizeHandler =  (width: number, height: number) => void
-
-const resizeObserverCache = new Map<Element, number>()
-
-export function addResizeListener(element: Element | undefined | null, resizeHandler: ResizeHandler, immediate = true) {
-  if (!element) return () => {}
-
-  if (immediate) resizeHandler(element.clientWidth, element.clientHeight)
-
-  if (typeof ResizeObserver !== 'undefined' && ResizeObserver) {
-    const resizeObserver = new ResizeObserver(() => resizeHandler(element.clientWidth, element.clientHeight))
-
-    resizeObserver.observe(element)
-    resizeObserverCache.set(element, resizeObserverCache.get(element) || 0 + 1)
-
-    return () => {
-      if (element) resizeObserver.unobserve(element)
-      if (resizeObserverCache.get(element) === 1) {
-        resizeObserverCache.delete(element)
-      }
-    }
-  } else {
-    const 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 () => {}
-
-    iframe.contentWindow.addEventListener('resize', () => {
-      resizeHandler(iframe.clientWidth, iframe.clientHeight)
-    })
-    resizeObserverCache.set(element, resizeObserverCache.get(element) || 0 + 1)
-
-    return () => {
-      element.removeChild(iframe)
-      if (resizeObserverCache.get(element) === 1) {
-        resizeObserverCache.delete(element)
-      }
-    }
-  }
-}
-
-export function hasResizeListener(element?: Element | null) {
-  if (!element) return false
-  return resizeObserverCache.get(element) || 0 > 0
-}

package/resources/shared-utils/animationFrame/BetterTween.ts

@@ -1,33 +0,0 @@
-import TWEEN from '@tweenjs/tween.js'
-import { requestAnimationFrameInterval } from '.'
-
-export class BetterTween<G> extends TWEEN.Tween<G> {
-  private disposeMethods: (() => void)[] = []
-  private animationFrameDisposer?: () => void
-
-  public onDispose = (callback: () => void) => {
-    this.disposeMethods.push(callback)
-    return this
-  }
-
-  public play = () => {
-    this.start()
-    this.animationFrameDisposer = requestAnimationFrameInterval(() => this.update())
-    return this
-  }
-
-  public dispose = () => {
-    this.stop()
-    this.animationFrameDisposer?.()
-    this.disposeMethods.forEach((fn) => fn())
-    this.disposeMethods = []
-    TWEEN.remove(this)
-  }
-}
-
-export function tweenProgress(duration?: number, easing = TWEEN.Easing.Linear.None) {
-  const tween = new BetterTween({ progress: 0 }).to({ progress: 1 })
-  if (duration !== undefined) tween.duration(duration)
-  if (easing !== undefined) tween.easing(easing)
-  return tween
-}

package/resources/shared-utils/animationFrame/index.ts

@@ -1,48 +0,0 @@
-const _requestAnimationFrame = window.requestAnimationFrame || ((fn) => setTimeout(fn, 16))
-
-const _cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout
-
-export default _requestAnimationFrame
-
-export function nextFrame(fn: FrameRequestCallback, delay = 0) {
-  if (delay <= 0) _requestAnimationFrame(fn)
-  else _requestAnimationFrame(() => nextFrame(fn, delay - 1))
-}
-
-/**
- * 在每个 AnimationFrame 中调用传入的函数
- * @param callback 每次 AnimationFrame 中调用的函数
- * @param frame 每秒运行多少次
- * @returns 返回一个函数，调用可以停止 AnimationFrameLoop
- */
-export function requestAnimationFrameInterval(callback?: (time: number) => any, frame = 60) {
-  let index = -1
-  let oldTime = 0
-  let startTime = -1
-  const minDeltaTime = 1000 / frame
-  function loop(time: number) {
-    startTime === -1 && (startTime = time)
-    index = _requestAnimationFrame(loop)
-    const deltaTime = time - oldTime
-    if (deltaTime < minDeltaTime) return
-    oldTime = time
-    callback && callback(time - startTime)
-  }
-  index = _requestAnimationFrame(loop)
-  return function stop() {
-    _cancelAnimationFrame(index)
-  }
-}
-
-/**
- * 获取两个 AnimationFrame 间隔的时间
- * @returns 返回一个 Promise，resolve 的结果是两个 AnimationFrame 间隔的时间
- */
-export function getFrameTime() {
-  const start = Date.now()
-  return new Promise((resolve) => {
-    _requestAnimationFrame(() => {
-      resolve(Date.now() - start)
-    })
-  })
-}

package/resources/shared-utils/animationFrame/tween.ts

@@ -1,51 +0,0 @@
-import * as TWEEN from '@tweenjs/tween.js'
-import { nextFrame, requestAnimationFrameInterval } from './index'
-
-export const Easing = TWEEN.Easing
-
-interface ITween<T> extends TWEEN.Tween<T> {
-  onDestroy: (fn: () => void) => TWEEN.Tween<T>
-  destroy: () => void
-}
-
-/**
- * 对象变化的补间动画
- * 1. 应用 requestAnimationFrameInterval 做 update
- * 2. 在原生 tween 上新增 destroy 方法和 onDestroy 监听
- * DOC： https://github.com/tweenjs/tween.js
- * @param from 对象起始状态
- * @param to 对象末尾状态
- * @param duration 经历时间（s）
- * @param easing 过程动画，默认是 Easing.Linear.None
- */
-export default function tween<T>(from: T, to: T, duration: number, easing = Easing.Linear.None) {
-  const tween = new TWEEN.Tween(from).to(to, duration).easing(easing) as ITween<T>
-  // 这里注意一下，因为 requestAnimationFrameInterval 给的时间是从 0 开始的，tween 动画也从 0 开始
-  nextFrame(() => tween.start(0))
-
-  const cancelAnimationFrame = requestAnimationFrameInterval((time) => {
-    if (tween.update(time) === false) cancelAnimationFrame()
-  })
-  const destroyMethods: ((...params: any) => any)[] = []
-  tween.onDestroy = (fn) => {
-    destroyMethods.push(fn)
-    return tween
-  }
-  tween.destroy = function () {
-    this.stop()
-    Object.assign(tween, {
-      _onStartCallback: null,
-      _onUpdateCallback: null,
-      _onCompleteCallback: null,
-      _onStopCallbackL: null,
-    })
-    let destroyMethod: undefined | ((...params: any) => any)
-    while ((destroyMethod = destroyMethods.shift())) destroyMethod()
-    cancelAnimationFrame()
-  }
-  return tween
-}
-
-export function tweenProgress(duration: number, easing: typeof Easing.Linear.None) {
-  return tween({ progress: 0 }, { progress: 1 }, duration, easing)
-}

package/resources/shared-utils/createTransMatrix.ts

@@ -1,12 +0,0 @@
-import * as THREE from 'three'
-
-export function createTransMatrix(arr1: number[]) {
-  const matrix4 = new THREE.Matrix4()
-  matrix4.fromArray(arr1)
-
-  return (arr2: number[]) => {
-    const vector3 = new THREE.Vector3(...arr2)
-    vector3.applyMatrix4(matrix4)
-    return vector3.toArray()
-  }
-}

package/resources/shared-utils/getFileExpandedName.ts

@@ -1,6 +0,0 @@
-export default function getFileExpandedName(filePath?: string | null) {
-  if (!filePath) return ''
-  const index = filePath.lastIndexOf('.')
-  const ext = filePath.substring(index + 1)
-  return ext.toLowerCase()
-}

package/resources/shared-utils/getMediaInfo.ts

@@ -1,52 +0,0 @@
-import getFileExpandedName from './getFileExpandedName'
-
-export default function getMediaInfo(fileUrl: string): Promise<{
-  duration?: number | undefined
-  type?: 'video' | 'audio' | 'image' | 'unknown' | undefined
-  error?: string | undefined
-}> {
-  const type = getMediaType(fileUrl)
-  if (!type) return Promise.resolve({ error: '未知的文件类型: ' + fileUrl })
-  const mediaElement = (() => {
-    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<{ duration?: number; type?: 'video' | 'audio' | 'image' | 'unknown'; error?: string }>((resolve) => {
-    mediaElement.onerror = () => resolve({ error: 'onerror' })
-    mediaElement.onloadedmetadata = () => {
-      resolve({ duration: mediaElement.duration * 1000, type }) // s => ms
-    }
-  })
-}
-
-export function getMediaType(url?: string) {
-  const fileExpandedName = getFileExpandedName(url)
-  const type = getMediaTypeByExpandedName(fileExpandedName)
-  return type
-}
-
-export function getMediaTypeByExpandedName(fileExpandedName?: string | null) {
-  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'
-}
-
-export function getMediaTypeByUrl(fileUrl?: string | null) {
-  if (!fileUrl) return
-  const fileExpandedName = getFileExpandedName(fileUrl)
-  return getMediaTypeByExpandedName(fileExpandedName)
-}
-
-export function getFileName(fileUrl?: string) {
-  if (!fileUrl) return ''
-  const index1 = fileUrl.lastIndexOf('/')
-  const index2 = fileUrl.lastIndexOf('\\')
-  const index3 = fileUrl.lastIndexOf('\\\\')
-  const index = Math.max(index1, index2, index3)
-  const ext = fileUrl.substring(index + 1)
-  return ext
-}

package/resources/shared-utils/setElementDataset.ts

@@ -1,18 +0,0 @@
-export default function setElementDataset(element: any, dataset: Record<string, string | number>) {
-  if (element) {
-    Object.keys(dataset).forEach((key) => {
-      
-      const value = dataset[key].toString()
-
-      if (element instanceof Element) {
-        element.setAttribute(`data-${key}`, value)
-      } else if (element instanceof Document) {
-        element.documentElement.setAttribute(`data-${key}`, value)
-      } else if (element instanceof HTMLElement) {
-          element.dataset[key] = value
-      } else {
-          (element as any).setAttribute(`data-${key}`, value)
-      }
-    })
-}
-}