@realsee/vreo 0.1.0

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

@@ -0,0 +1,52 @@
+import * as React from 'react'
+import { InfoPanelData, InfoPanelTypeEnum, VreoKeyframe, VreoKeyframeEnum } from '../../../../typings/VreoUnit'
+import { useController } from '../../../hooks'
+
+function InfoPanelImg({ url }: { url: string }) {
+  return (
+    <div className="vreo-infoPanel vreo-infoPanel--img">
+      <img className="vreo-infoPanelImg" src={url} />
+    </div>
+  )
+}
+
+function InfoPanelVideo({ url }: { url: string }) {
+  return (
+    <div className="vreo-infoPanel vreo-infoPanel--video">
+      <video playsInline autoPlay className="vreo-infoPanelVideo" src={url} />
+    </div>
+  )
+}
+
+export function InfoPanel() {
+  const timeoutRef = React.useRef<NodeJS.Timeout | null>()
+  const controller = useController()
+
+  React.useEffect(() => {
+    if (controller.configs?.keyframeMap.InfoPanel === false) {
+      return
+    }
+    const callback = (keyframe: VreoKeyframe) => {
+      const { start, end, data } = keyframe
+
+      const infoPanelData = data as InfoPanelData
+
+      if (infoPanelData.type === InfoPanelTypeEnum.Image) {
+        controller.openDrawer({ content: <InfoPanelImg url={infoPanelData.url} />, height: '60vh' })
+      } else if (infoPanelData.type === InfoPanelTypeEnum.Video) {
+        controller.openDrawer({ content: <InfoPanelVideo url={infoPanelData.url} />, height: '60vh' })
+      }
+      timeoutRef.current = setTimeout(() => controller.openDrawer(false), end - start)
+    }
+    controller.on(VreoKeyframeEnum.InfoPanel, callback)
+
+    return () => {
+      controller.off(VreoKeyframeEnum.InfoPanel, callback)
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+    }
+  }, [controller])
+
+  return <></>
+}

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

@@ -0,0 +1,44 @@
+import * as React from 'react'
+import { ModelTVVideoPlugin } from '../../../../fivePlugins/ModelTVVideoPlugin'
+import { ModelVideoData, VreoKeyframe, VreoKeyframeEnum } from '../../../../typings/VreoUnit'
+import { useController, useFiveInstance } from '../../../hooks'
+
+export function ModelVideo() {
+  const controller = useController()
+  const five = useFiveInstance()
+  const ref = React.useRef<ReturnType<typeof ModelTVVideoPlugin>>()
+  const timeoutRef = React.useRef<NodeJS.Timeout | null>()
+
+  React.useEffect(() => {
+    const callback = async (keyframe: VreoKeyframe) => {
+      if (!ref.current) {
+        ref.current = ModelTVVideoPlugin(five, {})
+      }
+      const { start, end } = keyframe
+      const { videoSrc, videoPosterSrc, vertexs } = keyframe.data as ModelVideoData
+
+      ref.current.disable()
+      await ref.current.load(
+        {
+          video_src: videoSrc.replace(/https*:/, ''),
+          video_poster_src: videoPosterSrc.replace(/https*:/, ''),
+          points: [vertexs],
+        },
+        controller.configs?.videos?.modelTVVideo
+      )
+
+      ref.current.enable()
+      timeoutRef.current = setTimeout(() => ref.current?.disable(), end - start)
+    }
+
+    controller.on(VreoKeyframeEnum.ModelVideo, callback)
+    return () => {
+      controller.off(VreoKeyframeEnum.ModelVideo, callback)
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+    }
+  }, [controller])
+
+  return <></>
+}

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

