@times-components/ts-components 1.112.0 → 1.112.1

package/src/components/article-audio/ArticleAudio.stories.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { ArticleAudio } from './ArticleAudio';
+
+storiesOf('Typescript Component/Article Audio', module).add(
+  'Article Audio',
+  () => {
+    return (
+      <div style={{ padding: '10px' }}>
+        <ArticleAudio audioSrc="https://www.kozco.com/tech/LRMonoPhase4.mp3" />
+      </div>
+    );
+  }
+);

package/src/components/article-audio/ArticleAudio.tsx

@@ -0,0 +1,93 @@
+import React, { FC, useState, useRef } from 'react';
+import { AudioButton } from './styles';
+import { AudioPlayer } from '../audio-player-components/AudioPlayer';
+import { PlayIcon, PauseIcon } from '@times-components/icons';
+export interface ArticleAudioProps {
+  audioSrc: string;
+}
+
+export const ArticleAudio: FC<ArticleAudioProps> = ({ audioSrc }) => {
+  const [audioState, setAudioState] = useState<
+    'not-started' | 'playing' | 'paused'
+  >('not-started');
+  const [isAudioPlayerVisible, setisAudioPlayerVisible] = useState<boolean>(
+    false
+  );
+  const [duration, setDuration] = useState<string | null>(null);
+
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+
+  const handleLoadedMetadata = () => {
+    if (audioRef.current) {
+      const totalSeconds = Math.floor(audioRef.current.duration);
+      const minutes = Math.floor(totalSeconds / 60) + 1;
+      setDuration(`${minutes}`);
+    }
+  };
+
+  const handlePlayPause = () => {
+    setisAudioPlayerVisible(true);
+
+    if (audioState === 'playing') {
+      setAudioState('paused');
+    } else {
+      setAudioState('playing');
+    }
+  };
+
+  const hidePlayer = () => {
+    setisAudioPlayerVisible(false);
+  };
+
+  return (
+    <div>
+      <audio
+        ref={audioRef}
+        src={audioSrc}
+        onLoadedMetadata={handleLoadedMetadata}
+        preload="metadata"
+      />
+      <AudioButton
+        onClick={handlePlayPause}
+        style={{
+          backgroundColor: audioState !== 'not-started' ? '#1D1D1B' : 'unset',
+          color: audioState === 'not-started' ? '#333' : '#fff'
+        }}
+      >
+        {audioState === 'playing' ? (
+          <>
+            <PauseIcon width={16} height={16} fill="#fff" /> Playing
+          </>
+        ) : audioState === 'paused' ? (
+          <>
+            <PlayIcon width={16} height={16} fill="#fff" /> Paused
+          </>
+        ) : (
+          <>
+            <PlayIcon width={16} height={16} /> Listen
+          </>
+        )}
+        <span
+          style={{
+            color: audioState === 'not-started' ? '#696969' : '#fff'
+          }}
+        >
+          {' '}
+          {duration} min
+        </span>
+      </AudioButton>
+      {isAudioPlayerVisible && (
+        <AudioPlayer
+          src={audioSrc}
+          isPlayingProp={audioState === 'playing'}
+          onPlay={() => setAudioState('playing')}
+          onPause={() => setAudioState('paused')}
+          onEnded={() => setAudioState('not-started')}
+          onClose={() => hidePlayer()}
+        />
+      )}
+    </div>
+  );
+};
+
+export default ArticleAudio;

package/src/components/article-audio/__tests__/ArticleAudio.test.tsx

