From a10ca1e0405f04a03633b3eeae4ee4054e8fe41e Mon Sep 17 00:00:00 2001
From: Jared Stoffan <jstoffan@box.com>
Date: Wed, 2 Dec 2020 15:59:32 -0800
Subject: [PATCH] feat(controls): Add react versions of mp3 controls

---
 src/lib/viewers/controls/_styles.scss         |  33 +++--
 .../annotations/AnnotationsButton.tsx         |   4 +-
 src/lib/viewers/controls/hooks/index.ts       |   3 +-
 .../viewers/controls/hooks/useAttention.ts    |  30 +++++
 .../viewers/controls/hooks/usePreventKey.ts   |  26 ++++
 .../controls/media/DurationLabels.scss        |  17 +++
 .../viewers/controls/media/DurationLabels.tsx |  32 +++++
 .../viewers/controls/media/MediaToggle.tsx    |  12 ++
 .../controls/media/PlayPauseToggle.scss       |   5 +
 .../controls/media/PlayPauseToggle.tsx        |  42 +++++++
 .../controls/media/SettingsControls.scss      |   5 +
 .../controls/media/SettingsControls.tsx       |  22 ++++
 .../controls/media/VolumeControls.scss        |  22 ++++
 .../viewers/controls/media/VolumeControls.tsx | 119 ++++++++++++++++++
 .../media/__tests__/VolumeControls-test.tsx   |  14 +++
 .../controls/slider/SliderControl.scss        |  99 +++++++++++++++
 .../viewers/controls/slider/SliderControl.tsx |  36 ++++++
 src/lib/viewers/media/MP3Controls.scss        |  14 +++
 src/lib/viewers/media/MP3Controls.tsx         |  32 +++++
 src/lib/viewers/media/MP3Viewer.js            |  36 +++++-
 src/lib/viewers/media/MediaBaseViewer.js      |  77 ++++++++++--
 src/lib/viewers/media/MediaControlsRoot.scss  |   6 +
 src/lib/viewers/media/MediaControlsRoot.tsx   |  33 +++++
 .../media/__tests__/MP3Controls-test.jsx      |   7 ++
 24 files changed, 698 insertions(+), 28 deletions(-)
 create mode 100644 src/lib/viewers/controls/hooks/useAttention.ts
 create mode 100644 src/lib/viewers/controls/hooks/usePreventKey.ts
 create mode 100644 src/lib/viewers/controls/media/DurationLabels.scss
 create mode 100644 src/lib/viewers/controls/media/DurationLabels.tsx
 create mode 100644 src/lib/viewers/controls/media/MediaToggle.tsx
 create mode 100644 src/lib/viewers/controls/media/PlayPauseToggle.scss
 create mode 100644 src/lib/viewers/controls/media/PlayPauseToggle.tsx
 create mode 100644 src/lib/viewers/controls/media/SettingsControls.scss
 create mode 100644 src/lib/viewers/controls/media/SettingsControls.tsx
 create mode 100644 src/lib/viewers/controls/media/VolumeControls.scss
 create mode 100644 src/lib/viewers/controls/media/VolumeControls.tsx
 create mode 100644 src/lib/viewers/controls/media/__tests__/VolumeControls-test.tsx
 create mode 100644 src/lib/viewers/controls/slider/SliderControl.scss
 create mode 100644 src/lib/viewers/controls/slider/SliderControl.tsx
 create mode 100644 src/lib/viewers/media/MP3Controls.scss
 create mode 100644 src/lib/viewers/media/MP3Controls.tsx
 create mode 100644 src/lib/viewers/media/MediaControlsRoot.scss
 create mode 100644 src/lib/viewers/media/MediaControlsRoot.tsx
 create mode 100644 src/lib/viewers/media/__tests__/MP3Controls-test.jsx

diff --git a/src/lib/viewers/controls/_styles.scss b/src/lib/viewers/controls/_styles.scss
index a1b836331e..f05bf75484 100644
--- a/src/lib/viewers/controls/_styles.scss
+++ b/src/lib/viewers/controls/_styles.scss
@@ -1,6 +1,27 @@
 @import '~box-ui-elements/es/styles/variables';
 
