@realsee/vreo 0.1.2 → 0.1.6-alpha.1

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

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { parseWork } from '@realsee/five'
+import { parseWork, WorkCubeImage } from '@realsee/five'
 import { useController, useFiveInstance } from '../../../hooks'
 import { UpdateVRPanoramaData, VreoKeyframe, VreoKeyframeEnum } from '../../../../typings/VreoUnit'
 
@@ -11,6 +11,10 @@ export function UpdateVRPanorama() {
     const callback = (keyframe: VreoKeyframe) => {
       const { panoIndex, images } = keyframe.data as UpdateVRPanoramaData
 
+      Object.keys(images).forEach((_key) => {
+        const key = _key as keyof WorkCubeImage
+        images[key] = images[key].replace(/https*:\/\//, '//')
+      })
       const newWorkJSON = JSON.parse(JSON.stringify(five.work?.raw.work))
 
       // // 原Work数据不能被修改

package/resources/fivePlugins/CameraMovementPlugin/index.ts

@@ -139,11 +139,16 @@ export const CameraMovementPlugin: FivePlugin<CameraMovementPluginParameterType,
       opts.asyncStartCallback()
     }
 
-    if (five.currentMode !== Five.Mode.Panorama) {
-      await five.changeMode(Five.Mode.Panorama)
+    // 先切换模型再出旋转效果
+    if (args.mode && five.currentMode !== args.mode) {
+      await five.changeMode(args.mode)
     }
 
-    if (args.panoIndex !== undefined && args.panoIndex !== five.panoIndex) {
+    // 全景状态下，需要点位对齐
+    if (args.mode === Five.Mode.Panorama &&
+      five.currentMode === Five.Mode.Panorama &&
+      args.panoIndex !== undefined &&
+      args.panoIndex !== five.panoIndex) {
       if (opts.preload) await five.preloadPano(args.panoIndex)
       await new Promise((resolve, reject) => {
         five.moveToPano(args.panoIndex, {

package/resources/fivePlugins/CameraMovementPlugin/typings.ts

@@ -46,6 +46,7 @@ export type MoveOpts = {
 } & CameraMovementOptsCallback
 
 export type RotateArgs = {
+  mode?: Mode
   panoIndex: number
   loop: boolean
   rotateSpeed: number

package/resources/react/index.tsx

@@ -7,13 +7,16 @@ const VreoContext = React.createContext<Player | null>(null)
 
 export const VreoProvider: React.FC = (props) => {
   const five = unsafe__useFiveInstance()
+
   const [player, setPlayer] = React.useState<Player | null>(null)
+  const playerRef = React.useRef<Player | null>(null)
 
   React.useEffect(() => {
-    setPlayer(new Player(five))
+    playerRef.current = new Player(five)
+    setPlayer(playerRef.current)
 
     return () => {
-      player?.dispose()
+      playerRef.current?.dispose()
     }
   }, [])
 
@@ -88,9 +91,13 @@ export function useVreoEventCallback<T extends keyof VreoKeyframeEvent>(
   if (deps !== undefined) {
     dependencyList = dependencyList.concat(deps)
   }
-  React.useLayoutEffect(() => {
+  React.useEffect(() => {
     // @ts-ignore
-    return player.on(name, callback)
+    player.on(name, callback)
+    return () => {
+      // @ts-ignore
+      player.off(name, callback)
+    }
   }, dependencyList)
 }
 

package/resources/typings/VreoUnit.ts

@@ -40,6 +40,10 @@ export enum VreoKeyframeEnum {
    * 结束
    */
   Exit = 'Exit',
+  /**
+   * 自定义剧本帧
+   */
+  Custom = 'Custom',
 }
 
 /**
@@ -223,3 +227,6 @@ export type VideoEffectData = {
   direction?: Vertex
   vector?: Pick<Pose, 'longitude' | 'latitude'>
 }
+
+/** 自定义序列帧 */
+export type CustomData = Record<string, any>

package/stylesheets/default.css

@@ -133,7 +133,10 @@
   opacity: 1;
   transition: opacity 0.5s;
 }
-
+.vreo-prompter--audio {
+  top: 72px;
+  left: 64px;
+}
 .vreo-prompter-innerText {
   position: absolute;
   left: 0;
@@ -495,3 +498,8 @@
   width: 100%;
   max-width: 375px;
 }
+
+.vreo-panel--hidden .vreo-panel-inner {
+  opacity: 0;
+  transition: opacity 0.45s;
+}