Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(PPDSC-2067): audio player v2 live functionality stories and tests #200

Merged
merged 6 commits into from
May 16, 2022
Merged

feat(PPDSC-2067): audio player v2 live functionality stories and tests #200

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ff51a9a
feat(PPDSC-2067): audio player v2 live functionality stories and tests
evgenitsn May 13, 2022
f774e1b
feat(PPDSC-2067): added live flag as a sub-component example
evgenitsn May 13, 2022
9eca7c6
feat(PPDSC-2067): update live stream url and fix typo
evgenitsn May 13, 2022
b9ff0b5
feat(PPDSC-2067): update live stories layout
evgenitsn May 13, 2022
f9d2c7b
feat(PPDSC-2067): fix mobile view live element position
evgenitsn May 13, 2022
47f8663
Merge branch 'main' into feat/PPDSC-2067-audio-player-v2-live-functio…
evgenitsn May 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions scripts/generate-icons/used-icons-list.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
"Email",
"Error",
"ErrorOutline",
"GraphicEq",
"HighlightOff",
"Image",
"Info",
Expand Down
158 changes: 137 additions & 21 deletions src/audio-player-composable/__tests__/audio-player-composable.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,13 @@ import {
IconFilledLaunch,
IconFilledReplay5,
IconFilledForward5,
IconFilledGraphicEq,
} from '../../icons';
import {Flag} from '../../flag';

const AUDIO_SRC =
'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3';
evgenitsn marked this conversation as resolved.
Show resolved Hide resolved
const LIVE_AUDIO_SRC = 'https://radio.talkradio.co.uk/stream';