@@ -0,0 +1,192 @@
+import React from 'react';
+import { render, fireEvent, act } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { ArticleAudio } from '../ArticleAudio';
+
+jest.mock('../styles', () => ({
+  AudioButton: ({ children, onClick, style }: any) => (
+    <button data-testid="audio-button" onClick={onClick} style={style}>
+      {children}
+    </button>
+  )
+}));
+
+jest.mock('@times-components/icons', () => ({
+  __esModule: true,
+  PlayIcon: ({ color }: any) => (
+    <svg data-testid="play-icon" style={{ color: color || '#333' }} />
+  ),
+  PauseIcon: ({ color }: any) => (
+    <svg data-testid="pause-icon" style={{ color: color || '#333' }} />
+  )
+}));
+
+jest.mock('../../audio-player-components/AudioPlayer', () => ({
+  AudioPlayer: ({ onPlay, onPause, onEnded, onClose }: any) => (
+    <div data-testid="audio-player">
+      <button onClick={onPlay}>Play</button>
+      <button onClick={onPause}>Pause</button>
+      <button onClick={onEnded}>Ended</button>
+      <button onClick={onClose}>Close</button>
+    </div>
+  )
+}));
+
+describe('ArticleAudio', () => {
+  beforeEach(() => {
+    // Mock the duration of the audio element
+    Object.defineProperty(HTMLMediaElement.prototype, 'duration', {
+      get(): number {
+        return 120; // 2 minutes
+      }
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('renders audio button with correct initial state', () => {
+    const { getByTestId, getByText, 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);
+    });
+
+    const audioButton = getByTestId('audio-button');
+    expect(audioButton).toBeInTheDocument();
+
+    expect(audioButton.style.backgroundColor).toBe('');
+    expect(audioButton).toHaveStyle('color: #333');
+
+    // 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');
+    expect(durationSpan).toHaveStyle('color: #696969');
+  });
+
+  test('hides AudioPlayer when close button is clicked (using mocked AudioPlayer)', () => {
+    const { getByTestId, queryByTestId, container, getByText } = 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 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();
+  });
+
+  test('handles play and pause', () => {
+    const { getByTestId, getByText, 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);
+    });
+
+    const audioButton = getByTestId('audio-button');
+
+    // Simulate clicking the play button
+    fireEvent.click(audioButton);
+
+    // Now, audioState should be 'playing'
+    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');
+    expect(durationSpan).toHaveStyle('color: #fff');
+
+    // Simulate clicking the pause button
+    fireEvent.click(audioButton);
+
+    expect(getByText('Paused')).toBeInTheDocument();
+    expect(audioButton).toHaveStyle('background-color: #1D1D1B');
+    expect(audioButton).toHaveStyle('color: #fff');
+
+    // Simulate clicking the play button 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', () => {
+    const { getByTestId, getByText, 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);
+    });
+
+    const audioButton = getByTestId('audio-button');
+    fireEvent.click(audioButton); // Start playing
+
+    expect(getByText('Playing')).toBeInTheDocument();
+
+    const pauseButton = getByText('Pause');
+    fireEvent.click(pauseButton);
+
+    expect(getByText('Paused')).toBeInTheDocument();
+
+    const playButton = getByText('Play');
+    fireEvent.click(playButton);
+
+    expect(getByText('Playing')).toBeInTheDocument();
+
+    const endedButton = getByText('Ended');
+    fireEvent.click(endedButton);
+
+    expect(getByText('Listen')).toBeInTheDocument();
+  });
+});

