impl fullscreen mode

src/utils.js

@@ -31,3 +31,56 @@ export function formatTime(ms) {
   }
   return `${padZero(minute)}:${padZero(second)}`;
 }
+
+export function openFullscreen(el) {
+  if (el.requestFullscreen) {
+    return el.requestFullscreen();
+  } else if (el.mozRequestFullScreen) {
+    /* Firefox */
+    return el.mozRequestFullScreen();
+  } else if (el.webkitRequestFullscreen) {
+    /* Chrome, Safari and Opera */
+    return el.webkitRequestFullscreen();
+  } else if (el.msRequestFullscreen) {
+    /* IE/Edge */
+    return el.msRequestFullscreen();
+  }
+}
+
+export function exitFullscreen() {
+  if (document.exitFullscreen) {
+    return document.exitFullscreen();
+  } else if (document.mozExitFullscreen) {
+    /* Firefox */
+    return document.mozExitFullscreen();
+  } else if (document.webkitExitFullscreen) {
+    /* Chrome, Safari and Opera */
+    return document.webkitExitFullscreen();
+  } else if (document.msExitFullscreen) {
+    /* IE/Edge */
+    return document.msExitFullscreen();
+  }
+}
+
+export function isFullscreen() {
+  return (
+    document.fullscreen ||
+    document.webkitIsFullScreen ||
+    document.mozFullScreen ||
+    document.msFullscreenElement
+  );
+}
+
+export function onFullscreenChange(handler) {
+  document.addEventListener('fullscreenchange', handler);
+  document.addEventListener('webkitfullscreenchange', handler);
+  document.addEventListener('mozfullscreenchange', handler);
+  document.addEventListener('MSFullscreenChange', handler);
+
+  return () => {
+    document.removeEventListener('fullscreenchange', handler);
+    document.removeEventListener('webkitfullscreenchange', handler);
+    document.removeEventListener('mozfullscreenchange', handler);
+    document.removeEventListener('MSFullscreenChange', handler);
+  };
+}