style: 🎨 Seperate "video player" into its own component

NUXT/components/videoPlayer.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+
+
+    <video
+        controls
+        autoplay
+        :src="vidSrc"
+        width="100%"
+        @webkitfullscreenchange="handleFullscreenChange"
+        ref="player"
+        style="max-height: 50vh"
+    />
+
+
+  </div>
+</template>
+
+<script>
+  export default {
+    props: [
+        "vidSrc"
+    ],
+
+    methods: {
+      handleFullscreenChange() {
+        if (document.fullscreenElement === this.$refs.player) {
+          this.$vuetube.statusBar.hide();
+          this.$vuetube.navigationBar.hide();
+        } else {
+          this.$vuetube.statusBar.show();
+          this.$vuetube.navigationBar.show();
+        }
+      },
+    }
+  }
+
+</script>

NUXT/pages/watch.vue

@@ -1,14 +1,6 @@
 <template>
   <div class="accent">
-    <video
-      controls
-      autoplay
-      :src="vidSrc"
-      width="100%"
-      @webkitfullscreenchange="handleFullscreenChange"
-      ref="player"
-      style="max-height: 50vh"
-    />
+    <videoPlayer :vidSrc="vidSrc" />
     <v-card v-if="loaded" class="ml-2 mr-2 accent" flat>
       <v-card-title
         class="mt-2"
@@ -190,15 +182,6 @@ export default {
         dialogTitle: "Share video",
       });
     },
-    handleFullscreenChange() {
-      if (document.fullscreenElement === this.$refs.player) {
-        this.$vuetube.statusBar.hide();
-        this.$vuetube.navigationBar.hide();
-      } else {
-        this.$vuetube.statusBar.show();
-        this.$vuetube.navigationBar.show();
-      }
-    },
   },
   watch: {
     // Watch for change in the route query string (in this case, ?v=xxxxxxxx to ?v=yyyyyyyy)