fix audio and media node editors (#10338)

Co-authored-by: Daniel Belmes <[email protected]>

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

@@ -294,7 +294,8 @@
       "lbl-currentTime": "Current Time",
       "lbl-isMusic": "Is Music",
       "lbl-size": "Size",
-      "seektime": "Start Time"
+      "seektime": "Start Time",
+      "lbl-mediaControls": "Media Controls"
     },
     "mesh": {
       "name": "Mesh",

packages/ui/src/components/editor/properties/media/index.tsx

@@ -104,7 +104,7 @@ export const MediaNodeEditor: EditorComponentType = (props) => {
         />
       </InputGroup>
 
-      <InputGroup name="Start Time" label={t('editor:properties.media.seekTime')}>
+      <InputGroup name="Start Time" label={t('editor:properties.media.seektime')}>
         <NumericInput
           value={media.seekTime.value}
           onChange={updateProperty(MediaComponent, 'seekTime')}
@@ -156,11 +156,13 @@ export const MediaNodeEditor: EditorComponentType = (props) => {
         />
       </InputGroup>
       {media.resources.length > 0 && (
-        <InputGroup name="media-controls" label="media-controls">
-          <Button onClick={toggle}>
+        <InputGroup name="media-controls" label={t('editor:properties.media.lbl-mediaControls')} className="gap-2">
+          <Button variant="outline" onClick={toggle}>
             {media.paused.value ? t('editor:properties.media.playtitle') : t('editor:properties.media.pausetitle')}
           </Button>
-          <Button onClick={reset}>{t('editor:properties.media.resettitle')}</Button>
+          <Button variant="outline" onClick={reset}>
+            {t('editor:properties.media.resettitle')}
+          </Button>
         </InputGroup>
       )}
     </NodeEditor>

packages/ui/src/components/editor/properties/positionalAudio/index.tsx

@@ -28,22 +28,20 @@ import { useTranslation } from 'react-i18next'
 import { PiSpeakerLowLight } from 'react-icons/pi'
 
 import { hasComponent, useComponent } from '@etherealengine/ecs/src/ComponentFunctions'
-import { PositionalAudioComponent } from '@etherealengine/engine/src/audio/components/PositionalAudioComponent'
-import { DistanceModel, DistanceModelOptions } from '@etherealengine/engine/src/audio/constants/AudioConstants'
-
 import {
   EditorComponentType,
   commitProperty,
   updateProperty
 } from '@etherealengine/editor/src/components/properties/Util'
 import { EditorControlFunctions } from '@etherealengine/editor/src/functions/EditorControlFunctions'
 import { SelectionState } from '@etherealengine/editor/src/services/SelectionServices'
+import { PositionalAudioComponent } from '@etherealengine/engine/src/audio/components/PositionalAudioComponent'
+import { DistanceModel, DistanceModelOptions } from '@etherealengine/engine/src/audio/constants/AudioConstants'
 import { MediaComponent } from '@etherealengine/engine/src/scene/components/MediaComponent'
 import { VolumetricComponent } from '@etherealengine/engine/src/scene/components/VolumetricComponent'
 import Slider from '../../../../primitives/tailwind/Slider'
 import InputGroup from '../../input/Group'
 import NumericInput from '../../input/Numeric'
-import ProgressBar from '../../input/Progress'
 import SelectInput from '../../input/Select'
 import NodeEditor from '../nodeEditor'
 
@@ -69,7 +67,6 @@ export const PositionalAudioNodeEditor: EditorComponentType = (props) => {
       description={t('editor:properties.audio.description')}
       icon={<PiSpeakerLowLight />}
     >
-      <ProgressBar value={5} paused={false} totalTime={100} />
       <InputGroup
         name="Distance Model"
         label={t('editor:properties.audio.lbl-distanceModel')}
@@ -78,10 +75,7 @@ export const PositionalAudioNodeEditor: EditorComponentType = (props) => {
         <SelectInput
           key={props.entity}
           options={DistanceModelOptions}
-          value={
-            //audioComponent.distanceModel.value
-            ''
-          }
+          value={audioComponent.distanceModel.value}
           onChange={commitProperty(PositionalAudioComponent, 'distanceModel')}
         />
       </InputGroup>

packages/ui/src/primitives/tailwind/Slider/index.tsx

@@ -64,7 +64,7 @@ const Slider = ({ value, min = 0, max = 100, step = 1, width = 200, onChange, on
   }
 
   return (
-    <div className="flex items-center gap-2">
+    <div className="flex flex-wrap items-center gap-2">
       <input
         min={min}
         max={max}