From 08f8a5de8641104d5f5b05e72d7f1df7f8de6346 Mon Sep 17 00:00:00 2001
From: Front <27463495+Frontesque@users.noreply.github.com>
Date: Sun, 1 May 2022 12:42:26 -0400
Subject: [PATCH] feat: :sparkles: beta player stuff

---
 NUXT/components/Player/controls.vue | 47 +++++++++++++++++++++++++++++
 NUXT/components/Player/index.vue    | 38 ++++++++++++++++++++---
 NUXT/components/Player/seekbar.vue  |  3 --
 3 files changed, 81 insertions(+), 7 deletions(-)
 create mode 100644 NUXT/components/Player/controls.vue

diff --git a/NUXT/components/Player/controls.vue b/NUXT/components/Player/controls.vue
new file mode 100644
index 0000000..5b94438
--- /dev/null
+++ b/NUXT/components/Player/controls.vue
@@ -0,0 +1,47 @@
+<template>
+  <div>
+
+
+    <v-btn class="centerVideoControls" @click="togglePlaying()">
+      <v-icon v-text="playing ? 'mdi-pause' : 'mdi-play' " ref="pausePlayIndicator" />
+    </v-btn>
+
+
+  </div>
+</template>
+
+<style scoped>
+  .centerVideoControls {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+</style>
+
+<script>
+  export default {
+    props: ["video"],
+
+    data() {
+      return {
+        playing: true,
+      }
+    },
+
+    methods: {
+      togglePlaying() {
+        if (this.video.paused) {
+            this.video.play()
+            this.playing = true;
+        } else {
+            this.video.pause()
+            this.playing = false;
+        }
+
+      }
+    }
+  }
+
+</script>
diff --git a/NUXT/components/Player/index.vue b/NUXT/components/Player/index.vue
index a5579ff..c76368d 100644
--- a/NUXT/components/Player/index.vue
+++ b/NUXT/components/Player/index.vue
@@ -1,8 +1,7 @@
 <template>
-  <div>
+  <div style="position: relative;">
     <video
       ref="player"
-      controls
       autoplay
       :src="vidSrc"
       width="100%"
@@ -10,18 +9,49 @@
       @webkitfullscreenchange="handleFullscreenChange"
     />
     <seekbar :video=$refs.player v-if="$refs.player" />
+
+
+
+    <!--   Video Controls   -->
+    <div class="videoControls" v-if="$refs.player">
+      <div class="videoControlsWrap">
+
+
+        <controls :video=$refs.player />
+
+
+      </div>
+    </div>
+    <!--   End Video Controls   -->
+
+
     <!-- <v-slider v-model="value" step="0"></v-slider> -->
-    {{ vidSrc }}
   </div>
 </template>
 
+<style scoped>
+.videoControls {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+}
+.videoControlsWrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+</style>
+
 <script>
 import seekbar from '~/components/Player/seekbar.vue';
+import controls from '~/components/Player/controls.vue';
 
 export default {
   props: ["sources"],
   components: {
-    seekbar
+    seekbar,
+    controls
   },
   data() {
     return {
diff --git a/NUXT/components/Player/seekbar.vue b/NUXT/components/Player/seekbar.vue
index fefa7aa..3e9aced 100644
--- a/NUXT/components/Player/seekbar.vue
+++ b/NUXT/components/Player/seekbar.vue
@@ -13,9 +13,6 @@
       :value="percentage"
     />
 
-    {{ percentage }}
-    {{ buffered }}
-
 
   </div>
 </template>