Feat/tmpz 775 build button for aduio naration

packages/save-and-share-bar/src/save-and-share-bar.js

@@ -14,6 +14,7 @@ import getTokenisedArticleUrlApi from "./get-tokenised-article-url-api";
 import withTrackEvents from "./tracking/with-track-events";
 import SharingApiUrls from "./constants";
 import styles from "./styles";
+import { ArticleAudio } from "@times-components/ts-components";
 
 import {
   SaveAndShareBarContainer,
@@ -222,7 +223,7 @@ function SaveAndShareBar(props) {
           </Popover>
         </ShareButtonContainer>
       )}
-
+  
       {savingEnabled ? (
         <>
           <UserState
@@ -247,6 +248,9 @@ function SaveAndShareBar(props) {
           )}
         </>
       ) : null}
+      <div id="audio-narration-wrapper" style={{display: "none"}}>
+      <ArticleAudio audioSrc="https://www.kozco.com/tech/LRMonoPhase4.mp3" />
+      </div>
     </SaveAndShareBarContainer>
   );
 }

packages/ts-components/src/components/article-audio/ArticleAudio.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useState, useRef } from 'react';
-import { AudioButton } from './styles';
+import { AudioButton, AudioDuration } from './styles';
 import { AudioPlayer } from '../audio-player-components/AudioPlayer';
 import { PlayIcon, PauseIcon } from '@times-components/icons';
 export interface ArticleAudioProps {
@@ -30,14 +30,17 @@ export const ArticleAudio: FC<ArticleAudioProps> = ({ audioSrc }) => {
 
     if (audioState === 'playing') {
       setAudioState('paused');
+      setisAudioPlayerVisible(false);
     } else {
       setAudioState('playing');
     }
   };
 
   const hidePlayer = () => {
     setisAudioPlayerVisible(false);
+    setAudioState('not-started');
   };
+
 
   return (
     <div>
@@ -46,11 +49,13 @@ export const ArticleAudio: FC<ArticleAudioProps> = ({ audioSrc }) => {
         src={audioSrc}
         onLoadedMetadata={handleLoadedMetadata}
         preload="metadata"
+
       />
       <AudioButton
         onClick={handlePlayPause}
+        className='article-audio-button'
         style={{
-          backgroundColor: audioState !== 'not-started' ? '#1D1D1B' : 'unset',
+          backgroundColor: audioState !== 'not-started' ? '#1D1D1B' : "#fff",
           color: audioState === 'not-started' ? '#333' : '#fff'
         }}
       >
@@ -67,25 +72,29 @@ export const ArticleAudio: FC<ArticleAudioProps> = ({ audioSrc }) => {
             <PlayIcon width={16} height={16} /> Listen
           </>
         )}
-        <span
+        <AudioDuration
           style={{
             color: audioState === 'not-started' ? '#696969' : '#fff'
           }}
         >
           {' '}
           {duration} min
-        </span>
+        </AudioDuration>
       </AudioButton>
-      {isAudioPlayerVisible && (
+        <div data-testid="audioPlayerWrapper" style={{
+
+        display: !isAudioPlayerVisible ? 'none' : 'block'
+      }}>
         <AudioPlayer
           src={audioSrc}
           isPlayingProp={audioState === 'playing'}
           onPlay={() => setAudioState('playing')}
           onPause={() => setAudioState('paused')}
-          onEnded={() => setAudioState('not-started')}
+          onEnded={() => hidePlayer()}
           onClose={() => hidePlayer()}
         />
-      )}
+        </div>
+
     </div>
   );
 };

packages/ts-components/src/components/article-audio/__tests__/ArticleAudio.test.tsx

