From 24fc907b4c0e24efd7c14dad8697efbd19579206 Mon Sep 17 00:00:00 2001
From: Front <27463495+Frontesque@users.noreply.github.com>
Date: Thu, 24 Mar 2022 18:47:48 -0400
Subject: [PATCH] style: :art: Seperate "video player" into its own component

---
 NUXT/components/videoPlayer.vue | 38 +++++++++++++++++++++++++++++++++
 NUXT/pages/watch.vue            | 19 +----------------
 2 files changed, 39 insertions(+), 18 deletions(-)
 create mode 100644 NUXT/components/videoPlayer.vue

diff --git a/NUXT/components/videoPlayer.vue b/NUXT/components/videoPlayer.vue
new file mode 100644
index 0000000..6c1f165
--- /dev/null
+++ b/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>
diff --git a/NUXT/pages/watch.vue b/NUXT/pages/watch.vue
index 298ee4a..1dd0c10 100644
--- a/NUXT/pages/watch.vue
+++ b/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)