diff --git a/src/lib/viewers/controls/media/MediaSettingsControls/MediaSettingsControls.tsx b/src/lib/viewers/controls/media/MediaSettings/MediaSettings.tsx similarity index 80% rename from src/lib/viewers/controls/media/MediaSettingsControls/MediaSettingsControls.tsx rename to src/lib/viewers/controls/media/MediaSettings/MediaSettings.tsx index e4358bc2d..47de95ee8 100644 --- a/src/lib/viewers/controls/media/MediaSettingsControls/MediaSettingsControls.tsx +++ b/src/lib/viewers/controls/media/MediaSettings/MediaSettings.tsx @@ -2,6 +2,10 @@ import React from 'react'; import classNames from 'classnames'; import MediaSettingsContext, { Menu, Rect } from './MediaSettingsContext'; import MediaSettingsFlyout from './MediaSettingsFlyout'; +import MediaSettingsMenu from './MediaSettingsMenu'; +import MediaSettingsMenuBack from './MediaSettingsMenuBack'; +import MediaSettingsMenuItem from './MediaSettingsMenuItem'; +import MediaSettingsRadioItem from './MediaSettingsRadioItem'; import MediaSettingsToggle, { Ref as MediaSettingsToggleRef } from './MediaSettingsToggle'; import { decodeKeydown } from '../../../../util'; @@ -9,7 +13,7 @@ export type Props = React.PropsWithChildren<{ className?: string; }>; -export default function MediaSettingsControls({ children, className, ...rest }: Props): JSX.Element | null { +export default function MediaSettings({ children, className, ...rest }: Props): JSX.Element | null { const [activeMenu, setActiveMenu] = React.useState(Menu.MAIN); const [activeRect, setActiveRect] = React.useState(); const [isFocused, setIsFocused] = React.useState(false); @@ -69,7 +73,7 @@ export default function MediaSettingsControls({ children, className, ...rest }: return (
); } + +MediaSettings.Context = MediaSettingsContext; +MediaSettings.Menu = MediaSettingsMenu; +MediaSettings.MenuBack = MediaSettingsMenuBack; +MediaSettings.MenuItem = MediaSettingsMenuItem; +MediaSettings.RadioItem = MediaSettingsRadioItem; diff --git a/src/lib/viewers/controls/media/MediaSettings/MediaSettingsAutoplay.tsx b/src/lib/viewers/controls/media/MediaSettings/MediaSettingsAutoplay.tsx new file mode 100644 index 000000000..1f24ba118 --- /dev/null +++ b/src/lib/viewers/controls/media/MediaSettings/MediaSettingsAutoplay.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import MediaSettings, { Menu } from '.'; + +export type Props = { + autoplay: boolean; + onAutoplayChange: (autoplay: boolean) => void; +}; + +export default function MediaSettingsMenuAutoplay({ autoplay, onAutoplayChange }: Props): JSX.Element { + const { setActiveMenu } = React.useContext(MediaSettings.Context); + + const handleChange = (value: boolean): void => { + setActiveMenu(Menu.MAIN); + onAutoplayChange(value); + }; + + return ( + + + + + + ); +} diff --git a/src/lib/viewers/controls/media/MediaSettingsControls/MediaSettingsContext.ts b/src/lib/viewers/controls/media/MediaSettings/MediaSettingsContext.ts similarity index 100% rename from src/lib/viewers/controls/media/MediaSettingsControls/MediaSettingsContext.ts rename to src/lib/viewers/controls/media/MediaSettings/MediaSettingsContext.ts diff --git a/src/lib/viewers/controls/media/MediaSettingsControls/MediaSettingsFlyout.scss b/src/lib/viewers/controls/media/MediaSettings/MediaSettingsFlyout.scss similarity index 100% rename from src/lib/viewers/controls/media/MediaSettingsControls/MediaSettingsFlyout.scss rename to src/lib/viewers/controls/media/MediaSettings/MediaSettingsFlyout.scss diff --git a/src/lib/viewers/controls/media/MediaSettingsControls/MediaSettingsFlyout.tsx b/src/lib/viewers/controls/media/MediaSettings/MediaSettingsFlyout.tsx similarity index 100% rename from src/lib/viewers/controls/media/MediaSettingsControls/MediaSettingsFlyout.tsx rename to src/lib/viewers/controls/media/MediaSettings/MediaSettingsFlyout.tsx diff --git a/src/lib/viewers/controls/media/MediaSettingsControls/MediaSettingsMenu.scss b/src/lib/viewers/controls/media/MediaSettings/MediaSettingsMenu.scss similarity index 100% rename from src/lib/viewers/controls/media/MediaSettingsControls/MediaSettingsMenu.scss rename to src/lib/viewers/controls/media/MediaSettings/MediaSettingsMenu.scss diff --git a/src/lib/viewers/controls/media/MediaSettingsControls/MediaSettingsMenu.tsx b/src/lib/viewers/controls/media/MediaSettings/MediaSettingsMenu.tsx similarity index 100% rename from src/lib/viewers/controls/media/MediaSettingsControls/MediaSettingsMenu.tsx rename to src/lib/viewers/controls/media/MediaSettings/MediaSettingsMenu.tsx diff --git a/src/lib/viewers/controls/media/MediaSettingsControls/MediaSettingsMenuBack.scss b/src/lib/viewers/controls/media/MediaSettings/MediaSettingsMenuBack.scss similarity index 100% rename from src/lib/viewers/controls/media/MediaSettingsControls/MediaSettingsMenuBack.scss rename to src/lib/viewers/controls/media/MediaSettings/MediaSettingsMenuBack.scss diff --git a/src/lib/viewers/controls/media/MediaSettingsControls/MediaSettingsMenuBack.tsx b/src/lib/viewers/controls/media/MediaSettings/MediaSettingsMenuBack.tsx similarity index 100% rename from src/lib/viewers/controls/media/MediaSettingsControls/MediaSettingsMenuBack.tsx rename to src/lib/viewers/controls/media/MediaSettings/MediaSettingsMenuBack.tsx diff --git a/src/lib/viewers/controls/media/MediaSettingsControls/MediaSettingsMenuItem.scss b/src/lib/viewers/controls/media/MediaSettings/MediaSettingsMenuItem.scss similarity index 100% rename from src/lib/viewers/controls/media/MediaSettingsControls/MediaSettingsMenuItem.scss rename to src/lib/viewers/controls/media/MediaSettings/MediaSettingsMenuItem.scss diff --git a/src/lib/viewers/controls/media/MediaSettingsControls/MediaSettingsMenuItem.tsx b/src/lib/viewers/controls/media/MediaSettings/MediaSettingsMenuItem.tsx similarity index 100% rename from src/lib/viewers/controls/media/MediaSettingsControls/MediaSettingsMenuItem.tsx rename to src/lib/viewers/controls/media/MediaSettings/MediaSettingsMenuItem.tsx diff --git a/src/lib/viewers/controls/media/MediaSettingsControls/MediaSettingsRadioItem.scss b/src/lib/viewers/controls/media/MediaSettings/MediaSettingsRadioItem.scss similarity index 100% rename from src/lib/viewers/controls/media/MediaSettingsControls/MediaSettingsRadioItem.scss rename to src/lib/viewers/controls/media/MediaSettings/MediaSettingsRadioItem.scss diff --git a/src/lib/viewers/controls/media/MediaSettingsControls/MediaSettingsRadioItem.tsx b/src/lib/viewers/controls/media/MediaSettings/MediaSettingsRadioItem.tsx similarity index 100% rename from src/lib/viewers/controls/media/MediaSettingsControls/MediaSettingsRadioItem.tsx rename to src/lib/viewers/controls/media/MediaSettings/MediaSettingsRadioItem.tsx diff --git a/src/lib/viewers/controls/media/MediaSettings/MediaSettingsRate.tsx b/src/lib/viewers/controls/media/MediaSettings/MediaSettingsRate.tsx new file mode 100644 index 000000000..2092d263d --- /dev/null +++ b/src/lib/viewers/controls/media/MediaSettings/MediaSettingsRate.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import MediaSettings, { Menu } from '.'; + +export type Props = { + onRateChange: (rate: string) => void; + rate: string; +}; + +export default function MediaSettingsMenuRate({ rate, onRateChange }: Props): JSX.Element { + const { setActiveMenu } = React.useContext(MediaSettings.Context); + + const handleChange = (value: string): void => { + setActiveMenu(Menu.MAIN); + onRateChange(value); + }; + + return ( + + + + + + + + + ); +} diff --git a/src/lib/viewers/controls/media/MediaSettingsControls/MediaSettingsToggle.scss b/src/lib/viewers/controls/media/MediaSettings/MediaSettingsToggle.scss similarity index 100% rename from src/lib/viewers/controls/media/MediaSettingsControls/MediaSettingsToggle.scss rename to src/lib/viewers/controls/media/MediaSettings/MediaSettingsToggle.scss diff --git a/src/lib/viewers/controls/media/MediaSettingsControls/MediaSettingsToggle.tsx b/src/lib/viewers/controls/media/MediaSettings/MediaSettingsToggle.tsx similarity index 100% rename from src/lib/viewers/controls/media/MediaSettingsControls/MediaSettingsToggle.tsx rename to src/lib/viewers/controls/media/MediaSettings/MediaSettingsToggle.tsx diff --git a/src/lib/viewers/controls/media/MediaSettingsControls/__tests__/MediaSettingsControls-test.tsx b/src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettings-test.tsx similarity index 93% rename from src/lib/viewers/controls/media/MediaSettingsControls/__tests__/MediaSettingsControls-test.tsx rename to src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettings-test.tsx index 491bbbd35..8a59e0165 100644 --- a/src/lib/viewers/controls/media/MediaSettingsControls/__tests__/MediaSettingsControls-test.tsx +++ b/src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettings-test.tsx @@ -1,16 +1,15 @@ import React from 'react'; import { act } from 'react-dom/test-utils'; import { mount, ReactWrapper } from 'enzyme'; -import MediaSettingsControls from '../MediaSettingsControls'; +import MediaSettings from '../MediaSettings'; import MediaSettingsToggle from '../MediaSettingsToggle'; import MediaSettingsFlyout from '../MediaSettingsFlyout'; -describe('MediaSettingsControls', () => { +describe('MediaSettings', () => { const getHostNode = (): HTMLDivElement => { return document.body.appendChild(document.createElement('div')); }; - const getWrapper = (props = {}): ReactWrapper => - mount(, { attachTo: getHostNode() }); + const getWrapper = (props = {}): ReactWrapper => mount(, { attachTo: getHostNode() }); describe('event handlers', () => { test('should update the flyout and toggle button isOpen prop when clicked', () => { @@ -90,7 +89,7 @@ describe('MediaSettingsControls', () => { test('should return a valid wrapper', () => { const wrapper = getWrapper(); - expect(wrapper.getDOMNode()).toHaveClass('bp-MediaSettingsControls'); + expect(wrapper.getDOMNode()).toHaveClass('bp-MediaSettings'); expect(wrapper.exists(MediaSettingsFlyout)).toBe(true); expect(wrapper.exists(MediaSettingsToggle)).toBe(true); }); diff --git a/src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsAutoplay-test.tsx b/src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsAutoplay-test.tsx new file mode 100644 index 000000000..d0419adf1 --- /dev/null +++ b/src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsAutoplay-test.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import { mount, ReactWrapper } from 'enzyme'; +import MediaSettings, { Context, Menu } from '..'; +import MediaSettingsAutoplay from '../MediaSettingsAutoplay'; + +describe('MediaSettingsAutoplay', () => { + const getContext = (): Partial => ({ setActiveMenu: jest.fn() }); + const getWrapper = (props = {}, context = getContext()): ReactWrapper => + mount(, { + wrappingComponent: MediaSettings.Context.Provider, + wrappingComponentProps: { value: context }, + }); + + describe('event handlers', () => { + test('should surface the selected item on change', () => { + const onAutoplayChange = jest.fn(); + const wrapper = getWrapper({ onAutoplayChange }); + + wrapper.find({ value: true }).simulate('click'); + + expect(onAutoplayChange).toBeCalledWith(true); + }); + + test('should reset the active menu on change', () => { + const context = getContext(); + const wrapper = getWrapper({}, context); + + wrapper.find({ value: true }).simulate('click'); + + expect(context.setActiveMenu).toBeCalledWith(Menu.MAIN); + }); + }); + + describe('render', () => { + test('should return a valid wrapper', () => { + const wrapper = getWrapper(); + + expect(wrapper.exists(MediaSettings.MenuBack)).toBe(true); + expect(wrapper.exists(MediaSettings.RadioItem)).toBe(true); + }); + }); +}); diff --git a/src/lib/viewers/controls/media/MediaSettingsControls/__tests__/MediaSettingsContext-test.tsx b/src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsContext-test.tsx similarity index 100% rename from src/lib/viewers/controls/media/MediaSettingsControls/__tests__/MediaSettingsContext-test.tsx rename to src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsContext-test.tsx diff --git a/src/lib/viewers/controls/media/MediaSettingsControls/__tests__/MediaSettingsFlyout-test.tsx b/src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsFlyout-test.tsx similarity index 100% rename from src/lib/viewers/controls/media/MediaSettingsControls/__tests__/MediaSettingsFlyout-test.tsx rename to src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsFlyout-test.tsx diff --git a/src/lib/viewers/controls/media/MediaSettingsControls/__tests__/MediaSettingsMenu-test.tsx b/src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsMenu-test.tsx similarity index 100% rename from src/lib/viewers/controls/media/MediaSettingsControls/__tests__/MediaSettingsMenu-test.tsx rename to src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsMenu-test.tsx diff --git a/src/lib/viewers/controls/media/MediaSettingsControls/__tests__/MediaSettingsMenuBack-test.tsx b/src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsMenuBack-test.tsx similarity index 100% rename from src/lib/viewers/controls/media/MediaSettingsControls/__tests__/MediaSettingsMenuBack-test.tsx rename to src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsMenuBack-test.tsx diff --git a/src/lib/viewers/controls/media/MediaSettingsControls/__tests__/MediaSettingsMenuItem-test.tsx b/src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsMenuItem-test.tsx similarity index 100% rename from src/lib/viewers/controls/media/MediaSettingsControls/__tests__/MediaSettingsMenuItem-test.tsx rename to src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsMenuItem-test.tsx diff --git a/src/lib/viewers/controls/media/MediaSettingsControls/__tests__/MediaSettingsRadioItem-test.tsx b/src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsRadioItem-test.tsx similarity index 100% rename from src/lib/viewers/controls/media/MediaSettingsControls/__tests__/MediaSettingsRadioItem-test.tsx rename to src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsRadioItem-test.tsx diff --git a/src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsRate-test.tsx b/src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsRate-test.tsx new file mode 100644 index 000000000..72ef51895 --- /dev/null +++ b/src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsRate-test.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import { mount, ReactWrapper } from 'enzyme'; +import MediaSettings, { Context, Menu } from '..'; +import MediaSettingsRate from '../MediaSettingsRate'; + +describe('MediaSettingsRate', () => { + const getContext = (): Partial => ({ setActiveMenu: jest.fn() }); + const getWrapper = (props = {}, context = getContext()): ReactWrapper => + mount(, { + wrappingComponent: MediaSettings.Context.Provider, + wrappingComponentProps: { value: context }, + }); + + describe('event handlers', () => { + test('should surface the selected item on change', () => { + const onRateChange = jest.fn(); + const wrapper = getWrapper({ onRateChange }); + + wrapper.find({ value: '2.0' }).simulate('click'); + + expect(onRateChange).toBeCalledWith('2.0'); + }); + + test('should reset the active menu on change', () => { + const context = getContext(); + const wrapper = getWrapper({}, context); + + wrapper.find({ value: '2.0' }).simulate('click'); + + expect(context.setActiveMenu).toBeCalledWith(Menu.MAIN); + }); + }); + + describe('render', () => { + test('should return a valid wrapper', () => { + const wrapper = getWrapper(); + + expect(wrapper.exists(MediaSettings.MenuBack)).toBe(true); + expect(wrapper.exists(MediaSettings.RadioItem)).toBe(true); + }); + }); +}); diff --git a/src/lib/viewers/controls/media/MediaSettingsControls/__tests__/MediaSettingsToggle-test.tsx b/src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsToggle-test.tsx similarity index 100% rename from src/lib/viewers/controls/media/MediaSettingsControls/__tests__/MediaSettingsToggle-test.tsx rename to src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsToggle-test.tsx diff --git a/src/lib/viewers/controls/media/MediaSettingsControls/_styles.scss b/src/lib/viewers/controls/media/MediaSettings/_styles.scss similarity index 100% rename from src/lib/viewers/controls/media/MediaSettingsControls/_styles.scss rename to src/lib/viewers/controls/media/MediaSettings/_styles.scss diff --git a/src/lib/viewers/controls/media/MediaSettings/index.ts b/src/lib/viewers/controls/media/MediaSettings/index.ts new file mode 100644 index 000000000..cdb9e4863 --- /dev/null +++ b/src/lib/viewers/controls/media/MediaSettings/index.ts @@ -0,0 +1,3 @@ +export * from './MediaSettings'; +export * from './MediaSettingsContext'; +export { default } from './MediaSettings'; diff --git a/src/lib/viewers/controls/media/MediaSettingsControls/index.ts b/src/lib/viewers/controls/media/MediaSettingsControls/index.ts deleted file mode 100644 index 95d740c1e..000000000 --- a/src/lib/viewers/controls/media/MediaSettingsControls/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export { default } from './MediaSettingsControls'; -export * from './MediaSettingsContext'; -export * from './MediaSettingsControls'; diff --git a/src/lib/viewers/media/MP3Controls.tsx b/src/lib/viewers/media/MP3Controls.tsx index 7a22ed89b..3dba15c03 100644 --- a/src/lib/viewers/media/MP3Controls.tsx +++ b/src/lib/viewers/media/MP3Controls.tsx @@ -1,21 +1,30 @@ import React from 'react'; import DurationLabels, { Props as DurationLabelsProps } from '../controls/media/DurationLabels'; +import MP3Settings, { Props as MP3SettingsProps } from './MP3Settings'; import PlayPauseToggle, { Props as PlayControlsProps } from '../controls/media/PlayPauseToggle'; import TimeControls, { Props as TimeControlsProps } from '../controls/media/TimeControls'; import VolumeControls, { Props as VolumeControlsProps } from '../controls/media/VolumeControls'; import './MP3Controls.scss'; -export type Props = DurationLabelsProps & PlayControlsProps & TimeControlsProps & VolumeControlsProps; +export type Props = DurationLabelsProps & + MP3SettingsProps & + PlayControlsProps & + TimeControlsProps & + VolumeControlsProps; export default function MP3Controls({ + autoplay, bufferedRange, currentTime, durationTime, isPlaying, + onAutoplayChange, onMuteChange, onPlayPause, + onRateChange, onTimeChange, onVolumeChange, + rate, volume, }: Props): JSX.Element { return ( @@ -34,7 +43,14 @@ export default function MP3Controls({
-
{/* MP3 Settings Controls */}
+
+ +
); diff --git a/src/lib/viewers/media/MP3Settings.tsx b/src/lib/viewers/media/MP3Settings.tsx new file mode 100644 index 000000000..cb4aa6015 --- /dev/null +++ b/src/lib/viewers/media/MP3Settings.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import MediaSettings, { Menu } from '../controls/media/MediaSettings'; +import MediaSettingsAutoplay, { Props as AutoplayProps } from '../controls/media/MediaSettings/MediaSettingsAutoplay'; +import MediaSettingsRate, { Props as RateProps } from '../controls/media/MediaSettings/MediaSettingsRate'; + +export type Props = AutoplayProps & RateProps; + +export default function MP3Settings({ autoplay, onAutoplayChange, onRateChange, rate }: Props): JSX.Element { + const autoValue = autoplay ? __('media_autoplay_enabled') : __('media_autoplay_disabled'); + const rateValue = rate === '1.0' || !rate ? __('media_speed_normal') : rate; + + return ( + + + + + + + + + + ); +} diff --git a/src/lib/viewers/media/MP3Viewer.js b/src/lib/viewers/media/MP3Viewer.js index 3b24315a6..5d1379226 100644 --- a/src/lib/viewers/media/MP3Viewer.js +++ b/src/lib/viewers/media/MP3Viewer.js @@ -52,14 +52,18 @@ class MP3Viewer extends MediaBaseViewer { this.controls.render( , ); diff --git a/src/lib/viewers/media/MediaBaseViewer.js b/src/lib/viewers/media/MediaBaseViewer.js index 6c5539b52..a015f336a 100644 --- a/src/lib/viewers/media/MediaBaseViewer.js +++ b/src/lib/viewers/media/MediaBaseViewer.js @@ -62,6 +62,8 @@ class MediaBaseViewer extends BaseViewer { this.progressHandler = this.progressHandler.bind(this); this.resetPlayIcon = this.resetPlayIcon.bind(this); this.seekHandler = this.seekHandler.bind(this); + this.setAutoplay = this.setAutoplay.bind(this); + this.setRate = this.setRate.bind(this); this.setTimeCode = this.setTimeCode.bind(this); this.setVolume = this.setVolume.bind(this); this.handleLoadStart = this.handleLoadStart.bind(this); @@ -390,6 +392,10 @@ class MediaBaseViewer extends BaseViewer { } this.mediaEl.playbackRate = speed; + + if (this.controls) { + this.renderUI(); + } } /** @@ -424,6 +430,10 @@ class MediaBaseViewer extends BaseViewer { */ handleAutoplay() { this.emit('autoplay', this.isAutoplayEnabled()); + + if (this.controls) { + this.renderUI(); + } } /** @@ -454,7 +464,7 @@ class MediaBaseViewer extends BaseViewer { /** * Determines if autoplay is enabled * - * @private + * @protected * @return {boolean} Indicates if autoplay is enabled */ isAutoplayEnabled() { @@ -540,6 +550,16 @@ class MediaBaseViewer extends BaseViewer { this.mediaControls.addListener('autoplaychange', this.handleAutoplay); } + /** + * Return the current cached media play rate as a string + * + * @protected + * @return {string} + */ + getRate() { + return this.cache.get(MEDIA_SPEED_CACHE_KEY) || '1.0'; + } + /** * Updates time code. * @@ -571,6 +591,30 @@ class MediaBaseViewer extends BaseViewer { } } + /** + * Updates autoplay + * + * @protected + * @param {boolean} autoplay - True if enabled + * @return {void} + */ + setAutoplay(autoplay) { + this.cache.set(MEDIA_AUTOPLAY_CACHE_KEY, autoplay ? 'Enabled' : 'Disabled', true); + this.handleAutoplay(); + } + + /** + * Updates play rate + * + * @protected + * @param {string} rate - New play rate + * @return {void} + */ + setRate(rate) { + this.cache.set(MEDIA_SPEED_CACHE_KEY, rate, true); + this.handleRate(); + } + /** * Updates volume * diff --git a/src/lib/viewers/media/__tests__/MP3Controls-test.jsx b/src/lib/viewers/media/__tests__/MP3Controls-test.jsx index e39fe8154..dc5043e3e 100644 --- a/src/lib/viewers/media/__tests__/MP3Controls-test.jsx +++ b/src/lib/viewers/media/__tests__/MP3Controls-test.jsx @@ -1,6 +1,7 @@ import React from 'react'; import { shallow } from 'enzyme'; import MP3Controls from '../MP3Controls'; +import MP3Settings from '../MP3Settings'; import PlayPauseToggle from '../../controls/media/PlayPauseToggle'; import TimeControls from '../../controls/media/TimeControls'; import VolumeControls from '../../controls/media/VolumeControls'; @@ -8,20 +9,28 @@ import VolumeControls from '../../controls/media/VolumeControls'; describe('MP3Controls', () => { describe('render', () => { test('should return a valid wrapper', () => { + const onAutoplayChange = jest.fn(); const onMuteChange = jest.fn(); + const onRateChange = jest.fn(); const onPlayPause = jest.fn(); const onTimeChange = jest.fn(); const onVolumeChange = jest.fn(); const wrapper = shallow( , ); expect(wrapper.hasClass('bp-MP3Controls')).toBe(true); + expect(wrapper.find(MP3Settings).prop('onAutoplayChange')).toEqual(onAutoplayChange); + expect(wrapper.find(MP3Settings).prop('onRateChange')).toEqual(onRateChange); expect(wrapper.find(PlayPauseToggle).prop('onPlayPause')).toEqual(onPlayPause); expect(wrapper.find(TimeControls).prop('onTimeChange')).toEqual(onTimeChange); expect(wrapper.find(VolumeControls).prop('onMuteChange')).toEqual(onMuteChange); diff --git a/src/lib/viewers/media/__tests__/MP3Settings-test.tsx b/src/lib/viewers/media/__tests__/MP3Settings-test.tsx new file mode 100644 index 000000000..8444a2f60 --- /dev/null +++ b/src/lib/viewers/media/__tests__/MP3Settings-test.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import { shallow, ShallowWrapper } from 'enzyme'; +import MediaSettings from '../../controls/media/MediaSettings/MediaSettings'; +import MP3Settings from '../MP3Settings'; +import MediaSettingsMenu from '../../controls/media/MediaSettings/MediaSettingsMenu'; +import MediaSettingsMenuItem from '../../controls/media/MediaSettings/MediaSettingsMenuItem'; + +describe('MP3SettingsControls', () => { + const getWrapper = (props = {}): ShallowWrapper => + shallow( + , + ); + + describe('render', () => { + test('should return a valid wrapper', () => { + const wrapper = getWrapper(); + + expect(wrapper.exists(MediaSettings)).toBe(true); + expect(wrapper.exists(MediaSettingsMenu)).toBe(true); + expect(wrapper.exists(MediaSettingsMenuItem)).toBe(true); + }); + + test.each` + menuItem | value | displayValue + ${'autoplay'} | ${true} | ${'Enabled'} + ${'autoplay'} | ${false} | ${'Disabled'} + ${'rate'} | ${'1.0'} | ${'Normal'} + ${'rate'} | ${'2.0'} | ${'2.0'} + `('should display $displayValue for the $menuItem value $value', ({ displayValue, menuItem, value }) => { + const wrapper = getWrapper({ [menuItem]: value }); + + expect(wrapper.find({ target: menuItem }).prop('value')).toBe(displayValue); + }); + }); +}); diff --git a/src/lib/viewers/media/__tests__/MP3Viewer-test.js b/src/lib/viewers/media/__tests__/MP3Viewer-test.js index b95c49140..40c4fc452 100644 --- a/src/lib/viewers/media/__tests__/MP3Viewer-test.js +++ b/src/lib/viewers/media/__tests__/MP3Viewer-test.js @@ -88,6 +88,9 @@ describe('lib/viewers/media/MP3Viewer', () => { destroy: jest.fn(), render: jest.fn(), }; + mp3.cache = { + get: jest.fn(key => key), + }; mp3.mediaEl = document.createElement('audio'); mp3.mediaEl.duration = 1000; @@ -97,6 +100,7 @@ describe('lib/viewers/media/MP3Viewer', () => { mp3.renderUI(); expect(getProps(mp3)).toMatchObject({ + autoplay: false, bufferedRange: { end: expect.any(Function), length: 0, @@ -105,10 +109,13 @@ describe('lib/viewers/media/MP3Viewer', () => { currentTime: 0, durationTime: 1000, isPlaying: true, + onAutoplayChange: mp3.setAutoplay, onMuteChange: mp3.toggleMute, onPlayPause: mp3.togglePlay, + onRateChange: mp3.setRate, onTimeChange: mp3.handleTimeupdateFromMediaControls, onVolumeChange: mp3.setVolume, + rate: 'media-speed', volume: 1, }); });