@realsee/vreo 1.0.0-alpha.2 → 1.0.0-alpha.21

package/resources/Player/custom/SpatialScenePanel/index.tsx

@@ -1,264 +0,0 @@
-import * as React from 'react'
-import ReactDOM from 'react-dom'
-import { Five } from '@realsee/five'
-import { Raycaster, Vector3 } from 'three'
-import { tweenProgress } from '../../../shared-utils/animationFrame/BetterTween'
-import { CSS3DRenderPlugin, CSS3DRenderPluginExportType } from '../../../fivePlugins/CSS3DRenderPlugin'
-
-import { VreoKeyframe, VreoKeyframeEnum } from '../../../typings/VreoUnit'
-import { CustomVreoKeyframeProps } from '../../typings'
-
-// __debug__
-// const mockData: SpatialScenePanelData = {
-//   customType: 'SpatialScenePanel',
-//   "stateList": [
-//     {
-//       "icon": "http://vrlab-public.ljcdn.com/release/seesay/tools/___fc42f951076607a22fd5c54f005ba553.png",
-//       "text": "窗帘关闭"
-//     },
-//     {
-//       "icon": "http://vrlab-public.ljcdn.com/release/seesay/tools/___b331e7ad732debc07250a169a3393b13.png",
-//       "text": "摄像头休眠"
-//     },
-//     {
-//       "icon": "http://vrlab-public.ljcdn.com/release/seesay/tools/___2e425a81ac0ad88232d50d4e52a9abfa.png",
-//       "text": "氛围音乐"
-//     },
-//     {
-//       "icon": "http://vrlab-public.ljcdn.com/release/seesay/tools/___bff48bb81cde37aa6a319d6f5d56e3a4.png",
-//       "text": "空调打开"
-//     }
-//   ],
-//   "temperature": "27",
-//   "title": "沉浸式回家"
-// }
-
-export interface SpatialScenePanelData {
-  customType: 'SpatialScenePanel'
-  title: string
-  temperature: string
-  stateList: {
-    text: string
-    icon: string
-  }[]
-  position?: { x: number; y: number; z: number }
-  quaternion?: [number, number, number, number]
-}
-
-interface SearchParams {
-  five: Five
-  // position: Vector3
-  // rotation?: Vector3
-  // quaternion: [number, number, number, number]
-  dom: HTMLDivElement
-}
-
-// const getSphere = (position: Vector3, color = 0xffff00) => {
-//   const geometry = new SphereGeometry(0.05, 32, 16)
-//   const material = new MeshBasicMaterial({ color })
-//   const sphere = new Mesh(geometry, material)
-//   sphere.position.copy(position)
-//   return sphere
-// }
-
-const searchV1 = ({ five, dom }: SearchParams) => {
-  const cameraDirection = new Vector3()
-  five.camera.getWorldDirection(cameraDirection)
-  const cameraPosition = five.camera.position
-  const [intersect] = five.model.intersectRaycaster(new Raycaster(cameraPosition, cameraDirection))
-  const point = five.project2d(intersect.point)
-
-  const widescreen = window.innerWidth > 560 ? true : false
-  // const width = dom!.clientWidth
-  const height = dom!.clientHeight
-  dom!.style.left = point!.x + 'px'
-  dom!.style.top = point!.y - height / 2 + 'px'
-  const rect = dom!.getBoundingClientRect()
-  const { left, top, bottom, right } = rect
-
-  const leftBottom = new Vector3(left, bottom)
-  const leftTop = new Vector3(left, top)
-  const rightTop = new Vector3(right, top)
-  const rightBottom = new Vector3(right, bottom)
-
-  const points = [leftBottom, rightBottom, rightTop, leftTop].map((point) => {
-    point.setX((point.x / window.innerWidth) * 2 - (widescreen ? 1.25: 1.75))
-    point.setY(-(point.y / window.innerHeight) * 2 + (widescreen ? 1.35: 1.125))
-    point.setZ(0.5)
-    return point.unproject(five.camera).addScaledVector(cameraDirection, 0.2)
-  })
-
-  // __debug__
-  // const colors = [0xdc143c, 0xffff00, 0x0000ff, 0x008000]
-  // points.forEach((p, index) => five.scene.add(getSphere(p, colors[index])))
-
-  // 判断是手机 150
-  const ratio = leftBottom.distanceTo(rightBottom) / (widescreen ? 150 : 120)
-  return { points, ratio }
-}
-
-/**
- * 空间场景面板
- * @returns
- */
-export function SpatialScenePanel(props: CustomVreoKeyframeProps) {
-  const timeoutRef = React.useRef<NodeJS.Timeout | null>(null)
-  const ref = React.useRef<HTMLDivElement>(null)
-  const panelRef = React.useRef<HTMLDivElement | null>(null)
-  const rendererRef = React.useRef<CSS3DRenderPluginExportType>(CSS3DRenderPlugin(props.five))
-
-  React.useEffect(() => {
-    if (!ref.current) {
-      return
-    }
-
-    const callback = (keyframe: VreoKeyframe) => {
-      if (keyframe.data.customType !== 'SpatialScenePanel') {
-        return
-      }
-
-      const data = keyframe.data as SpatialScenePanelData
-
-      // const data = mockData
-      const { points, ratio } = searchV1({
-        five: props.five,
-        dom: ref.current!,
-      })
-
-      const { container, dispose, css3DObject, render } =
-        rendererRef.current.create3DDomContainer(points, { ratio, autoRender: false }) || {}
-
-      Object.assign(window, { $css3DObject: css3DObject })
-      if (!container) return
-
-      ReactDOM.render(<Panel ref={(ref) => (panelRef.current = ref)} data={data} />, container)
-      const startRotateY = -(Math.PI * 2) / 9
-      let lastRotateY = 0
-    
-      tweenProgress(1000)
-        .onUpdate(({ progress }) => {
-          const needRotateY = (Math.PI / 90) * 11 * progress
-          const rotateY = needRotateY - lastRotateY
-          css3DObject?.rotateY(rotateY)
-          // css3DObject?.rotateZ
-          lastRotateY = needRotateY
-        })
-        .onStart(() => {
-          css3DObject?.rotateY(startRotateY)
-          render!()
-        })
-        .onDispose(() => {
-          panelRef.current?.classList.add('show')
-        })
-        .play()
-
-    // Object.assign(window, {  $dispose: () => {
-    //   panelRef.current?.classList.add('hide')
-    //   setTimeout(() => dispose?.(), 1500)
-    // } })
-
-      const { start, end } = keyframe
-
-      timeoutRef.current = setTimeout(() => {
-        panelRef.current?.classList.add('hide')
-        timeoutRef.current = setTimeout(() => {
-          dispose?.()
-          timeoutRef.current = null
-        }, 1500)
-      }, end - start)
-    }
-
-    Object.assign(window, { $callback: callback })
-
-    // setTimeout(() => {callback()}, 8000)
-    props.subscribe.on(VreoKeyframeEnum.Custom, callback)
-
-    return () => {
-      props.subscribe.off(VreoKeyframeEnum.Custom, callback)
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current)
-      }
-    }
-  }, [])
-
-  return <div className="vreo-SpatialScenePanel" ref={ref}></div>
-}
-
-/** 背景动画：控制延迟 */
-function SpatialScenePanelBg() {
-  const ref = React.useRef<HTMLDivElement>(null)
-  const timeoutRef = React.useRef<NodeJS.Timeout | null>(null)
-  React.useEffect(() => {
-    if (!ref.current) return
-
-    const listener = () => {
-      ref.current?.setAttribute('class', 'SpatialScenePanel-bg')
-
-      timeoutRef.current = setTimeout(() => {
-        ref.current?.setAttribute('class', 'SpatialScenePanel-bg SpatialScenePanel-bg--animation')
-        timeoutRef.current = null
-      }, 3000)
-    }
-
-    ref.current.addEventListener('animationend', listener)
-
-    return () => {
-      if (ref.current) ref.current.removeEventListener('animationend', listener)
-      if (timeoutRef.current) clearTimeout(timeoutRef.current)
-    }
-  }, [])
-  return <div ref={ref} className="SpatialScenePanel-bg SpatialScenePanel-bg--animation"></div>
-}
-
-const Panel = React.forwardRef(
-  (props: { data: SpatialScenePanelData }, myRef: React.LegacyRef<HTMLDivElement> | undefined) => (
-    <div className="SpatialScenePanel" ref={myRef}>
-      <div className="SpatialScenePanel-show-area">
-        <SpatialScenePanelBg />
-        <div className="SpatialScenePanel-header">
-          <div className="SpatialScenePanel-title">{props.data?.title}</div>
-          <div className="SpatialScenePanel-temperature">{props.data?.temperature}℃</div>
-        </div>
-        <div className="SpatialScenePanel-body">
-          {props.data?.stateList?.map((state, index) => (
-            <div key={`scene-${state.text}`} className={`SpatialScenePanel-item index_${index}`}>
-              <img className="SpatialScenePanel-icon" src={state.icon} alt={`${state.text}`}></img>
-              <div className="SpatialScenePanel-text">{state.text}</div>
-              <div className="SpatialScenePanel-dot"></div>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      <div className="SpatialScenePanel-disappear-area"></div>
-    </div>
-  )
-)
-
-
-// export function SpatialScenePanel() {
-//   // const data = mockData
-
-//   return (
-//     <div className="SpatialScenePanel" >
-//     <div className="SpatialScenePanel-show-area">
-//       <SpatialScenePanelBg />
-//       <div className="SpatialScenePanel-header">
-//         <div className="SpatialScenePanel-title">{data?.title}</div>
-//         <div className="SpatialScenePanel-temperature">{data?.temperature}℃</div>
-//       </div>
-//       <div className="SpatialScenePanel-body">
-//         {data?.stateList?.map((state, index) => (
-//           <div key={`scene-${state.text}`} className={`SpatialScenePanel-item index_${index}`}>
-//             <img className="SpatialScenePanel-icon" src={state.icon}></img>
-//             <div className="SpatialScenePanel-text">{state.text}</div>
-//             <div className="SpatialScenePanel-dot"></div>
-//           </div>
-//         ))}
-//       </div>
-//     </div>
-
-//     <div className="SpatialScenePanel-disappear-area"></div>
-//   </div>
-//   )
-// }

package/resources/Player/hooks.ts

@@ -1,26 +0,0 @@
-import React from 'react'
-import { Vector3 } from 'three'
-import { ControllerContext } from './Controller'
-
-export function useController() {
-  const controller = React.useContext(ControllerContext)
-  if (!controller) {
-    throw new Error('没有找到 "ControllerContext"')
-  }
-
-  return controller
-}
-
-export function useFiveInstance() {
-  const controller = useController()
-  if (!controller.five) {
-    throw new Error('没有找到 "five" 实例')
-  }
-
-  return controller.five
-}
-
-export function useFiveProject2d() {
-  const five = useFiveInstance()
-  return (vector: Vector3) => five.project2d(vector, false)
-}

package/resources/Player/index.tsx

@@ -1,225 +0,0 @@
-import * as ReactDOM from 'react-dom'
-import { Five, Subscribe } from '@realsee/five'
-
-import { App } from './App'
-import { Controller, ControllerContext } from './Controller'
-import { CameraMovementData, VreoKeyframeEnum, VreoKeyframeEvent, VreoUnit } from '../typings/VreoUnit'
-import { reaction } from 'mobx'
-import { Drawer } from './modules/Drawer'
-import { Appearance, PlayerConfigs, WaveAppearance } from './typings'
-import { PopUp } from './modules/PopUp'
-
-export class Player extends Subscribe<VreoKeyframeEvent> {
-    $five: Five
-    private controller: Controller
-    configs: Readonly<PlayerConfigs>
-
-    constructor(five: Five, configs: Partial<PlayerConfigs> = {}) {
-        super()
-        this.$five = five
-
-
-        if (!configs.container) {
-            configs.container = configs.containter
-        }
-        if (!configs.container) {
-            const container = document.getElementById('vreo-app') || document.createElement('div')
-            ReactDOM.unmountComponentAtNode(container)
-            container.setAttribute('id', 'vreo-app')
-            configs.container = container
-            const fiveCanvasDomParent = five.getElement()?.parentNode
-            if (fiveCanvasDomParent) {
-                fiveCanvasDomParent.append(container)
-            } else {
-                document.body.append(container)
-            }
-        }
-
-        if (!configs.container.classList.contains('vreo-app')) configs.container.classList.add('vreo-app')
-
-        this.configs = Object.freeze( Object.assign({ keyframeMap: {} }, configs) )
-
-        this.controller = new Controller({five, container:configs.container, configs: this.configs})
-
-
-        ReactDOM.render(
-            <ControllerContext.Provider value={this.controller}>
-                <App />
-                <Drawer />
-                <PopUp />
-                {this.configs.customKeyframes &&
-                this.configs.customKeyframes.map((CustomCmpt, key) => (
-                    <CustomCmpt
-                        key={key}
-                        subscribe={{
-                            on: (name, callback) => this.on(name, callback),
-                            once: (name, callback) => this.once(name, callback),
-                            off: (name, callback) => this.off(name, callback),
-                        }}
-                        five={five}
-                    />
-                ))}
-            </ControllerContext.Provider>,
-            configs.container
-        )
-
-        // 监听播放情况：抛出触发时机
-        reaction(
-            () => this.controller.ended,
-            (ended) => {
-                if (ended) {
-                    this.emit('paused', true)
-                }
-            }
-        )
-
-        reaction(
-            () => this.controller.playing,
-            (playing) => {
-                if (!this.controller.ended) {
-                    this.emit(playing ? 'playing' : 'paused')
-                }
-            }
-        )
-    }
-
-    async load(vreoUnit: VreoUnit, currentTime = 0, preload = false, force = false) {
-        this.controller.setLoading(true)
-        if (force) {
-            vreoUnit = JSON.parse(JSON.stringify(vreoUnit))
-        }
-        if (!this.controller.visible) {
-            this.controller.setVisible(true)
-            // 延迟 500ms 规避跟 DOM 动画冲突
-            await new Promise((resolve) => {
-                setTimeout(() => resolve(true), 500)
-            })
-        }
-
-        if (this.controller.stopInterval) {
-            this.controller.stopInterval()
-            this.controller.stopInterval = undefined
-        }
-
-        this.controller.vreoUnit = vreoUnit
-        this.controller.mediaInstance?.pause()
-
-        // 预载逻辑
-        // 是否降低图片分辨率
-        if (
-            this.$five.imageOptions.size &&
-            this.configs.imageOptions?.size &&
-            this.$five.imageOptions.size > this.configs.imageOptions.size
-        ) {
-            this.$five.imageOptions.size = this.configs.imageOptions.size
-        }
-
-        // 预载数据中的点位
-        if (preload || (preload === undefined && this.configs.autoPreload)) {
-            const panoIndexMap = vreoUnit.keyframes
-                .filter((vreoKeyframe) => {
-                    if (vreoKeyframe.type !== VreoKeyframeEnum.CameraMovement) {
-                        return false
-                    }
-
-                    const data = vreoKeyframe.data as CameraMovementData
-                    if (data.panoIndex === undefined) {
-                        return false
-                    }
-                    return true
-                })
-                .reduce((accu: Record<number, boolean>, curr) => {
-                    const panoIndex = curr.data.panoIndex as number
-                    if (!accu[panoIndex]) {
-                        accu[panoIndex] = true
-                    }
-                    return accu
-                }, {})
-
-            const panoIndexes = Object.keys(panoIndexMap)
-            for (let i = 0; i < panoIndexes.length; i++) {
-                await this.$five.preloadPano(Number(panoIndexes[i]))
-            }
-        }
-
-        // 新数据载入就绪
-        this.emit('loaded', vreoUnit)
-        this.controller.emit('loaded', vreoUnit)
-
-        if (this.controller.videoAgentScene?.videoAgentMesh.mediaInstance) {
-            this.controller.videoAgentScene.videoAgentMesh.mediaInstance.currentTime = currentTime / 1000
-        }
-
-        this.controller.setAvatar(vreoUnit.video.avatar)
-
-        await this.controller.videoAgentScene?.videoAgentMesh.play(
-            vreoUnit.video.url,
-            currentTime / 1000,
-            vreoUnit.video.duration
-        )
-
-        this.controller.setEnded(false)
-        this.play()
-
-        this.controller.run((type, keyframe) => this.emit(type, keyframe))
-        this.controller.setLoading(false)
-        return true
-    }
-
-    get paused() {
-        return !this.controller.playing
-    }
-
-    play(currentTime?: number) {
-        if (this.controller.playing) return true
-        if (currentTime && this.controller.mediaInstance) {
-            this.controller.mediaInstance.currentTime = currentTime / 1000
-        }
-        Object.assign(window, { $vreoController: this.controller })
-
-        this.controller.setPlaying(true)
-        return true
-    }
-
-    setAppearance(appearance: Appearance) {
-        this.controller.setAppearance(appearance)
-    }
-
-    pause() {
-        this.controller.setPlaying(false)
-    }
-
-    show() {
-        this.controller.setVisible(true)
-    }
-
-    hide() {
-        this.controller.setVisible(false)
-    }
-
-    getCurrentTime() {
-        return this.controller.currentTime
-    }
-
-    dispose() {
-        this.pause()
-        this.controller.dispose()
-
-        if (this.configs.container) {
-            ReactDOM.unmountComponentAtNode(this.configs.container as Element)
-        }
-    }
-}
-
-console.log(`
-
-┏━━━┓━━━━━━━━━┏┓━━━━━━━━━━━━━
-┃┏━┓┃━━━━━━━━━┃┃━━━━━━━━━━━━━
-┃┗━┛┃┏━━┓┏━━┓━┃┃━┏━━┓┏━━┓┏━━┓
-┃┏┓┏┛┃┏┓┃┗━┓┃━┃┃━┃━━┫┃┏┓┃┃┏┓┃
-┃┃┃┗┓┃┃━┫┃┗┛┗┓┃┗┓┣━━┃┃┃━┫┃┃━┫
-┗┛┗━┛┗━━┛┗━━━┛┗━┛┗━━┛┗━━┛┗━━┛
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-`)

package/resources/Player/modules/Drawer/index.tsx

@@ -1,40 +0,0 @@
-import * as React from 'react'
-import classNames from 'classnames'
-import { observer } from 'mobx-react'
-import { Controller } from '../../Controller'
-import { useController } from '../../hooks'
-
-const DrawerView = observer(({ controller }: { controller: Controller }) => {
-  const maxHeight = '400px'
-  const height = (() => {
-    const height = controller.drawerConfig?.height
-    if (!height) {
-      return 'max-content'
-    }
-
-    if (typeof height === 'number') {
-      return height + 'px'
-    }
-
-    return height
-  })()
-
-  return (
-    <div
-      className={classNames('vreo-drawer', {
-        'vreo-drawer-visible': controller.drawerConfig && controller.drawerConfig.content,
-      })}
-      onClick={() => controller.openDrawer(false)}
-    >
-      <div className="vreo-drawer-inner" style={{ height, maxHeight }}>
-        {controller.drawerConfig?.content || ''}
-      </div>
-    </div>
-  )
-})
-
-export function Drawer() {
-  const controller = useController()
-
-  return <DrawerView controller={controller} />
-}

package/resources/Player/modules/PopUp/index.tsx

@@ -1,26 +0,0 @@
-import * as React from 'react'
-import classNames from 'classnames'
-import { observer } from 'mobx-react'
-import { Controller } from '../../Controller'
-import { useController } from '../../hooks'
-
-const PopUpView = observer(({ controller }: { controller: Controller }) => {
-
-  return (
-    <div
-      className={classNames('vreo-PopUp', {
-        'vreo-PopUp-visible': controller.popUp,
-      })}
-      onClick={() => controller.openPopUp(false)}
-    >
-      <div className="vreo-PopUp-inner">
-        {controller.popUp ||  ''}
-      </div>
-    </div>
-  )
-})
-
-export function PopUp() {
-  const controller = useController()
-  return <PopUpView controller={controller} />
-}

package/resources/Player/modules/ResizeObserver/index.tsx

@@ -1,23 +0,0 @@
-import React from 'react'
-import { addResizeListener, hasResizeListener } from '../../../shared-utils/addResizeListener'
-import { useController } from '../../hooks'
-
-export function ResizeObserver() {
-  const ref = React.useRef<HTMLDivElement>(null)
-  const controller = useController()
-
-  React.useEffect(() => {
-    if (!ref.current) return
-    const resizeElement = controller.container.parentElement
-    if (hasResizeListener(resizeElement)) return
-    const dispose = addResizeListener(resizeElement, (width, height) => {
-      controller.setContainerSize(width, height)
-    })
-
-    return () => {
-      dispose()
-    }
-  }, [])
-
-  return <div className="resizeObserver-element" ref={ref}></div>
-}