From 0777b687caa3cfb6305dfed9132e590d4b46b038 Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Wed, 8 Jun 2022 14:05:00 -0400
Subject: [PATCH] playpause cleanup

---
 NUXT/components/Player/index.vue     | 128 ++++++++++++++-------------
 NUXT/components/Player/playpause.vue |  12 ++-
 2 files changed, 73 insertions(+), 67 deletions(-)

diff --git a/NUXT/components/Player/index.vue b/NUXT/components/Player/index.vue
index eafd806..4730fcb 100644
--- a/NUXT/components/Player/index.vue
+++ b/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 -->
+    <!-- // TODO: merge the bottom 2 into 1 reusable component and add animation -->
     <v-btn
       text
       tile
@@ -85,67 +84,70 @@
       <captions />
       <close />
 
-      <v-btn
-        fab
-        text
-        small
-        style="
-          position: absolute;
-          top: calc(50% - 1.25rem);
-          left: calc(50% - 10rem);
-        "
-        color="white"
-        @click.stop="$refs.player.currentTime -= 5"
-      >
-        <v-icon size="1rem">mdi-rewind-5</v-icon>
-      </v-btn>
-      <v-btn
-        fab
-        text
-        style="
-          position: absolute;
-          top: calc(50% - 1.75rem);
-          left: calc(50% - 6.5rem);
-        "
-        color="white"
-        disabled
-        @click.stop=""
-      >
-        <v-icon size="2rem">mdi-skip-previous</v-icon>
-      </v-btn>
-      <playpause
-        v-if="$refs.player"
-        :video="$refs.player"
-        @close="controls = false"
-      />
-      <v-btn
-        fab
-        text
-        style="
-          position: absolute;
-          top: calc(50% - 1.75rem);
-          left: calc(50% + 3rem);
-        "
-        color="white"
-        disabled
-        @click.stop=""
-      >
-        <v-icon size="2rem">mdi-skip-next</v-icon>
-      </v-btn>
-      <v-btn
-        fab
-        text
-        small
-        style="
-          position: absolute;
-          top: calc(50% - 1.25rem);
-          left: calc(50% + 7rem);
-        "
-        color="white"
-        @click.stop="$refs.player.currentTime += 5"
-      >
-        <v-icon size="1rem">mdi-fast-forward-5</v-icon>
-      </v-btn>
+      <div>
+        <v-btn
+          fab
+          text
+          small
+          style="
+            position: absolute;
+            top: calc(50% - 1.25rem);
+            left: calc(50% - 10rem);
+          "
+          color="white"
+          @click.stop="$refs.player.currentTime -= 5"
+        >
+          <v-icon size="1rem">mdi-rewind-5</v-icon>
+        </v-btn>
+        <v-btn
+          fab
+          text
+          style="
+            position: absolute;
+            top: calc(50% - 1.75rem);
+            left: calc(50% - 6.5rem);
+          "
+          color="white"
+          disabled
+          @click.stop=""
+        >
+          <v-icon size="2rem">mdi-skip-previous</v-icon>
+        </v-btn>
+        <playpause
+          v-if="$refs.player"
+          :video="$refs.player"
+          @pause="$refs.player.pause()"
+          @play="$refs.player.play(), (controls = false)"
+        />
+        <v-btn
+          fab
+          text
+          style="
+            position: absolute;
+            top: calc(50% - 1.75rem);
+            left: calc(50% + 3rem);
+          "
+          color="white"
+          disabled
+          @click.stop=""
+        >
+          <v-icon size="2rem">mdi-skip-next</v-icon>
+        </v-btn>
+        <v-btn
+          fab
+          text
+          small
+          style="
+            position: absolute;
+            top: calc(50% - 1.25rem);
+            left: calc(50% + 7rem);
+          "
+          color="white"
+          @click.stop="$refs.player.currentTime += 5"
+        >
+          <v-icon size="1rem">mdi-fast-forward-5</v-icon>
+        </v-btn>
+      </div>
 
       <watchtime
         v-if="$refs.player"
diff --git a/NUXT/components/Player/playpause.vue b/NUXT/components/Player/playpause.vue
index d804fca..2216351 100644
--- a/NUXT/components/Player/playpause.vue
+++ b/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),
-        video.paused ? (video.play(), $emit('close')) : video.pause()
+      (paused = !video.paused), video.paused ? $emit('play') : $emit('pause')
     "
   >
     <v-icon size="3.5rem">
@@ -18,8 +17,13 @@
 
 <script>
 export default {
-  props: ["video"],
-  emits: ["close"],
+  props: {
+    video: {
+      type: Object,
+      required: true,
+    },
+  },
+  emits: ["play", "pause"],
   data: () => ({
     paused: false,
   }),