const myCustomTheme = createTheme({
name: 'my-custom-audio-player-theme',
Expand Down Expand Up @@ -68,25 +74,31 @@ export default {

const fullAudioPlayerAreasDesktop = `
seekBar seekBar seekBar seekBar seekBar seekBar seekBar
currentTime none none none none none totalTime
currentTime none none none none none totalTime
volume prev backward play forward next link
`;

const fullAudioPlayerAreasMobile = `
seekBar seekBar seekBar seekBar seekBar
currentTime volume none link totalTime
currentTime volume none link totalTime
prev backward play forward next
`;

const AudioPlayerFull = (props: {
const fullAudioPlayerLiveAreasDesktop = `
live prev backward play forward next link
`;

const fullAudioPlayerLiveAreasMobile = `
none none none link live
prev backward play forward next
`;

const AudioPlayerFullRecorded = (props: {
ariaLandmark: string;
src?: string;
autoPlay?: boolean;
}) => (
<AudioPlayerComposable
src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
{...props}
>
<AudioPlayerComposable src={AUDIO_SRC} {...props}>
<GridLayout
columns={{
xs: '1fr auto auto auto 1fr',
Expand Down Expand Up @@ -169,12 +181,86 @@ const AudioPlayerFull = (props: {
</GridLayout>
</AudioPlayerComposable>
);
const AudioPlayerFullLive = (props: {
ariaLandmark: string;
src?: string;
autoPlay?: boolean;
}) => (
<AudioPlayerComposable src={LIVE_AUDIO_SRC} live {...props}>
<GridLayout
columns={{
xs: '1fr auto auto auto 1fr',
md: '50px 1fr auto auto auto 1fr 50px',
}}
rowGap="space040"
columnGap="space040"
areas={{
xs: fullAudioPlayerLiveAreasMobile,
md: fullAudioPlayerLiveAreasDesktop,
}}
>
{Areas => (
<>
<Areas.Play alignSelf="center">
<AudioPlayerPlayPauseButton />
</Areas.Play>

const AudioPlayerInline = (props: {ariaLandmark: string; src?: string}) => (
<AudioPlayerComposable
src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
{...props}
>
<Areas.Backward alignSelf="center">
<AudioPlayerReplayButton />
</Areas.Backward>

<Areas.Forward alignSelf="center">
<AudioPlayerForwardButton disabled />
</Areas.Forward>

<Areas.Prev alignSelf="center" justifySelf="end">
<AudioPlayerSkipPreviousButton
onClick={() => console.log('on skip Prev track')}
/>
</Areas.Prev>

<Areas.Next alignSelf="center">
<AudioPlayerSkipNextButton
disabled
onClick={() => console.log('on skip Next track')}
/>
</Areas.Next>

<Areas.Live alignSelf="center" justifySelf={{xs: 'end', md: 'start'}}>
<Flag overrides={{stylePreset: `flagMinimalInformative`}}>
<IconFilledGraphicEq />
Live
</Flag>
</Areas.Live>

<Areas.Link alignSelf="center" justifySelf="end">
<Hidden xs sm>
<IconButton
aria-label="Open popout player"
overrides={{stylePreset: 'iconButtonMinimalPrimary'}}
onClick={() => {
window.open(
'https://www.newskit.co.uk/',
'',
'width=380,height=665',
);
}}
>
<IconFilledLaunch />
</IconButton>
</Hidden>
</Areas.Link>
</>
)}
</GridLayout>
</AudioPlayerComposable>
);

const AudioPlayerInlineRecorded = (props: {
ariaLandmark: string;
src?: string;
}) => (
<AudioPlayerComposable src={AUDIO_SRC} {...props}>
<GridLayout
columns="auto 40px 1fr auto"
columnGap="space040"
Expand All @@ -192,14 +278,37 @@ const AudioPlayerInline = (props: {ariaLandmark: string; src?: string}) => (
</AudioPlayerComposable>
);

const AudioPlayerInlineLive = (props: {ariaLandmark: string; src?: string}) => (
<AudioPlayerComposable src={LIVE_AUDIO_SRC} live {...props}>
<GridLayout
columns="auto auto"
columnGap="space040"
alignItems="center"
justifyContent="flex-start"
>
<AudioPlayerPlayPauseButton size={ButtonSize.Small} />
<Flag overrides={{stylePreset: `flagMinimalInformative`}}>
<IconFilledGraphicEq />
Live
</Flag>
</GridLayout>
</AudioPlayerComposable>
);

export const AudioPlayer = () => (
<>
<StorybookSubHeading>Full player-recorded</StorybookSubHeading>
<AudioPlayerFull ariaLandmark="audio player full" />
<StorybookSubHeading>Audio Player - full recorded</StorybookSubHeading>
<AudioPlayerFullRecorded ariaLandmark="audio player full recorded" />
<br />
<StorybookSubHeading>Audio Player - full live</StorybookSubHeading>
<AudioPlayerFullLive ariaLandmark="audio player full live" />
<br />
<br />
<StorybookSubHeading>Audio Player - inline recorded</StorybookSubHeading>
<AudioPlayerInlineRecorded ariaLandmark="audio player inline recorded" />
<br />
<StorybookSubHeading>Audio player inline recorded </StorybookSubHeading>
<AudioPlayerInline ariaLandmark="audio player inline" />
<StorybookSubHeading>Audio Player - inline live</StorybookSubHeading>
<AudioPlayerInlineLive ariaLandmark="audio player inline live" />
</>
);
AudioPlayer.storyName = 'audio-player';
Expand All @@ -211,7 +320,7 @@ export const AudioSubComponents = () => (
<br />

<AudioPlayerComposable
src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
src={AUDIO_SRC}
ariaLandmark="audio player time display"
>
<GridLayout
Expand All @@ -232,6 +341,13 @@ export const AudioSubComponents = () => (
format={({duration}) => calculateTime(duration)}
/>
</GridLayoutItem>
<GridLayoutItem>
<StorybookSubHeading>live</StorybookSubHeading>
<Flag overrides={{stylePreset: `flagMinimalInformative`}}>
<IconFilledGraphicEq />
Live
</Flag>
</GridLayoutItem>
<GridLayoutItem>
<StorybookSubHeading>default</StorybookSubHeading>
<AudioPlayerTimeDisplay />
Expand Down Expand Up @@ -276,7 +392,7 @@ export const AudioPlayerOverrides = () => (
<ThemeProvider theme={myCustomTheme}>
<StorybookSubHeading>Audio player with overrides</StorybookSubHeading>
<AudioPlayerComposable
src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
src={AUDIO_SRC}
ariaLandmark="audio player overrides"
>
<GridLayout
Expand Down Expand Up @@ -416,7 +532,7 @@ AudioPlayerOverrides.storyName = 'audio-player-overrides';
export const AudioPlayPauseButtonAutoplay = () => (
<>
<StorybookSubHeading>Autoplay</StorybookSubHeading>
<AudioPlayerFull ariaLandmark="audio player autoplay" autoPlay />
<AudioPlayerFullRecorded ariaLandmark="audio player autoplay" autoPlay />
</>
);

Expand All @@ -425,7 +541,7 @@ AudioPlayPauseButtonAutoplay.storyName = 'audio-play-pause-button-autoplay';
export const AudioPlayerKeyboard = () => (
<>
<StorybookSubHeading>Audio Player Keyboard shortcuts</StorybookSubHeading>
<AudioPlayerFull ariaLandmark="audio player keyboard" />
<AudioPlayerFullRecorded ariaLandmark="audio player keyboard" />
<Block marginBlockEnd="space040" />
<GridLayout columns="auto 1fr" rowGap="space020" as="dl">
<dt>k / space</dt>
Expand All @@ -449,7 +565,7 @@ export const AudioPlayerKeyboard = () => (
Audio Player Keyboard overrides shortcuts
</StorybookSubHeading>
<AudioPlayerComposable
src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
src={AUDIO_SRC}
ariaLandmark="audio player keyboard overrides"
keyboardShortcuts={{
jumpToStart: '1',
Expand Down
Loading