@@ -8,16 +8,21 @@ jest.mock('../styles', () => ({
     <button data-testid="audio-button" onClick={onClick} style={style}>
       {children}
     </button>
+  ),
+  AudioDuration: ({ children, style }: any) => (
+    <span data-testid="audio-duration" style={style}>
+      {children}
+    </span>
   )
 }));
 
 jest.mock('@times-components/icons', () => ({
   __esModule: true,
-  PlayIcon: ({ color }: any) => (
-    <svg data-testid="play-icon" style={{ color: color || '#333' }} />
+  PlayIcon: ({ fill }: any) => (
+    <svg data-testid="play-icon" style={{ fill: fill || '#333' }} />
   ),
-  PauseIcon: ({ color }: any) => (
-    <svg data-testid="pause-icon" style={{ color: color || '#333' }} />
+  PauseIcon: ({ fill }: any) => (
+    <svg data-testid="pause-icon" style={{ fill: fill || '#333' }} />
   )
 }));
 
@@ -60,133 +65,128 @@ describe('ArticleAudio', () => {
     const audioButton = getByTestId('audio-button');
     expect(audioButton).toBeInTheDocument();
 
-    expect(audioButton.style.backgroundColor).toBe('');
     expect(audioButton).toHaveStyle('color: #333');
+    expect(audioButton).toHaveStyle('background-color: #fff');
+
 
     // The initial state should display 'Listen' and the duration
     expect(getByText('Listen')).toBeInTheDocument();
     expect(getByText('3 min')).toBeInTheDocument();
 
-    // Since audioState is 'not-started', duration color should be '#696969'
-    const durationSpan = getByText('3 min');
+    // Verify duration color when 'not-started'
+    const durationSpan = getByTestId('audio-duration');
     expect(durationSpan).toHaveStyle('color: #696969');
   });
 
-  test('hides AudioPlayer when close button is clicked (using mocked AudioPlayer)', () => {
-    const { getByTestId, queryByTestId, container, getByText } = render(
+  test('handles AudioPlayer visibility toggling', () => {
+    const { getByTestId, queryByTestId, container } = render(
       <ArticleAudio audioSrc="https://www.kozco.com/tech/LRMonoPhase4.mp3" />
     );
-
-    // Trigger the 'loadedmetadata' event to set the duration
+
     const audio = container.querySelector('audio') as HTMLAudioElement;
     act(() => {
       fireEvent.loadedMetadata(audio);
     });
-
-    // Initially, the AudioPlayer should not be visible
-    expect(queryByTestId('audio-player')).not.toBeInTheDocument();
-
-    // Click the audio button to start playback
+
+    const audioPlayer = queryByTestId('audioPlayerWrapper');
+
+    // Verify the player is hidden initially
+    expect(audioPlayer).toBeInTheDocument();
+//    expect(audioPlayer).toHaveStyle('opacity: 0');
+    expect(audioPlayer).toHaveStyle('display: none');
+
+    // Click to show the player
     const audioButton = getByTestId('audio-button');
     fireEvent.click(audioButton);
-
-    // The mocked AudioPlayer should now be visible
-    expect(getByTestId('audio-player')).toBeInTheDocument();
-
-    // Use the mocked Close button inside the AudioPlayer to close it
-    const closeButton = getByText('Close');
-    fireEvent.click(closeButton);
-
-    // The AudioPlayer should no longer be visible
-    expect(queryByTestId('audio-player')).not.toBeInTheDocument();
+
+    // Verify the player is now visible
+   // expect(audioPlayer).toHaveStyle('opacity: 1');
+    expect(audioPlayer).toHaveStyle('visibility: visible');
   });
 
-  test('handles play and pause', () => {
+  test('handles play and pause state transitions correctly', () => {
     const { getByTestId, getByText, container } = render(
       <ArticleAudio audioSrc="https://www.kozco.com/tech/LRMonoPhase4.mp3" />
     );
 
-    // Trigger the 'loadedmetadata' event to set the duration
+    // Trigger the 'loadedmetadata' event
     const audio = container.querySelector('audio') as HTMLAudioElement;
     act(() => {
       fireEvent.loadedMetadata(audio);
     });
 
     const audioButton = getByTestId('audio-button');
 
-    // Simulate clicking the play button
+    // Click to play
     fireEvent.click(audioButton);
-
-    // Now, audioState should be 'playing'
+    expect(getByText('Playing')).toBeInTheDocument();
     expect(audioButton).toHaveStyle('background-color: #1D1D1B');
     expect(audioButton).toHaveStyle('color: #fff');
-    expect(getByText('Playing')).toBeInTheDocument();
 
-    // Since audioState is 'playing', duration color should be '#fff'
-    const durationSpan = getByText('3 min');
+    // Duration color should change to white
+    const durationSpan = getByTestId('audio-duration');
     expect(durationSpan).toHaveStyle('color: #fff');
 
-    // Simulate clicking the pause button
+    // Click to pause
     fireEvent.click(audioButton);
-
     expect(getByText('Paused')).toBeInTheDocument();
-    expect(audioButton).toHaveStyle('background-color: #1D1D1B');
-    expect(audioButton).toHaveStyle('color: #fff');
 
-    // Simulate clicking the play button again
+    // Click to play again
     fireEvent.click(audioButton);
-
     expect(getByText('Playing')).toBeInTheDocument();
   });
 
-  test('shows AudioPlayer when audio is played', () => {
-    const { getByTestId, queryByTestId, container } = render(
-      <ArticleAudio audioSrc="https://www.kozco.com/tech/LRMonoPhase4.mp3" />
-    );
-
-    // Trigger the 'loadedmetadata' event to set the duration
-    const audio = container.querySelector('audio') as HTMLAudioElement;
-    act(() => {
-      fireEvent.loadedMetadata(audio);
-    });
-
-    expect(queryByTestId('audio-player')).not.toBeInTheDocument();
-
-    const audioButton = getByTestId('audio-button');
-    fireEvent.click(audioButton);
-
-    expect(getByTestId('audio-player')).toBeInTheDocument();
-  });
-
-  test('updates audioState based on AudioPlayer callbacks', () => {
+  test('updates audioState via AudioPlayer callbacks', () => {
     const { getByTestId, getByText, container } = render(
       <ArticleAudio audioSrc="https://www.kozco.com/tech/LRMonoPhase4.mp3" />
     );
 
-    // Trigger the 'loadedmetadata' event to set the duration
+    // Trigger the 'loadedmetadata' event
     const audio = container.querySelector('audio') as HTMLAudioElement;
     act(() => {
       fireEvent.loadedMetadata(audio);
     });
 
     const audioButton = getByTestId('audio-button');
-    fireEvent.click(audioButton); // Start playing
-
-    expect(getByText('Playing')).toBeInTheDocument();
+    fireEvent.click(audioButton); // Play
 
     const pauseButton = getByText('Pause');
-    fireEvent.click(pauseButton);
-
+    fireEvent.click(pauseButton); // Pause
     expect(getByText('Paused')).toBeInTheDocument();
 
     const playButton = getByText('Play');
-    fireEvent.click(playButton);
-
+    fireEvent.click(playButton); // Play again
     expect(getByText('Playing')).toBeInTheDocument();
 
     const endedButton = getByText('Ended');
-    fireEvent.click(endedButton);
-
+    fireEvent.click(endedButton); // Simulate end of playback
     expect(getByText('Listen')).toBeInTheDocument();
   });
 });
+test('hides AudioPlayer when close button is clicked', () => {
+  const { getByTestId, getByText, container } = render(
+    <ArticleAudio audioSrc="https://www.kozco.com/tech/LRMonoPhase4.mp3" />
+  );
+
+  // Trigger 'loadedmetadata' event to initialize duration
+  const audio = container.querySelector('audio') as HTMLAudioElement;
+  act(() => {
+    fireEvent.loadedMetadata(audio);
+  });
+
+  // Click the audio button to show the AudioPlayer
+  const audioButton = getByTestId('audio-button');
+  fireEvent.click(audioButton);
+
+  // Verify that the AudioPlayer is now visible
+  const audioPlayer = getByTestId('audioPlayerWrapper');
+  expect(audioPlayer).toHaveStyle('display: block');
+
+
+  // Simulate clicking the close button inside the AudioPlayer
+  const closeButton = getByText('Close');
+  fireEvent.click(closeButton);
+
+  // Verify that the AudioPlayer is hidden again
+  expect(audioPlayer).toHaveStyle('display: none');
+});

packages/ts-components/src/components/article-audio/__tests__/Styles.test.tsx

@@ -14,7 +14,7 @@ describe('AudioButton', () => {
 
     expect(button).toHaveStyleRule('background-color', 'unset');
     expect(button).toHaveStyleRule('border-radius', '0');
-    expect(button).toHaveStyleRule('padding', '7px 11px');
+    expect(button).toHaveStyleRule('padding', '6px 11px');
     expect(button).toHaveStyleRule('border', '1px solid #333333');
     expect(button).toHaveStyleRule('display', 'flex');
     expect(button).toHaveStyleRule('align-items', 'center');

packages/ts-components/src/components/article-audio/styles.ts

@@ -1,10 +1,18 @@
 import styled from 'styled-components';
-import { colours } from '@times-components/ts-styleguide';
+import { colours, breakpoints } from '@times-components/ts-styleguide';
 
+export const AudioDuration = styled.span`
+  display: none;
+
+  @media (min-width: ${breakpoints.small}px) {
+    display: block
+  }
+
+`;
 export const AudioButton = styled.button`
   background-color: unset;
   border-radius: 0;
-  padding: 7px 11px;
+  padding: 6px 11px;
   border: 1px solid ${colours.functional.primary};
   display: flex;
   align-items: center;