Merge pull request #55 from ttshivers/native_fscreen

Use native Fullscreen API

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",

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",

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