@realsee/vreo 0.2.0-alpha.10 → 0.2.0-alpha.13

package/resources/shared-utils/AduioLike.ts

@@ -0,0 +1,108 @@
+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 = 0
+  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.$timestamp === 0) {
+      this.$timestamp = performance.now()
+    }
+    if (this.$currentTime === this.$duration) {
+      this.$currentTime = 0
+    }
+    this.stopInterval = requestAnimationFrameInterval(() => this.requestAnimationFrameLoop())
+    this.emit('play')
+  }
+
+  pause() {
+    if (this.stopInterval) {
+      this.stopInterval()
+      this.emit('pause')
+      this.stopInterval = undefined
+    }
+    this.$timestamp = 0
+  }
+
+  requestAnimationFrameLoop() {
+    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 = 0
+    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/typings/VreoUnit.ts

@@ -208,8 +208,23 @@ export enum PanoTagEnum {
   Image = 'Image',
 }
 
+/**
+ * 标签样式种类
+ */
+export enum PanoTagStyleEnum {
+  /**
+   * 生长动画：默认值
+   */
+  Growth = 'Growth',
+  /**
+   * 展开动画
+   */
+  Expand = 'Expand',
+}
+
 export type PanoTagData = {
   type: PanoTagEnum
+  style: PanoTagStyleEnum
   text: string
   vertex: Vertex
   imgUrl?: string

package/stylesheets/default.css

@@ -2,8 +2,8 @@
   position: fixed;
   top: 0;
   left: 0;
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   pointer-events: none;
 }
 
@@ -31,7 +31,7 @@
   position: fixed;
   bottom: 0;
   left: 0;
-  width: 100vw;
+  width: 100%;
   height: 150px;
   color: white;
   transition: transform 0.5s;
@@ -195,6 +195,27 @@
   opacity: 0;
 }
 
+.PanoTag--expand {
+  transform: translate(-50%, -50%);
+  color: white;
+  min-width: 150px;
+  max-width: 200px;
+  margin-top: 4px;
+}
+
+.PanoTag--expand .PanoTag-box.PanoTag-box--Text {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-bottom: 4px;
+}
+
+.PanoTag-guideline {
+  width: 100%;
+  background: linear-gradient(45deg, transparent 20% ,white, transparent 80%);
+  height: 3px;
+}
+
 .PanoTag--notHidden {
   opacity: 1;
 }
@@ -582,7 +603,7 @@
   position: relative;
 }
 
-@media only screen and (min-width: 960px) {
+@media only screen and (min-width: 1080px) {
   .vreo-PopUp-inner {
     width: 678px;
     height: 620px;