From 059ace024cacd66a315b84adde6d53e20a8aba93 Mon Sep 17 00:00:00 2001
From: Kenny <27463495+Frontesque@users.noreply.github.com>
Date: Wed, 30 Mar 2022 08:32:08 -0400
Subject: [PATCH] refactor: :zap:

---
 NUXT/components/Player/VTPlayerV1.vue | 130 +++++++++++++++++++++++++
 NUXT/components/Player/index.vue      | 126 ++++++++++++++++++++++++
 NUXT/components/Player/scrubber.vue   |  30 ++++++
 NUXT/components/VTPlayerV1.vue        | 132 --------------------------
 NUXT/pages/watch_debug.vue            |   4 +-
 5 files changed, 288 insertions(+), 134 deletions(-)
 create mode 100644 NUXT/components/Player/VTPlayerV1.vue
 create mode 100644 NUXT/components/Player/index.vue
 create mode 100644 NUXT/components/Player/scrubber.vue
 delete mode 100644 NUXT/components/VTPlayerV1.vue

diff --git a/NUXT/components/Player/VTPlayerV1.vue b/NUXT/components/Player/VTPlayerV1.vue
new file mode 100644
index 0000000..f89b5f6
--- /dev/null
+++ b/NUXT/components/Player/VTPlayerV1.vue
@@ -0,0 +1,130 @@
+<template>
+  <div>
+    <div class="content">
+      <v-btn class="pausePlay" text @click="playing = !playing">
+        <v-icon size="5em" color="white">mdi-{{ playing ? "pause" : "play" }}</v-icon>
+      </v-btn>
+
+      <div class="seekBar">
+        <v-slider
+          dense
+          hide-details
+          min="0"
+          :max="videoEnd"
+          :value="currentTime"
+          @change="scrubTo()"
+        />
+      </div>
+
+      <video
+        ref="player"
+        autoplay
+        :src="vidSrc"
+        width="100%"
+        style="max-height: 50vh"
+        @webkitfullscreenchange="handleFullscreenChange"
+      />
+    </div>
+
+    <div v-for="(source, index) in sources" :key="index">
+      {{ source.qualityLabel }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    sources: {
+      type: Array,
+      default: [],
+    },
+  },
+  data() {
+    return {
+      //---   Basic Information   ---//
+      playerVersion: 0.1,
+      vidSrc: null,
+
+      //---   Player State Information   ---//
+      playing: true,
+      currentTime: 0,
+      videoEnd: 0,
+    };
+  },
+
+  watch: {
+    playing() {
+      this.playing ? this.$refs.player.play() : this.$refs.player.pause();
+    },
+  },
+
+  mounted() {
+    const src = this.sources[this.sources.length - 1].url;
+    this.vidSrc = src;
+
+    setInterval(this.updateTiming, 100);
+  },
+
+  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();
+      }
+    },
+
+    scrubTo() {
+      const player = this.$refs.player;
+      player.currentTime = 0;
+      console.log(val, this.currentTime, player.currentTime);
+    },
+
+    updateTiming() {
+      const player = this.$refs.player;
+      if (player == undefined) return;
+      this.videoEnd = player.duration;
+      this.currentTime = player.currentTime;
+      console.log(player.currentTime, this.currentTime);
+    },
+  },
+};
+</script>
+
+<style scoped>
+/***   Overlay Information   ***/
+.content {
+  position: relative;
+  width: 500px;
+  margin: 0 auto;
+}
+.content video {
+  width: 100%;
+  display: block;
+}
+.content:before {
+  content: "";
+  position: absolute;
+  background: rgba(0, 0, 0, 0.5);
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+/***   General Overlay Styling   ***/
+.pausePlay {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.seekBar {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+}
+</style>
diff --git a/NUXT/components/Player/index.vue b/NUXT/components/Player/index.vue
new file mode 100644
index 0000000..9a69dd9
--- /dev/null
+++ b/NUXT/components/Player/index.vue
@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <div class="content">
+      <v-btn class="pausePlay" text @click="playing = !playing">
+        <v-icon size="5em" color="white">mdi-{{ playing ? "pause" : "play" }}</v-icon>
+      </v-btn>
+
+      <scrubber />
+
+      <video
+        ref="player"
+        autoplay
+        :src="vidSrc"
+        width="100%"
+        style="max-height: 50vh"
+        @webkitfullscreenchange="handleFullscreenChange"
+      />
+    </div>
+
+    <div v-for="(source, index) in sources" :key="index">
+      {{ source.qualityLabel }}
+    </div>
+  </div>
+</template>
+
+<script>
+import scrubber from "./scrubber.vue";
+
+export default {
+  components: {
+    scrubber,
+  },
+  props: {
+    sources: {
+      type: Array,
+      default: [],
+    },
+  },
+  data() {
+    return {
+      //---   Basic Information   ---//
+      playerVersion: 0.1,
+      vidSrc: null,
+
+      //---   Player State Information   ---//
+      playing: true,
+      currentTime: 0,
+      videoEnd: 0,
+    };
+  },
+
+  watch: {
+    playing() {
+      this.playing ? this.$refs.player.play() : this.$refs.player.pause();
+    },
+  },
+
+  mounted() {
+    const src = this.sources[this.sources.length - 1].url;
+    this.vidSrc = src;
+
+    setInterval(this.updateTiming, 100);
+  },
+
+  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();
+      }
+    },
+
+    scrubTo() {
+      const player = this.$refs.player;
+      player.currentTime = 0;
+      console.log(val, this.currentTime, player.currentTime);
+    },
+
+    updateTiming() {
+      const player = this.$refs.player;
+      if (player == undefined) return;
+      this.videoEnd = player.duration;
+      this.currentTime = player.currentTime;
+      console.log(player.currentTime, this.currentTime);
+    },
+  },
+};
+</script>
+
+<style scoped>
+/***   Overlay Information   ***/
+.content {
+  position: relative;
+  width: 500px;
+  margin: 0 auto;
+}
+.content video {
+  width: 100%;
+  display: block;
+}
+.content:before {
+  content: "";
+  position: absolute;
+  background: rgba(0, 0, 0, 0.5);
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+/***   General Overlay Styling   ***/
+.pausePlay {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.seekBar {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+}
+</style>
diff --git a/NUXT/components/Player/scrubber.vue b/NUXT/components/Player/scrubber.vue
new file mode 100644
index 0000000..f86e12a
--- /dev/null
+++ b/NUXT/components/Player/scrubber.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+
+    <div class="scrubber">
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  duration: {
+    type: Number,
+    default: 0,
+  },
+  endDuration: {
+    type: Number,
+    default: 0,
+  },
+}
+</script>
+
+<style scoped>
+.scrubber {
+  width: 100%;
+  height: 1em;
+  background: #000;
+}
+</style>
diff --git a/NUXT/components/VTPlayerV1.vue b/NUXT/components/VTPlayerV1.vue
deleted file mode 100644
index 293040b..0000000
--- a/NUXT/components/VTPlayerV1.vue
+++ /dev/null
@@ -1,132 +0,0 @@
-<template>
-  <div>
-
-    <div class="content">
-
-      <v-btn @click="playing = !playing" class="pausePlay" text><v-icon size="5em" color="white">mdi-{{playing ? 'pause' : 'play' }}</v-icon></v-btn>
-
-      <div class="seekBar">
-        <v-slider dense hide-details min="0" :max="videoEnd" :value="currentTime" @change="scrubTo(value)" />
-      </div>
-
-      <video
-        autoplay
-        :src="vidSrc"
-        width="100%"
-        @webkitfullscreenchange="handleFullscreenChange"
-        ref="player"
-        style="max-height: 50vh"
-      />
-    </div>
-
-    <div v-for="(source, index) in sources" :key="index">
-      {{ source.qualityLabel }}
-    </div>
-
-
-  </div>
-</template>
-
-<script>
-  export default {
-    props: {
-      sources: {
-        type: Array,
-        default: [],
-      },
-    },
-    data() {
-      return {
-        //---   Basic Information   ---//
-        playerVersion: 0.1,
-        vidSrc: null,
-
-        //---   Player State Information   ---//
-        playing: true,
-        currentTime: 0,
-        videoEnd: 0,
-
-      }
-    },
-
-    watch: {
-      playing() {
-        this.playing
-        ? this.$refs.player.play()
-        : this.$refs.player.pause()
-      },
-    },
-
-    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();
-        }
-      },
-
-      scrubTo(val) {
-        const player = this.$refs.player;
-        player.currentTime = val;
-        console.log(val, this.currentTime, player.currentTime)
-      },
-
-      updateTiming() {
-        const player = this.$refs.player;
-        this.videoEnd = player?.duration;
-        this.currentTime = player?.currentTime;
-        console.log(player.currentTime, this.currentTime)
-      }
-
-    },
-
-
-    mounted() {
-      const src = this.sources[this.sources.length-1].url;
-      this.vidSrc = src;
-
-      setInterval(this.updateTiming, 100);
-    }
-
-
-  }
-
-</script>
-
-<style scoped>
-/***   Overlay Information   ***/
-.content {
-  position: relative;
-  width: 500px;
-  margin: 0 auto;
-}
-.content video {
-  width: 100%;
-  display: block;
-}
-.content:before {
-  content: '';
-  position: absolute;
-  background: rgba(0, 0, 0, 0.5);
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-
-/***   General Overlay Styling   ***/
-.pausePlay {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-.seekBar {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-}
-</style>
\ No newline at end of file
diff --git a/NUXT/pages/watch_debug.vue b/NUXT/pages/watch_debug.vue
index d9cf883..1d66c68 100644
--- a/NUXT/pages/watch_debug.vue
+++ b/NUXT/pages/watch_debug.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="accent">
 
-    <VTPlayerV1 :sources="sources" v-if="sources.length > 0" />
+    <player :sources="sources" v-if="sources.length > 0" />
 
   </div>
 </template>
 
 <script>
-
+import player from "~/components/Player/index.vue"
 export default {
   data() {
     return {