fix: adapt audio recording wave form to the available space (#2435)

Author: MartinCupela

src/components/Attachment/__tests__/VoiceRecording.test.js

@@ -5,6 +5,7 @@ import '@testing-library/jest-dom';
 import { generateVoiceRecordingAttachment } from '../../../mock-builders';
 import { VoiceRecording, VoiceRecordingPlayer } from '../VoiceRecording';
 import { ChannelActionProvider } from '../../../context';
+import { ResizeObserverMock } from '../../../mock-builders/browser';
 
 const AUDIO_RECORDING_PLAYER_TEST_ID = 'voice-recording-widget';
 const QUOTED_AUDIO_RECORDING_TEST_ID = 'quoted-voice-recording-widget';
@@ -13,6 +14,10 @@ const FALLBACK_TITLE = 'Voice message';
 
 const attachment = generateVoiceRecordingAttachment();
 
+window.ResizeObserver = ResizeObserverMock;
+
+jest.spyOn(HTMLDivElement.prototype, 'getBoundingClientRect').mockReturnValue({ width: 120 });
+
 const clickPlay = async () => {
   await act(async () => {
     await fireEvent.click(screen.queryByTestId('play-audio'));

src/components/Attachment/__tests__/WaveProgressBar.test.js

@@ -1,25 +1,113 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { WaveProgressBar } from '../components';
+import { ResizeObserverMock } from '../../../mock-builders/browser';
 
 jest.spyOn(console, 'warn').mockImplementation();
 const originalSample = Array.from({ length: 10 }, (_, i) => i);
 
+const BAR_ROOT_TEST_ID = 'wave-progress-bar-track';
 const PROGRESS_INDICATOR_TEST_ID = 'wave-progress-bar-progress-indicator';
+const AMPLITUDE_BAR_TEST_ID = 'amplitude-bar';
+window.ResizeObserver = ResizeObserverMock;
+
+const getBoundingClientRect = jest
+  .spyOn(HTMLDivElement.prototype, 'getBoundingClientRect')
+  .mockReturnValue({ width: 120 });
 
 describe('WaveProgressBar', () => {
+  beforeEach(() => {
+    ResizeObserverMock.observers = [];
+  });
+
   it('is not rendered if waveform data is missing', () => {
     render(<WaveProgressBar seek={jest.fn()} waveformData={[]} />);
-    expect(screen.queryByTestId('wave-progress-bar-track')).not.toBeInTheDocument();
+    expect(screen.queryByTestId(BAR_ROOT_TEST_ID)).not.toBeInTheDocument();
+  });
+
+  it('is not rendered if no space available', () => {
+    getBoundingClientRect.mockReturnValueOnce({ width: 0 });
+    render(<WaveProgressBar amplitudesCount={5} seek={jest.fn()} waveformData={originalSample} />);
+    expect(screen.queryByTestId(BAR_ROOT_TEST_ID)).not.toBeInTheDocument();
+  });
+
+  it('renders with default number of bars', () => {
+    render(<WaveProgressBar seek={jest.fn()} waveformData={originalSample} />);
+    const root = screen.getByTestId(BAR_ROOT_TEST_ID);
+    expect(root.style.getPropertyValue('--str-chat__voice-recording-amplitude-bar-gap-width')).toBe(
+      '1px',
+    );
+    const bars = screen.getAllByTestId(AMPLITUDE_BAR_TEST_ID);
+    expect(
+      bars.every(
+        (b) =>
+          b.style.getPropertyValue('--str-chat__voice-recording-amplitude-bar-width') === '2px',
+      ),
+    ).toBeTruthy();
+    expect(screen.getAllByTestId(AMPLITUDE_BAR_TEST_ID)).toHaveLength(40);
   });
+
+  it('adjusts the number of bars and gaps based on the custom ratio', () => {
+    render(
+      <WaveProgressBar
+        relativeAmplitudeBarWidth={3}
+        relativeAmplitudeGap={5}
+        seek={jest.fn()}
+        waveformData={originalSample}
+      />,
+    );
+    const root = screen.getByTestId(BAR_ROOT_TEST_ID);
+    expect(root.style.getPropertyValue('--str-chat__voice-recording-amplitude-bar-gap-width')).toBe(
+      '5px',
+    );
+    const bars = screen.getAllByTestId(AMPLITUDE_BAR_TEST_ID);
+    expect(
+      bars.every(
+        (b) =>
+          b.style.getPropertyValue('--str-chat__voice-recording-amplitude-bar-width') === '3px',
+      ),
+    ).toBeTruthy();
+    expect(bars).toHaveLength(15);
+  });
+
+  it('recalculates the number of bars on root resize', async () => {
+    render(<WaveProgressBar seek={jest.fn()} waveformData={originalSample} />);
+    expect(ResizeObserverMock.observers).toHaveLength(1);
+    const activeObserver = ResizeObserver.observers[0];
+    expect(activeObserver.active).toBeTruthy();
+    await act(() => {
+      activeObserver.cb([{ contentRect: { width: 21 } }]);
+    });
+    const root = screen.getByTestId(BAR_ROOT_TEST_ID);
+    expect(root.style.getPropertyValue('--str-chat__voice-recording-amplitude-bar-gap-width')).toBe(
+      '1px',
+    );
+    const bars = screen.getAllByTestId(AMPLITUDE_BAR_TEST_ID);
+    expect(
+      bars.every(
+        (b) =>
+          b.style.getPropertyValue('--str-chat__voice-recording-amplitude-bar-width') === '2px',
+      ),
+    ).toBeTruthy();
+    expect(screen.getAllByTestId(AMPLITUDE_BAR_TEST_ID)).toHaveLength(7);
+  });
+
+  it('does not recalculate the number of bars on root resize if ResizeObserver is unsupported', () => {
+    window.ResizeObserver = undefined;
+    render(<WaveProgressBar seek={jest.fn()} waveformData={originalSample} />);
+    expect(ResizeObserverMock.observers).toHaveLength(0);
+    window.ResizeObserver = ResizeObserverMock;
+  });
+
   it('is rendered with zero progress by default if waveform data is available', () => {
     const { container } = render(
       <WaveProgressBar amplitudesCount={5} seek={jest.fn()} waveformData={originalSample} />,
     );
     expect(container).toMatchSnapshot();
-    expect(screen.queryByTestId(PROGRESS_INDICATOR_TEST_ID)).toBeInTheDocument();
+    expect(screen.getByTestId(PROGRESS_INDICATOR_TEST_ID)).toBeInTheDocument();
   });
+
   it('is rendered with highlighted bars with non-zero progress', () => {
     const { container } = render(
       <WaveProgressBar

src/components/Attachment/__tests__/__snapshots__/WaveProgressBar.test.js.snap

@@ -6,31 +6,32 @@ exports[`WaveProgressBar is rendered with zero progress by default if waveform d
     class="str-chat__wave-progress-bar__track"
     data-testid="wave-progress-bar-track"
     role="progressbar"
+    style="--str-chat__voice-recording-amplitude-bar-gap-width: 8px;"
   >
     <div
       class="str-chat__wave-progress-bar__amplitude-bar"
       data-testid="amplitude-bar"
-      style="--str-chat__wave-progress-bar__amplitude-bar-height: 0%;"
+      style="--str-chat__voice-recording-amplitude-bar-width: 16px; --str-chat__wave-progress-bar__amplitude-bar-height: 0%;"
     />
     <div
       class="str-chat__wave-progress-bar__amplitude-bar"
       data-testid="amplitude-bar"
-      style="--str-chat__wave-progress-bar__amplitude-bar-height: 200%;"
+      style="--str-chat__voice-recording-amplitude-bar-width: 16px; --str-chat__wave-progress-bar__amplitude-bar-height: 200%;"
     />
     <div
       class="str-chat__wave-progress-bar__amplitude-bar"
       data-testid="amplitude-bar"
-      style="--str-chat__wave-progress-bar__amplitude-bar-height: 500%;"
+      style="--str-chat__voice-recording-amplitude-bar-width: 16px; --str-chat__wave-progress-bar__amplitude-bar-height: 500%;"
     />
     <div
       class="str-chat__wave-progress-bar__amplitude-bar"
       data-testid="amplitude-bar"
-      style="--str-chat__wave-progress-bar__amplitude-bar-height: 700%;"
+      style="--str-chat__voice-recording-amplitude-bar-width: 16px; --str-chat__wave-progress-bar__amplitude-bar-height: 700%;"
     />
     <div
       class="str-chat__wave-progress-bar__amplitude-bar"
       data-testid="amplitude-bar"
-      style="--str-chat__wave-progress-bar__amplitude-bar-height: 900%;"
+      style="--str-chat__voice-recording-amplitude-bar-width: 16px; --str-chat__wave-progress-bar__amplitude-bar-height: 900%;"
     />
     <div
       class="str-chat__wave-progress-bar__progress-indicator"

src/components/Attachment/components/WaveProgressBar.tsx

@@ -1,7 +1,9 @@
+import throttle from 'lodash.throttle';
 import React, {
   PointerEventHandler,
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -19,17 +21,27 @@ type WaveProgressBarProps = {
   amplitudesCount?: number;
   /** Progress expressed in fractional number value btw 0 and 100. */
   progress?: number;
+  relativeAmplitudeBarWidth?: number;
+  relativeAmplitudeGap?: number;
 };
 
 export const WaveProgressBar = ({
   amplitudesCount = 40,
   progress = 0,
+  relativeAmplitudeBarWidth = 2,
+  relativeAmplitudeGap = 1,
   seek,
   waveformData,
 }: WaveProgressBarProps) => {
   const [progressIndicator, setProgressIndicator] = useState<HTMLDivElement | null>(null);
   const isDragging = useRef(false);
-  const rootRef = useRef<HTMLDivElement | null>(null);
+  const [root, setRoot] = useState<HTMLDivElement | null>(null);
+  const [trackAxisX, setTrackAxisX] = useState<{
+    barCount: number;
+    barWidth: number;
+    gap: number;
+  }>();
+  const lastRootWidth = useRef<number>();
 
   const handleDragStart: PointerEventHandler<HTMLDivElement> = (e) => {
     e.preventDefault();
@@ -51,10 +63,33 @@ export const WaveProgressBar = ({
     progressIndicator.style.removeProperty('cursor');
   }, [progressIndicator]);
 
-  const resampledWaveformData = useMemo(() => resampleWaveformData(waveformData, amplitudesCount), [
-    amplitudesCount,
-    waveformData,
-  ]);
+  const getTrackAxisX = useMemo(
+    () =>
+      throttle((rootWidth: number) => {
+        if (rootWidth === lastRootWidth.current) return;
+        lastRootWidth.current = rootWidth;
+        const possibleAmpCount = Math.floor(
+          rootWidth / (relativeAmplitudeGap + relativeAmplitudeBarWidth),
+        );
+        const tooManyAmplitudesToRender = possibleAmpCount < amplitudesCount;
+        const barCount = tooManyAmplitudesToRender ? possibleAmpCount : amplitudesCount;
+        const amplitudeBarWidthToGapRatio =
+          relativeAmplitudeBarWidth / (relativeAmplitudeBarWidth + relativeAmplitudeGap);
+        const barWidth = barCount && (rootWidth / barCount) * amplitudeBarWidthToGapRatio;
+
+        setTrackAxisX({
+          barCount,
+          barWidth,
+          gap: barWidth * (relativeAmplitudeGap / relativeAmplitudeBarWidth),
+        });
+      }, 1),
+    [relativeAmplitudeBarWidth, relativeAmplitudeGap, amplitudesCount],
+  );
+
+  const resampledWaveformData = useMemo(
+    () => (trackAxisX ? resampleWaveformData(waveformData, trackAxisX.barCount) : []),
+    [trackAxisX, waveformData],
+  );
 
   useEffect(() => {
     document.addEventListener('pointerup', handleDragStop);
@@ -63,7 +98,25 @@ export const WaveProgressBar = ({
     };
   }, [handleDragStop]);
 
-  if (!waveformData.length) return null;
+  useEffect(() => {
+    if (!root || typeof ResizeObserver === 'undefined') return;
+    const observer = new ResizeObserver(([entry]) => {
+      getTrackAxisX(entry.contentRect.width);
+    });
+    observer.observe(root);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [getTrackAxisX, root]);
+
+  useLayoutEffect(() => {
+    if (!root) return;
+    const { width: rootWidth } = root.getBoundingClientRect();
+    getTrackAxisX(rootWidth);
+  }, [getTrackAxisX, root]);
+
+  if (!waveformData.length || trackAxisX?.barCount === 0) return null;
 
   return (
     <div
@@ -73,8 +126,13 @@ export const WaveProgressBar = ({
       onPointerDown={handleDragStart}
       onPointerMove={handleDrag}
       onPointerUp={handleDragStop}
-      ref={rootRef}
+      ref={setRoot}
       role='progressbar'
+      style={
+        {
+          '--str-chat__voice-recording-amplitude-bar-gap-width': trackAxisX?.gap + 'px',
+        } as React.CSSProperties
+      }
     >
       {resampledWaveformData.map((amplitude, i) => (
         <div
@@ -86,6 +144,7 @@ export const WaveProgressBar = ({
           key={`amplitude-${i}`}
           style={
             {
+              '--str-chat__voice-recording-amplitude-bar-width': trackAxisX?.barWidth + 'px',
               '--str-chat__wave-progress-bar__amplitude-bar-height': amplitude
                 ? amplitude * 100 + '%'
                 : '0%',

src/components/MediaRecorder/AudioRecorder/__tests__/AudioRecorder.test.js

@@ -27,6 +27,7 @@ import {
   AudioContextMock,
   EventEmitterMock,
   MediaRecorderMock,
+  ResizeObserverMock,
 } from '../../../../mock-builders/browser';
 import { generateDataavailableEvent } from '../../../../mock-builders/browser/events/dataavailable';
 import { AudioRecorder } from '../AudioRecorder';
@@ -55,6 +56,10 @@ const DEFAULT_RENDER_PARAMS = {
   componentCtx: {},
 };
 
+window.ResizeObserver = ResizeObserverMock;
+
+jest.spyOn(HTMLDivElement.prototype, 'getBoundingClientRect').mockReturnValue({ width: 120 });
+
 const renderComponent = async ({
   channelActionCtx,
   channelStateCtx,