feat(controls): Add react controls for mp4 viewer (#1374)

src/lib/viewers/controls/controls-layer/ControlsLayer.tsx

@@ -11,13 +11,15 @@ export type Helpers = {
 
 export type Props = {
     children: React.ReactNode;
+    onHide?: () => void;
     onMount?: (helpers: Helpers) => void;
+    onShow?: () => void;
 };
 
 export const HIDE_DELAY_MS = 2000;
 export const SHOW_CLASSNAME = 'bp-is-visible';
 
-export default function ControlsLayer({ children, onMount = noop }: Props): JSX.Element {
+export default function ControlsLayer({ children, onHide = noop, onMount = noop, onShow = noop }: Props): JSX.Element {
     const [isForced, setIsForced] = React.useState(false);
     const [isShown, setIsShown] = React.useState(false);
     const hasFocusRef = React.useRef(false);
@@ -38,6 +40,7 @@ export default function ControlsLayer({ children, onMount = noop }: Props): JSX.
                 }
 
                 setIsShown(false);
+                onHide();
             }, HIDE_DELAY_MS);
         },
         reset() {
@@ -47,6 +50,7 @@ export default function ControlsLayer({ children, onMount = noop }: Props): JSX.
         show() {
             helpersRef.current.clean();
             setIsShown(true);
+            onShow();
         },
     });
 

src/lib/viewers/controls/controls-root/ControlsRoot.tsx

