From 2d35068a30a57a759981fc9989c3abad8aade244 Mon Sep 17 00:00:00 2001
From: Travis Shivers <ttshivers@gmail.com>
Date: Sat, 8 Aug 2020 20:31:05 -0500
Subject: [PATCH] Use native fullscreen api

---
 package-lock.json |  6 ------
 package.json      |  1 -
 src/App.vue       | 26 ++++++++++++++++----------
 3 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 683fd325..8af59e9f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6286,12 +6286,6 @@
       "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
       "dev": true
     },
-    "fscreen": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/fscreen/-/fscreen-1.0.2.tgz",
-      "integrity": "sha1-xMUdltgZ11oZ1yjg30Rfm+m7mE8=",
-      "dev": true
-    },
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
diff --git a/package.json b/package.json
index 881d5406..e060b93e 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,6 @@
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-vue": "^6.2.2",
     "fast-xml-parser": "^3.17.4",
-    "fscreen": "^1.0.2",
     "last-commit-log": "^3.0.4",
     "libjass": "^0.11.0",
     "mux.js": "^5.6.4",
diff --git a/src/App.vue b/src/App.vue
index 0e2c44ab..94f1cf0b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -46,7 +46,7 @@
           dark
           class="hidden-lg-and-up"
           icon
-          @click="goFullscreen"
+          @click="toggleFullScreen"
         >
           <v-icon>fullscreen</v-icon>
         </v-btn>
@@ -154,7 +154,6 @@ import './assets/css/style.css';
 import {
   mapActions, mapGetters, mapMutations, mapState,
 } from 'vuex';
-import fscreen from 'fscreen';
 import redirection from '@/mixins/redirection';
 
 export default {
@@ -173,7 +172,6 @@ export default {
 
   data() {
     return {
-      appIsFullscreen: false,
       links: [
         {
           title: 'Github',
@@ -325,11 +323,11 @@ export default {
   },
 
   mounted() {
-    fscreen.addEventListener('fullscreenchange', () => {
-      const isFullscreen = fscreen.fullscreenElement !== null;
-      this.appIsFullscreen = isFullscreen;
-      document.body.classList.toggle('is-fullscreen', isFullscreen);
-    });
+    document.addEventListener('fullscreenchange', this.onFullScreenChange);
+  },
+
+  beforeDestroy() {
+    document.removeEventListener('fullscreenchange', this.onFullScreenChange);
   },
 
   methods: {
@@ -358,8 +356,16 @@ export default {
       return this.DISPLAY_NOTIFICATION('Copied to clipboard');
     },
 
-    goFullscreen() {
-      fscreen.requestFullscreen(document.body);
+    onFullScreenChange() {
+      document.body.classList.toggle('is-fullscreen', document.fullscreenElement);
+    },
+
+    toggleFullScreen() {
+      if (!document.fullscreenElement) {
+        document.documentElement.requestFullscreen();
+      } else if (document.exitFullscreen) {
+        document.exitFullscreen();
+      }
     },
   },
 };