[fix] Resolve styling issues in Slider component of Audio player (#2931)

aimhubio · Jul 20, 2023 · d0af2d9 · d0af2d9
1 parent 233737a
commit d0af2d9
Show file tree

Hide file tree

Showing 13 changed files with 104 additions and 101 deletions.
diff --git a/src/aimcore/web/ui/src/components/AudioBox/AudioBox.tsx b/src/aimcore/web/ui/src/components/AudioBox/AudioBox.tsx
@@ -12,7 +12,6 @@ function AudioBox(props: AudioBoxProps) {
     setIsPlaying,
     setProcessing,
     onPlay,
-    onPause,
     onDownload,
     processing,
     isPlaying,
@@ -29,7 +28,7 @@ function AudioBox(props: AudioBoxProps) {
           onEnded={() => setIsPlaying(false)}
           onCanPlay={() => setProcessing(false)}
           onPlay={onPlay}
-          onPause={onPause}
+          onPause={() => setIsPlaying(false)}
           onDownload={onDownload}
           processing={processing}
           isPlaying={isPlaying}

diff --git a/src/aimcore/web/ui/src/components/kit_v2/AudioPlayer/AudioPlayer.d.ts b/src/aimcore/web/ui/src/components/kit_v2/AudioPlayer/AudioPlayer.d.ts
@@ -1,7 +1,7 @@
 import React from 'react';
 
 export interface AudioPlayerProps extends React.HTMLProps<HTMLAudioElement> {
-  audioRef: React.MutableRefObject<HTMLMediaElement | null>;
+  audioRef: React.MutableRefObject<HTMLMediaElement>;
   src: string;
   isPlaying: boolean;
   processing: boolean;

diff --git a/...ore/web/ui/src/components/kit_v2/AudioPlayer/AudioPlayerProgress/AudioPlayerProgress.d.ts b/...ore/web/ui/src/components/kit_v2/AudioPlayer/AudioPlayerProgress/AudioPlayerProgress.d.ts
@@ -1,5 +1,5 @@
 export interface AudioPlayerProgressProps {
-  audio: HTMLAudioElement | null;
+  audio: HTMLAudioElement;
   isPlaying: boolean;
   src: string;
   disabled?: boolean;

diff --git a/...ore/web/ui/src/components/kit_v2/AudioPlayer/AudioPlayerProgress/AudioPlayerProgress.scss b/...ore/web/ui/src/components/kit_v2/AudioPlayer/AudioPlayerProgress/AudioPlayerProgress.scss
@@ -29,6 +29,8 @@
   &__progressSlider {
     margin: 0 $space-xxxs 0 $space-xxs;
     height: toRem(40px);
+    flex: 1;
+    overflow: hidden;
     .MuiSlider-root {
       height: 100% !important;
     }

diff --git a/...core/web/ui/src/components/kit_v2/AudioPlayer/AudioPlayerProgress/AudioPlayerProgress.tsx b/...core/web/ui/src/components/kit_v2/AudioPlayer/AudioPlayerProgress/AudioPlayerProgress.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import moment from 'moment';
 
-import { Slider } from 'components/kit';
-import { Text } from 'components/kit_v2';
+import { Text, Slider } from 'components/kit_v2';
 import ErrorBoundary from 'components/ErrorBoundary';
 
 import { AudioPlayerProgressProps } from './';
@@ -15,7 +14,7 @@ function AudioPlayerProgress({
   src,
   disabled,
 }: AudioPlayerProgressProps) {
-  const [trackProgress, setTrackProgress] = React.useState(0);
+  const [trackProgress, setTrackProgress] = React.useState<number>(0);
   const intervalRef = React.useRef<number>();
 
   React.useEffect(() => {
@@ -36,68 +35,65 @@ function AudioPlayerProgress({
   function startTimer(): void {
     clearInterval(intervalRef.current);
     intervalRef.current = window.setInterval(() => {
-      setTrackProgress(audio?.currentTime || 0);
-    }, 100);
+      setTrackProgress(audio.currentTime || 0);
+    }, 20);
   }
 
-  function onProgressChange(e: any, value: number | number[]): void {
-    if (audio) {
-      clearInterval(intervalRef.current);
-      setTrackProgress(value as number);
-    }
+  function onProgressChange(values: number[]): void {
+    clearInterval(intervalRef.current);
+    setTrackProgress(values[0]);
   }
 
-  function onTimerChange(): void {
-    if (audio && !isNaN(trackProgress)) {
-      clearInterval(intervalRef.current);
-      audio.currentTime = trackProgress;
-      if (isPlaying) {
-        startTimer();
-      }
+  function onTimerChange(values: number[]): void {
+    clearInterval(intervalRef.current);
+    audio.currentTime = values[0];
+    if (isPlaying) {
+      startTimer();
     }
   }
 
-  function formatDuration(): string {
-    return moment
-      .utc(Math.round(audio?.duration || 0) * 1000)
-      .format(defineTimeFormat(audio?.duration || 0));
-  }
-
   function defineTimeFormat(duration: number): string {
     return duration > 3600 ? 'HH:mm:ss' : 'mm:ss';
   }
 
+  function formatDuration(): string {
+    return moment
+      .utc(Math.round(audio.duration || 0) * 1000)
+      .format(defineTimeFormat(audio.duration || 0));
+  }
+
   function formatProgress(): string {
     return moment
       .utc(Math.round(trackProgress) * 1000)
-      .format(defineTimeFormat(audio?.duration || 0));
+      .format(defineTimeFormat(audio.duration || 0));
   }
 
   return (
     <ErrorBoundary>
       <div className='AudioPlayerProgress'>
         <Slider
-          containerClassName='AudioPlayerProgress__progressSlider'
-          onChangeCommitted={onTimerChange}
-          onChange={onProgressChange}
-          value={trackProgress}
+          className='AudioPlayerProgress__progressSlider'
+          onValueCommit={onTimerChange}
+          onValueChange={onProgressChange}
+          value={[trackProgress]}
           step={0.1}
-          max={Math.round(audio?.duration || 0)}
+          max={Math.round(audio.duration || 1)}
           min={0}
           disabled={disabled}
+          showLabel={false}
         />
         <div
           className={`AudioPlayerProgress__timer ${
-            audio?.duration && audio.duration > 3600
+            audio.duration && audio.duration > 3600
               ? 'AudioPlayerProgress__timer-long'
               : ''
           }`}
         >
           <Text weight={400} size={12}>
-            {(audio && formatProgress()) || '00:00'}
+            {formatProgress() || '00:00'}
           </Text>
           <Text weight={400} size={12}>
-            /{(audio && formatDuration()) || '00:00'}
+            /{formatDuration() || '00:00'}
           </Text>
         </div>
       </div>

diff --git a/...aimcore/web/ui/src/components/kit_v2/AudioPlayer/AudioPlayerVolume/AudioPlayerVolume.d.ts b/...aimcore/web/ui/src/components/kit_v2/AudioPlayer/AudioPlayerVolume/AudioPlayerVolume.d.ts
@@ -1,3 +1,3 @@
 export interface AudioPlayerVolumeProps {
-  audio: HTMLAudioElement | null;
+  audio: HTMLAudioElement;
 }
diff --git a/...aimcore/web/ui/src/components/kit_v2/AudioPlayer/AudioPlayerVolume/AudioPlayerVolume.scss b/...aimcore/web/ui/src/components/kit_v2/AudioPlayer/AudioPlayerVolume/AudioPlayerVolume.scss
@@ -26,26 +26,14 @@
     height: 1rem;
     display: flex;
     justify-content: center;
+    align-items: center;
     z-index: 2;
-    .Slider {
-      width: 2rem;
-      .MuiSlider {
-        &-root {
-          display: flex;
-          align-items: center;
-          height: 0.375rem;
-          color: $pico-80;
-        }
-        &-rail,
-        &-track {
-          height: 0.125rem;
-        }
-        &-thumb {
-          height: toRem(6px);
-          width: toRem(6px);
-          margin-left: toRem(-4px);
-          margin-top: 0;
-        }
+    .SliderThumb {
+      width: 6px;
+      height: 6px;
+      &:after {
+        top: 1px;
+        left: 1px;
       }
     }
   }

diff --git a/src/aimcore/web/ui/src/components/kit_v2/AudioPlayer/AudioPlayerVolume/AudioPlayerVolume.tsx b/src/aimcore/web/ui/src/components/kit_v2/AudioPlayer/AudioPlayerVolume/AudioPlayerVolume.tsx
@@ -3,8 +3,7 @@ import React from 'react';
 import { IconVolume, IconVolumeOff } from '@tabler/icons-react';
 
 import ErrorBoundary from 'components/ErrorBoundary';
-import { Slider } from 'components/kit';
-import { IconButton } from 'components/kit_v2';
+import { IconButton, Slider } from 'components/kit_v2';
 
 import { AudioPlayerVolumeProps } from './';
 
@@ -13,18 +12,10 @@ import './AudioPlayerVolume.scss';
 function AudioPlayerVolume({ audio }: AudioPlayerVolumeProps) {
   const [volume, setVolume] = React.useState<number>(0.99);
   const [isMuted, setIsMuted] = React.useState<boolean>(false);
-
-  function onVolumeChange(e: any, value: number | number[]): void {
-    setVolume(value as number);
+  function onVolumeChange(values: number[]): void {
+    setVolume(values[0] as number);
     setIsMuted(false);
   }
-
-  React.useEffect(() => {
-    if (audio) {
-      audio.volume = isMuted ? 0 : volume;
-    }
-  }, [volume, audio, isMuted]);
-
   function onVolumeToggle(): void {
     if (isMuted) {
       setIsMuted(false);
@@ -36,6 +27,12 @@ function AudioPlayerVolume({ audio }: AudioPlayerVolumeProps) {
     }
   }
 
+  React.useEffect(() => {
+    if (audio) {
+      audio.volume = isMuted ? 0 : volume;
+    }
+  }, [volume, audio, isMuted]);
+
   return (
     <ErrorBoundary>
       <div className='AudioPlayerVolume'>
@@ -48,12 +45,13 @@ function AudioPlayerVolume({ audio }: AudioPlayerVolumeProps) {
 
         <div className='AudioPlayerVolume__slider'>
           <Slider
-            onChange={onVolumeChange}
-            value={isMuted ? 0 : volume}
+            onValueChange={onVolumeChange}
+            value={[isMuted ? 0 : volume]}
             step={0.01}
-            defaultValue={1}
-            max={0.99}
+            defaultValue={[1]}
+            max={1}
             min={0}
+            showLabel={false}
           />
         </div>
       </div>

diff --git a/src/aimcore/web/ui/src/components/kit_v2/Slider/Slider.d.ts b/src/aimcore/web/ui/src/components/kit_v2/Slider/Slider.d.ts
@@ -7,4 +7,10 @@ export interface ISliderProps extends SliderProps {
    * @optional
    */
   marks?: { label?: string; value: number }[];
+
+  /**
+   * Whether to show the label of the slider.
+   * @default true
+   */
+  showLabel?: boolean;
 }
diff --git a/src/aimcore/web/ui/src/components/kit_v2/Slider/Slider.style.ts b/src/aimcore/web/ui/src/components/kit_v2/Slider/Slider.style.ts
@@ -9,7 +9,6 @@ const SliderRoot = styled(SliderPrimitive.Root, {
   userSelect: 'none',
   touchAction: 'none',
   cursor: 'pointer',
-  zIndex: '$1',
   '&[data-orientation="horizontal"]': {
     height: 10,
   },
@@ -23,6 +22,7 @@ const SliderRoot = styled(SliderPrimitive.Root, {
     '.SliderThumb': {
       pointerEvents: 'none',
       bc: '$background-disable-neutral-light',
+      opacity: 0,
     },
     '.SliderRange': {
       bc: '$background-disable-neutral-light',

diff --git a/src/aimcore/web/ui/src/components/kit_v2/Slider/Slider.tsx b/src/aimcore/web/ui/src/components/kit_v2/Slider/Slider.tsx
@@ -37,6 +37,8 @@ const Slider = React.memo(
     marks = [],
     disabled = false,
     onValueChange,
+    onValueCommit,
+    showLabel = true,
     ...props
   }: ISliderProps): React.FunctionComponentElement<React.ReactNode> => {
     const [sliderValue, setSliderValue] =
@@ -56,16 +58,30 @@ const Slider = React.memo(
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value]);
 
-    const onChange = React.useCallback((value: number[]) => {
-      if (errorMessage) {
-        return;
-      }
-      setSliderValue(value);
-      if (onValueChange) {
-        onValueChange(value);
-      }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    const onChange = React.useCallback(
+      (value: number[]) => {
+        if (errorMessage) {
+          return;
+        }
+        setSliderValue(value);
+        if (onValueChange) {
+          onValueChange(value);
+        }
+      },
+      [errorMessage, onValueChange],
+    );
+
+    const onCommit = React.useCallback(
+      (value: number[]) => {
+        if (errorMessage) {
+          return;
+        }
+        if (onValueCommit) {
+          onValueCommit(value);
+        }
+      },
+      [errorMessage, onValueCommit],
+    );
 
     function getMarkPosition(mark: number) {
       // The mark position is calculated based on the min and max values
@@ -85,6 +101,7 @@ const Slider = React.memo(
           min={min}
           max={max}
           onValueChange={onChange}
+          onValueCommit={onCommit}
           data-testid='slider'
           {...props}
         >
@@ -93,7 +110,7 @@ const Slider = React.memo(
           </SliderTrack>
           {sliderValue.map((value: number, index) => (
             <SliderThumb className='SliderThumb' key={index}>
-              {errorMessage ? null : (
+              {!showLabel || errorMessage ? null : (
                 <SliderLabel className='SliderLabel'>{value}</SliderLabel>
               )}
             </SliderThumb>