@@ -0,0 +1,99 @@
+import * as React from 'react'
+import { Vector3 } from 'three'
+import classNames from 'classnames'
+
+import lineAnime from './lineAnime'
+import { useController, useFiveInstance, useFiveProject2d } from '../../../hooks'
+import { BetterTween } from '../../../../shared-utils/animationFrame/BetterTween'
+import { PanoEffectData, VreoKeyframe, VreoKeyframeEnum } from '../../../../typings/VreoUnit'
+
+export function PanoEffect() {
+  const [state, setState] = React.useState<{
+    center: Vector3
+    distance: number
+  } | null>(null)
+
+  const five = useFiveInstance()
+  const lineRef = React.useRef<BetterTween<{ progress: number }> | null>(null)
+  const [pos, setPos] = React.useState<{ left: number; top: number } | null>(null)
+  const timeoutRef = React.useRef<NodeJS.Timeout | null>()
+
+  const controller = useController()
+  const project2d = useFiveProject2d()
+
+  const delLine = () => {
+    if (lineRef.current) {
+      lineRef.current.dispose()
+    }
+  }
+
+  React.useEffect(() => {
+    const callback = (keyframe: VreoKeyframe) => {
+      const { start, end, data } = keyframe
+
+      const videoEffectData = data as PanoEffectData
+
+      const [v1, v2] = videoEffectData.twoVertexs
+      const p1 = new Vector3(v1.x, v1.y, v1.z)
+      const p2 = new Vector3(v2.x, v2.y, v2.z)
+
+      lineRef.current = lineAnime(five, p1.clone(), p2.clone())
+      lineRef.current.play()
+
+      const center = p1.lerp(p2, 0.5)
+      const distance = p1.distanceTo(p2)
+
+      const p = project2d(center)
+      if (!p) return
+      const { x: left, y: top } = p
+      setState({ center, distance })
+      setPos({ left, top })
+      timeoutRef.current = setTimeout(() => {
+        setState(null)
+        setPos(null)
+        delLine()
+      }, end - start)
+    }
+
+    controller.on(VreoKeyframeEnum.PanoEffect, callback)
+
+    return () => {
+      controller.off(VreoKeyframeEnum.PanoEffect, callback)
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+      delLine()
+    }
+  }, [controller])
+
+  React.useEffect(() => {
+    const callback = () => {
+      if (!state?.center) return
+      const { x, y, z } = state.center
+      const res = project2d(new Vector3(x, y, z))
+      if (!res) return
+      const { x: left, y: top } = res
+      setPos({ left, top })
+    }
+    five.on('currentStateChange', callback)
+    return () => {
+      five.off('currentStateChange', callback)
+    }
+  }, [state?.center])
+
+  return (
+    <>
+      <div
+        className={classNames('PanoEffect', {
+          'PanoEffect--notHidden': state,
+        })}
+        style={{
+          left: (pos?.left || 0) + 'px',
+          top: (pos?.top || 0) + 'px',
+        }}
+      >
+        {state?.distance.toFixed(4) + 'm'}
+      </div>
+    </>
+  )
+}

package/resources/Player/modules/keyframes/PanoEffect/lineAnime.ts

@@ -0,0 +1,31 @@
+import * as THREE from 'three'
+import { Five } from '@realsee/five'
+import { Line as FiveLine } from '@realsee/five/line'
+import { tweenProgress } from '../../../../shared-utils/animationFrame/BetterTween'
+
+export default function lineAnime(five: Five, startPoint: THREE.Vector3, endPoint: THREE.Vector3) {
+  const pointImage =
+    'data:image/png;base64,' +
+    'iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAIVBMVEUAAAD////////////////////////////////////////PIev5AAAACnRSTlMAG/Py2baba05un7UgfgAAAHJJREFUKM9joBpgLHVSCRdA4metAoJlCJHmVWBgAeNzroKCCVCBLpjACqgJVjCBxRBT2FbBQQJYQAohsBAsUIUQWA4WiEIILAULeCEEloAFtBACizAEMLRgGIphLabDMJ2O6TlM72MGECIIMQIZIxqoBQCPvpJ/e9FaAAAAAABJRU5ErkJggg=='
+  const pointTexture = new THREE.TextureLoader().load(pointImage)
+  const color = new THREE.Color(0xffffff) as any
+  const line = new FiveLine()
+  line.setMaterial({ linewidth: 2, color })
+  const pointMaterial = line.points.material as THREE.PointsMaterial
+  pointMaterial.map = pointTexture
+  pointMaterial.color.set(color)
+  line.line.material.depthTest = false
+  return tweenProgress()
+    .onUpdate(({ progress }) => {
+      const lerpLeft = 0.5 - progress / 2
+      const lerpRight = 0.5 + progress / 2
+      const leftPoint = startPoint.clone().lerp(endPoint, lerpLeft)
+      const rightPoint = startPoint.clone().lerp(endPoint, lerpRight)
+      line.setPoints(leftPoint, rightPoint)
+    })
+    .onStart(() => five.scene.add(line))
+    .onDispose(() => {
+      five.scene.remove(line)
+      five.needsRender = true
+    })
+}

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

