Fix video volume issue and progress bar stats (#10677)

* fix video volume issue and make progress bar show stats * comment non functional progress bar * Update index.tsx remove console log * formatting --------- Co-authored-by: lonedevr <[email protected]>
EtherealEngine · Aug 4, 2024 · 387cb8c · 387cb8c
1 parent f3f884c
commit 387cb8c
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 11 deletions.
diff --git a/packages/ui/src/components/editor/input/Progress/index.tsx b/packages/ui/src/components/editor/input/Progress/index.tsx
@@ -37,7 +37,7 @@ export default function ProgressBar({ value, paused, totalTime, ...rest }: Progr
   return (
     <div className="ml-auto mr-6 flex h-10 w-[314px] flex-row place-items-center gap-2 rounded bg-zinc-900 px-2">
       {paused ? <HiPlay className="text-white" /> : <HiPause className="text-white" />}
-      <Progress value={value} className="w-[173px]" barClassName="bg-blue-800 " />
+      <Progress value={(value / totalTime) * 100} className="w-[173px]" barClassName="bg-blue-800 " />
       <div className="w-[85px] truncate text-right text-sm font-normal leading-normal text-neutral-400">
         {paused
           ? 'Paused'

diff --git a/packages/ui/src/components/editor/properties/animation/index.tsx b/packages/ui/src/components/editor/properties/animation/index.tsx
@@ -45,7 +45,6 @@ import { SelectOptionsType } from '../../../../primitives/tailwind/Select'
 import InputGroup from '../../input/Group'
 import ModelInput from '../../input/Model'
 import NumericInput from '../../input/Numeric'
-import ProgressBar from '../../input/Progress'
 import SelectInput from '../../input/Select'
 import NodeEditor from '../nodeEditor'
 
@@ -84,7 +83,7 @@ export const LoopAnimationNodeEditor: EditorComponentType = (props) => {
       description={t('editor:properties.loopAnimation.description')}
       icon={<LoopAnimationNodeEditor.iconComponent />}
     >
-      <ProgressBar value={5} paused={false} totalTime={100} />
+      {/*<ProgressBar value={5} paused={false} totalTime={100} />*/}
       <InputGroup name="Loop Animation" label={t('editor:properties.loopAnimation.lbl-loopAnimation')}>
         <SelectInput
           key={props.entity}

diff --git a/packages/ui/src/components/editor/properties/media/index.tsx b/packages/ui/src/components/editor/properties/media/index.tsx
@@ -101,7 +101,7 @@ export const MediaNodeEditor: EditorComponentType = (props) => {
           step={1}
           value={media.volume.value}
           onChange={updateProperty(MediaComponent, 'volume')}
-          onRelease={() => commitProperty(MediaComponent, 'volume')}
+          onRelease={commitProperty(MediaComponent, 'volume')}
         />
       </InputGroup>
 
@@ -161,7 +161,7 @@ export const MediaNodeEditor: EditorComponentType = (props) => {
         <InputGroup
           name="media-controls"
           label={t('editor:properties.media.lbl-mediaControls')}
-          containerClassName="gap-2"
+          className="flex flex-row gap-2"
         >
           <Button variant="outline" onClick={toggle}>
             {media.paused.value ? t('editor:properties.media.playtitle') : t('editor:properties.media.pausetitle')}

diff --git a/packages/ui/src/components/editor/properties/video/index.tsx b/packages/ui/src/components/editor/properties/video/index.tsx
@@ -28,8 +28,13 @@ import { useTranslation } from 'react-i18next'
 import { HiOutlineVideoCamera } from 'react-icons/hi2'
 
 import { EntityUUID, UUIDComponent } from '@etherealengine/ecs'
-import { getComponent, hasComponent, useComponent } from '@etherealengine/ecs/src/ComponentFunctions'
-import { MediaComponent } from '@etherealengine/engine/src/scene/components/MediaComponent'
+import {
+  getComponent,
+  hasComponent,
+  useComponent,
+  useOptionalComponent
+} from '@etherealengine/ecs/src/ComponentFunctions'
+import { MediaComponent, MediaElementComponent } from '@etherealengine/engine/src/scene/components/MediaComponent'
 import { VideoComponent } from '@etherealengine/engine/src/scene/components/VideoComponent'
 import { NameComponent } from '@etherealengine/spatial/src/common/NameComponent'
 
@@ -45,7 +50,6 @@ import { BackSide, ClampToEdgeWrapping, DoubleSide, FrontSide, MirroredRepeatWra
 import BooleanInput from '../../input/Boolean'
 import InputGroup from '../../input/Group'
 import NumericInput from '../../input/Numeric'
-import ProgressBar from '../../input/Progress'
 import SelectInput from '../../input/Select'
 import Vector2Input from '../../input/Vector2'
 import NodeEditor from '../nodeEditor'
@@ -75,9 +79,10 @@ export const VideoNodeEditor: EditorComponentType = (props) => {
   const { t } = useTranslation()
 
   const video = useComponent(props.entity, VideoComponent)
-
+  const mediaUUID = video.mediaUUID.value
+  const mediaEntity = UUIDComponent.getEntityByUUID(mediaUUID)
+  const mediaElement = useOptionalComponent(mediaEntity, MediaElementComponent)
   const mediaEntities = useQuery([MediaComponent])
-
   const mediaOptions = mediaEntities
     .filter((entity) => entity !== props.entity)
     .map((entity) => {
@@ -99,7 +104,11 @@ export const VideoNodeEditor: EditorComponentType = (props) => {
       description={t('editor:properties.video.description')}
       icon={<VideoNodeEditor.iconComponent />}
     >
-      <ProgressBar value={5} paused={false} totalTime={100} />
+      {/*<ProgressBar
+        value={0}
+        paused={false}
+        totalTime={0}
+      />*/}
       <InputGroup
         name="Media"
         label={t('editor:properties.video.lbl-media')}