playpause cleanup

NUXT/components/Player/index.vue

@@ -38,8 +38,7 @@
       <h4>{{ video.title }}</h4>
       <div style="color: #aaa; font-size: 0.75rem">{{ video.channelName }}</div>
     </div>
-
+    <!-- // TODO: merge the bottom 2 into 1 reusable component and add animation -->
-    <!-- // TODO: merge the bottom 2 into 1 reusable component -->
     <v-btn
       text
       tile
@@ -85,6 +84,7 @@
       <captions />
       <close />
 
+      <div>
         <v-btn
           fab
           text
@@ -116,7 +116,8 @@
         <playpause
           v-if="$refs.player"
           :video="$refs.player"
-        @close="controls = false"
+          @pause="$refs.player.pause()"
+          @play="$refs.player.play(), (controls = false)"
         />
         <v-btn
           fab
@@ -146,6 +147,7 @@
         >
           <v-icon size="1rem">mdi-fast-forward-5</v-icon>
         </v-btn>
+      </div>
 
       <watchtime
         v-if="$refs.player"

NUXT/components/Player/playpause.vue

@@ -6,8 +6,7 @@
     style="position: absolute; top: calc(50% - 2rem); left: calc(50% - 2rem)"
     color="white"
     @click.stop="
-      (paused = !video.paused),
+      (paused = !video.paused), video.paused ? $emit('play') : $emit('pause')
-        video.paused ? (video.play(), $emit('close')) : video.pause()
     "
   >
     <v-icon size="3.5rem">
@@ -18,8 +17,13 @@
 
 <script>
 export default {
-  props: ["video"],
+  props: {
-  emits: ["close"],
+    video: {
+      type: Object,
+      required: true,
+    },
+  },
+  emits: ["play", "pause"],
   data: () => ({
     paused: false,
   }),