feat: ✨ beta player stuff

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>

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 {

NUXT/components/Player/seekbar.vue

@@ -13,9 +13,6 @@
       :value="percentage"
     />
 
-    {{ percentage }}
-    {{ buffered }}
-
 
   </div>
 </template>