fullscreen page exit fix

NUXT/components/Player/index.vue

@@ -20,15 +20,9 @@
       autoplay
       width="100%"
       :src="vidSrc"
-      style="
+      style="transition: filter 0.15s ease-in-out; max-height: 100vh"
-        transition: 0.15s ease-in-out;
+      :class="controls ? 'dim' : ''"
-        transition-properties: all;
+      :style="contain ? 'object-fit: contain;' : 'object-fit: cover;'"
-        max-height: 100vh;
-      "
-      :style="
-        (controls ? 'filter: brightness(50%);' : 'filter: none;',
-        contain ? 'object-fit: contain;' : 'object-fit: cover;')
-      "
     />
     <!-- TODO: controls || seeking, take seeking out of <seekbar> component -->
 
@@ -142,39 +136,52 @@ export default {
     console.log("sources", this.sources);
     this.vidSrc = this.sources[this.sources.length - 1].url;
   },
+  beforeDestroy() {
+    this.exitFullscreen();
+  },
   methods: {
     handleFullscreenChange() {
-      // close fullscreen 👇
       if (document?.fullscreenElement === this.$refs.vidcontainer) {
-        const cancellFullScreen =
+        this.exitFullscreen();
-          document.exitFullscreen ||
-          document.mozCancelFullScreen ||
-          document.webkitExitFullscreen ||
-          document.msExitFullscreen;
-        cancellFullScreen.call(document);
-        screen.orientation.lock("portrait");
-        screen.orientation.unlock();
-        this.$vuetube.navigationBar.show();
-        this.$vuetube.statusBar.show();
-        this.isFullscreen = false;
-        // open fullscreen 👇
       } else {
-        const element = this.$refs.vidcontainer;
+        this.openFullscreen();
-        const requestFullScreen =
-          element.requestFullscreen ||
-          element.webkitRequestFullScreen ||
-          element.mozRequestFullScreen ||
-          element.msRequestFullScreen;
-        requestFullScreen.call(element);
-        screen.orientation.lock("landscape");
-        this.$vuetube.navigationBar.hide();
-        this.$vuetube.statusBar.hide();
-        this.isFullscreen = true;
       }
     },
+    exitFullscreen() {
+      const cancellFullScreen =
+        document.exitFullscreen ||
+        document.mozCancelFullScreen ||
+        document.webkitExitFullscreen ||
+        document.msExitFullscreen;
+      cancellFullScreen.call(document);
+      screen.orientation.lock("portrait");
+      screen.orientation.unlock();
+      this.$vuetube.navigationBar.show();
+      this.$vuetube.statusBar.show();
+      this.isFullscreen = false;
+    },
+    openFullscreen() {
+      const element = this.$refs.vidcontainer;
+      const requestFullScreen =
+        element.requestFullscreen ||
+        element.webkitRequestFullScreen ||
+        element.mozRequestFullScreen ||
+        element.msRequestFullScreen;
+      requestFullScreen.call(element);
+      screen.orientation.lock("landscape");
+      this.$vuetube.navigationBar.hide();
+      this.$vuetube.statusBar.hide();
+      this.isFullscreen = true;
+    },
     getPlayer() {
       return this.$refs.player;
     },
   },
 };
 </script>
+
+<style>
+.dim {
+  filter: brightness(50%);
+}
+</style>