Volume control

Author: mderrick

src/DefaultPlayer/Volume/Volume.css

@@ -1 +1,74 @@
-.component {}
+.component {
+    position: relative;
+}
+
+.component:hover {
+    background-color: #000;
+}
+
+.button {
+    width: 34px;
+    height: 34px;
+    background: none;
+    border: 0;
+    color: inherit;
+    font: inherit;
+    line-height: normal;
+    overflow: visible;
+    padding: 0;
+    cursor: pointer;
+}
+
+.button:focus {
+    outline: 0;
+}
+
+.icon {
+    padding: 7px;
+}
+
+.slider {
+    display: none;
+    position: absolute;
+    right: 5px;
+    bottom: 100%;
+    left: 5px;
+    height: 56px;
+    background-color: #000;
+}
+
+.component:hover .slider {
+    display: block;
+}
+
+.track {
+    position: absolute;
+    top: 8px;
+    bottom: 8px;
+    left: 50%;
+    width: 4px;
+    transform: translateX(-50%);
+    background-color: #3e3e3e;
+}
+
+.fill,
+.input {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+}
+
+.fill {
+    background-color: #fff;
+}
+
+.input {
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    -webkit-appearance: slider-vertical;
+    cursor: pointer;
+}

src/DefaultPlayer/Volume/Volume.js

@@ -1,32 +1,58 @@
 import React from 'react';
 import styles from './Volume.css';
+import VolumeOff from './../Icon/volume_off.svg';
+import VolumeUp from './../Icon/volume_up.svg';
 
 export default ({ setVolume, toggleMute, volume, muted, className }) => {
     const change = (e) => {
         setVolume(e.target.value);
     };
+    const volumeValue = muted
+        ? 0
+        : +volume;
+    const isSilent = muted || volume <= 0;
     return (
         <div className={[
             styles.component,
             className
         ].join(' ')}>
             <button
+                aria-label={isSilent
+                    ? 'Unmute'
+                    : 'Mute'}
+                className={styles.button}
                 onClick={toggleMute}
                 type="button">
-                { muted || volume <= 0
-                    ? 'Unmute'
-                    : 'Mute'
-                }
+                { isSilent
+                    ? <VolumeOff
+                        height={20}
+                        width={20}
+                        className={styles.icon}
+                        fill="#fff" />
+                    : <VolumeUp
+                        height={20}
+                        width={20}
+                        className={styles.icon}
+                        fill="#fff"/> }
             </button>
-            <input
-                min="0"
-                step={0.1}
-                max="1"
-                type="range"
-                onChange={change}
-                value={muted
-                    ? 0
-                    : +volume}  />
+            <div className={styles.slider}>
+                <div className={styles.track}>
+                    <div
+                        className={styles.fill}
+                        style={{
+                            height: `${volumeValue * 100}%`
+                        }} />
+                    <input
+                        min="0"
+                        step={0.1}
+                        max="1"
+                        type="range"
+                        orient="vertical"
+                        onChange={change}
+                        className={styles.input}
+                        value={volumeValue} />
+                </div>
+            </div>
         </div>
     );
 };

src/DefaultPlayer/Volume/Volume.test.js

@@ -0,0 +1,137 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Volume from './Volume';
+import styles from './Volume.css';
+import VolumeOff from './../Icon/volume_off.svg';
+import VolumeUp from './../Icon/volume_up.svg';
+
+describe('Volume', () => {
+    let component;
+
+    beforeAll(() => {
+        component = shallow(<Volume />);
+    });
+
+    it('should accept a className prop and append it to the components class', () => {
+        const newClassNameString = 'a new className';
+        expect(component.prop('className'))
+            .toContain(styles.component);
+        component.setProps({
+            className: newClassNameString
+        });
+        expect(component.prop('className'))
+            .toContain(styles.component);
+        expect(component.prop('className'))
+            .toContain(newClassNameString);
+    });
+
+    it('has a vertical range input with correct ranges and step', () => {
+        const rangeInput = component.find(`.${styles.input}`);
+        expect(rangeInput.prop('type'))
+            .toEqual('range');
+        expect(rangeInput.prop('orient'))
+            .toEqual('vertical');
+        expect(rangeInput.prop('step'))
+            .toEqual(0.1);
+        expect(rangeInput.prop('min'))
+            .toEqual('0');
+        expect(rangeInput.prop('max'))
+            .toEqual('1');
+    });
+
+    it('triggers \'toggleMute\' prop when the button is clicked', () => {
+        const spy = jest.fn();
+        component.setProps({
+            toggleMute: spy
+        });
+        expect(spy)
+            .not.toHaveBeenCalled();
+        component.find('button').simulate('click');
+        expect(spy)
+            .toHaveBeenCalled();
+    });
+
+    describe('when muted', () => {
+        beforeAll(() => {
+            component.setProps({
+                muted: true,
+                volume: 0.5
+            });
+        });
+
+        it('shows a muted icon', () => {
+            expect(component.html())
+                .toContain(VolumeOff);
+            expect(component.html())
+                .not.toContain(VolumeUp);
+        });
+
+        it('has an empty track fill and range input', () => {
+            expect(component.find(`.${styles.fill}`).prop('style').height)
+                .toEqual('0%');
+            expect(component.find(`.${styles.input}`).prop('value'))
+                .toEqual(0);
+        });
+
+        it('has correct aria-label', () => {
+            expect(component.find('button').prop('aria-label'))
+                .toEqual('Unmute');
+        });
+    });
+
+    describe('when unmuted but has no volume', () => {
+        beforeAll(() => {
+            component.setProps({
+                muted: false,
+                volume: 0
+            });
+        });
+
+        it('shows a muted icon', () => {
+            expect(component.html())
+                .toContain(VolumeOff);
+            expect(component.html())
+                .not.toContain(VolumeUp);
+        });
+
+        it('has an empty track fill and range input', () => {
+            expect(component.find(`.${styles.fill}`).prop('style').height)
+                .toEqual('0%');
+            expect(component.find(`.${styles.input}`).prop('value'))
+                .toEqual(0);
+        });
+
+        it('has correct aria-label', () => {
+            expect(component.find('button').prop('aria-label'))
+                .toEqual('Unmute');
+        });
+    });
+
+    describe('when has volume and is not muted', () => {
+        beforeAll(() => {
+            component.setProps({
+                muted: false,
+                volume: 0.5
+            });
+        });
+
+        it('shows an unmute icon', () => {
+            expect(component.html())
+                .toContain(VolumeUp);
+            expect(component.html())
+                .not.toContain(VolumeOff);
+        });
+
+        it('has some track filled and a range input value', () => {
+            expect(component.find(`.${styles.fill}`).prop('style').height)
+                .toEqual('50%');
+            expect(component.find(`.${styles.input}`).prop('value'))
+                .toEqual(0.5);
+        });
+
+        it('has correct aria-label', () => {
+            expect(component.find('button').prop('aria-label'))
+                .toEqual('Mute');
+        });
+    });
+});