@realsee/vreo 0.2.0-alpha.9 → 1.0.0-alpha.2

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

@@ -1,5 +1,7 @@
 import * as THREE from 'three'
-import { VideoAgentMesh } from './VideoAgentMesh'
+import { addResizeListener } from '../../../shared-utils/addResizeListener'
+import { getMediaType } from '../../../shared-utils/getMediaInfo'
+import { VideoAgentMesh, VideoAgentMeshOptions } from './VideoAgentMesh'
 
 export class VideoAgentScene {
   videoAgentMesh: VideoAgentMesh
@@ -7,47 +9,48 @@ export class VideoAgentScene {
   scene = new THREE.Scene()
   camera = new THREE.OrthographicCamera(-240, 240, 135, -135)
   renderer = new THREE.WebGLRenderer({ alpha: true })
-  container: HTMLElement
-
-  constructor(container: HTMLElement, needRender = true, options: { videoInstance?: HTMLVideoElement, audioInstance?: HTMLAudioElement } = {}) {
-    this.container = container
-    this.camera.position.set(0, 0, 10)
-    this.camera.lookAt(0, 0, 0)
-    const state = {
-      width: container.offsetWidth,
-      height: container.offsetHeight,
-    }
-    const domElement = this.renderer.domElement
-    domElement.classList.add('VideoAgent-canvas')
-    this.renderer.setSize(state.width * window.devicePixelRatio, state.height * window.devicePixelRatio)
-    domElement.setAttribute('style', `width: ${state.width}px;height: ${state.height}px;`)
+  disposers: (() => void)[] = []
+
+  constructor(container?: HTMLElement, options?: VideoAgentMeshOptions) {
 
     this.videoAgentMesh = new VideoAgentMesh(480, 270, 1, 1, options)
-    if (needRender) {
+
+    // const needRender = getMediaType(this.videoAgentMesh.videoUrl) === 'video'
+
+    if (container) {
+
+      this.camera.position.set(0, 0, 10)
+      this.camera.lookAt(0, 0, 0)
+
+      const domElement = this.renderer.domElement
+      domElement.classList.add('VideoAgent-canvas')
+
+      const dispose = addResizeListener(container, (width, height) => {
+        this.renderer.setSize(width * window.devicePixelRatio, height * window.devicePixelRatio)
+        domElement.style.width = `${width}px`
+        domElement.style.height = `${height}px`
+      } )
+
+      this.disposers.push(dispose)
+
       container.append(domElement)
       this.scene.add(this.videoAgentMesh)
+      
       this.run()
     }
   }
 
   run = () => {
-    const domElement = this.renderer.domElement
-
     // 视频开始 1s 不渲染：规避某些设备黑屏闪烁问题。视频前 2s 是最好是静默的。
     if (!(this.videoAgentMesh.paused || this.videoAgentMesh.freeze) && this.videoAgentMesh.currentTime > 1000) {
       this.renderer.render(this.scene, this.camera)
     }
 
-    // 兼容非视频场景
-    if (!this.videoAgentMesh.videoUrl?.endsWith('.mp4')) {
-      if (domElement.style.display !== 'none') domElement.style.display = 'none'
-    } else {
-      if (domElement.style.display !== 'block') domElement.style.display = 'block'
-    }
     requestAnimationFrame(this.run)
   }
 
   dispose = () => {
     this.videoAgentMesh?.dispose()
+    this.disposers.forEach(disposer => disposer?.())
   }
 }

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

@@ -2,18 +2,28 @@ import * as React from 'react'
 import { useController } from '../../hooks'
 import { VideoAgentMeshOptions } from './VideoAgentMesh'
 import { VideoAgentScene } from './VideoAgentScene'
+import classNames from 'classnames'
 
 export function VideoAgent(props: { onClick?: () => void; options?: VideoAgentMeshOptions }) {
   const ref = React.useRef<HTMLDivElement>(null)
   const controller = useController()
 
+  const showAvatar = React.useMemo(() => {
+    return controller.avatar?.url && (controller.avatar.force === true)
+  }, [controller.avatar])
+
+  const showVideoAgent = React.useMemo(() => {
+    if (showAvatar) return false
+    return controller.videoAgentScene?.videoAgentMesh.mediaInstance instanceof HTMLVideoElement
+  }, [controller.videoAgentScene])
+
   React.useEffect(() => {
     if (!ref.current) throw new Error('React 渲染异常，请稍后重试 ...')
     if (controller.videoAgentScene) {
-      console.warn('"VideoAgentScene" 重复初始化，已被过滤 ...')
+      console.warn('VideoAgentScene" 重复初始化，已被过滤')
       return
     }
-    const videoAgentScene = new VideoAgentScene(ref.current, true, props.options || {})
+    const videoAgentScene = new VideoAgentScene(ref.current, props.options)
     controller.videoAgentScene = videoAgentScene
 
     return () => {
@@ -23,15 +33,21 @@ export function VideoAgent(props: { onClick?: () => void; options?: VideoAgentMe
   }, [])
 
   return (
-    <div
-      className="VideoAgent"
-      onClick={() => {
-        if (!props.onClick) return
-        props.onClick()
-      }}
-      ref={ref}
-    >
-      <div className="VideoAgent-play"></div>
-    </div>
+    <>
+      <div className="Avatar" style={{display: showAvatar ? 'block' : 'none'}}>
+        <div className="Avatar-wrapper ratio-1-1">
+          <img className="Avatar-img" src={controller.avatar?.url} onClick={() => props.onClick?.()} />
+        </div>
+      </div>
+      <div className={classNames('VideoAgent', { hide: !showVideoAgent })}>
+        <div className="VideoAgent-container">
+          <div className="VideoAgent-wrapper ratio-16-9">
+            <div className="VideoAgent-inner" ref={ref}>
+              <div className="VideoAgent-play" onClick={() => props.onClick?.()}></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
   )
 }

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

@@ -0,0 +1,18 @@
+import React from 'react'
+import { WaveAppearance } from '../../typings'
+
+export function Wave(props?: { appearance?: WaveAppearance }) {
+  const waveUrl = React.useMemo(() => {
+    const appearance = props?.appearance ?? 'solid'
+    switch (appearance) {
+      default:       return 'https://vr-public.realsee-cdn.cn/release/static/image/release/vapor/static/wave-solid.64438b63cbb346906d066bb7b8dc3e20.webm'
+      case 'solid':  return 'https://vr-public.realsee-cdn.cn/release/static/image/release/vapor/static/wave-solid.64438b63cbb346906d066bb7b8dc3e20.webm'
+      case 'single': return 'https://vr-public.realsee-cdn.cn/release/static/image/release/vapor/static/wave-single.eda65de390a830193fff40d1f1255555.webm'
+      case 'double': return 'https://vr-public.realsee-cdn.cn/release/static/image/release/vapor/static/wave-double.77dfe8548ebcb3f3d336785d4fe9c7b2.webm'
+      case 'swap':   return 'https://vr-public.realsee-cdn.cn/release/static/image/release/vapor/static/wave-swap.c02e4b94cf05aecf6e7a0023bc7bb90f.webm'
+      case 'expand': return 'https://vr-public.realsee-cdn.cn/release/static/image/release/vapor/static/wave-expand.a0d2a0074001cd3d4fea56818c6d3c38.webm'
+    }
+  }, [props?.appearance])
+
+  return <video className='vreo-wave' width="100%" preload="auto" muted autoPlay loop playsInline disablePictureInPicture controls={false} src={waveUrl} />
+}

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

@@ -11,19 +11,31 @@ import { useController } from '../../../hooks'
 
 function InfoPanelImg({ url, children }: { url: string; children?: ReactNode }) {
   return (
-    <div className="vreo-infoPanel vreo-infoPanel--img">
-      {children}
-      <div className="vreo-infoPanelImg" style={{ backgroundImage: `url(${url})` }}></div>
+    <div className="vreo-infoPanel-container">
+      <div className="vreo-infoPanel vreo-infoPanel--img">
+        <div className="ratio-4-5 vreo-infoPanel-wrapper">
+          <div className="vreo-infoPanel-inner">
+            {children}
+            <img className="vreo-infoPanelImg" src={url}></img>
+          </div>
+        </div>
+      </div>
     </div>
   )
 }
 
 function InfoPanelVideo({ url, children }: { url: string; children?: ReactNode }) {
   return (
-    <div className="vreo-infoPanel vreo-infoPanel--video">
-      {children}
-      <div className="vreo-infoPanelWrapper">
-        <video playsInline autoPlay className="vreo-infoPanelVideo" src={url} />
+    <div className="vreo-infoPanel-container">
+      <div className="vreo-infoPanel vreo-infoPanel--video">
+        <div className="ratio-4-5 vreo-infoPanel-wrapper">
+          <div className="vreo-infoPanel-inner">
+            {children}
+            <div className="vreo-infoPanelVideo">
+              <video playsInline autoPlay className="vreo-infoPanelVideo" src={url} />
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   )
@@ -40,10 +52,13 @@ const Title = (props: TitleProps) => {
   }
 
   return (
-    <div className="vreo-infoPanel-title">
-      <div className="vreo-infoPanel-t1">{props.title}</div>
-      <div className="vreo-infoPanel-t2">{props.subTitle}</div>
-    </div>
+    <>
+      <div className="vreo-infoPanel-title-shadow"></div>
+      <div className="vreo-infoPanel-title">
+        <div className="vreo-infoPanel-t1">{props.title}</div>
+        <div className="vreo-infoPanel-t2">{props.subTitle}</div>
+      </div>
+    </>
   )
 }
 

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

@@ -1,7 +1,9 @@
 import * as React from 'react'
+import * as THREE from 'three'
+import { useController, useFiveInstance } from '../../../hooks'
 import { ModelTVVideoPlugin } from '../../../../fivePlugins/ModelTVVideoPlugin'
+import { createTransMatrix } from '../../../../shared-utils/createTransMatrix'
 import { ModelVideoData, VreoKeyframe, VreoKeyframeEnum } from '../../../../typings/VreoUnit'
-import { useController, useFiveInstance } from '../../../hooks'
 
 export function ModelVideo() {
   const controller = useController()
@@ -15,14 +17,45 @@ export function ModelVideo() {
         ref.current = ModelTVVideoPlugin(five, {})
       }
       const { start, end } = keyframe
-      const { videoSrc, videoPosterSrc, vertexs } = keyframe.data as ModelVideoData
+      const { videoSrc, videoPosterSrc, vertexs, matrixWorld } = keyframe.data as ModelVideoData
+
+      const position = (() => {
+        if (vertexs.length < 4) {
+          throw new Error('ModelVideo: 顶点数据集合不够，无法组成矩形 ....')
+        }
+        if (vertexs.length === 4) {
+          return vertexs
+        }
+
+        const box = new THREE.Box3()
+        vertexs.forEach((v) => box.expandByPoint(new THREE.Vector3(v.x, v.y, v.z)))
+        return [
+          new THREE.Vector3(box.min.x, box.max.y, box.max.z),
+          new THREE.Vector3(box.min.x, box.min.y, box.max.z),
+          new THREE.Vector3(box.max.x, box.min.y, box.max.z),
+          new THREE.Vector3(box.max.x, box.max.y, box.max.z),
+        ]
+      })()
+
+      const points = (() => {
+        if (matrixWorld) {
+          const transMatrix = createTransMatrix(matrixWorld)
+          return [
+            position.map((p) => {
+              const res = transMatrix([p.x, p.y, p.z])
+              return { x: res[0], y: res[1], z: res[2] }
+            }),
+          ]
+        }
+        return [position]
+      })()
 
       ref.current.disable()
       await ref.current.load(
         {
           video_src: videoSrc,
           video_poster_src: videoPosterSrc,
-          points: [vertexs],
+          points,
         },
         controller.configs?.videos?.modelTVVideo
       )

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

@@ -1,47 +1,71 @@
-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 { useController, useFiveInstance } from '../../../hooks'
+import { PanoTagData, VreoKeyframe, VreoKeyframeEnum } from '../../../../typings/VreoUnit'
 
-export function PanoTag() {
-  const [state, setState] = React.useState<{
-    vertex: Vertex
-    text?: string
-    type: PanoTagEnum
-    imgUrl?: string
-  } | null>(null)
+import { ContentType, DimensionType, PanoTagPlugin, PointType, Tag } from '@realsee/dnalogel'
 
-  const [pos, setPos] = React.useState<{ left: number; top: number } | null>(null)
+export function PanoTag() {
   const timeoutRef = React.useRef<NodeJS.Timeout | null>()
-
   const controller = useController()
   const five = useFiveInstance()
-  const project2d = useFiveProject2d()
+  const panoTagPlugin = React.useRef(PanoTagPlugin(five as any, {
+    config: {
+      globalConfig: {
+        visibleConfig: {
+          keep: 'visible'
+        },
+        unfoldedConfig: {
+          autoUnfold: {
+            strategy: 'MinimumDistance'
+          },
+          unfoldDistance: { max: 100 }
+        }
+      }
+    }
+  }))
 
   React.useEffect(() => {
     if (controller.configs?.keyframeMap.PanoTag === false) {
       return
     }
     const callback = (keyframe: VreoKeyframe) => {
+      if (!panoTagPlugin.current) return
+
       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 })
+
+      const id = 'any-id'
+      const pointType = PointType.PointTag
+      const dimensionType = DimensionType.Two
+      const position = [panoTagData.vertex.x, panoTagData.vertex.y, panoTagData.vertex.z]
+      const tag: Tag = (() => {
+        if (panoTagData.imgUrl) {
+          return { id, pointType, position, dimensionType, contentType: ContentType.ImageText, data: { text: panoTagData.text, mediaData: [{ type: 'Image',  url: panoTagData.imgUrl }] }}
+        } else {
+          return { id, pointType, position, dimensionType, contentType: ContentType.Text, data: { text: panoTagData.text }}
+        }
+      })()
+
+      // show
+      panoTagPlugin.current.load({ tagList: [tag] })
+
       timeoutRef.current = setTimeout(() => {
-        setState(null)
-        setPos(null)
+        const id = Date.now()
+        // clear
+        const tag = panoTagPlugin.current.getTagById(id)
+        if (tag.state) {
+          tag.state.unfolded = false
+          ;(panoTagPlugin.current as any).updateRenderAllTags()
+        }
+        tag.hooks?.on('folded', () => {
+          setTimeout(() => {
+            if (tag.state) {
+              tag.state.visible = false
+              panoTagPlugin.current.destroyTagById(id)
+            }
+          }, 1500)
+        })
       }, end - start)
     }
 
@@ -55,73 +79,5 @@ export function PanoTag() {
     }
   }, [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>
-    </>
-  )
+  return null
 }

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

@@ -1,21 +1,65 @@
-import classNames from 'classnames'
 import * as React from 'react'
-import { Vector3 } from 'three'
+import * as THREE from 'three'
+import ReactDOM from 'react-dom'
+import { Vector3, Quaternion } from 'three'
+
+import { useController, useFiveInstance } from '../../../hooks'
+import { CSS3DRenderPlugin } from '../../../../fivePlugins/CSS3DRenderPlugin'
 import { PanoTextLabelData, VreoKeyframe, VreoKeyframeEnum } from '../../../../typings/VreoUnit'
-import { useController, useFiveProject2d } from '../../../hooks'
 
-interface PanoTextLabelState {
-  text: string
-  left: number
-  top: number
-  fontSize: number
+/**
+ * 通过传入中心点确定矩形框架容器的四个点：
+ *  1. 已知矩形长宽和中心点
+ *  2. 借助planeGeometry生成垂直相机视角的平面上的四个点
+ *  3. 通过向量相加，平行四边形法则获取到移动position后的面上四个点
+ */
+const calcPoints = (
+  centerPoint: Vector3,
+  normal: THREE.Vector3 | undefined,
+  wrapperLength: number,
+  wrapperWidth: number
+) => {
+  // 375px 对应 1m
+  const length = wrapperLength / 375
+  const width = wrapperWidth / 375
+
+  const geometry = new THREE.PlaneGeometry(length, width)
+  if (normal) {
+    const lookPoint = new THREE.Vector3(normal.x + centerPoint.x, normal.y + centerPoint.y, normal.z + centerPoint.z)
+    geometry.lookAt(lookPoint)
+  }
+  // const pointgeometry = new THREE.Geometry()
+  // pointgeometry.vertices.push(cameraPosition)
+  // const pointmaterial = new THREE.PointsMaterial({
+  //   color: 0xffffff,
+  //   size: 0.4,
+  // })
+  // _point = new THREE.Points(pointgeometry, pointmaterial)
+
+  const material = new THREE.MeshBasicMaterial({ color: 0xffff00, side: THREE.DoubleSide })
+  const plane = new THREE.Mesh(geometry, material)
+  const v0 = centerPoint.clone()
+  plane.position.copy(v0)
+
+  // 计算传入的四个点的坐标
+  const [v1, v2, v3, v4] = plane.geometry.vertices
+  const downLeft = v0.clone().add(v4)
+  const downRight = v0.clone().add(v3)
+  const upLeft = v0.clone().add(v2)
+  const upRight = v0.clone().add(v1)
+
+  // 插件使用要求：矩形四个点位数据，顺序为**必须**为左下、右下、右上、左上
+  return [downLeft, downRight, upRight, upLeft]
 }
 
+/**
+ * 空间文本标签。
+ */
 export function PanoTextLabel() {
-  const [state, setState] = React.useState<PanoTextLabelState | null>(null)
   const timeoutRef = React.useRef<NodeJS.Timeout | null>()
   const controller = useController()
-  const project2d = useFiveProject2d()
+  const five = useFiveInstance()
+  const ref = React.useRef<ReturnType<typeof CSS3DRenderPlugin>>()
 
   React.useEffect(() => {
     if (controller.configs?.keyframeMap.PanoTextLabel === false) {
@@ -24,19 +68,43 @@ export function PanoTextLabel() {
     const callback = (keyframe: VreoKeyframe) => {
       const { start, end, data } = keyframe
       const panoTextLabelData = data as PanoTextLabelData
+      // 增加无文本情况的判断
+      if (data.text === '') return
+
       const { x, y, z } = panoTextLabelData.vertex
+      const centerPoint = new Vector3(x, y, z)
+      const normal = new Vector3(panoTextLabelData.normal?.x, panoTextLabelData.normal?.y, panoTextLabelData.normal?.z)
+      // 生成传入的四个点，将文本框最大宽度定在200px，最高高度在30px
+      const wrapperLength = 200
+      const wrapperWidth = 30
+      const points = calcPoints(centerPoint, panoTextLabelData.normal && normal, wrapperLength, wrapperWidth)
 
-      const res = project2d(new Vector3(x, y, z))
-      if (!res) return
-      const { x: left, y: top } = res
+      if (!ref.current) ref.current = CSS3DRenderPlugin(five)
+      const container = ref.current.create3DDomContainer(points)
+      const css3DObject = container?.css3DObject
+      // 将获取的mesh进行旋转操作，根据欧拉角去进行mesh的变换
+      if (data.quaternion) {
+        const quaternion = new Quaternion(data.quaternion.x, data.quaternion.y, data.quaternion.z, data.quaternion.w)
+        css3DObject?.quaternion.copy(quaternion)
+      }
+      if (container?.container)
+        ReactDOM.render(
+          <div className="PanoTextLabel PanoTextLabel--notHidden">
+            <div className="PanoTextLabel-wrapper">
+              <div style={{ fontSize: `${data.fontSize || 16}px` }} className="PanoText-innerText">
+                {data.text || ''}
+              </div>
+            </div>
+          </div>,
+          container?.container
+        )
 
-      // Object.assign(window, { $PanoTextLabel: { setState } })
-      setState({ left, top, text: data.text || '', fontSize: data.fontSize || 16 })
-      timeoutRef.current = setTimeout(() => setState(null), end - start)
+      timeoutRef.current = setTimeout(() => {
+        ref.current?.disposeAll()
+      }, end - start)
     }
     controller.on(VreoKeyframeEnum.PanoTextLabel, callback)
 
-    // Object.assign(window, { $panoTextLabel: { setState } })
     return () => {
       controller.off(VreoKeyframeEnum.PanoTextLabel, callback)
       if (timeoutRef.current) {
@@ -45,21 +113,5 @@ export function PanoTextLabel() {
     }
   }, [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>
-  )
+  return <></>
 }

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

@@ -2,7 +2,6 @@ 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() {
@@ -27,7 +26,8 @@ export function Prompter() {
 
       ref.current = setTimeout(() => {
         setHidden(true)
-        setTimeout(() => setText(''), 500)
+        setText('')
+        // setTimeout(() => setText(''), 500)
 
         if (ref.current) clearTimeout(ref.current)
         ref.current = null
@@ -45,22 +45,12 @@ export function Prompter() {
     <div
       className={classNames('vreo-prompter', {
         'vreo-prompter--hidden': hidden,
-        'vreo-prompter--audio': controller.isAudio,
+        [`vreo-prompter-left--${controller.agentType}`]: true,
       })}
     >
-      {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 className="vreo-prompter-text">
+        <div className="vreo-prompter-innerText">{text}</div>
+      </div>
     </div>
   )
 }