+@mixin bp-Control--hover {
+    opacity: .7;
+    transition: opacity 150ms;
+
+    &:focus,
+    &:hover {
+        opacity: 1;
+    }
+}
+
+@mixin bp-Control--focus {
+    outline: 0;
+
+    &:focus {
+        box-shadow: inset 0 0 0 1px fade-out($white, .5), 0 1px 2px fade-out($black, .9);
+    }
+}
+
 @mixin bp-ControlButton($height: 48px, $width: 48px) {
+    @include bp-Control--hover;
+    @include bp-Control--focus;
+
     display: flex;
     align-items: center;
     justify-content: center;
@@ -11,23 +32,11 @@
     color: $white;
     background: transparent;
     border: 1px solid transparent;
-    outline: 0;
     cursor: pointer;
-    opacity: .7;
-    transition: opacity 150ms;
     user-select: none;
     touch-action: manipulation;
     zoom: 1;
 
-    &:focus,
-    &:hover {
-        opacity: 1;
-    }
-
-    &:focus {
-        box-shadow: inset 0 0 0 1px fade-out($white, .5), 0 1px 2px fade-out($black, .9);
-    }
-
     &:disabled {
         cursor: default;
         opacity: .2;
diff --git a/src/lib/viewers/controls/annotations/AnnotationsButton.tsx b/src/lib/viewers/controls/annotations/AnnotationsButton.tsx
index c2a3f20d27..67262924ff 100644
--- a/src/lib/viewers/controls/annotations/AnnotationsButton.tsx
+++ b/src/lib/viewers/controls/annotations/AnnotationsButton.tsx
@@ -1,10 +1,10 @@
-import React, { ButtonHTMLAttributes } from 'react';
+import React from 'react';
 import classNames from 'classnames';
 import noop from 'lodash/noop';
 import { AnnotationMode } from './types';
 import './AnnotationsButton.scss';
 
-export type Props = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> & {
+export type Props = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> & {
     children?: React.ReactNode;
     className?: string;
     isActive?: boolean;
diff --git a/src/lib/viewers/controls/hooks/index.ts b/src/lib/viewers/controls/hooks/index.ts
index c9f0eddfea..8b27d74f0c 100644
--- a/src/lib/viewers/controls/hooks/index.ts
+++ b/src/lib/viewers/controls/hooks/index.ts
@@ -1,2 +1,3 @@
-// eslint-disable-next-line import/prefer-default-export
+export { default as useAttention } from './useAttention';
 export { default as useFullscreen } from './useFullscreen';
+export { default as usePreventKey } from './usePreventKey';
diff --git a/src/lib/viewers/controls/hooks/useAttention.ts b/src/lib/viewers/controls/hooks/useAttention.ts
new file mode 100644
index 0000000000..96e356d96f
--- /dev/null
+++ b/src/lib/viewers/controls/hooks/useAttention.ts
@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+export type handlers = {
+    onBlur: () => void;
+    onFocus: () => void;
+    onMouseOut: () => void;
+    onMouseOver: () => void;
+};
+
+export type isActive = boolean;
+
+export default function useAttention(): [isActive, handlers] {
+    const [isFocused, setFocused] = React.useState(false);
+    const [isHovered, setHovered] = React.useState(false);
+
+    const handleBlur = (): void => setFocused(false);
+    const handleFocus = (): void => setFocused(true);
+    const handleMouseOut = (): void => setHovered(false);
+    const handleMouseOver = (): void => setHovered(true);
+
+    return [
+        isFocused || isHovered,
+        {
+            onBlur: handleBlur,
+            onFocus: handleFocus,
+            onMouseOut: handleMouseOut,
+            onMouseOver: handleMouseOver,
+        },
+    ];
+}
diff --git a/src/lib/viewers/controls/hooks/usePreventKey.ts b/src/lib/viewers/controls/hooks/usePreventKey.ts
new file mode 100644
index 0000000000..a8402d1beb
--- /dev/null
+++ b/src/lib/viewers/controls/hooks/usePreventKey.ts
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { decodeKeydown } from '../../../util';
+
+export default function usePreventKey(ref: React.RefObject<HTMLElement | null>, keys = ['Enter', 'Space']): void {
+    React.useEffect(() => {
+        const { current: element } = ref;
+
+        const handleKeydown = (event: KeyboardEvent): void => {
+            const key = decodeKeydown(event);
+
+            if (keys.includes(key)) {
+                event.stopPropagation(); // Prevents global key handling. Can be simplified with React v17.
+            }
+        };
+
+        if (element) {
+            element.addEventListener('keydown', handleKeydown);
+        }
+
+        return (): void => {
+            if (element) {
+                element.removeEventListener('keydown', handleKeydown);
+            }
+        };
+    }, [keys, ref]);
+}
diff --git a/src/lib/viewers/controls/media/DurationLabels.scss b/src/lib/viewers/controls/media/DurationLabels.scss
new file mode 100644
index 0000000000..999a8298fc
--- /dev/null
+++ b/src/lib/viewers/controls/media/DurationLabels.scss
@@ -0,0 +1,17 @@
+@import '../styles';
+
+.bp-DurationLabels {
+    display: flex;
+    align-items: center;
+    margin-right: 10px;
+    margin-left: 10px;
+}
+
+.bp-DurationLabels-label {
+    @include bp-Control--hover;
+
+    padding-right: 4px;
+    padding-left: 4px;
+    color: $white;
+    cursor: default;
+}
diff --git a/src/lib/viewers/controls/media/DurationLabels.tsx b/src/lib/viewers/controls/media/DurationLabels.tsx
new file mode 100644
index 0000000000..bac3f422ba
--- /dev/null
+++ b/src/lib/viewers/controls/media/DurationLabels.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import './DurationLabels.scss';
+
+export type Props = {
+    currentTime?: number;
+    durationTime?: number;
+};
+
+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 hour = hours > 0 ? `${hours.toString()}:` : '';
+    const sec = seconds < 10 ? `0${seconds.toString()}` : seconds.toString();
+    let min = minutes.toString();
+
+    if (hours > 0 && minutes < 10) {
+        min = `0${min}`;
+    }
+
+    return `${hour}${min}:${sec}`;
+}
+
+export default function DurationLabels({ currentTime = 0, durationTime = 0 }: Props): JSX.Element {
+    return (
+        <div className="bp-DurationLabels">
+            <span className="bp-DurationLabels-label">{formatTime(currentTime)}</span>
+            <span className="bp-DurationLabels-label">/</span>
+            <span className="bp-DurationLabels-label">{formatTime(durationTime)}</span>
+        </div>
+    );
+}
diff --git a/src/lib/viewers/controls/media/MediaToggle.tsx b/src/lib/viewers/controls/media/MediaToggle.tsx
new file mode 100644
index 0000000000..c5325e557a
--- /dev/null
+++ b/src/lib/viewers/controls/media/MediaToggle.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import usePreventKey from '../hooks/usePreventKey';
+
+export type Props = React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+export default function MediaToggle(props: Props): JSX.Element {
+    const buttonElRef = React.useRef<HTMLButtonElement>(null);
+
+    usePreventKey(buttonElRef, ['Enter', 'Space']);
+
+    return <button ref={buttonElRef} type="button" {...props} />;
+}
diff --git a/src/lib/viewers/controls/media/PlayPauseToggle.scss b/src/lib/viewers/controls/media/PlayPauseToggle.scss
new file mode 100644
index 0000000000..07dedab46d
--- /dev/null
+++ b/src/lib/viewers/controls/media/PlayPauseToggle.scss
@@ -0,0 +1,5 @@
+@import '../styles';
+
+.bp-PlayPauseToggle {
+    @include bp-ControlButton($height: 40px, $width: 36px);
+}
diff --git a/src/lib/viewers/controls/media/PlayPauseToggle.tsx b/src/lib/viewers/controls/media/PlayPauseToggle.tsx
new file mode 100644
index 0000000000..d658cfe60a
--- /dev/null
+++ b/src/lib/viewers/controls/media/PlayPauseToggle.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import noop from 'lodash/noop';
+import IconPlay24 from '../icons/IconPlay24';
+import IconPause24 from '../icons/IconPause24';
+import MediaToggle from './MediaToggle';
+import { decodeKeydown } from '../../../util';
+import './PlayPauseToggle.scss';
+
+export type Props = {
+    isPlaying?: boolean;
+    onPlayPause: (isPlaying: boolean) => void;
+    useHotkeys?: boolean;
+};
+
+export default function PlayPauseToggle({ isPlaying, onPlayPause = noop, useHotkeys }: Props): JSX.Element {
+    const Icon = isPlaying ? IconPause24 : IconPlay24;
+    const title = isPlaying ? __('media_pause') : __('media_play');
+
+    React.useEffect(() => {
+        const handleKeydown = (event: KeyboardEvent): void => {
+            const key = decodeKeydown(event);
+
+            if (key === 'k' || key === 'Shift+K' || key === 'Space') {
+                onPlayPause(!isPlaying);
+            }
+        };
+
+        if (useHotkeys) {
+            document.addEventListener('keydown', handleKeydown);
+        }
+
+        return (): void => {
+            document.removeEventListener('keydown', handleKeydown);
+        };
+    }, [isPlaying, onPlayPause, useHotkeys]);
+
+    return (
+        <MediaToggle className="bp-PlayPauseToggle" onClick={(): void => onPlayPause(!isPlaying)} title={title}>
+            <Icon />
+        </MediaToggle>
+    );
+}
diff --git a/src/lib/viewers/controls/media/SettingsControls.scss b/src/lib/viewers/controls/media/SettingsControls.scss
new file mode 100644
index 0000000000..e5996a7b2c
--- /dev/null
+++ b/src/lib/viewers/controls/media/SettingsControls.scss
@@ -0,0 +1,5 @@
+@import '../styles';
+
+.bp-SettingsControls-toggle {
+    @include bp-ControlButton($height: 40px, $width: 36px);
+}
diff --git a/src/lib/viewers/controls/media/SettingsControls.tsx b/src/lib/viewers/controls/media/SettingsControls.tsx
new file mode 100644
index 0000000000..937a448071
--- /dev/null
+++ b/src/lib/viewers/controls/media/SettingsControls.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import IconGear24 from '../icons/IconGear24';
+import MediaToggle from './MediaToggle';
+import './SettingsControls.scss';
+
+export default function SettingsControls(): JSX.Element {
+    const [isVisible, setVisible] = React.useState(false);
+
+    const handleClick = (): void => {
+        setVisible(!isVisible);
+    };
+
+    return (
+        <div className="bp-SettingsControls">
+            <MediaToggle className="bp-SettingsControls-toggle" onClick={handleClick} title={__('media_settings')}>
+                <IconGear24 />
+            </MediaToggle>
+
+            {/*  TODO: Add settings popup(s)  */}
+        </div>
+    );
+}
diff --git a/src/lib/viewers/controls/media/VolumeControls.scss b/src/lib/viewers/controls/media/VolumeControls.scss
new file mode 100644
index 0000000000..585441cffa
--- /dev/null
+++ b/src/lib/viewers/controls/media/VolumeControls.scss
@@ -0,0 +1,22 @@
+@import '../styles';
+
+.bp-VolumeControls {
+    display: flex;
+    align-items: center;
+}
+
+.bp-VolumeControls-flyout {
+    display: flex;
+    align-items: center;
+    width: 0;
+    overflow: hidden;
+    transition: width 200ms ease-in-out;
+
+    &.bp-is-open {
+        width: 100px;
+    }
+}
+
+.bp-VolumeControls-toggle {
+    @include bp-ControlButton($height: 40px, $width: 36px);
+}
diff --git a/src/lib/viewers/controls/media/VolumeControls.tsx b/src/lib/viewers/controls/media/VolumeControls.tsx
new file mode 100644
index 0000000000..9fe12da13c
--- /dev/null
+++ b/src/lib/viewers/controls/media/VolumeControls.tsx
@@ -0,0 +1,119 @@
+import React from 'react';
+import classNames from 'classnames';
+import IconVolumeHigh24 from '../icons/IconVolumeHigh24';
+import IconVolumeLow24 from '../icons/IconVolumeLow24';
+import IconVolumeMedium24 from '../icons/IconVolumeMedium24';
+import IconVolumeMute24 from '../icons/IconVolumeMute24';
+import MediaToggle from './MediaToggle';
+import SliderControl from '../slider/SliderControl';
+import useAttention from '../hooks/useAttention';
+import { decodeKeydown } from '../../../util';
+import './VolumeControls.scss';
+
+export type Props = {
+    initialVolume?: number;
+    onVolumeChange: (volume: number) => void;
+    useHotkeys?: boolean;
+};
+
+export const MAX_VOLUME = 1.0;
+export const MID_VOLUME = 0.5;
+export const MIN_VOLUME = 0.0;
+export const STEP_VOLUME = 0.05;
+
+export function getIcon(volume: number): (props: React.SVGProps<SVGSVGElement>) => JSX.Element {
+    let icon = IconVolumeMute24;
+
+    if (volume >= 0.66) {
+        icon = IconVolumeHigh24;
+    } else if (volume >= 0.33) {
+        icon = IconVolumeMedium24;
+    } else if (volume >= 0.01) {
+        icon = IconVolumeLow24;
+    }
+
+    return icon;
+}
+
+export default function VolumeControls({ initialVolume = MAX_VOLUME, onVolumeChange, useHotkeys }: Props): JSX.Element {
+    const [isActive, handlers] = useAttention();
+    const [isMuted, setMuted] = React.useState(!initialVolume);
+    const [volume, setVolume] = React.useState(initialVolume);
+    const Icon = isMuted ? IconVolumeMute24 : getIcon(volume);
+    const title = isMuted ? __('media_unmute') : __('media_mute');
+    const value = isMuted ? 0 : volume;
+
+    const updateMuted = React.useCallback((): void => {
+        if (isMuted && !volume) {
+            setVolume(MID_VOLUME); // Reset internal state to audible level if volume was zero *and* muted
+        }
+
+        const newMuted = !isMuted;
+        const newVolume = newMuted ? MIN_VOLUME : volume || MID_VOLUME; // Mute or revert to the last known volume
+
+        setMuted(newMuted);
+        onVolumeChange(newVolume);
+    }, [isMuted, onVolumeChange, volume]);
+
+    const updateVolume = React.useCallback(
+        (newValue: number): void => {
+            const newVolume = Math.min(Math.max(newValue, MIN_VOLUME), MAX_VOLUME);
+
+            setMuted(!newVolume);
+            setVolume(newVolume);
+            onVolumeChange(newVolume);
+        },
+        [onVolumeChange],
+    );
+
+    React.useEffect(() => {
+        const handleKeydown = (event: KeyboardEvent): void => {
+            const key = decodeKeydown(event);
+
+            if (key === 'ArrowDown') {
+                updateVolume(volume - STEP_VOLUME);
+            }
+
+            if (key === 'ArrowUp') {
+                updateVolume(volume + STEP_VOLUME);
+            }
+
+            if (key === 'm' || key === 'Shift+M') {
+                updateMuted();
+            }
+        };
+
+        if (useHotkeys) {
+            document.addEventListener('keydown', handleKeydown);
+        }
+
+        return (): void => {
+            document.removeEventListener('keydown', handleKeydown);
+        };
+    }, [updateMuted, updateVolume, useHotkeys, volume]);
+
+    return (
+        <div className="bp-VolumeControls">
+            <MediaToggle
+                className="bp-VolumeControls-toggle"
+                onClick={(): void => updateMuted()}
+                title={title}
+                {...handlers}
+            >
+                <Icon />
+            </MediaToggle>
+
+            <div className={classNames('bp-VolumeControls-flyout', { 'bp-is-open': isActive })}>
+                <SliderControl
+                    max={MAX_VOLUME}
+                    min={MIN_VOLUME}
+                    onChange={updateVolume}
+                    step={STEP_VOLUME}
+                    title={__('media_volume_slider')}
+                    value={value}
+                    {...handlers}
+                />
+            </div>
+        </div>
+    );
+}
diff --git a/src/lib/viewers/controls/media/__tests__/VolumeControls-test.tsx b/src/lib/viewers/controls/media/__tests__/VolumeControls-test.tsx
new file mode 100644
index 0000000000..d84c74e528
--- /dev/null
+++ b/src/lib/viewers/controls/media/__tests__/VolumeControls-test.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { shallow, ShallowWrapper } from 'enzyme';
+import VolumeControls from '../VolumeControls';
+
+describe('VolumeControls', () => {
+    const getWrapper = (props = {}): ShallowWrapper =>
+        shallow(<VolumeControls onVolumeChange={jest.fn()} {...props} />);
+
+    describe('render', () => {
+        test('should return a valid wrapper', () => {
+            expect(getWrapper()).toBeDefined();
+        });
+    });
+});
diff --git a/src/lib/viewers/controls/slider/SliderControl.scss b/src/lib/viewers/controls/slider/SliderControl.scss
new file mode 100644
index 0000000000..a57e7db02c
--- /dev/null
+++ b/src/lib/viewers/controls/slider/SliderControl.scss
@@ -0,0 +1,99 @@
+@import '../styles';
+
+@mixin bp-SliderControl-thumb {
+    width: 12px;
+    height: 12px;
+    background: $box-blue;
+    border: 0;
+    border-radius: 12px;
+    cursor: pointer;
+}
+
+@mixin bp-SliderControl-track {
+    width: 100%;
+    height: 3px;
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+}
+
+.bp-SliderControl {
+    @include bp-Control--focus;
+
+    width: 100px;
+    height: 40px;
+    margin: 0;
+    padding: 0 5px;
+    background-color: transparent;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100% 3px;
+    background-origin: content-box;
+    cursor: pointer;
+    appearance: none;
+
+    // Thumb Button
+    &::-moz-range-thumb {
+        @include bp-SliderControl-thumb;
+    }
+
+    &::-ms-thumb {
+        @include bp-SliderControl-thumb;
+
+        margin-top: 0;
+    }
+
+    &::-webkit-slider-thumb {
+        @include bp-SliderControl-thumb;
+
+        margin-top: -5px;
+        appearance: none;
+    }
+
+    // Track
+    &::-moz-range-track {
+        @include bp-SliderControl-track;
+    }
+
+    &::-ms-track {
+        @include bp-SliderControl-track;
+
+        color: transparent;
+        border-color: transparent;
+        border-width: 5px 0;
+    }
+
+    &::-webkit-slider-runnable-track {
+        @include bp-SliderControl-track;
+    }
+
+    // Overrides
+    &::-ms-fill-lower {
+        background: $box-blue;
+        border: 0;
+    }
+
+    &::-ms-fill-upper {
+        background: $white;
+        border: 0;
+    }
+
+    /* stylelint-disable declaration-no-important */
+    @media screen and (-ms-high-contrast: none) {
+        & {
+            background-image: none !important; // IE supports lower/upper fills natively
+        }
+    }
+
+    @supports (-ms-ime-align: auto) {
+        & {
+            margin: 0; // Edge starts the margin from the thumb, not the track
+            background-image: none !important; // Edge supports lower/upper fills natively
+        }
+
+        &::-webkit-slider-thumb {
+            margin-top: 0;
+        }
+    }
+    /* stylelint-enable declaration-no-important */
+}
diff --git a/src/lib/viewers/controls/slider/SliderControl.tsx b/src/lib/viewers/controls/slider/SliderControl.tsx
new file mode 100644
index 0000000000..74fbd46068
--- /dev/null
+++ b/src/lib/viewers/controls/slider/SliderControl.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import classNames from 'classnames';
+import { bdlBoxBlue, white } from 'box-ui-elements/es/styles/variables';
+import usePreventKey from '../hooks/usePreventKey';
+import './SliderControl.scss';
+
+export type Props = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
+    className?: string;
+    onChange: (value: number) => void;
+    value: number;
+};
+
+export default function SliderControl({ className, onChange, value, ...rest }: Props): JSX.Element {
+    const inputElRef = React.useRef<HTMLInputElement>(null);
+    const percent = Math.round(value * 100);
+
+    const handleChange = ({ target }: React.ChangeEvent<HTMLInputElement>): void => {
+        onChange(parseFloat(target.value));
+    };
+
+    usePreventKey(inputElRef, ['ArrowLeft', 'ArrowRight']);
+
+    return (
+        <input
+            ref={inputElRef}
+            className={classNames('bp-SliderControl', className)}
+            onChange={handleChange}
+            style={{
+                backgroundImage: `linear-gradient(to right, ${bdlBoxBlue} ${percent}%, ${white} ${percent}%)`,
+            }}
+            type="range"
+            value={value}
+            {...rest}
+        />
+    );
+}
diff --git a/src/lib/viewers/media/MP3Controls.scss b/src/lib/viewers/media/MP3Controls.scss
new file mode 100644
index 0000000000..073df70003
--- /dev/null
+++ b/src/lib/viewers/media/MP3Controls.scss
@@ -0,0 +1,14 @@
+@import '~box-ui-elements/es/styles/variables';
+
+.bp-MP3Controls {
+    display: flex;
+    justify-content: space-between;
+    width: 360px; // Required, since the controls are the only visible elements within the viewer
+    padding: 5px 10px;
+    background-color: $black;
+}
+
+.bp-MP3Controls-group {
+    display: flex;
+    align-items: center;
+}
diff --git a/src/lib/viewers/media/MP3Controls.tsx b/src/lib/viewers/media/MP3Controls.tsx
new file mode 100644
index 0000000000..ad1c13d4ac
--- /dev/null
+++ b/src/lib/viewers/media/MP3Controls.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import DurationLabels, { Props as DurationLabelsProps } from '../controls/media/DurationLabels';
+import PlayPauseToggle, { Props as PlayControlsProps } from '../controls/media/PlayPauseToggle';
+import SettingsControls from '../controls/media/SettingsControls';
+import VolumeControls, { Props as VolumeControlsProps } from '../controls/media/VolumeControls';
+import './MP3Controls.scss';
+
+export type Props = PlayControlsProps & DurationLabelsProps & VolumeControlsProps;
+
+export default function MP3Controls({
+    currentTime,
+    durationTime,
+    initialVolume,
+    isPlaying,
+    onPlayPause,
+    onVolumeChange,
+    useHotkeys,
+}: Props): JSX.Element {
+    return (
+        <div className="bp-MP3Controls">
+            <div className="bp-MP3Controls-group">
+                <PlayPauseToggle isPlaying={isPlaying} onPlayPause={onPlayPause} useHotkeys={useHotkeys} />
+                <VolumeControls initialVolume={initialVolume} onVolumeChange={onVolumeChange} useHotkeys={useHotkeys} />
+                <DurationLabels currentTime={currentTime} durationTime={durationTime} />
+            </div>
+
+            <div className="bp-MP3Controls-group">
+                <SettingsControls />
+            </div>
+        </div>
+    );
+}
diff --git a/src/lib/viewers/media/MP3Viewer.js b/src/lib/viewers/media/MP3Viewer.js
index 9bdcd40475..50b5a5597d 100644
--- a/src/lib/viewers/media/MP3Viewer.js
+++ b/src/lib/viewers/media/MP3Viewer.js
@@ -1,4 +1,6 @@
+import React from 'react';
 import MediaBaseViewer from './MediaBaseViewer';
+import MP3Controls from './MP3Controls';
 import './MP3.scss';
 
 const CSS_CLASS_MP3 = 'bp-media-mp3';
@@ -24,10 +26,7 @@ class MP3Viewer extends MediaBaseViewer {
     }
 
     /**
-     * Loads the controls
-     *
-     * @private
-     * @return {void}
+     * @inheritdoc
      */
     loadUI() {
         super.loadUI();
@@ -35,6 +34,35 @@ class MP3Viewer extends MediaBaseViewer {
         this.mediaControls.resizeTimeScrubber();
     }
 
+    /**
+     * @inheritdoc
+     */
+    loadUIReact() {
+        super.loadUIReact();
+        this.renderUI();
+    }
+
+    /**
+     * @inheritdoc
+     */
+    renderUI() {
+        super.renderUI();
+
+        if (this.getViewerOption('useReactControls')) {
+            this.controls.render(
+                <MP3Controls
+                    currentTime={this.mediaEl.currentTime}
+                    durationTime={this.mediaEl.duration}
+                    initialVolume={this.cache.get('media-volume')}
+                    isPlaying={!this.mediaEl.paused}
+                    onPlayPause={this.togglePlay}
+                    onVolumeChange={this.setVolume}
+                    useHotkeys={this.options.useHotkeys}
+                />,
+            );
+        }
+    }
+
     /**
      * Auto-play was prevented, pause the audio
      *
diff --git a/src/lib/viewers/media/MediaBaseViewer.js b/src/lib/viewers/media/MediaBaseViewer.js
index de38c9bd75..131637c1b6 100644
--- a/src/lib/viewers/media/MediaBaseViewer.js
+++ b/src/lib/viewers/media/MediaBaseViewer.js
@@ -3,6 +3,7 @@ import isEmpty from 'lodash/isEmpty';
 import BaseViewer from '../BaseViewer';
 import Browser from '../../Browser';
 import MediaControls from './MediaControls';
+import MediaControlsRoot from './MediaControlsRoot';
 import PreviewError from '../../PreviewError';
 import Timer from '../../Timer';
 import { CLASS_ELEM_KEYBOARD_FOCUS, CLASS_HIDDEN, CLASS_IS_BUFFERING, CLASS_IS_VISIBLE } from '../../constants';
@@ -146,6 +147,10 @@ class MediaBaseViewer extends BaseViewer {
         // Best effort to emit current media metrics as page unloads
         window.removeEventListener('beforeunload', this.processMetrics);
 
+        if (this.controls && this.controls.destroy) {
+            this.controls.destroy();
+        }
+
         if (this.mediaControls) {
             this.mediaControls.removeAllListeners();
             this.mediaControls.destroy();
@@ -244,7 +249,11 @@ class MediaBaseViewer extends BaseViewer {
             return;
         }
 
-        this.loadUI();
+        if (this.getViewerOption('useReactControls')) {
+            this.loadUIReact();
+        } else {
+            this.loadUI();
+        }
 
         if (this.isAutoplayEnabled()) {
             this.autoplay();
@@ -464,7 +473,7 @@ class MediaBaseViewer extends BaseViewer {
     /**
      * Loads the controls
      *
-     * @private
+     * @protected
      * @return {void}
      */
     loadUI() {
@@ -477,6 +486,36 @@ class MediaBaseViewer extends BaseViewer {
         this.addEventListenersForMediaElement();
     }
 
+    /**
+     * Loads the React controls
+     *
+     * @protected
+     * @return {void}
+     */
+    loadUIReact() {
+        // Set default values for settings in cache if not already available
+        this.cache.set('media-autoplay', this.cache.get('media-autoplay') || 'Disabled');
+        this.cache.set('media-speed', this.cache.get('media-speed') || '1.0');
+
+        // Create the host element for the React controls
+        this.controls = new MediaControlsRoot({ containerEl: this.containerEl });
+
+        // Add event listeners for the media element
+        this.addEventListenersForMediaElement();
+    }
+
+    /**
+     * Render and/or updated the controls
+     *
+     * @protected
+     * @return {void}
+     */
+    renderUI() {
+        if (this.mediaControls) {
+            this.mediaControls.setTimeCode(this.mediaEl.currentTime);
+        }
+    }
+
     /**
      * Handles timeupdate event for MediaControls
      *
@@ -512,7 +551,7 @@ class MediaBaseViewer extends BaseViewer {
      * @return {void}
      */
     setTimeCode() {
-        this.mediaControls.setTimeCode(this.mediaEl.currentTime);
+        this.renderUI();
     }
 
     /**
@@ -531,7 +570,7 @@ class MediaBaseViewer extends BaseViewer {
     /**
      * Updates volume
      *
-     * @private
+     * @protected
      * @param {number} volume - Must be a number between [0,1], per HTML5 spec
      * @return {void}
      */
@@ -547,7 +586,9 @@ class MediaBaseViewer extends BaseViewer {
      * @return {void}
      */
     updateVolumeIcon() {
-        this.mediaControls.updateVolumeIcon(this.mediaEl.volume);
+        if (this.mediaControls) {
+            this.mediaControls.updateVolumeIcon(this.mediaEl.volume);
+        }
     }
 
     /**
@@ -560,7 +601,12 @@ class MediaBaseViewer extends BaseViewer {
      * @return {void}
      */
     playingHandler() {
-        this.mediaControls.showPauseIcon();
+        if (this.mediaControls) {
+            this.mediaControls.showPauseIcon();
+        } else {
+            this.renderUI();
+        }
+
         this.hideLoadingIcon();
         this.handleRate();
         this.handleVolume();
@@ -574,7 +620,11 @@ class MediaBaseViewer extends BaseViewer {
      * @return {void}
      */
     progressHandler() {
-        this.mediaControls.updateProgress();
+        if (this.mediaControls) {
+            this.mediaControls.updateProgress();
+        } else {
+            this.renderUI();
+        }
     }
 
     /**
@@ -584,7 +634,11 @@ class MediaBaseViewer extends BaseViewer {
      * @return {void}
      */
     pauseHandler() {
-        this.mediaControls.showPlayIcon();
+        if (this.mediaControls) {
+            this.mediaControls.showPlayIcon();
+        } else {
+            this.renderUI();
+        }
     }
 
     /**
@@ -656,7 +710,12 @@ class MediaBaseViewer extends BaseViewer {
      * @return {void}
      */
     resetPlayIcon() {
-        this.mediaControls.setTimeCode(0);
+        if (this.mediaControls) {
+            this.mediaControls.setTimeCode(0);
+        } else {
+            this.renderUI();
+        }
+
         this.hideLoadingIcon();
         this.pauseHandler();
     }
diff --git a/src/lib/viewers/media/MediaControlsRoot.scss b/src/lib/viewers/media/MediaControlsRoot.scss
new file mode 100644
index 0000000000..4d157a5eaf
--- /dev/null
+++ b/src/lib/viewers/media/MediaControlsRoot.scss
@@ -0,0 +1,6 @@
+.bp-MediaControlsRoot {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
diff --git a/src/lib/viewers/media/MediaControlsRoot.tsx b/src/lib/viewers/media/MediaControlsRoot.tsx
new file mode 100644
index 0000000000..3946f0618e
--- /dev/null
+++ b/src/lib/viewers/media/MediaControlsRoot.tsx
@@ -0,0 +1,33 @@
+import ReactDOM from 'react-dom';
+import './MediaControlsRoot.scss';
+
+export type Options = {
+    containerEl: HTMLElement;
+};
+
+export default class MediaControlsRoot {
+    containerEl: HTMLElement;
+
+    controlsEl: HTMLElement;
+
+    constructor({ containerEl }: Options) {
+        this.controlsEl = document.createElement('div');
+        this.controlsEl.setAttribute('class', 'bp-MediaControlsRoot');
+        this.controlsEl.setAttribute('data-testid', 'media-controls-wrapper');
+
+        this.containerEl = containerEl;
+        this.containerEl.appendChild(this.controlsEl);
+    }
+
+    destroy(): void {
+        ReactDOM.unmountComponentAtNode(this.controlsEl);
+
+        if (this.containerEl) {
+            this.containerEl.removeChild(this.controlsEl);
+        }
+    }
+
+    render(controls: JSX.Element): void {
+        ReactDOM.render(controls, this.controlsEl);
+    }
+}
diff --git a/src/lib/viewers/media/__tests__/MP3Controls-test.jsx b/src/lib/viewers/media/__tests__/MP3Controls-test.jsx
new file mode 100644
index 0000000000..e3b549952d
--- /dev/null
+++ b/src/lib/viewers/media/__tests__/MP3Controls-test.jsx
@@ -0,0 +1,7 @@
+describe('MP3Controls', () => {
+    describe('render', () => {
+        test('should return a valid wrapper', () => {
+            expect(true).toBe(true);
+        });
+    });
+});