Merge pull request #238 from newscorp-ghfb/feat/PPDSC-1961-initial-st…

…art-point-audioPlayer feat(PPDSC-2182): added initialTime prop and test
newscorp-ghfb · Jun 30, 2022 · 6518393 · 6518393
2 parents 4407a7f + f6cfed9
commit 6518393
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 3 deletions.
diff --git a/src/audio-player-composable/__tests__/__snapshots__/audio-player-composable.test.tsx.snap b/src/audio-player-composable/__tests__/__snapshots__/audio-player-composable.test.tsx.snap
@@ -806,6 +806,7 @@ exports[`Audio Player Composable renders with TimeDisplay label overrides 1`] =
     </button>
     <span
       class="emotion-4"
+      data-testid="audio-player-time-display"
     >
       00:00/00:00 
     </span>
@@ -2357,6 +2358,7 @@ exports[`Audio Player Composable seekBar should renders with overrides 1`] = `
     </button>
     <span
       class="emotion-9"
+      data-testid="audio-player-time-display"
     >
       00:00/00:00 
     </span>

diff --git a/src/audio-player-composable/__tests__/audio-player-composable.stories.tsx b/src/audio-player-composable/__tests__/audio-player-composable.stories.tsx
@@ -467,6 +467,58 @@ export const AudioSubComponents = () => (
 );
 AudioSubComponents.storyName = 'audio-sub-components';
 
+export const AudioPlayerWithInitialProps = () => {
+  const breakpointKey = useBreakpointKey();
+  return (
+    <AudioPlayerComposable src={AUDIO_SRC} initialTime={50} initialVolume={0.2}>
+      <GridLayout
+        columns={{
+          xs: '1fr auto auto auto 1fr',
+          md: '50px 1fr auto auto auto 1fr 50px',
+        }}
+        rowGap="space040"
+        columnGap="space040"
+        areas={{
+          xs: fullAudioPlayerAreasMobile,
+          md: fullAudioPlayerAreasDesktop,
+        }}
+      >
+        {Areas => (
+          <>
+            <Areas.Play alignSelf="center">
+              <AudioPlayerPlayPauseButton />
+            </Areas.Play>
+
+            <Areas.Volume alignSelf="center" justifySelf="start">
+              <AudioPlayerVolumeControl
+                collapsed={breakpointKey === 'xs' || breakpointKey === 'sm'}
+              />
+            </Areas.Volume>
+
+            <Areas.SeekBar>
+              <AudioPlayerSeekBar />
+            </Areas.SeekBar>
+
+            <Areas.CurrentTime>
+              <AudioPlayerTimeDisplay
+                format={({currentTime}) => calculateTime(currentTime)}
+              />
+            </Areas.CurrentTime>
+
+            <Areas.TotalTime justifySelf="end">
+              <AudioPlayerTimeDisplay
+                format={({duration}) => calculateTime(duration)}
+              />
+            </Areas.TotalTime>
+          </>
+        )}
+      </GridLayout>
+    </AudioPlayerComposable>
+  );
+};
+
+AudioPlayerWithInitialProps.storyName = 'audio-player-with-initial-props';
+
 export const AudioPlayerOverrides = () => (
   <ThemeProvider theme={myCustomTheme}>
     <StorybookSubHeading>Audio player with overrides</StorybookSubHeading>

diff --git a/src/audio-player-composable/__tests__/audio-player-composable.test.tsx b/src/audio-player-composable/__tests__/audio-player-composable.test.tsx
@@ -77,6 +77,17 @@ const AudioPropsAndVolumeControlWithInitialVolumeCollapsed: AudioPlayerComposabl
   ),
 };
 
+const AudioPropsWithInitialTime: AudioPlayerComposableProps = {
+  initialTime: 50,
+  src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
+  children: (
+    <>
+      <AudioPlayerTimeDisplay />
+      <AudioPlayerSeekBar />
+    </>
+  ),
+};
+
 const AudioPropsAndVolumeControlVertical: AudioPlayerComposableProps = {
   src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
   initialVolume: 0.2,
@@ -902,6 +913,25 @@ describe('Audio Player Composable', () => {
       expect(asFragment()).toMatchSnapshot();
     });
   });
+  describe('initialTime prop', () => {
+    it('should render correctly with initial time', () => {
+      const {getByTestId} = renderWithTheme(
+        AudioPlayerComposable,
+        AudioPropsWithInitialTime,
+      );
+
+      const audioElement = getByTestId('audio-element') as HTMLAudioElement;
+      const audioTimeLabel = getByTestId(
+        'audio-player-time-display',
+      ) as HTMLParagraphElement;
+
+      const seekBar = getByTestId('audio-slider-track') as HTMLDivElement;
+      fireEvent.timeUpdate(audioElement);
+      expect(audioElement.currentTime).toEqual(50);
+      expect(audioTimeLabel.innerHTML).toEqual('00:50/00:00 ');
+      expect(seekBar.getAttribute('values')).toEqual('50');
+    });
+  });
 
   describe('Instrumentation tests', () => {
     test('should raise "end" event when the track has ended', () => {

diff --git a/src/audio-player-composable/audio-functions.ts b/src/audio-player-composable/audio-functions.ts
@@ -223,6 +223,7 @@ export const useAudioFunctions = ({
   const onTimeUpdate = useCallback(
     ({target}: SyntheticEvent<HTMLAudioElement, Event>) => {
       const eventTime = Math.floor((target as HTMLAudioElement).currentTime);
+
       if (currentTimeRef.current !== eventTime) {
         setCurrentTime(eventTime);
 

diff --git a/src/audio-player-composable/audio-player-composable.tsx b/src/audio-player-composable/audio-player-composable.tsx
@@ -47,6 +47,7 @@ export const AudioPlayerComposable = ({
   ariaLandmark,
   keyboardShortcuts: keyboardShortcutsProp,
   initialVolume = 0.7,
+  initialTime = 0,
   ...props
 }: AudioPlayerComposableProps) => {
   const currentTimeRef = useRef(0);
@@ -71,9 +72,15 @@ export const AudioPlayerComposable = ({
   });
 
   useEffect(() => {
+    // On render onTimeUpdate will be fired and initialTime will be set as a value for currentTime state.
+    // I can't set this one to the setCurrentTime state directly as the audioElement time
+    // will still be 0, currentTime will be overridden to 0 and the audio will start from 0
+    if (audioRef && audioRef.current) {
+      audioRef.current.currentTime = initialTime;
+    }
     setCurrentTime(0);
     setDisplayDuration(0);
-  }, [src]);
+  }, [src, initialTime]);
 
   const {
     audioEvents,
@@ -224,7 +231,7 @@ export const AudioPlayerComposable = ({
       initialVolume,
       muteButtonSize,
     }),
-    [volume, onChangeVolumeSlider],
+    [volume, initialVolume, onChangeVolumeSlider],
   );
 
   const getSkipPreviousButtonProps = useCallback(

diff --git a/src/audio-player-composable/components/time-display/time-display.tsx b/src/audio-player-composable/components/time-display/time-display.tsx
@@ -22,7 +22,12 @@ const ThemelessTimeDisplay = ({
   const {format: defaultFormat, currentTime, duration} = getTimeDisplayProps!();
   const formatFn = typeof format === 'function' ? format : defaultFormat;
   return (
-    <StyledTextBlock as="span" overrides={overrides} {...restProps}>
+    <StyledTextBlock
+      as="span"
+      overrides={overrides}
+      data-testid="audio-player-time-display"
+      {...restProps}
+    >
       {formatFn({currentTime, duration})}
     </StyledTextBlock>
   );

diff --git a/src/audio-player-composable/types.ts b/src/audio-player-composable/types.ts
@@ -103,6 +103,7 @@ export interface AudioPlayerComposableProps
     jumpToEnd: string | string[];
   };
   initialVolume?: 0 | 0.1 | 0.2 | 0.3 | 0.4 | 0.5 | 0.6 | 0.7 | 0.8 | 0.9 | 1;
+  initialTime?: number;
 }
 
 export enum AudioEvents {