package/src/components/article-audio/__tests__/Styles.test.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import 'jest-styled-components';
+import { AudioButton } from '../styles';
+
+describe('AudioButton', () => {
+  test('renders correctly with default styles', () => {
+    const { getByTestId } = render(
+      <AudioButton data-testid="audio-button">Test Button</AudioButton>
+    );
+
+    const button = getByTestId('audio-button');
+
+    expect(button).toHaveStyleRule('background-color', 'unset');
+    expect(button).toHaveStyleRule('border-radius', '0');
+    expect(button).toHaveStyleRule('padding', '7px 11px');
+    expect(button).toHaveStyleRule('border', '1px solid #333333');
+    expect(button).toHaveStyleRule('display', 'flex');
+    expect(button).toHaveStyleRule('align-items', 'center');
+    expect(button).toHaveStyleRule('color', '#333333');
+    expect(button).toHaveStyleRule('font-family', 'Roboto');
+    expect(button).toHaveStyleRule('font-weight', '500');
+    expect(button).toHaveStyleRule('font-size', '14px');
+    expect(button).toHaveStyleRule('line-height', '18px');
+  });
+
+  test('renders svg child with correct styles', () => {
+    const { getByTestId } = render(
+      <AudioButton data-testid="audio-button">
+        <svg data-testid="icon" />
+      </AudioButton>
+    );
+
+    const button = getByTestId('audio-button');
+
+    expect(button).toHaveStyleRule('margin-right', '8px', {
+      modifier: 'svg'
+    });
+  });
+
+  test('renders span child with correct styles', () => {
+    const { getByTestId } = render(
+      <AudioButton data-testid="audio-button">
+        <span data-testid="span">Test Span</span>
+      </AudioButton>
+    );
+
+    const button = getByTestId('audio-button');
+
+    expect(button).toHaveStyleRule('margin-left', '4px', {
+      modifier: 'span'
+    });
+    expect(button).toHaveStyleRule('font-size', '12px', {
+      modifier: 'span'
+    });
+    expect(button).toHaveStyleRule('color', '#696969', {
+      modifier: 'span'
+    });
+  });
+});

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

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+import { colours } from '@times-components/ts-styleguide';
+
+export const AudioButton = styled.button`
+  background-color: unset;
+  border-radius: 0;
+  padding: 7px 11px;
+  border: 1px solid ${colours.functional.primary};
+  display: flex;
+  align-items: center;
+  color: ${colours.functional.primary};
+  font-family: Roboto;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 18px;
+
+  svg {
+    margin-right: 8px;
+  }
+
+  span {
+    margin-left: 4px;
+    font-size: 12px;
+    color: ${colours.functional.secondary};
+  }
+`;

package/src/components/audio-player-components/AudioPlayer.stories.tsx