@@ -0,0 +1,127 @@
+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'
+
+export function PanoTag() {
+  const [state, setState] = React.useState<{
+    vertex: Vertex
+    text?: string
+    type: PanoTagEnum
+    imgUrl?: string
+  } | null>(null)
+
+  const [pos, setPos] = React.useState<{ left: number; top: number } | null>(null)
+  const timeoutRef = React.useRef<NodeJS.Timeout | null>()
+
+  const controller = useController()
+  const five = useFiveInstance()
+  const project2d = useFiveProject2d()
+
+  React.useEffect(() => {
+    if (controller.configs?.keyframeMap.PanoTag === false) {
+      return
+    }
+    const callback = (keyframe: VreoKeyframe) => {
+      const { start, end, data } = keyframe
+
+      const panoTagData = data as PanoTagData
+      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({
+        vertex,
+        text: panoTagData.text || PanoTagEnum.Text,
+        type: panoTagData.type,
+        imgUrl: panoTagData.imgUrl,
+      })
+      setPos({ left, top })
+      timeoutRef.current = setTimeout(() => {
+        setState(null)
+        setPos(null)
+      }, end - start)
+    }
+
+    controller.on(VreoKeyframeEnum.PanoTag, callback)
+
+    return () => {
+      controller.off(VreoKeyframeEnum.PanoTag, callback)
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+    }
+  }, [controller])
+
+  React.useEffect(() => {
+    const callback = () => {
+      if (!state?.vertex) return
+      const { x, y, z } = state.vertex
+      const res = project2d(new Vector3(x, y, z))
+      if (!res) return
+      const { x: left, y: top } = res
+      setPos({ left, top })
+    }
+    five.on('currentStateChange', callback)
+
+    return () => {
+      five.off('currentStateChange', callback)
+    }
+  }, [state?.vertex])
+
+  const boxContent = (() => {
+    if (!state) return undefined
+
+    if (state.type === PanoTagEnum.Text) {
+      return (
+        <>
+          <span>{state.text}</span>
+        </>
+      )
+    }
+    if (state.type === PanoTagEnum.Image) {
+      return (
+        <>
+          <img className="PanoTag-img" src={state.imgUrl!} alt={state.text || ''}></img>
+          <span className="PanoTag-txt">{state.text}</span>
+        </>
+      )
+    }
+    return undefined
+  })()
+
+  return (
+    <>
+      <div
+        className={classNames('PanoTag', {
+          'PanoTag--notHidden': state,
+        })}
+        style={{
+          left: (pos?.left || 0) + 'px',
+          top: (pos?.top || 0) + 'px',
+        }}
+      >
+        <div className="PanoTag-point"></div>
+        <div className="PanoTag-content">
+          <span className="PanoTag-linewrap">
+            <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>
+      </div>
+    </>
+  )
+}

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