@@ -6,8 +6,11 @@ import ControlsLayer, { Helpers } from '../controls-layer';
 import './ControlsRoot.scss';
 
 export type Options = {
+    className?: string;
     containerEl: HTMLElement;
     fileId: string;
+    onHide?: () => void;
+    onShow?: () => void;
 };
 
 export default class ControlsRoot {
@@ -21,9 +24,13 @@ export default class ControlsRoot {
         show: noop,
     };
 
-    constructor({ containerEl, fileId }: Options) {
+    handleHide: () => void;
+
+    handleShow: () => void;
+
+    constructor({ className = 'bp-ControlsRoot', containerEl, fileId, onHide = noop, onShow = noop }: Options) {
         this.controlsEl = document.createElement('div');
-        this.controlsEl.setAttribute('class', 'bp-ControlsRoot');
+        this.controlsEl.setAttribute('class', className);
         this.controlsEl.setAttribute('data-testid', 'bp-controls');
         this.controlsEl.setAttribute('data-resin-component', 'toolbar');
         this.controlsEl.setAttribute('data-resin-fileid', fileId);
@@ -32,6 +39,9 @@ export default class ControlsRoot {
         this.containerEl.addEventListener('mousemove', this.handleMouseMove);
         this.containerEl.addEventListener('touchstart', this.handleTouchStart);
         this.containerEl.appendChild(this.controlsEl);
+
+        this.handleHide = onHide;
+        this.handleShow = onShow;
     }
 
     handleMount = (helpers: Helpers): void => {
@@ -68,6 +78,11 @@ export default class ControlsRoot {
     }
 
     render(controls: JSX.Element): void {
-        ReactDOM.render(<ControlsLayer onMount={this.handleMount}>{controls}</ControlsLayer>, this.controlsEl);
+        ReactDOM.render(
+            <ControlsLayer onHide={this.handleHide} onMount={this.handleMount} onShow={this.handleShow}>
+                {controls}
+            </ControlsLayer>,
+            this.controlsEl,
+        );
     }
 }

src/lib/viewers/controls/controls-root/__tests__/ControlsRoot-test.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import ReactDOMServer from 'react-dom/server';
+import ControlsLayer from '../../controls-layer';
 import ControlsRoot from '../ControlsRoot';
 
 describe('ControlsRoot', () => {
@@ -106,5 +108,25 @@ describe('ControlsRoot', () => {
             expect(instance.controlsEl.firstChild).toHaveClass('bp-ControlsLayer');
             expect(instance.controlsEl.firstChild).toContainHTML(ReactDOMServer.renderToStaticMarkup(controls));
         });
+
+        test('should attach onHide and onShow handlers to the underlying controls layer', () => {
+            jest.spyOn(ReactDOM, 'render');
+
+            const controls = <div className="TestControls">Controls</div>;
+            const onHide = jest.fn();
+            const onShow = jest.fn();
+            const instance = getInstance({ onHide, onShow });
+
+            instance.render(controls);
+
+            expect(instance.handleHide).toEqual(onHide);
+            expect(instance.handleShow).toEqual(onShow);
+            expect(ReactDOM.render).toBeCalledWith(
+                <ControlsLayer onHide={instance.handleHide} onMount={instance.handleMount} onShow={instance.handleShow}>
+                    {controls}
+                </ControlsLayer>,
+                expect.anything(),
+            );
+        });
     });
 });

src/lib/viewers/controls/controls-root/index.ts

@@ -1 +1,2 @@
+export * from './ControlsRoot';
 export { default } from './ControlsRoot';

src/lib/viewers/controls/fullscreen/FullscreenToggle.tsx

@@ -6,9 +6,10 @@ import './FullscreenToggle.scss';
 
 export type Props = {
     onFullscreenToggle: (isFullscreen: boolean) => void;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
 };
 
-export default function FullscreenToggle({ onFullscreenToggle }: Props): JSX.Element {
+export default function FullscreenToggle({ onFullscreenToggle, ...rest }: Props): JSX.Element {
     const isFullscreen = useFullscreen();
     const Icon = isFullscreen ? IconFullscreenOut24 : IconFullscreenIn24;
     const title = isFullscreen ? __('exit_fullscreen') : __('enter_fullscreen');
@@ -18,7 +19,7 @@ export default function FullscreenToggle({ onFullscreenToggle }: Props): JSX.Ele
     };
 
     return (
-        <button className="bp-FullscreenToggle" onClick={handleClick} title={title} type="button">
+        <button className="bp-FullscreenToggle" onClick={handleClick} title={title} type="button" {...rest}>
             <Icon />
         </button>
     );

src/lib/viewers/controls/icons/IconArrowLeft24.tsx

@@ -2,9 +2,8 @@ import * as React from 'react';
 
 function IconArrowLeft24(props: React.SVGProps<SVGSVGElement>): JSX.Element {
     return (
-        <svg fill="#999EA4" focusable="false" height={24} viewBox="0 0 24 24" width={24} {...props}>
+        <svg fill="#999EA4" focusable="false" height={24} viewBox="0 0 24 23" width={24} {...props}>
             <path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z" />
-            <path d="M0-.5h24v24H0z" fill="none" />
         </svg>
     );
 }

src/lib/viewers/controls/icons/IconArrowRight24.tsx

@@ -2,9 +2,8 @@ import * as React from 'react';
 
 function IconArrowRight24(props: React.SVGProps<SVGSVGElement>): JSX.Element {
     return (
-        <svg fill="#999EA4" focusable="false" height={24} viewBox="0 0 24 24" width={24} {...props}>
+        <svg fill="#999EA4" focusable="false" height={24} viewBox="0 0 24 23" width={24} {...props}>
             <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z" />
-            <path d="M0-.25h24v24H0z" fill="none" />
         </svg>
     );
 }

src/lib/viewers/controls/icons/IconGear24.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 function IconGear24(props: React.SVGProps<SVGSVGElement>): JSX.Element {
     return (
-        <svg focusable={false} height={24} width={24} {...props}>
+        <svg focusable={false} height={24} viewBox="0 0 24 24" width={24} {...props}>
             <path
                 d="M19.4 13c0-.3.1-.6.1-1s0-.7-.1-1l2.1-1.6c.2-.1.2-.4.1-.6l-2-3.5c-.1-.2-.4-.3-.6-.2l-2.5 1c-.5-.4-1.1-.7-1.7-1l-.4-2.7c.1-.2-.2-.4-.4-.4h-4c-.2 0-.5.2-.5.4l-.4 2.7c-.6.2-1.1.6-1.7 1l-2.5-1c-.2-.1-.4 0-.6.2l-2 3.5c-.1.1 0 .4.2.6L4.6 11c0 .3-.1.6-.1 1s0 .7.1 1l-2.1 1.6c-.2.1-.2.4-.1.6l2 3.5c.1.2.3.3.6.2l2.5-1c.5.4 1.1.7 1.7 1l.4 2.6c0 .2.2.4.5.4h4c.2 0 .5-.2.5-.4l.4-2.6c.6-.2 1.2-.6 1.7-1l2.5 1c.2.1.5 0 .6-.2l2-3.5c.1-.2.1-.5-.1-.6L19.4 13zM12 15.5c-1.9 0-3.5-1.6-3.5-3.5s1.6-3.5 3.5-3.5 3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5z"
                 fill="#fff"

src/lib/viewers/controls/icons/IconPlay24.tsx

@@ -2,9 +2,8 @@ import * as React from 'react';
 
 function IconPlay24(props: React.SVGProps<SVGSVGElement>): JSX.Element {
     return (
-        <svg fill="#fff" focusable={false} height={24} width={24} {...props}>
+        <svg fill="#fff" focusable={false} height={24} viewBox="0 0 24 24" width={24} {...props}>
             <path d="M8 5v14l11-7z" />
-            <path d="M0 0h24v24H0z" fill="none" />
         </svg>
     );
 }

src/lib/viewers/controls/media/DurationLabels.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import isFinite from 'lodash/isFinite';
 import './DurationLabels.scss';
 
 export type Props = {
@@ -7,9 +8,10 @@ export type Props = {
 };
 
 export function formatTime(time: number): string {
-    const hours = Math.floor(time / 3600);
-    const minutes = Math.floor((time % 3600) / 60);
-    const seconds = Math.floor((time % 3600) % 60);
+    const val = isFinite(time) ? time : 0;
+    const hours = Math.floor(val / 3600);
+    const minutes = Math.floor((val % 3600) / 60);
+    const seconds = Math.floor((val % 3600) % 60);
     const hour = hours > 0 ? `${hours.toString()}:` : '';
     const min = hours > 0 && minutes < 10 ? `0${minutes.toString()}` : minutes.toString();
     const sec = seconds < 10 ? `0${seconds.toString()}` : seconds.toString();

src/lib/viewers/controls/media/MediaFullscreenToggle.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import FullscreenToggle, { Props as FullscreenToggleProps } from '../fullscreen';
+import { decodeKeydown } from '../../../util';
+
+export type Props = FullscreenToggleProps;
+
+export default function MediaFullscreenToggle(props: Props): JSX.Element {
+    const handleKeydown = (event: React.KeyboardEvent): void => {
+        const key = decodeKeydown(event);
+
+        if (key === 'Enter' || key === 'Space') {
+            event.stopPropagation();
+        }
+    };
+
+    return <FullscreenToggle onKeyDown={handleKeydown} {...props} />;
+}

src/lib/viewers/media/MP3Settings.tsx → src/lib/viewers/controls/media/MediaSettings.tsx

@@ -1,17 +1,22 @@
 import React from 'react';
-import Settings, { Menu } from '../controls/settings';
-import MediaSettingsMenuAutoplay, { Props as AutoplayProps } from '../controls/media/MediaSettingsMenuAutoplay';
-import MediaSettingsMenuRate, { Props as RateProps } from '../controls/media/MediaSettingsMenuRate';
-import './MP3Settings.scss';
+import MediaSettingsMenuAutoplay, { Props as AutoplayProps } from './MediaSettingsMenuAutoplay';
+import MediaSettingsMenuRate, { Props as RateProps } from './MediaSettingsMenuRate';
+import Settings, { Menu } from '../settings';
 
-export type Props = AutoplayProps & RateProps;
+export type Props = AutoplayProps & RateProps & { className?: string };
 
-export default function MP3Settings({ autoplay, onAutoplayChange, onRateChange, rate }: Props): JSX.Element {
+export default function MediaSettings({
+    autoplay,
+    className,
+    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 (
-        <Settings className="bp-MP3Settings">
+        <Settings className={className}>
             <Settings.Menu name={Menu.MAIN}>
                 <Settings.MenuItem label={__('media_autoplay')} target={Menu.AUTOPLAY} value={autoValue} />
                 <Settings.MenuItem label={__('media_speed')} target={Menu.RATE} value={rateValue} />

src/lib/viewers/controls/media/TimeControls.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import isFinite from 'lodash/isFinite';
 import { bdlBoxBlue, bdlGray62, white } from 'box-ui-elements/es/styles/variables';
 import SliderControl from '../slider';
 import './TimeControls.scss';
@@ -24,7 +25,7 @@ export default function TimeControls({
     durationTime = 0,
     onTimeChange,
 }: Props): JSX.Element {
-    const currentValue = percent(currentTime, durationTime);
+    const currentValue = isFinite(currentTime) && isFinite(durationTime) ? percent(currentTime, durationTime) : 0;
     const bufferedAmount = bufferedRange && bufferedRange.length ? bufferedRange.end(bufferedRange.length - 1) : 0;
     const bufferedValue = percent(bufferedAmount, durationTime);
 

src/lib/viewers/controls/media/__tests__/DurationLabels-test.tsx

@@ -15,6 +15,7 @@ describe('DurationLabels', () => {
 
         test.each`
             input    | result
+            ${NaN}   | ${'0:00'}
             ${0}     | ${'0:00'}
             ${9}     | ${'0:09'}
             ${105}   | ${'1:45'}

src/lib/viewers/media/__tests__/MP3Settings-test.tsx → src/lib/viewers/controls/media/__tests__/MediaSettings-test.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
-import MP3Settings from '../MP3Settings';
-import Settings from '../../controls/settings/Settings';
-import SettingsMenu from '../../controls/settings/SettingsMenu';
-import SettingsMenuItem from '../../controls/settings/SettingsMenuItem';
+import MediaSettings from '../MediaSettings';
+import Settings from '../../settings/Settings';
+import SettingsMenu from '../../settings/SettingsMenu';
+import SettingsMenuItem from '../../settings/SettingsMenuItem';
 
-describe('MP3SettingsControls', () => {
+describe('MediaSettings', () => {
     const getWrapper = (props = {}): ShallowWrapper =>
         shallow(
-            <MP3Settings
+            <MediaSettings
                 autoplay={false}
                 onAutoplayChange={jest.fn()}
                 onRateChange={jest.fn()}

src/lib/viewers/controls/media/__tests__/TimeControls-test.tsx

@@ -42,6 +42,16 @@ describe('TimeControls', () => {
             expect(wrapper.prop('step')).toEqual(0.1);
         });
 
+        test('should not calculate percentage for invalid currentTime value', () => {
+            const wrapper = getWrapper({ currentTime: NaN, durationTime: 100 });
+            expect(wrapper.find(SliderControl).prop('value')).toBe(0);
+        });
+
+        test('should not calculate percentage for invalid durationTime value', () => {
+            const wrapper = getWrapper({ currentTime: 100, durationTime: NaN });
+            expect(wrapper.find(SliderControl).prop('value')).toBe(0);
+        });
+
         test.each`
             currentTime | track                                                                                        | value
             ${0}        | ${'linear-gradient(to right, #0061d5 0%, #fff 0%, #fff 10%, #767676 10%, #767676 100%)'}     | ${0}

src/lib/viewers/controls/settings/SettingsMenuBack.scss

@@ -30,6 +30,4 @@
 
 .bp-SettingsMenuBack-label {
     @include bp-SettingsRow-label;
-
-    text-align: center;
 }

src/lib/viewers/controls/settings/_styles.scss

@@ -10,7 +10,12 @@
 
 @mixin bp-SettingsRow-cell {
     display: table-cell;
+    line-height: 1;
     vertical-align: middle;
+
+    svg {
+        display: block;
+    }
 }
 
 @mixin bp-SettingsRow-label {
@@ -27,7 +32,7 @@
 @mixin bp-SettingsRow-value {
     @include bp-SettingsRow-cell;
 
-    padding: 6px 6px 6px 10px;
+    padding: 6px;
     color: $sunset-grey;
     font-size: 12px;
     text-align: left;

src/lib/viewers/media/MP3Controls.scss

@@ -1,4 +1,4 @@
-@import '~box-ui-elements/es/styles/variables';
+@import '../controls/media/styles';
 
 .bp-MP3Controls {
     display: flex;
@@ -17,3 +17,10 @@
     display: flex;
     align-items: center;
 }
+
+.bp-MP3Controls-settings {
+    .bp-SettingsToggle {
+        width: $bp-MediaControl-width;
+        height: $bp-MediaControl-height;
+    }
+}

src/lib/viewers/media/MP3Controls.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import DurationLabels, { Props as DurationLabelsProps } from '../controls/media/DurationLabels';
-import MP3Settings, { Props as MP3SettingsProps } from './MP3Settings';
+import MediaSettings, { Props as MediaSettingsProps } from '../controls/media/MediaSettings';
 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 &
-    MP3SettingsProps &
+    MediaSettingsProps &
     PlayControlsProps &
     TimeControlsProps &
     VolumeControlsProps;
@@ -44,8 +44,9 @@ export default function MP3Controls({
                 </div>
 
                 <div className="bp-MP3Controls-group">
-                    <MP3Settings
+                    <MediaSettings
                         autoplay={autoplay}
+                        className="bp-MP3Controls-settings"
                         onAutoplayChange={onAutoplayChange}
                         onRateChange={onRateChange}
                         rate={rate}

src/lib/viewers/media/MediaControlsRoot.scss → src/lib/viewers/media/MP3ControlsRoot.scss

@@ -1,4 +1,4 @@
-.bp-MediaControlsRoot {
+.bp-MP3ControlsRoot {
     position: absolute;
     top: 50%;
     left: 50%;