From 4444b2f3d1ca36355ff319f7beb66d4e75f1abf8 Mon Sep 17 00:00:00 2001 From: beery Date: Mon, 7 Dec 2020 20:51:31 +0100 Subject: [PATCH 01/17] Convert AudioPlayer component to TypeScript and styled-components --- .../src/audioPlayerScript.js | 25 +-- .../ndla-ui/src/AudioPlayer/AudioPlayer.js | 72 --------- .../ndla-ui/src/AudioPlayer/AudioPlayer.tsx | 153 ++++++++++++++++++ .../AudioPlayer/component.audio-player.scss | 109 ------------- .../src/AudioPlayer/{index.js => index.ts} | 0 packages/ndla-ui/src/index-javascript.js | 1 - packages/ndla-ui/src/index.ts | 2 + packages/ndla-ui/src/main.scss | 1 - 8 files changed, 170 insertions(+), 193 deletions(-) delete mode 100644 packages/ndla-ui/src/AudioPlayer/AudioPlayer.js create mode 100644 packages/ndla-ui/src/AudioPlayer/AudioPlayer.tsx delete mode 100644 packages/ndla-ui/src/AudioPlayer/component.audio-player.scss rename packages/ndla-ui/src/AudioPlayer/{index.js => index.ts} (100%) diff --git a/packages/ndla-article-scripts/src/audioPlayerScript.js b/packages/ndla-article-scripts/src/audioPlayerScript.js index eb87d47735..61f79f8d0a 100644 --- a/packages/ndla-article-scripts/src/audioPlayerScript.js +++ b/packages/ndla-article-scripts/src/audioPlayerScript.js @@ -41,17 +41,20 @@ const onSeek = (percent, audioElement, progressPlayed, timeDisplay) => { }; export const initAudioPlayers = () => { - forEachElement('.c-audio-player', el => { + forEachElement('[data-audio-player]', el => { const wrapper = el; const audioElement = wrapper.querySelector('audio'); - const playButton = wrapper.querySelector('.c-audio-player__play'); - const progressBar = wrapper.querySelector('.c-audio-player__progress'); + const controlsWrapper = wrapper.querySelector('[data-controls]'); + const playButton = wrapper.querySelector('[data-play]'); + const progressBar = wrapper.querySelector('[data-progress]'); const toggleStateClasses = playing => { - if (playing) { - wrapper.classList.add('c-audio-player--playing'); - } else { - wrapper.classList.remove('c-audio-player--playing'); + if (controlsWrapper) { + if (playing) { + controlsWrapper.classList.add('playing'); + } else { + controlsWrapper.classList.remove('playing'); + } } }; @@ -65,14 +68,16 @@ export const initAudioPlayers = () => { } }; - playButton.onclick = togglePlay; + if (playButton) { + playButton.onclick = togglePlay; + } if (progressBar) { // if complete version const progressPlayed = progressBar.querySelector( - '.c-audio-player__progress-played', + '[data-progress-played]', ); - const timeDisplay = wrapper.querySelector('.c-audio-player__time'); + const timeDisplay = controlsWrapper.querySelector('[data-time]'); audioElement.addEventListener('timeupdate', () => { onTimeUpdate(audioElement, progressPlayed, timeDisplay); diff --git a/packages/ndla-ui/src/AudioPlayer/AudioPlayer.js b/packages/ndla-ui/src/AudioPlayer/AudioPlayer.js deleted file mode 100644 index 046cfc8dc0..0000000000 --- a/packages/ndla-ui/src/AudioPlayer/AudioPlayer.js +++ /dev/null @@ -1,72 +0,0 @@ -/** - * Copyright (c) 2017-present, NDLA. - * - * This source code is licensed under the GPLv3 license found in the - * LICENSE file in the root directory of this source tree. - * - */ - -import React from 'react'; -import PropTypes from 'prop-types'; -import BEMHelper from 'react-bem-helper'; -import { Play, Pause, VolumeUp } from '@ndla/icons/common'; - -/* eslint jsx-a11y/media-has-caption: 0 jsx-a11y/no-noninteractive-tabindex: 0 */ - -const classes = new BEMHelper({ - name: 'audio-player', - prefix: 'c-', -}); - -const stopPropagation = evt => { - evt.stopPropagation(); -}; - -const AudioPlayer = ({ type, src, title, speech }) => { - if (speech) { - return ( -
-
- ); - } - - return ( -
-

{title}

-
- ); -}; - -AudioPlayer.propTypes = { - type: PropTypes.string.isRequired, - typeLabel: PropTypes.string, - src: PropTypes.string.isRequired, - title: PropTypes.string.isRequired, - speech: PropTypes.bool, -}; - -AudioPlayer.defaultProps = { - speech: false, -}; - -export default AudioPlayer; diff --git a/packages/ndla-ui/src/AudioPlayer/AudioPlayer.tsx b/packages/ndla-ui/src/AudioPlayer/AudioPlayer.tsx new file mode 100644 index 0000000000..93d9396509 --- /dev/null +++ b/packages/ndla-ui/src/AudioPlayer/AudioPlayer.tsx @@ -0,0 +1,153 @@ +/** + * Copyright (c) 2017-present, NDLA. + * + * This source code is licensed under the GPLv3 license found in the + * LICENSE file in the root directory of this source tree. + * + */ + +import React from 'react'; +import styled from '@emotion/styled'; +// @ts-ignore +import { Play, Pause, VolumeUp } from '@ndla/icons/common'; +import { colors, fonts, spacing } from '@ndla/core'; + +const stopPropagation = (e: React.MouseEvent) => { + e.stopPropagation(); +}; + +const Heading = styled.h2` + ${fonts.sizes('20px', '20px')}; + margin: ${spacing.small} 0; +`; + +const SpeechPlayButton = styled.button` + background: none; + border: none; + display: flex; + align-items: center; + padding: 0; + cursor: pointer; + color: ${colors.brand.primary}; + margin-right: 0; + + &:hover, + &:active, + &:focus { + color: ${colors.brand.secondary}; + } + .c-icon { + width: 24px; + height: 24px; + } +`; + +const PlayIconWrapper = styled.span` + display: inline-flex; + align-items: center; +`; + +const PauseIconWrapper = styled.span` + display: none; + align-items: center; +`; + +const ControlsWrapper = styled.div` + display: flex; + align-items: center; + background: ${colors.brand.greyLighter}; + padding: ${spacing.xsmall} 20px; + + &.playing ${PlayIconWrapper} { + display: none; + } + &.playing ${PauseIconWrapper} { + display: inline-flex; + } +`; + +const PlayButton = styled.button` + background: none; + border: none; + display: flex; + align-items: center; + padding: 0; + margin-right: ${spacing.small}; + cursor: pointer; + + .c-icon { + width: 24px; + height: 24px; + } +`; + +const TimeWrapper = styled.div` + margin-right: ${spacing.small}; + ${fonts.sizes('14px', '22px')}; +`; + +const ProgressWrapper = styled.div` + position: relative; + height: 30px; + cursor: pointer; + flex: 1 1 auto; +`; + +const ProgressBackground = styled.div` + position: absolute; + top: 13px; + left: 0; + height: 4px; + background: #ffffff; + width: 100%; +`; + +const ProgressPlayed = styled.div` + position: absolute; + top: 13px; + left: 0; + height: 4px; + background: ${colors.text.primary}; +`; + +type Props = { + src: string; + title: string; + speech?: boolean; +}; +const AudioPlayer = ({ src, title, speech = false }: Props) => { + if (speech) { + return ( +
+
+ ); + } + + return ( +
+ {title} +
+ ); +}; + +export default AudioPlayer; diff --git a/packages/ndla-ui/src/AudioPlayer/component.audio-player.scss b/packages/ndla-ui/src/AudioPlayer/component.audio-player.scss deleted file mode 100644 index 37a5f532cb..0000000000 --- a/packages/ndla-ui/src/AudioPlayer/component.audio-player.scss +++ /dev/null @@ -1,109 +0,0 @@ -/** - * Copyright (c) 2017-present, NDLA. - * - * This source code is licensed under the GPLv3 license found in the - * LICENSE file in the root directory of this source tree. - * - */ - -.c-audio-player { - &__controls { - display: flex; - align-items: center; - background: $brand-grey--lighter; - padding: $spacing--small/2 $spacing - 6px; - } - - &__play { - background: none; - border: none; - display: flex; - align-items: center; - padding: 0; - margin-right: $spacing--small; - cursor: pointer; - - .c-icon { - width: 24px; - height: 24px; - } - } - - &--speech { - .c-audio-player { - &__play { - color: $brand-color; - margin-right: 0; - - &:hover, - &:active, - &:focus { - color: $brand-color--secondary; - } - } - } - } - - &__play-icon { - display: inline-flex; - align-items: center; - } - - &__pause-icon { - display: none; - align-items: center; - } - - &__info { - margin-bottom: $spacing--small; - @include inuit-font-size(14px, 22px); - } - - &__time { - margin-right: $spacing--small; - @include inuit-font-size(14px, 22px); - } - - &__title { - @include inuit-font-size(20px, 1); - margin: $spacing--small 0; - font-weight: $font-weight-bold; - font-family: $font; - } - - &--playing { - .c-audio-player { - &__play-icon { - display: none; - } - - &__pause-icon { - display: inline-flex; - } - } - } - - &__progress { - position: relative; - height: 30px; - cursor: pointer; - flex: 1 1 auto; - } - - &__progress-background, - &__progress-played { - position: absolute; - top: 13px; - left: 0; - height: 4px; - } - - &__progress-background { - background: $white; - width: 100%; - } - - &__progress-played { - background: $primary-color; - } -} diff --git a/packages/ndla-ui/src/AudioPlayer/index.js b/packages/ndla-ui/src/AudioPlayer/index.ts similarity index 100% rename from packages/ndla-ui/src/AudioPlayer/index.js rename to packages/ndla-ui/src/AudioPlayer/index.ts diff --git a/packages/ndla-ui/src/index-javascript.js b/packages/ndla-ui/src/index-javascript.js index 64b9355fce..a964df8a6f 100644 --- a/packages/ndla-ui/src/index-javascript.js +++ b/packages/ndla-ui/src/index-javascript.js @@ -47,7 +47,6 @@ export { export { default as Logo } from './Logo'; export { default as Table } from './Table'; export { FilterList, FilterListPhone } from './Filter'; -export { default as AudioPlayer } from './AudioPlayer'; export { default as Aside } from './Aside'; export { default as FactBox } from './FactBox'; export { default as FileList, File } from './FileList'; diff --git a/packages/ndla-ui/src/index.ts b/packages/ndla-ui/src/index.ts index f47b46ff03..a286953611 100644 --- a/packages/ndla-ui/src/index.ts +++ b/packages/ndla-ui/src/index.ts @@ -59,6 +59,8 @@ export { default as Breadcrumblist } from './Breadcrumblist'; export { MessageBox } from './MessageBox'; +export { default as AudioPlayer } from './AudioPlayer'; + export { NavigationHeading, NavigationBox, diff --git a/packages/ndla-ui/src/main.scss b/packages/ndla-ui/src/main.scss index dc28194dca..cf0e163daf 100644 --- a/packages/ndla-ui/src/main.scss +++ b/packages/ndla-ui/src/main.scss @@ -32,7 +32,6 @@ @import 'ResourceGroup/component.topic-resource'; @import 'TopicMenu/component.topic-menu'; @import 'Filter/component.filter'; -@import 'AudioPlayer/component.audio-player'; @import 'Translation/component.translation'; @import 'Translation/component.translation-box'; @import 'Search/component.search'; From 871019fc0e514339c7d1bd982b323597c0a0c466 Mon Sep 17 00:00:00 2001 From: beery Date: Tue, 26 Jan 2021 14:24:55 +0100 Subject: [PATCH 02/17] Podcast player. Rewrite of audioplayer --- package.json | 2 +- .../scss/global/settings/settings.global.scss | 6 + packages/core/types/facepaint.d.ts | 13 - .../stories/article/AudioAdvancedExample.jsx | 25 + .../stories/simple-components.jsx | 4 +- .../src/audioPlayerScript.js | 125 ----- packages/ndla-article-scripts/src/index.js | 4 - packages/ndla-ui/package.json | 3 +- .../ndla-ui/src/Article/ArticleContent.jsx | 48 -- .../ndla-ui/src/Article/ArticleContent.tsx | 33 ++ .../ndla-ui/src/AudioPlayer/AudioPlayer.tsx | 162 +++---- packages/ndla-ui/src/AudioPlayer/Controls.tsx | 445 ++++++++++++++++++ .../ndla-ui/src/AudioPlayer/SpeechControl.tsx | 64 +++ packages/ndla-ui/src/AudioPlayer/index.ts | 2 + .../src/AudioPlayer/initAudioPlayers.tsx | 36 ++ .../ndla-ui/src/Figure/component.figure.scss | 1 - packages/ndla-ui/src/index.ts | 2 +- yarn.lock | 104 +++- 18 files changed, 771 insertions(+), 308 deletions(-) delete mode 100644 packages/core/types/facepaint.d.ts create mode 100644 packages/designmanual/stories/article/AudioAdvancedExample.jsx delete mode 100644 packages/ndla-article-scripts/src/audioPlayerScript.js delete mode 100644 packages/ndla-ui/src/Article/ArticleContent.jsx create mode 100644 packages/ndla-ui/src/Article/ArticleContent.tsx create mode 100644 packages/ndla-ui/src/AudioPlayer/Controls.tsx create mode 100644 packages/ndla-ui/src/AudioPlayer/SpeechControl.tsx create mode 100644 packages/ndla-ui/src/AudioPlayer/initAudioPlayers.tsx diff --git a/package.json b/package.json index 748b0feeaa..4ab04fb2a7 100644 --- a/package.json +++ b/package.json @@ -100,6 +100,6 @@ "string-length": "^2.0.0", "style-loader": "^0.23.1", "ts-jest": "^24.0.0", - "typescript": "3.5.x" + "typescript": "^4.1.3" } } diff --git a/packages/core/scss/global/settings/settings.global.scss b/packages/core/scss/global/settings/settings.global.scss index 8bfec7bd6d..3bfc8b5951 100644 --- a/packages/core/scss/global/settings/settings.global.scss +++ b/packages/core/scss/global/settings/settings.global.scss @@ -20,4 +20,10 @@ $font-weight-bold: 700; --font-weight-normal: 400; --font-weight-semibold: 600; --font-weight-bold: 700; + /** + * Remove reach-warning about not including reach-css + */ + --reach-dialog: 1; + --reach-menu-button: 1; + --reach-slider: 1; } diff --git a/packages/core/types/facepaint.d.ts b/packages/core/types/facepaint.d.ts deleted file mode 100644 index 1b847250e5..0000000000 --- a/packages/core/types/facepaint.d.ts +++ /dev/null @@ -1,13 +0,0 @@ -declare module 'facepaint' { - type DynamicStyleFunction = (obj: any) => any; - - interface Options { - literal?: boolean; - overlap?: boolean; - } - - export default function( - selectors: string[], - options?: Options, - ): DynamicStyleFunction; -} diff --git a/packages/designmanual/stories/article/AudioAdvancedExample.jsx b/packages/designmanual/stories/article/AudioAdvancedExample.jsx new file mode 100644 index 0000000000..d829d6be02 --- /dev/null +++ b/packages/designmanual/stories/article/AudioAdvancedExample.jsx @@ -0,0 +1,25 @@ +import React from 'react'; +import { AudioPlayer, Figure } from '@ndla/ui'; +import { uuid } from '@ndla/util'; + +const AudioAdvancedExample = () => { + const description = + 'Se gjerne nærmere på hvordan andre kjente fortellere griper saken an. Siri Knudsen i NRK P3 lot seg for eksempel inspirere av Asbjørnsen og Moe da hun jobbet med sin radiodokumentar om artisten Truls Heggero.'; + + return ( +
+ +
+ ); +}; + +export default AudioAdvancedExample; diff --git a/packages/designmanual/stories/simple-components.jsx b/packages/designmanual/stories/simple-components.jsx index 00bb1b76a7..de7e263654 100644 --- a/packages/designmanual/stories/simple-components.jsx +++ b/packages/designmanual/stories/simple-components.jsx @@ -27,6 +27,7 @@ import TooltipExample from './atoms/TooltipExample'; import ButtonExample from './atoms/ButtonExample'; import SolutionTableExample from './molecules/SolutionExample'; import CodeblockExample from './codeblock/CodeblockExample'; +import AudioAdvancedExample from './article/AudioAdvancedExample'; const floatVideo = left => ( @@ -286,6 +287,8 @@ storiesOf('Enkle komponenter', module)
+

Podcast

+

Lydavspiller med lisensinformasjon

Lydavspiller for bruk ved uttale

@@ -310,7 +313,6 @@ storiesOf('Enkle komponenter', module) diff --git a/packages/ndla-article-scripts/src/audioPlayerScript.js b/packages/ndla-article-scripts/src/audioPlayerScript.js deleted file mode 100644 index 61f79f8d0a..0000000000 --- a/packages/ndla-article-scripts/src/audioPlayerScript.js +++ /dev/null @@ -1,125 +0,0 @@ -/** - * Copyright (c) 2017-present, NDLA. - * - * This source code is licensed under the GPLv3 license found in the - * LICENSE file in the root directory of this source tree. - * - */ - -/* eslint no-param-reassign: 0 */ - -import { forEachElement } from './domHelpers'; - -const formatTime = currentTime => { - const currentMinute = parseInt(currentTime / 60, 10); - const currentSeconds = (currentTime % 60).toFixed(); - - return `${currentMinute}:${ - currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds - }`; -}; - -const setPlayed = (progressPlayed, timeDisplay, currentTime, duration) => { - const percent = currentTime / duration; - - timeDisplay.innerHTML = `${formatTime(currentTime)} / ${formatTime( - duration, - )}`; - progressPlayed.style.width = `${percent * 100}%`; - progressPlayed.setAttribute('data-value', percent); -}; - -const onTimeUpdate = (audioElement, progressPlayed, timeDisplay) => { - const { currentTime, duration } = audioElement; - setPlayed(progressPlayed, timeDisplay, currentTime, duration); -}; - -const onSeek = (percent, audioElement, progressPlayed, timeDisplay) => { - const currentTime = percent * audioElement.duration; - audioElement.currentTime = currentTime; - setPlayed(progressPlayed, timeDisplay, currentTime, audioElement.duration); -}; - -export const initAudioPlayers = () => { - forEachElement('[data-audio-player]', el => { - const wrapper = el; - const audioElement = wrapper.querySelector('audio'); - const controlsWrapper = wrapper.querySelector('[data-controls]'); - const playButton = wrapper.querySelector('[data-play]'); - const progressBar = wrapper.querySelector('[data-progress]'); - - const toggleStateClasses = playing => { - if (controlsWrapper) { - if (playing) { - controlsWrapper.classList.add('playing'); - } else { - controlsWrapper.classList.remove('playing'); - } - } - }; - - const togglePlay = () => { - if (audioElement.paused) { - audioElement.play(); - toggleStateClasses(true); - } else { - audioElement.pause(); - toggleStateClasses(false); - } - }; - - if (playButton) { - playButton.onclick = togglePlay; - } - - if (progressBar) { - // if complete version - const progressPlayed = progressBar.querySelector( - '[data-progress-played]', - ); - const timeDisplay = controlsWrapper.querySelector('[data-time]'); - - audioElement.addEventListener('timeupdate', () => { - onTimeUpdate(audioElement, progressPlayed, timeDisplay); - }); - - audioElement.addEventListener('ended', () => { - toggleStateClasses(false); - }); - - progressBar.addEventListener('click', event => { - const percent = event.offsetX / progressBar.offsetWidth; - onSeek(percent, audioElement, progressPlayed, timeDisplay); - }); - - progressBar.addEventListener('keydown', event => { - const step = event.shiftKey ? 0.05 : 0.01; - if (event.key === 'ArrowLeft' || event.key === 'Left') { - let newValue = - parseFloat(progressPlayed.getAttribute('data-value')) - step; - if (newValue < 0) { - newValue = 0; - } - - onSeek(newValue, audioElement, progressPlayed, timeDisplay); - } else if (event.key === 'ArrowRight' || event.key === 'Right') { - let newValue = - parseFloat(progressPlayed.getAttribute('data-value')) + step; - if (newValue > 1) { - newValue = 1; - } - onSeek(newValue, audioElement, progressPlayed, timeDisplay); - } - }); - - audioElement.addEventListener('loadedmetadata', () => { - setPlayed( - progressPlayed, - timeDisplay, - audioElement.currentTime, - audioElement.duration, - ); - }); - } - }); -}; diff --git a/packages/ndla-article-scripts/src/index.js b/packages/ndla-article-scripts/src/index.js index ddabc5a0c3..d54c34397c 100644 --- a/packages/ndla-article-scripts/src/index.js +++ b/packages/ndla-article-scripts/src/index.js @@ -37,8 +37,6 @@ import { import { addFootnoteClickListeners } from './footnoteScripts'; -import { initAudioPlayers } from './audioPlayerScript'; - import { addShowConceptDefinitionClickListeners } from './conceptScripts'; import { toggleRelatedArticles } from './relatedArticlesToggle'; @@ -61,7 +59,6 @@ export const initArticleScripts = () => { addShowConceptDefinitionClickListeners(); toggleLicenseInfoBox(); addDetailsEventListeners(); - initAudioPlayers(); addFootnoteClickListeners(); toggleRelatedArticles(); initTableScript(); @@ -85,7 +82,6 @@ export { removeShowDialogClickListeners, addDetailsEventListeners, removeDetailsEventListeners, - initAudioPlayers, addFootnoteClickListeners, toggleLicenseInfoBox, toggleRelatedArticles, diff --git a/packages/ndla-ui/package.json b/packages/ndla-ui/package.json index b3bc2fdae1..69c42af0b8 100644 --- a/packages/ndla-ui/package.json +++ b/packages/ndla-ui/package.json @@ -43,7 +43,8 @@ "@ndla/tabs": "^0.11.42", "@ndla/tooltip": "^0.2.32", "@ndla/util": "^0.4.4", - "@reach/dialog": "^0.2.9", + "@reach/menu-button": "^0.12.1", + "@reach/slider": "^0.12.1", "@types/react-syntax-highlighter": "^11.0.4", "classnames": "2.2.6", "focus-trap": "^4.0.2", diff --git a/packages/ndla-ui/src/Article/ArticleContent.jsx b/packages/ndla-ui/src/Article/ArticleContent.jsx deleted file mode 100644 index b21c21a428..0000000000 --- a/packages/ndla-ui/src/Article/ArticleContent.jsx +++ /dev/null @@ -1,48 +0,0 @@ -/* - * Copyright (c) 2016-present, NDLA. - * - * This source code is licensed under the GPLv3 license found in the - * LICENSE file in the root directory of this source tree. - * - */ - -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { - initArticleScripts, - removeEventListenerForResize, -} from '@ndla/article-scripts'; - -export default class ArticleContent extends Component { - componentDidMount() { - initArticleScripts(); - } - - shouldComponentUpdate(nextProps) { - return nextProps.content !== this.props.content; - } - - componentDidUpdate(prevProps, prevState, snapshot) { - if (snapshot) { - removeEventListenerForResize(); - initArticleScripts(); - } - } - - componentWillUnmount() { - removeEventListenerForResize(); - } - - getSnapshotBeforeUpdate(prevProps) { - return this.props.content !== prevProps.content; - } - - render() { - const { content, ...rest } = this.props; - return
; - } -} - -ArticleContent.propTypes = { - content: PropTypes.string.isRequired, -}; diff --git a/packages/ndla-ui/src/Article/ArticleContent.tsx b/packages/ndla-ui/src/Article/ArticleContent.tsx new file mode 100644 index 0000000000..104d418ee3 --- /dev/null +++ b/packages/ndla-ui/src/Article/ArticleContent.tsx @@ -0,0 +1,33 @@ +/* + * Copyright (c) 2016-present, NDLA. + * + * This source code is licensed under the GPLv3 license found in the + * LICENSE file in the root directory of this source tree. + * + */ + +import React, { useEffect } from 'react'; +import { + initArticleScripts, + removeEventListenerForResize, + // @ts-ignore +} from '@ndla/article-scripts'; +import { initAudioPlayers } from '../AudioPlayer'; + +type Props = { + content: string; +}; +const ArticleContent = ({ content, ...rest }: Props) => { + useEffect(() => { + removeEventListenerForResize(); + initArticleScripts(); + initAudioPlayers(); + return () => { + removeEventListenerForResize(); + }; + }, [content]); + + return
; +}; + +export default ArticleContent; diff --git a/packages/ndla-ui/src/AudioPlayer/AudioPlayer.tsx b/packages/ndla-ui/src/AudioPlayer/AudioPlayer.tsx index 93d9396509..6da5877b89 100644 --- a/packages/ndla-ui/src/AudioPlayer/AudioPlayer.tsx +++ b/packages/ndla-ui/src/AudioPlayer/AudioPlayer.tsx @@ -8,145 +8,89 @@ import React from 'react'; import styled from '@emotion/styled'; -// @ts-ignore -import { Play, Pause, VolumeUp } from '@ndla/icons/common'; import { colors, fonts, spacing } from '@ndla/core'; - -const stopPropagation = (e: React.MouseEvent) => { - e.stopPropagation(); -}; +import Controls from './Controls'; +import SpeechControl from './SpeechControl'; const Heading = styled.h2` ${fonts.sizes('20px', '20px')}; margin: ${spacing.small} 0; `; -const SpeechPlayButton = styled.button` - background: none; - border: none; - display: flex; - align-items: center; - padding: 0; - cursor: pointer; - color: ${colors.brand.primary}; - margin-right: 0; - - &:hover, - &:active, - &:focus { - color: ${colors.brand.secondary}; - } - .c-icon { - width: 24px; - height: 24px; - } -`; - -const PlayIconWrapper = styled.span` - display: inline-flex; - align-items: center; -`; - -const PauseIconWrapper = styled.span` - display: none; - align-items: center; -`; - -const ControlsWrapper = styled.div` +const InfoWrapper = styled.div` + border: 1px solid ${colors.brand.lighter}; + border-bottom: 0; display: flex; - align-items: center; - background: ${colors.brand.greyLighter}; - padding: ${spacing.xsmall} 20px; - - &.playing ${PlayIconWrapper} { - display: none; - } - &.playing ${PauseIconWrapper} { - display: inline-flex; - } `; -const PlayButton = styled.button` - background: none; - border: none; +const ImageWrapper = styled.div` display: flex; align-items: center; - padding: 0; - margin-right: ${spacing.small}; - cursor: pointer; - - .c-icon { - width: 24px; - height: 24px; + flex: 1 0 auto; + max-width: 28%; + img { + width: 100%; + height: 100%; + object-fit: none; } `; - -const TimeWrapper = styled.div` - margin-right: ${spacing.small}; - ${fonts.sizes('14px', '22px')}; -`; - -const ProgressWrapper = styled.div` - position: relative; - height: 30px; - cursor: pointer; - flex: 1 1 auto; +const TextWrapper = styled.div` + padding: ${spacing.normal} ${spacing.medium}; `; - -const ProgressBackground = styled.div` - position: absolute; - top: 13px; - left: 0; - height: 4px; - background: #ffffff; - width: 100%; +const Title = styled.h2` + ${fonts.sizes('22px', '30px')}; + margin: 0 0 ${spacing.small}; `; - -const ProgressPlayed = styled.div` - position: absolute; - top: 13px; - left: 0; - height: 4px; - background: ${colors.text.primary}; +const Description = styled.p` + ${fonts.sizes('16px', '30px')}; + font-family: ${fonts.sans}; + margin: 0; `; type Props = { src: string; title: string; speech?: boolean; + description?: string; + img?: { + url: string; + alt: string; + }; }; -const AudioPlayer = ({ src, title, speech = false }: Props) => { +const AudioPlayer = ({ src, title, speech, description, img }: Props) => { if (speech) { return ( -
-