@realsee/vreo 0.1.2 → 0.1.6

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;
+}