impl fullscreen mode

src/Controller.html

@@ -16,9 +16,7 @@
     <button on:click="toggle()">
       {#if isPlaying}
       <svg
-        t="1541411313529"
         class="icon"
-        style=""
         viewBox="0 0 1024 1024"
         version="1.1"
         xmlns="http://www.w3.org/2000/svg"
@@ -32,9 +30,7 @@
       </svg>
       {:else}
       <svg
-        t="1541410561137"
         class="icon"
-        style=""
         viewBox="0 0 1024 1024"
         version="1.1"
         xmlns="http://www.w3.org/2000/svg"
@@ -58,6 +54,19 @@
     </button>
     {/each}
     <Switch id="skip" bind:checked="skipInactive" disabled="{isSkipping}" label="skip inactive" />
+    <button on:click="fire('fullscreen')">
+      <svg
+        class="icon"
+        viewBox="0 0 1024 1024"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        width="16" height="16"
+      >
+        <defs><style type="text/css"></style></defs>
+        <path d="M916 380c-26.4 0-48-21.6-48-48L868 223.2 613.6 477.6c-18.4 18.4-48.8 18.4-68 0-18.4-18.4-18.4-48.8 0-68L800 156 692 156c-26.4 0-48-21.6-48-48 0-26.4 21.6-48 48-48l224 0c26.4 0 48 21.6 48 48l0 224C964 358.4 942.4 380 916 380zM231.2 860l108.8 0c26.4 0 48 21.6 48 48s-21.6 48-48 48l-224 0c-26.4 0-48-21.6-48-48l0-224c0-26.4 21.6-48 48-48 26.4 0 48 21.6 48 48L164 792l253.6-253.6c18.4-18.4 48.8-18.4 68 0 18.4 18.4 18.4 48.8 0 68L231.2 860z" p-id="1286"></path>
+      </svg>
+    </button>
   </div>
 </div>
 {/if}

src/Player.html

@@ -1,14 +1,22 @@
-<div class="rr-player">
+<div class="rr-player" ref:player style="{playerStyle}">
   <div class="rr-player__frame" ref:frame { style }></div>
   {#if replayer}
-  <Controller { replayer } {showController} />
+  <Controller { replayer } {showController} on:fullscreen="fullscreen()" />
   {/if}
 </div>
 
 <script>
   import { Replayer } from 'rrweb';
   import 'rrweb/dist/rrweb.min.css';
-  import { inlineCss } from './utils.js';
+  import {
+    inlineCss,
+    openFullscreen,
+    exitFullscreen,
+    isFullscreen,
+    onFullscreenChange,
+  } from './utils.js';
+
+  const controllerHeight = 80;
 
   export default {
     components: {
@@ -30,6 +38,12 @@
           height: `${height}px`,
         });
       },
+      playerStyle({ width, height }) {
+        return inlineCss({
+          width: `${width}px`,
+          height: `${height + controllerHeight}px`,
+        });
+      },
     },
     methods: {
       updateScale(el, frameDimension) {
@@ -40,8 +54,13 @@
           `scale(${Math.min(widthScale, heightScale, 1)})` +
           'translate(-50%, -50%)';
       },
+      fullscreen() {
+        if (this.refs.player) {
+          isFullscreen() ? exitFullscreen() : openFullscreen(this.refs.player);
+        }
+      },
     },
-    oncreate(p) {
+    oncreate() {
       const { events } = this.get();
       const replayer = new Replayer(events, {
         speed: 1,
@@ -54,6 +73,39 @@
       this.set({
         replayer,
       });
+      this.fullscreenListener = onFullscreenChange(() => {
+        if (isFullscreen()) {
+          setTimeout(() => {
+            const { width, height } = this.get();
+            // store the original dimension which do not need to be reactive
+            this._width = width;
+            this._height = height;
+            const dimension = {
+              width: document.body.offsetWidth,
+              height: document.body.offsetHeight - controllerHeight,
+            };
+            this.set(dimension);
+            this.updateScale(replayer.wrapper, {
+              width: replayer.iframe.offsetWidth,
+              height: replayer.iframe.offsetHeight,
+            });
+          }, 0);
+        } else {
+          this.set({
+            width: this._width,
+            height: this._height,
+          });
+          this.updateScale(replayer.wrapper, {
+            width: replayer.iframe.offsetWidth,
+            height: replayer.iframe.offsetHeight,
+          });
+        }
+      });
+    },
+    ondestroy() {
+      if (this.fullscreenListener) {
+        this.fullscreenListener();
+      }
     },
   };
 

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);
+  };
+}