@@ -0,0 +1,209 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { AudioPlayer } from './AudioPlayer';
+import { withKnobs, boolean, number, text } from '@storybook/addon-knobs';
+
+storiesOf('Typescript Component/Audio Player Components', module)
+  .addDecorator(withKnobs)
+  .addParameters({
+    component: AudioPlayer,
+    docs: {
+      description: {
+        component: `
+
+A customizable audio player component with various controls.
+
+## Props
+
+### \`src\` (Required)
+
+- **Type**: \`string\`
+- **Description**: The URL of the audio source file to be played.
+
+### \`title\`
+
+- **Type**: \`string\`
+- **Default**: \`'Audio Title'\`
+- **Description**: The title of the audio track displayed in the player.
+
+### \`autoPlay\`
+
+- **Type**: \`boolean\`
+- **Default**: \`false\`
+- **Description**: Determines whether the audio should start playing automatically when the component mounts.
+
+### \`initialVolume\`
+
+- **Type**: \`number\` (Range between \`0\` and \`1\`)
+- **Default**: \`1\`
+- **Description**: Sets the initial volume level of the audio player.
+
+### \`playbackRate\`
+
+- **Type**: \`number\`
+- **Default**: \`1\`
+- **Description**: Sets the initial playback speed of the audio.
+
+### \`isPlayingProp\`
+
+- **Type**: \`boolean\`
+- **Description**: Controls the play/pause state externally. When provided, it overrides the internal state.
+
+### \`isExpandedProp\`
+
+- **Type**: \`boolean\`
+- **Description**: Controls the expanded/collapsed state externally. When provided, it overrides the internal state.
+
+### \`allowTogglePlay\`
+
+- **Type**: \`boolean\`
+- **Default**: \`true\`
+- **Description**: Enables or disables the play/pause functionality.
+
+### \`allowSeek\`
+
+- **Type**: \`boolean\`
+- **Default**: \`true\`
+- **Description**: Enables or disables the ability to seek through the audio track.
+
+### \`allowVolumeChange\`
+
+- **Type**: \`boolean\`
+- **Default**: \`true\`
+- **Description**: Enables or disables the volume control. Volume control is available on tablet and desktop views.
+
+### \`allowPlaybackRateChange\`
+
+- **Type**: \`boolean\`
+- **Default**: \`true\`
+- **Description**: Enables or disables the ability to change the playback speed.
+
+### \`allowExpandCollapse\`
+
+- **Type**: \`boolean\`
+- **Default**: \`true\`
+- **Description**: Enables or disables the ability to expand or collapse the audio player interface.
+
+### \`onPlay\`
+
+- **Type**: \`() => void\`
+- **Description**: Callback function invoked when the audio starts playing.
+
+### \`onPause\`
+
+- **Type**: \`() => void\`
+- **Description**: Callback function invoked when the audio is paused.
+
+### \`onEnded\`
+
+- **Type**: \`() => void\`
+- **Description**: Callback function invoked when the audio playback ends.
+
+### \`onTimeUpdate\`
+
+- **Type**: \`(currentTime: number) => void\`
+- **Description**: Callback function invoked when the current playback time updates.
+
+### \`onVolumeChange\`
+
+- **Type**: \`(volume: number) => void\`
+- **Description**: Callback function invoked when the volume level changes.
+
+### \`onPlaybackRateChange\`
+
+- **Type**: \`(rate: number) => void\`
+- **Description**: Callback function invoked when the playback rate changes.
+
+### \`onSeek\`
+
+- **Type**: \`(time: number) => void\`
+- **Description**: Callback function invoked when the playback position changes due to seeking.
+
+### \`onClose\`
+
+- **Type**: \`() => void\`
+- **Description**: Callback function invoked when the audio player is closed.
+
+## Usage Examples
+
+### Basic Usage
+
+
+\`\`\`jsx
+<AudioPlayer src="https://example.com/audio-file.mp3" />
+\`\`\`
+
+### With Custom Title and AutoPlay
+
+\`\`\`jsx
+<AudioPlayer
+  src="https://example.com/audio-file.mp3"
+  title="Episode 1: The Beginning"
+  autoPlay={true}
+/>
+\`\`\`
+
+### Handling Events
+
+\`\`\`jsx
+<AudioPlayer
+  src="https://example.com/audio-file.mp3"
+  onPlay={() => console.log('Playing')}
+  onPause={() => console.log('Paused')}
+  onEnded={() => console.log('Ended')}
+  onTimeUpdate={(currentTime) => console.log('Current Time:', currentTime)}
+  onVolumeChange={(volume) => console.log('Volume:', volume)}
+  onPlaybackRateChange={(rate) => console.log('Playback Rate:', rate)}
+  onSeek={(time) => console.log('Seeked to:', time)}
+  onClose={() => console.log('Player Closed')}
+/>
+\`\`\`
+
+`
+      }
+    }
+  })
+  .add('Default Audio Player', () => {
+    const src = text(
+      'src',
+      'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3'
+    );
+    const title = text('title', 'Sample Audio Title for Testing');
+    const autoPlay = boolean('autoPlay', false);
+    const initialVolume = number('initialVolume', 0.5, {
+      range: true,
+      min: 0,
+      max: 1,
+      step: 0.1
+    });
+    const playbackRate = number('playbackRate', 1, {
+      range: true,
+      min: 0.5,
+      max: 2,
+      step: 0.1
+    });
+    const isPlayingProp = boolean('isPlayingProp', false);
+    const isExpandedProp = boolean('isExpandedProp', true);
+    const allowTogglePlay = boolean('allowTogglePlay', true);
+    const allowSeek = boolean('allowSeek', true);
+    const allowVolumeChange = boolean('allowVolumeChange', true);
+    const allowPlaybackRateChange = boolean('allowPlaybackRateChange', true);
+    const allowExpandCollapse = boolean('allowExpandCollapse', true);
+
+    const mockProps = {
+      src,
+      title,
+      autoPlay,
+      initialVolume,
+      playbackRate,
+      isPlayingProp,
+      isExpandedProp,
+      allowTogglePlay,
+      allowSeek,
+      allowVolumeChange,
+      allowPlaybackRateChange,
+      allowExpandCollapse
+    };
+
+    return <AudioPlayer {...mockProps} />;
+  });