Fullscreen control

Author: mderrick

src/DefaultPlayer/DefaultPlayer.js

@@ -2,6 +2,7 @@ import React from 'react';
 import video from './../video/video';
 import {
     setVolume,
+    fullscreen,
     toggleMute,
     togglePause,
     setCurrentTime,
@@ -14,6 +15,7 @@ import Seek from './Seek/Seek';
 import Volume from './Volume/Volume';
 import ErrorMessage from './ErrorMessage/ErrorMessage';
 import Time from './Time/Time';
+import Fullscreen from './Fullscreen/Fullscreen';
 
 const DefaultPlayer = ({
     video,
@@ -24,6 +26,7 @@ const DefaultPlayer = ({
     toggleMute,
     togglePause,
     setCurrentTime,
+    onFullscreenClick,
     ...restProps
 }) => {
     return (
@@ -55,6 +58,9 @@ const DefaultPlayer = ({
                     setVolume={setVolume}
                     toggleMute={toggleMute}
                     {...video} />
+                <Fullscreen
+                    onClick={onFullscreenClick}
+                    {...video} />
             </div>
         </div>
     );
@@ -71,6 +77,7 @@ export default video(
         }
     }),
     (videoEl, state) => ({
+        onFullscreenClick: () => fullscreen(videoEl),
         toggleMute: () => toggleMute(videoEl, state),
         togglePause: () => togglePause(videoEl, state),
         setVolume: (value) => setVolume(videoEl, state, value),

src/DefaultPlayer/Fullscreen/Fullscreen.css

@@ -0,0 +1,26 @@
+.component {}
+
+.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: 5px;
+}

src/DefaultPlayer/Fullscreen/Fullscreen.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import styles from './Fullscreen.css';
+import FullscreenIcon from './../Icon/fullscreen.svg';
+
+export default ({ onClick, className }) => {
+    return (
+        <div className={[
+            styles.component,
+            className
+        ].join(' ')}>
+            <button
+                type="button"
+                onClick={onClick}
+                aria-label="Fullscreen"
+                className={styles.button}>
+                    <FullscreenIcon
+                        fill="#fff"
+                        className={styles.icon} />
+            </button>
+        </div>
+    );
+};

src/DefaultPlayer/Fullscreen/Fullscreen.test.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Fullscreen from './Fullscreen';
+import styles from './Fullscreen.css';
+
+describe('Fullscreen', () => {
+    let component;
+
+    beforeAll(() => {
+        component = shallow(<Fullscreen />);
+    });
+
+    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('triggers \'onClick\' prop when the button is clicked', () => {
+        const spy = jest.fn();
+        component.setProps({
+            onClick: spy
+        });
+        expect(spy)
+            .not.toHaveBeenCalled();
+        component.find('button').simulate('click');
+        expect(spy)
+            .toHaveBeenCalled();
+    });
+
+    it('has correct aria-label', () => {
+        expect(component.find('button').prop('aria-label'))
+            .toEqual('Fullscreen');
+    });
+});

src/video/api.js

@@ -40,6 +40,18 @@ export const toggleMute = (videoEl, { volume, muted }) => {
     }
 };
 
+export const fullscreen = (videoEl) => {
+    if (videoEl.requestFullscreen) {
+        videoEl.requestFullscreen();
+    } else if (videoEl.msRequestFullscreen) {
+        videoEl.msRequestFullscreen();
+    } else if (videoEl.mozRequestFullScreen) {
+        videoEl.mozRequestFullScreen();
+    } else if (videoEl.webkitRequestFullscreen) {
+        videoEl.webkitRequestFullscreen();
+    }
+}
+
 /**
  * Custom getter methods that are commonly used
  * across video layouts. To be primarily used in

src/video/api.test.js

@@ -3,6 +3,7 @@ import {
     unmute,
     setVolume,
     toggleMute,
+    fullscreen,
     togglePause,
     setCurrentTime,
     getPercentagePlayed,
@@ -105,6 +106,32 @@ describe('api', () => {
         });
     });
 
+    describe('fullscreen', () => {
+        it('requestsFullscreen', () => {
+            videoElMock.requestFullscreen = jest.fn();
+            fullscreen(videoElMock);
+            expect(videoElMock.requestFullscreen).toHaveBeenCalled();
+        });
+
+        it('requestsFullscreen for ms', () => {
+            videoElMock.msRequestFullscreen = jest.fn();
+            fullscreen(videoElMock);
+            expect(videoElMock.msRequestFullscreen).toHaveBeenCalled();
+        });
+
+        it('requestsFullscreen for moz', () => {
+            videoElMock.mozRequestFullScreen = jest.fn();
+            fullscreen(videoElMock);
+            expect(videoElMock.mozRequestFullScreen).toHaveBeenCalled();
+        });
+
+        it('requestsFullscreen for webkit', () => {
+            videoElMock.webkitRequestFullscreen = jest.fn();
+            fullscreen(videoElMock);
+            expect(videoElMock.webkitRequestFullscreen).toHaveBeenCalled();
+        });
+    });
+
     describe('getPercentagePlayed', () => {
         it('returns correct percentage played', () => {
             expect(getPercentagePlayed({