@realsee/vreo 0.2.0-alpha.5 → 0.2.0-alpha.8

package/resources/fivePlugins/CameraMovementPlugin/index.ts

@@ -50,65 +50,73 @@ function progressNumber(from: number, to: number, pst: number) {
 export const CameraMovementPlugin: FivePlugin<CameraMovementPluginParameterType, CameraMovementPluginExportType> = (
   five: Five,
 ) => {
-  const move = async (args: Partial<MoveArgs>, duration: number, opts: MoveOpts = { preload: true }) => {
-    if (opts.asyncStartCallback) {
-      opts.asyncStartCallback()
-    }
+  const move = (args: Partial<MoveArgs>, duration: number, opts: MoveOpts = { preload: true }) => {
+    return new Promise<boolean>(async (resolve, reject) => {
+
+      if (opts.asyncStartCallback) {
+        opts.asyncStartCallback()
+      }
+
+      if (five.panoIndex === undefined) {
+        return reject(false)
+      }
 
-    if (args.mode && args.mode !== five.currentMode) {
-      await new Promise((resolve) => {
-        if (!args.mode) return
-        five.once('modeChange', (mode) => {
-          five.once('initAnimationEnded', () => {
-            if (mode === args.mode) {
-              resolve(true)
-            }
+      if (args.mode && args.mode !== five.currentMode) {
+        await new Promise((resolve) => {
+          if (!args.mode) return
+          five.once('modeChange', (mode) => {
+            five.once('initAnimationEnded', () => {
+              if (mode === args.mode) {
+                resolve(true)
+              }
+            })
+          })
+          five.changeMode(args.mode, {
+            fov: args.fov || undefined,
+            latitude: args.latitude || undefined,
+            longitude: args.longitude || undefined,
+            panoIndex: args.panoIndex || undefined,
           })
         })
-        five.changeMode(args.mode, {
-          fov: args.fov || undefined,
-          latitude: args.latitude || undefined,
-          longitude: args.longitude || undefined,
-          panoIndex: args.panoIndex || undefined,
-        })
-      })
-    }
+      }
 
-    if (args.mode === Five.Mode.Floorplan) {
-      return true
-    }
+      if (args.mode === Five.Mode.Floorplan) {
+        return resolve(true)
+      }
 
-    if (opts.preload && args.panoIndex !== undefined && args.panoIndex !== five.panoIndex) {
-      await five.preloadPano(args.panoIndex)
-    }
+      if (opts.preload && args.panoIndex !== undefined && args.panoIndex !== five.panoIndex) {
+        await five.preloadPano(args.panoIndex)
+      }
+
+      if (opts.asyncEndCallback) {
+        opts.asyncEndCallback()
+      }
+
+      if (
+        args.panoIndex === undefined &&
+        args.fov === undefined &&
+        args.latitude === undefined &&
+        args.longitude === undefined
+      ) {
+        return resolve(true)
+      }
 
-    if (opts.asyncEndCallback) {
-      opts.asyncEndCallback()
-    }
 
-    if (
-      args.panoIndex === undefined &&
-      args.fov === undefined &&
-      args.latitude === undefined &&
-      args.longitude === undefined
-    ) {
-      return true
-    }
-    return await new Promise<boolean>((resolve, reject) => {
       const panoIndex = args.panoIndex !== undefined ? args.panoIndex : five.panoIndex
+
       if (panoIndex !== undefined) {
-        const movePanoOptions: MovePanoOptions = {
+        const movePanoOptions: MovePanoOptions = Object.assign(args, {
           duration, // 移动耗时
           moveEndCallback: () => resolve(true), // 移动结束
-          moveCancelCallback: () => reject(false), // 移动开始
-          effect: 'fade',
-        }
-        five.moveToPano(
+          moveCancelCallback: () => {
+            resolve(true)
+          }, // 移动开始
+          // effect: args.transEffect || 'fade',
+        })
+
+        await five.moveToPano(
           panoIndex,
-          Object.assign(
-            movePanoOptions,
-            args,
-          ),
+          movePanoOptions,
         )
       } else {
         reject(false)

package/resources/fivePlugins/CameraMovementPlugin/typings.ts

@@ -39,7 +39,8 @@ export interface CameraMovementOptsCallback {
 export type MoveArgs = {
   mode: Mode
   panoIndex: number
-} & Pose & Pick<MovePanoOptions, 'effect'>
+  transEffect?: "fly" | "fade" | "instant"
+} & Pose
 
 export type MoveOpts = {
   preload?: boolean

package/resources/typings/VreoUnit.ts

@@ -1,4 +1,4 @@
-import { Mode, Pose } from '@realsee/five'
+import { Mode, MovePanoOptions, Pose } from '@realsee/five'
 import { CameraMovementEffect, Rotation } from '../fivePlugins/CameraMovementPlugin/typings'
 
 export enum VreoKeyframeEnum {
@@ -65,7 +65,7 @@ export type VreoKeyframeConfigMap = {
  * 剧本关键帧
  */
 export interface VreoKeyframe {
-  uuid: string
+  uuid?: string
   type: VreoKeyframeEnum
   start: number
   end: number
@@ -104,7 +104,7 @@ export type VreoKeyframeEvent = { [key in VreoKeyframeEnum]: (keyframe: VreoKeyf
   // 新数据载入完成
   loaded: (vreoUnit: VreoUnit) => void
   // 语音状态 播放 -> 暂停
-  paused: () => void
+  paused: (ended?: boolean) => void
   // 语音状态 暂停 -> 播放
   playing: () => void
   // 未知的 剧本帧类型
@@ -115,7 +115,8 @@ export type VreoKeyframeEvent = { [key in VreoKeyframeEnum]: (keyframe: VreoKeyf
  * 相机运动
  */
 export type CameraMovementData = {
-  effect: CameraMovementEffect
+  effect?: CameraMovementEffect
+  transEffect?: "fly" | "fade" | "instant"
   mode: Mode
   panoIndex: number
   loop?: boolean
@@ -235,11 +236,17 @@ export enum InfoPanelTypeEnum {
   Video = 'Video',
 }
 
+export enum InfoPanelStyleEnum {
+  Drawer = 'Drawer',
+  PopUp = 'PopUp',
+}
+
 /**
  * 信息面板
  */
 export type InfoPanelData = {
   type: InfoPanelTypeEnum
+  style?: InfoPanelStyleEnum
   url: string
   // 标题
   title?: string

package/stylesheets/custom/SpatialScenePanel.css

@@ -77,9 +77,15 @@
   background-image: url("//vrlab-static.ljcdn.com/release/web/VoiceAssistant/images/panel-min.7d9ba2b7.png");
   background-size: 340rem 13.4375rem;
   background-repeat: no-repeat;
-  animation: SpatialScenePanel-panel-sprites-animation 1.375s 0s steps(33) infinite normal
+  z-index: -1;
 }
 
+.SpatialScenePanel-bg--animation {
+  /* animation: SpatialScenePanel-panel-sprites-animation 1.375s 0s steps(33) infinite normal; */
+  animation: SpatialScenePanel-panel-sprites-animation 1.375s 0.5s steps(33) normal;
+}
+
+
 .SpatialScenePanel-show-area .SpatialScenePanel-header {
   width: 7.5rem;
   height: 1.375rem;
@@ -89,7 +95,9 @@
   background-image: url("//vrlab-static.ljcdn.com/release/web/VoiceAssistant/images/title-bg.377af865.png");
   background-size: 100%;
   margin: 1.875rem auto 1.25rem auto;
-  padding-bottom: .25rem
+  background-image: linear-gradient(to left, rgba(234, 208, 154, 0), rgb(255 229 176 / 21%) 47%, rgba(234, 208, 154, 0));
+  border-bottom: 1px solid rgb(255 255 255 / 10%);
+  border-radius: 2px;
 }
 
 .SpatialScenePanel-show-area .SpatialScenePanel-header .SpatialScenePanel-title {
@@ -97,7 +105,7 @@
   font-size: 1.0625rem;
   color: #ffe5b0;
   letter-spacing: 0;
-  line-height: 1.0625rem;
+  line-height: 1.125;
   text-shadow: 0 0 1.25rem rgba(0,0,0,0.15)
 }
 
@@ -106,7 +114,7 @@
   font-size: .625rem;
   color: rgba(255,229,176,0.6);
   letter-spacing: 0;
-  line-height: .625rem;
+  line-height: 1.25rem;
   text-shadow: 0 0 .625rem rgba(255,255,255,0.03);
   align-self: flex-end
 }
@@ -270,9 +278,7 @@
 
 .SpatialScenePanel.hide .SpatialScenePanel-show-area {
   transform: scale3d(0,1,1);
-  transition: -webkit-transform 500ms linear;
-  transition: transform 500ms linear;
-  transition: transform 500ms linear, -webkit-transform 500ms linear
+  transition: transform 150ms linear;
 }
 
 .SpatialScenePanel.hide .SpatialScenePanel-disappear-area {
@@ -298,6 +304,6 @@
   background-image: url("//vrlab-static.ljcdn.com/release/web/VoiceAssistant/images/line.4ac1c0bb.png");
   background-size: 10rem 11.666666666666666rem;
   background-repeat: no-repeat;
-  animation: SpatialScenePanel-line-sprites-animation 500ms 500ms steps(23) 1 normal
+  animation: SpatialScenePanel-line-sprites-animation 500ms 100ms steps(23) 1 normal
 }
 

package/stylesheets/default.css

@@ -547,3 +547,69 @@
   opacity: 0;
   transition: opacity 0.45s;
 }
+
+.vreo-PopUp {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7) 65%);
+  opacity: 0;
+  transition: opacity .45s;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.vreo-PopUp.vreo-PopUp-visible {
+  opacity: 1;
+  pointer-events: all;
+}
+
+.vreo-PopUp-inner {
+  width: 339px;
+  height: 425px;
+  position: relative;
+}
+
+@media only screen and (min-width: 960px) {
+  .vreo-PopUp-inner {
+    width: 678px;
+    height: 620px;
+    position: relative;
+  }
+  .vreo-infoPanelVideo {
+    max-width: 100%;
+  }
+}
+
+.vreo-PopUp-inner .vreo-infoPanel {
+  background-color: initial;
+  justify-content: center;
+}
+
+.vreo-PopUp-inner .vreo-infoPanel-title {
+  position: absolute;
+  bottom: 32px;
+  left: 0;
+  z-index: 1;
+  flex-direction: column;
+  justify-content: end;
+  height: 200px;
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
+}
+
+.vreo-PopUp-inner .vreo-infoPanel-title .vreo-infoPanel-t1 {
+  padding-left: 0;
+  font-size: 20px;
+  font-weight: 600;
+  padding-bottom: 14px;
+}
+
+.vreo-PopUp-inner .vreo-infoPanel-title .vreo-infoPanel-t2 {
+  padding: 0 0 24px 0;
+  font-size: 14px;
+  opacity: 0.85;
+}