polyfill fullscreen api

src/ui/component/fileActions/view.jsx

@@ -4,6 +4,7 @@ import * as ICONS from 'constants/icons';
 import * as React from 'react';
 import Button from 'component/button';
 import Tooltip from 'component/common/tooltip';
+import { requestFullscreen } from 'util/full-screen';
 
 type FileInfo = {
   claim_id: string,
@@ -22,7 +23,7 @@ class FileActions extends React.PureComponent<Props> {
   maximizeViewer = () => {
     // Get viewer container
     const viewer = document.getElementsByClassName('content__embedded')[0];
-    viewer.webkitRequestFullscreen();
+    requestFullscreen(viewer);
   };
 
   render() {

src/ui/component/fileViewer/view.jsx

@@ -5,6 +5,7 @@ import classnames from 'classnames';
 import analytics from 'analytics';
 import LoadingScreen from 'component/common/loading-screen';
 import PlayButton from './internal/play-button';
+import { requestFullscreen, exitFullscreen } from 'util/full-screen';
 
 const Player = React.lazy(() =>
   import(
@@ -153,18 +154,18 @@ class FileViewer extends React.PureComponent<Props> {
       // Otherwise it should be handle internally on the video player
       // or it will break the toggle fullscreen button
       if (!isPlayableType) {
-        this.container.current.webkitRequestFullScreen();
+        requestFullscreen(this.container.current);
       }
       // Request fullscreen mode for the video player
       // Don't use this with the new player
       // @if TARGET='app'
       else {
         const video = document.getElementsByTagName('video')[0];
-        video && video.webkitRequestFullscreen();
+        video && requestFullscreen(video);
       }
       // @endif
     } else {
-      document.webkitExitFullscreen();
+      exitFullscreen();
     }
   }
 

src/ui/util/full-screen.js

@@ -0,0 +1,43 @@
+const prefixes = {
+  fullscreenElement: ['fullscreenElement', 'msFullscreenElement', 'mozFullScreenElement', 'webkitFullscreenElement'],
+  fullscreenEnabled: ['fullscreenEnabled', 'msFullscreenEnabled', 'mozFullScreenEnabled', 'webkitFullscreenEnabled'],
+  requestFullscreen: ['requestFullscreen', 'msRequestFullscreen', 'mozRequestFullScreen', 'webkitRequestFullscreen'],
+  exitFullscreen: ['exitFullscreen', 'msExitFullscreen', 'mozCancelFullScreen', 'webkitExitFullscreen'],
+  fullscreenChange: ['fullscreenChange', 'MSFullscreenChange', 'mozfullscreenchange', 'webkitfullscreenchange'],
+};
+
+const getPrefix = () => {
+  let prefixIndex = 0;
+  // validate prefix
+  prefixes.fullscreenEnabled.some((prefix, index) => {
+    if (document[prefix] || document[prefix] === false) {
+      prefixIndex = index;
+      return true;
+    }
+  });
+  // prefix vendor index
+  return prefixIndex;
+};
+
+export const fullscreenElement = () => {
+  const index = getPrefix();
+  return prefixes.fullscreenElement[index];
+};
+
+export const requestFullscreen = elem => {
+  const index = getPrefix();
+  const prefix = prefixes.requestFullscreen[index];
+  elem[prefix] && elem[prefix]();
+};
+
+export const exitFullscreen = () => {
+  const index = getPrefix();
+  const prefix = prefixes.exitFullscreen[index];
+  document[prefix] && document[prefix]();
+};
+
+export const onFullscreenChange = (event, callback) => {
+  const index = getPrefix();
+  const prefix = prefixes.fullscreenChange[index];
+  document[`${event}EventListener`](prefix, callback, false);
+};