@realsee/vreo 0.2.0-alpha.11 → 0.2.0-alpha.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@realsee/vreo",
-  "version": "0.2.0-alpha.11",
+  "version": "0.2.0-alpha.12",
   "description": "Vreo (VR Video 缩写) 是基于如视三维渲染引擎 Five 和 用户界面构建库 React 实现的如视 3D 空间剧本播放器。",
   "keywords": [
     "realsee",
@@ -26,8 +26,8 @@
   },
   "peerDependencies": {
     "@realsee/five": "^5.0.0-alpha.103",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.16.0",

package/resources/Player/index.tsx

@@ -129,7 +129,7 @@ export class Player extends Subscribe<VreoKeyframeEvent> {
       if (this.controller.videoAgentScene?.videoAgentMesh.videoInstance) {
         this.controller.videoAgentScene.videoAgentMesh.videoInstance.currentTime = currentTime / 1000
       }
-      await this.controller.videoAgentScene?.videoAgentMesh.play(vreoUnit.video.url)
+      await this.controller.videoAgentScene?.videoAgentMesh.play(vreoUnit.video.url, currentTime / 1000)
       this.play()
     }
     this.controller.run((type, keyframe) => this.emit(type, keyframe))
@@ -140,8 +140,12 @@ export class Player extends Subscribe<VreoKeyframeEvent> {
     return !this.controller.playing
   }
 
-  play() {
+  play(currentTime?: number) {
     if (this.controller.playing) return true
+    if (currentTime && this.controller.videoInstance) {
+      // Object.assign(window, {$vreoController: this.controller})
+      this.controller.videoInstance.currentTime = currentTime / 1000
+    }
     this.controller.setPlaying(true)
     return true
   }

package/resources/Player/modules/VideoAgent/VideoAgentMesh.ts

@@ -196,7 +196,7 @@ export class VideoAgentMesh extends THREE.Mesh {
     this.videoInstance.addEventListener('timeupdate', onStart, false)
   }
 
-  async play(videoUrl = '') {
+  async play(videoUrl = '', currentTime = 0) {
     videoUrl = videoUrl || ''
     if (!videoUrl) {
       if (this.videoUrl) await this.videoInstance.play()
@@ -205,7 +205,7 @@ export class VideoAgentMesh extends THREE.Mesh {
     }
 
     if (videoUrl === this.videoUrl) {
-      this.videoInstance.currentTime = 0
+      this.videoInstance.currentTime = currentTime
       await this.videoInstance.play()
       return true
     }
@@ -216,7 +216,7 @@ export class VideoAgentMesh extends THREE.Mesh {
 
     return await new Promise((resolve) =>
       setTimeout(async () => {
-        this.videoInstance.currentTime = 0
+        this.videoInstance.currentTime = currentTime
         await this.videoInstance.play()
         resolve(true)
       }, 20),

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

@@ -2,13 +2,21 @@ import classNames from 'classnames'
 import * as React from 'react'
 import { Vector3 } from 'three'
 import { useController, useFiveInstance, useFiveProject2d } from '../../../hooks'
-import { PanoTagData, PanoTagEnum, Vertex, VreoKeyframe, VreoKeyframeEnum } from '../../../../typings/VreoUnit'
+import {
+  PanoTagData,
+  PanoTagEnum,
+  PanoTagStyleEnum,
+  Vertex,
+  VreoKeyframe,
+  VreoKeyframeEnum,
+} from '../../../../typings/VreoUnit'
 
 export function PanoTag() {
   const [state, setState] = React.useState<{
     vertex: Vertex
     text?: string
     type: PanoTagEnum
+    style?: PanoTagStyleEnum
     imgUrl?: string
   } | null>(null)
 
@@ -30,6 +38,7 @@ export function PanoTag() {
       const vertex = panoTagData.vertex
       const { x, y, z } = panoTagData.vertex
       const res = project2d(new Vector3(x, y, z))
+
       if (!res) return
       const { x: left, y: top } = res
       setState({
@@ -37,6 +46,7 @@ export function PanoTag() {
         text: panoTagData.text || PanoTagEnum.Text,
         type: panoTagData.type,
         imgUrl: panoTagData.imgUrl,
+        style: panoTagData.style || PanoTagStyleEnum.Growth,
       })
       setPos({ left, top })
       timeoutRef.current = setTimeout(() => {
@@ -92,6 +102,25 @@ export function PanoTag() {
     return undefined
   })()
 
+  if (state?.style === PanoTagStyleEnum.Expand) {
+    return (
+      <>
+        <div
+          className={classNames('PanoTag', {
+            'PanoTag--expand': true,
+            'PanoTag--notHidden': state,
+          })}
+          style={{
+            left: (pos?.left || 0) + 'px',
+            top: (pos?.top || 0) + 'px',
+          }}
+        >
+          <div className={'PanoTag-box PanoTag-box--' + (state?.type || '')}>{boxContent}</div>
+          <div className="PanoTag-guideline"></div>
+        </div>
+      </>
+    )
+  }
   return (
     <>
       <div
@@ -109,17 +138,7 @@ export function PanoTag() {
             <span className="PanoTag-slashline"></span>
             <span className="PanoTag-straightline"></span>
           </span>
-          <div
-            onClick={() => {
-              if (state?.imgUrl) {
-                // @TODO
-                // setDrawerVisible(true)
-              }
-            }}
-            className={'PanoTag-box PanoTag-box--' + (state?.type || '')}
-          >
-            {boxContent}
-          </div>
+          <div className={'PanoTag-box PanoTag-box--' + (state?.type || '')}>{boxContent}</div>
         </div>
       </div>
     </>

package/resources/react/index.tsx

@@ -54,7 +54,7 @@ export interface VreoActionCallbacks {
   /**
    * 播放。
    */
-  play: () => void
+  play: (currentTime?: number) => void
   /**
    * 暂停。
    */
@@ -81,7 +81,7 @@ export function useVreoAction() {
     [player]
   )
 
-  const play = React.useCallback(() => player.play(), [player])
+  const play = React.useCallback((currentTime?: number) => player.play(currentTime || 0), [player])
   const pause = React.useCallback(() => player.pause(), [player])
   const show = React.useCallback(() => player.show(), [player])
   const hide = React.useCallback(() => player.hide(), [player])

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;