@@ -0,0 +1,65 @@
+import classNames from 'classnames'
+import * as React from 'react'
+import { Vector3 } from 'three'
+import { PanoTextLabelData, VreoKeyframe, VreoKeyframeEnum } from '../../../../typings/VreoUnit'
+import { useController, useFiveProject2d } from '../../../hooks'
+
+interface PanoTextLabelState {
+  text: string
+  left: number
+  top: number
+  fontSize: number
+}
+
+export function PanoTextLabel() {
+  const [state, setState] = React.useState<PanoTextLabelState | null>(null)
+  const timeoutRef = React.useRef<NodeJS.Timeout | null>()
+  const controller = useController()
+  const project2d = useFiveProject2d()
+
+  React.useEffect(() => {
+    if (controller.configs?.keyframeMap.PanoTextLabel === false) {
+      return
+    }
+    const callback = (keyframe: VreoKeyframe) => {
+      const { start, end, data } = keyframe
+      const panoTextLabelData = data as PanoTextLabelData
+      const { x, y, z } = panoTextLabelData.vertex
+
+      const res = project2d(new Vector3(x, y, z))
+      if (!res) return
+      const { x: left, y: top } = res
+
+      Object.assign(window, { $PanoTextLabel: { setState } })
+      setState({ left, top, text: data.text || '', fontSize: data.fontSize || 16 })
+      timeoutRef.current = setTimeout(() => setState(null), end - start)
+    }
+    controller.on(VreoKeyframeEnum.PanoTextLabel, callback)
+
+    Object.assign(window, { $panoTextLabel: { setState } })
+    return () => {
+      controller.off(VreoKeyframeEnum.PanoTextLabel, callback)
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+    }
+  }, [controller])
+
+  return (
+    <div
+      className={classNames('PanoTextLabel', {
+        'PanoTextLabel--notHidden': state,
+      })}
+      style={{
+        left: (state?.left || 0) + 'px',
+        top: (state?.top || 0) + 'px',
+      }}
+    >
+      <div className="PanoTextLabel-wrapper">
+        <div style={{ fontSize: `${state?.fontSize || 16}px` }} className="PanoText-innerText">
+          {state?.text || ''}
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,65 @@
+import * as React from 'react'
+import classNames from 'classnames'
+import { useController } from '../../../hooks'
+
+import { CSSTransition, TransitionGroup } from 'react-transition-group'
+import { VreoKeyframe, VreoKeyframeEnum } from '../../../../typings/VreoUnit'
+
+export function Prompter() {
+  const [text, setText] = React.useState<string>('')
+  const [hidden, setHidden] = React.useState<boolean>(true)
+  const ref = React.useRef<NodeJS.Timeout | null>(null)
+  const controller = useController()
+
+  React.useEffect(() => {
+    if (controller.configs?.keyframeMap.Prompter === false) {
+      return
+    }
+    const callback = (keyframe: VreoKeyframe) => {
+      const { start, end, data } = keyframe
+      setText(data.text)
+      setHidden(false)
+
+      if (ref.current) {
+        clearTimeout(ref.current)
+        ref.current = null
+      }
+
+      ref.current = setTimeout(() => {
+        setHidden(true)
+        setTimeout(() => setText(''), 500)
+
+        if (ref.current) clearTimeout(ref.current)
+        ref.current = null
+      }, end - start)
+    }
+
+    controller.on(VreoKeyframeEnum.Prompter, callback)
+
+    return () => {
+      controller.off(VreoKeyframeEnum.Prompter, callback)
+    }
+  }, [controller])
+
+  return (
+    <div
+      className={classNames('vreo-prompter', {
+        'vreo-prompter--hidden': hidden,
+      })}
+    >
+      {text ? (
+        /* @warning "index.js:1 Warning: findDOMNode is deprecated in StrictMode." */
+        <TransitionGroup className="vreo-prompter-text">
+          <CSSTransition
+            key={text}
+            classNames="vreo-prompter-text-transition"
+            timeout={500}
+            addEndListener={(node, done) => node.addEventListener('transitionend', done, false)}
+          >
+            <div className="vreo-prompter-innerText">{text}</div>
+          </CSSTransition>
+        </TransitionGroup>
+      ) : undefined}
+    </div>
+  )
+}

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

@@ -0,0 +1,36 @@
+import * as React from 'react'
+import { parseWork } from '@realsee/five'
+import { useController, useFiveInstance } from '../../../hooks'
+import { UpdateVRPanoramaData, VreoKeyframe, VreoKeyframeEnum } from '../../../../typings/VreoUnit'
+
+export function UpdateVRPanorama() {
+  const controller = useController()
+  const five = useFiveInstance()
+
+  React.useEffect(() => {
+    const callback = (keyframe: VreoKeyframe) => {
+      const { panoIndex, images } = keyframe.data as UpdateVRPanoramaData
+
+      const newWorkJSON = JSON.parse(JSON.stringify(five.work?.raw.work))
+
+      // // 原Work数据不能被修改
+      if (newWorkJSON.panorama && newWorkJSON.panorama.list && newWorkJSON.panorama.list[panoIndex]) {
+        Object.assign(newWorkJSON.panorama.list[panoIndex], images)
+      } else if (newWorkJSON.observers && newWorkJSON.observers[panoIndex] && newWorkJSON.observers[panoIndex].images) {
+        Object.assign(newWorkJSON.observers[panoIndex].images, images)
+      }
+
+      const newWork = parseWork(newWorkJSON)
+
+      // // 需要还原么？待定 ...
+      five.load(newWork)
+    }
+
+    controller.on(VreoKeyframeEnum.UpdateVRPanorama, callback)
+    return () => {
+      controller.off(VreoKeyframeEnum.UpdateVRPanorama, callback)
+    }
+  }, [controller])
+
+  return <></>
+}

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

@@ -0,0 +1,115 @@
+import classNames from 'classnames'
+import * as React from 'react'
+// import { Preloader } from '../../../../shared-utils/Preloader'
+import { VideoEffectData, VreoKeyframe, VreoKeyframeEnum } from '../../../../typings/VreoUnit'
+import { useController, useFiveInstance } from '../../../hooks'
+
+const inlinePlay = (videoInstance?: HTMLVideoElement | null) => {
+  if (!videoInstance) return
+  const canplaythrough = () => {
+    videoInstance.removeEventListener('canplaythrough', canplaythrough)
+    try {
+      videoInstance.play()
+    } catch (error) {}
+  }
+  videoInstance.addEventListener('canplaythrough', canplaythrough)
+  videoInstance.load()
+}
+
+// const emptyVideo = '//vrlab-static.ljcdn.com/release/web/leisure.69fd3522.mov'
+const PI = Math.PI
+const PI_2 = PI * 2
+
+export function VideoEffect() {
+  const ref = React.useRef<HTMLDivElement>(null)
+  const videoRef = React.useRef<HTMLVideoElement | null>()
+  const controller = useController()
+  const timeoutRef = React.useRef<NodeJS.Timeout | null>()
+
+  const [visible, setVisible] = React.useState(false)
+  const five = useFiveInstance()
+  const setBlobSrc = (blob: string) => {
+    if (!videoRef.current) return
+
+    videoRef.current.src = blob
+  }
+
+  React.useEffect(() => {
+    const callback = async (keyframe: VreoKeyframe) => {
+      const { start, end } = keyframe
+      const { videoSrc, fov, direction, panoIndex, vector } = keyframe.data as VideoEffectData
+      const [longitude, latitude] = (() => {
+        if (vector) {
+          return [vector.longitude, vector.latitude]
+        }
+        if (!direction) {
+          return [0, 0]
+        }
+
+        let longitude = -Math.atan2(direction.x, -direction.z)
+        longitude = ((longitude % PI_2) + PI_2) % PI_2
+        const latitude = -Math.asin(direction.y / 1)
+        return [longitude, latitude]
+      })()
+
+      five.setState({ fov, panoIndex, longitude, latitude }, true)
+      setBlobSrc(videoSrc)
+
+      inlinePlay(videoRef.current)
+      setVisible(true)
+
+      timeoutRef.current = setTimeout(() => {
+        if (!videoRef.current?.paused) {
+          videoRef.current?.pause()
+        }
+        setVisible(false)
+        setBlobSrc('')
+      }, end - start)
+    }
+
+    controller.on(VreoKeyframeEnum.VideoEffect, callback)
+    return () => {
+      controller.off(VreoKeyframeEnum.VideoEffect, callback)
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+    }
+  }, [controller])
+
+  React.useEffect(() => {
+    if (!ref.current) return
+    const video = controller.configs?.videos?.videoEffect || document.createElement('video')
+    // <video playsInline key="VideoEffect-video" className="VideoEffect-video" src={blobSrc} />
+    video.setAttribute('playsinline', 'true')
+    video.setAttribute('webkit-playsinline', 'true')
+    video.setAttribute('autoplay', 'true')
+    video.setAttribute('key', 'VideoEffect-video')
+    video.setAttribute('class', 'VideoEffect-video')
+
+    videoRef.current = video
+    ref.current.append(videoRef.current)
+    document.addEventListener(
+      'WeixinJSBridgeReady',
+      function () {
+        videoRef.current?.play()
+      },
+      false
+    )
+
+    if (!ref.current) return
+    // const asyncfunc = async () => {
+    //   setBlobSrc(await URL.createObjectURL(await Preloader.blob(emptyVideo)))
+    //   inlinePlay(videoRef.current)
+    // }
+    // asyncfunc()
+  }, [])
+
+  return (
+    <div
+      ref={ref}
+      className={classNames('VideoEffect', {
+        'VideoEffect--visible': visible,
+      })}
+    ></div>
+  )
+}

package/resources/Player/typings.ts

@@ -0,0 +1,15 @@
+import { VreoKeyframeConfigMap } from '../typings/VreoUnit'
+
+export interface PlayerConfigs {
+  containter?: ReactDOM.Container
+  keyframeMap: VreoKeyframeConfigMap
+  /**
+   * 微信端自动播放功能实现需要提前初始化 Video 实例。
+   *
+   * 如果需要支持微信浏览器端自动播放需要接入微信SDK及提前初始化好相关 Video 实例。
+   */
+  videos?: {
+    videoEffect?: HTMLVideoElement
+    modelTVVideo?: HTMLVideoElement
+  }
+}