Add scrubber to UVOL2

packages/client-core/i18n/en/editor.json

@@ -235,6 +235,7 @@
       "lbl-synchronize": "Synchronize",
       "info-synchronize": "If true, the media will be synchronized on all the connected clients.",
       "lbl-volume": "Volume",
+      "lbl-currentTime": "Current Time",
       "lbl-isMusic": "Is Music",
       "lbl-size": "Size",
       "seektime": "Start Time"

packages/common/src/utils/usePrevious.ts

@@ -0,0 +1,35 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and 
+provide for limited attribution for the Original Developer. In addition, 
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Ethereal Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Ethereal Engine team.
+
+All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
+Ethereal Engine. All Rights Reserved.
+*/
+
+import { StateMethods } from '@hookstate/core'
+import { useEffect, useRef } from 'react'
+
+export const usePrevious = <T>(value: StateMethods<T, object>) => {
+  const ref = useRef(null as T | null)
+  useEffect(() => {
+    ref.current = value.value
+  }, [value])
+  return ref.current
+}

packages/editor/src/components/inputs/StringInput.tsx

@@ -41,6 +41,11 @@ interface StyledNumericInputProps {
 
 const StyledNumericInput = React.forwardRef<any, StyledNumericInputProps>(
   ({ className = '', onChange, ...rest }, ref) => {
+    if (!onChange) {
+      return (
+        <input className={`StyledNumericInput ${className}`} readOnly={true} style={inputStyle} {...rest} ref={ref} />
+      )
+    }
     return (
       <input className={`StyledNumericInput ${className}`} onChange={onChange} style={inputStyle} {...rest} ref={ref} />
     )

packages/editor/src/components/properties/VolumetricNodeEditor.tsx

@@ -23,14 +23,16 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
-import React from 'react'
+import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { VolumetricFileTypes } from '@etherealengine/engine/src/assets/constants/fileTypes'
-import { useComponent } from '@etherealengine/engine/src/ecs/functions/ComponentFunctions'
+import { hasComponent, useComponent } from '@etherealengine/engine/src/ecs/functions/ComponentFunctions'
 import { VolumetricComponent } from '@etherealengine/engine/src/scene/components/VolumetricComponent'
 import { PlayMode } from '@etherealengine/engine/src/scene/constants/PlayMode'
 
+import { UVOL1Component } from '@etherealengine/engine/src/scene/components/UVOL1Component'
+import { UVOL2Component } from '@etherealengine/engine/src/scene/components/UVOL2Component'
 import VideocamIcon from '@mui/icons-material/Videocam'
 import { ItemTypes } from '../../constants/AssetTypes'
 import ArrayInputGroup from '../inputs/ArrayInputGroup'
@@ -39,6 +41,7 @@ import { Button } from '../inputs/Button'
 import CompoundNumericInput from '../inputs/CompoundNumericInput'
 import InputGroup from '../inputs/InputGroup'
 import SelectInput from '../inputs/SelectInput'
+import StringInput from '../inputs/StringInput'
 import NodeEditor from './NodeEditor'
 import { EditorComponentType, commitProperty, updateProperty } from './Util'
 
@@ -69,13 +72,39 @@ const PlayModeOptions = [
  */
 export const VolumetricNodeEditor: EditorComponentType = (props) => {
   const { t } = useTranslation()
+  const [trackLabel, setTrackLabel] = React.useState('')
 
   const volumetricComponent = useComponent(props.entity, VolumetricComponent)
 
   const toggle = () => {
     volumetricComponent.paused.set(!volumetricComponent.paused.value)
   }
 
+  useEffect(() => {
+    const tracks = volumetricComponent.paths.value
+    if (tracks.length === 0) {
+      return
+    }
+    if (tracks.length === 1) {
+      const segments = tracks[0].split('/')
+      setTrackLabel(segments[segments.length - 1])
+      return
+    }
+
+    let prefix = tracks[0]
+
+    // Don't show the longest common prefix
+    for (let j = 1; j < tracks.length; j++) {
+      while (tracks[j].indexOf(prefix) !== 0) {
+        prefix = prefix.substring(0, prefix.length - 1)
+      }
+    }
+
+    const currentTrackPath = tracks[volumetricComponent.track.value]
+
+    setTrackLabel(currentTrackPath.slice(prefix.length))
+  }, [volumetricComponent.track, volumetricComponent.ended, volumetricComponent.paths])
+
   return (
     <NodeEditor
       {...props}
@@ -121,6 +150,17 @@ export const VolumetricNodeEditor: EditorComponentType = (props) => {
         acceptDropItems={ItemTypes.Volumetrics}
       />
 
+      {(hasComponent(props.entity, UVOL2Component) || hasComponent(props.entity, UVOL1Component)) && (
+        <InputGroup name="CurrentTime" label={t('editor:properties.media.lbl-currentTime')}>
+          <CompoundNumericInput
+            min={0}
+            max={volumetricComponent.currentTrackInfo.duration.value}
+            step={0.01}
+            value={volumetricComponent.currentTrackInfo.currentTime.value}
+          />
+        </InputGroup>
+      )}
+
       <InputGroup name="Play Mode" label={t('editor:properties.media.playmode')}>
         <SelectInput
           key={props.entity}
@@ -136,6 +176,10 @@ export const VolumetricNodeEditor: EditorComponentType = (props) => {
           </Button>
         )}
       </InputGroup>
+
+      <InputGroup name="Current Track" label="Current Track">
+        <StringInput value={trackLabel} />
+      </InputGroup>
     </NodeEditor>
   )
 }

packages/engine/src/scene/components/UVOL1Component.ts

@@ -169,6 +169,7 @@ function UVOL1Reactor() {
       volumetric.ended.set(true)
       video.removeEventListener('ended', setEnded)
     })
+    volumetric.currentTrackInfo.duration.set(component.data.frameData.length / component.data.frameRate.value)
 
     return () => {
       removeObjectFromGroup(entity, mesh)
@@ -253,6 +254,7 @@ function UVOL1Reactor() {
         mesh.material.needsUpdate = true
         oldMaterial.dispose()
       }
+      volumetric.currentTrackInfo.currentTime.set(frameToPlay / component.data.frameRate.value)
 
       if (meshBuffer.has(frameToPlay)) {
         // @ts-ignore: value cannot be anything else other than BufferGeometry

packages/engine/src/scene/components/UVOL2Component.ts

@@ -23,6 +23,7 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
+import { usePrevious } from '@etherealengine/common/src/utils/usePrevious'
 import { getState } from '@etherealengine/hyperflux'
 import { useEffect, useMemo } from 'react'
 import {
@@ -237,7 +238,6 @@ export const UVOL2Component = defineComponent({
         }
       },
       playbackStartTime: 0,
-      currentTime: 0,
       initialGeometryBuffersLoaded: false,
       initialTextureBuffersLoaded: false,
       firstGeometryFrameLoaded: false,
@@ -374,6 +374,7 @@ function UVOL2Reactor() {
   let bufferThreshold = 10 // seconds. If buffer health is less than this, fetch new data
   const repeat = useMemo(() => new Vector2(1, 1), [])
   const offset = useMemo(() => new Vector2(0, 0), [])
+  const previousStartTime = usePrevious(volumetric.startTime)
 
   const material = useMemo(() => {
     const manifest = component.data.value
@@ -526,7 +527,8 @@ transformed.z += mix(keyframeA.z, keyframeB.z, mixRatio);
       audio.playbackRate = sortedManifest.audio.playbackRate
     }
 
-    component.currentTime.set(volumetric.startTime.value)
+    volumetric.currentTrackInfo.currentTime.set(volumetric.startTime.value)
+    volumetric.currentTrackInfo.duration.set(sortedManifest.duration)
     const intervalId = setInterval(bufferLoop, 1000)
     bufferLoop() // calling now because setInterval will call after 1 second
 
@@ -727,7 +729,8 @@ transformed.z += mix(keyframeA.z, keyframeB.z, mixRatio);
 
   const fetchGeometry = () => {
     const currentBufferLength =
-      component.geometryInfo.bufferHealth.value - (component.currentTime.value - volumetric.startTime.value)
+      component.geometryInfo.bufferHealth.value -
+      (volumetric.currentTrackInfo.currentTime.value - volumetric.startTime.value)
     if (
       currentBufferLength >= Math.min(bufferThreshold, maxBufferHealth) ||
       component.geometryInfo.pendingRequests.value > 0
@@ -773,7 +776,8 @@ transformed.z += mix(keyframeA.z, keyframeB.z, mixRatio);
     const textureTypeData = component.data.texture[textureType].value
     if (!textureTypeData) return
     const currentBufferLength =
-      component.textureInfo[textureType].bufferHealth.value - (component.currentTime.value - volumetric.startTime.value)
+      component.textureInfo[textureType].bufferHealth.value -
+      (volumetric.currentTrackInfo.currentTime.value - volumetric.startTime.value)
     if (
       currentBufferLength >= Math.min(bufferThreshold, maxBufferHealth) ||
       component.textureInfo[textureType].pendingRequests.value > 0
@@ -869,8 +873,8 @@ transformed.z += mix(keyframeA.z, keyframeB.z, mixRatio);
     if (!component.firstGeometryFrameLoaded.value || !component.firstTextureFrameLoaded.value) {
       return
     }
-    updateGeometry(component.currentTime.value)
-    updateAllTextures(component.currentTime.value)
+    updateGeometry(volumetric.currentTrackInfo.currentTime.value)
+    updateAllTextures(volumetric.currentTrackInfo.currentTime.value)
 
     if (volumetric.useLoadingEffect.value) {
       let headerTemplate: RegExp | undefined = /\/\/\sHEADER_REPLACE_START([\s\S]*?)\/\/\sHEADER_REPLACE_END/
@@ -924,15 +928,16 @@ transformed.z += mix(keyframeA.z, keyframeB.z, mixRatio);
     }
     component.playbackStartTime.set(engineState.elapsedSeconds * 1000)
     component.geometryInfo.bufferHealth.set(
-      component.geometryInfo.bufferHealth.value - (component.currentTime.value - volumetric.startTime.value)
+      component.geometryInfo.bufferHealth.value -
+        (volumetric.currentTrackInfo.currentTime.value - volumetric.startTime.value)
     )
     component.textureInfo.textureTypes.value.forEach((textureType) => {
       const currentHealth = component.textureInfo[textureType].bufferHealth.value
       component.textureInfo[textureType].bufferHealth.set(
-        currentHealth - (component.currentTime.value - volumetric.startTime.value)
+        currentHealth - (volumetric.currentTrackInfo.currentTime.value - volumetric.startTime.value)
       )
     })
-    volumetric.startTime.set(component.currentTime.value)
+    volumetric.startTime.set(volumetric.currentTrackInfo.currentTime.value)
 
     if (mesh.material !== material) {
       mesh.material = material
@@ -1249,16 +1254,20 @@ transformed.z += mix(keyframeA.z, keyframeB.z, mixRatio);
 
     if (volumetric.autoPauseWhenBuffering.value) {
       const currentGeometryBufferHealth =
-        component.geometryInfo.bufferHealth.value - (component.currentTime.value - volumetric.startTime.value)
-      const currentMinBuffer = Math.min(minBufferToPlay, component.data.duration.value - component.currentTime.value)
+        component.geometryInfo.bufferHealth.value -
+        (volumetric.currentTrackInfo.currentTime.value - volumetric.startTime.value)
+      const currentMinBuffer = Math.min(
+        minBufferToPlay,
+        component.data.duration.value - volumetric.currentTrackInfo.currentTime.value
+      )
       if (currentGeometryBufferHealth < currentMinBuffer) {
         return
       }
       for (let i = 0; i < component.textureInfo.textureTypes.value.length; i++) {
         const textureType = component.textureInfo.textureTypes[i].value
         const currentTextureBufferHealth =
           component.textureInfo[textureType].bufferHealth.value -
-          (component.currentTime.value - volumetric.startTime.value)
+          (volumetric.currentTrackInfo.currentTime.value - volumetric.startTime.value)
         if (currentTextureBufferHealth < currentMinBuffer) {
           return
         }
@@ -1272,20 +1281,20 @@ transformed.z += mix(keyframeA.z, keyframeB.z, mixRatio);
       _currentTime =
         volumetric.startTime.value + (engineState.elapsedSeconds * 1000 - component.playbackStartTime.value) / 1000
     }
-    component.currentTime.set(_currentTime)
+    volumetric.currentTrackInfo.currentTime.set(_currentTime)
 
-    if (component.currentTime.value > component.data.value.duration || audio.ended) {
+    if (volumetric.currentTrackInfo.currentTime.value > component.data.value.duration || audio.ended) {
       if (component.data.deletePreviousBuffers.value === false && volumetric.playMode.value === PlayMode.loop) {
-        component.currentTime.set(0)
+        volumetric.currentTrackInfo.currentTime.set(0)
         component.playbackStartTime.set(engineState.elapsedSeconds * 1000)
       } else {
         volumetric.ended.set(true)
         return
       }
     }
 
-    updateGeometry(component.currentTime.value)
-    updateAllTextures(component.currentTime.value)
+    updateGeometry(volumetric.currentTrackInfo.currentTime.value)
+    updateAllTextures(volumetric.currentTrackInfo.currentTime.value)
   }
 
   useExecute(update, {

packages/engine/src/scene/components/VolumetricComponent.ts

@@ -90,15 +90,18 @@ export const VolumetricComponent = defineComponent({
       autoPauseWhenBuffering: true, // TODO: Implement this for UVOL1
       autoplay: true,
       startTime: 0,
-      currentTime: 0,
       lastUpdatedTime: 0,
       paused: true,
       initialBuffersLoaded: false,
       hasAudio: true,
       ended: true,
       volume: 1,
       playMode: PlayMode.loop as PlayMode,
-      track: -1
+      track: -1,
+      currentTrackInfo: {
+        currentTime: 0,
+        duration: 0
+      }
     }
   },
 
@@ -220,6 +223,10 @@ export function VolumetricReactor() {
       volumetric.paused.set(true)
       volumetric.startTime.set(0)
       volumetric.lastUpdatedTime.set(0)
+      volumetric.currentTrackInfo.set({
+        currentTime: 0,
+        duration: 0
+      })
     }
 
     resetTrack()