From 4b4c7d09263478cf61a039d32760277058a914b1 Mon Sep 17 00:00:00 2001
From: Bnyro <yannick.fehler@web.de>
Date: Sun, 28 Aug 2022 19:40:35 +0200
Subject: [PATCH] refactor -> ModalComponent

---
 src/components/ModalComponent.vue   | 42 +++++++++++++++++
 src/components/PlaylistAddModal.vue | 68 ++++++++++-----------------
 src/components/ShareModal.vue       | 71 ++++++++++-------------------
 3 files changed, 90 insertions(+), 91 deletions(-)
 create mode 100644 src/components/ModalComponent.vue

diff --git a/src/components/ModalComponent.vue b/src/components/ModalComponent.vue
new file mode 100644
index 00000000..f1e5ad9b
--- /dev/null
+++ b/src/components/ModalComponent.vue
@@ -0,0 +1,42 @@
+<template>
+    <div class="modal">
+        <div>
+            <div class="modal-container">
+                <slot></slot>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    mounted() {
+        window.addEventListener("keydown", this.handleKeyDown);
+    },
+    unmounted() {
+        window.removeEventListener("keydown", this.handleKeyDown);
+    },
+    methods: {
+        handleKeyDown(event) {
+            if (event.code === "Escape") {
+                this.$emit("close");
+            } else return;
+            event.preventDefault();
+        },
+    },
+};
+</script>
+
+<style scoped>
+.modal {
+    @apply fixed z-50 top-0 left-0 w-full h-full bg-dark-900 bg-opacity-80 transition-opacity table;
+}
+
+.modal > div {
+    @apply table-cell align-middle;
+}
+
+.modal-container {
+    @apply w-min m-auto px-8 bg-dark-700 p-6 rounded-xl min-w-[20vw];
+}
+</style>
diff --git a/src/components/PlaylistAddModal.vue b/src/components/PlaylistAddModal.vue
index d61b6235..495f9f30 100644
--- a/src/components/PlaylistAddModal.vue
+++ b/src/components/PlaylistAddModal.vue
@@ -1,34 +1,30 @@
 <template>
-    <div class="modal">
-        <div>
-            <div class="modal-container">
-                <div class="flex">
-                    <span class="text-2xl w-max inline-block" v-t="'actions.select_playlist'" />
-                    <button class="ml-3" @click="$emit('close')"><font-awesome-icon icon="xmark" /></button>
-                </div>
-                <select class="select w-full mt-3" v-model="selectedPlaylist">
-                    <option
-                        v-for="playlist in playlists"
-                        :value="playlist.id"
-                        :key="playlist.id"
-                        v-text="playlist.name"
-                    />
-                </select>
-                <div class="flex justify-end mt-3">
-                    <button
-                        class="btn"
-                        @click="handleClick(selectedPlaylist)"
-                        ref="addButton"
-                        v-t="'actions.add_to_playlist'"
-                    />
-                </div>
-            </div>
+    <ModalComponent>
+        <div class="flex">
+            <span class="text-2xl w-max inline-block" v-t="'actions.select_playlist'" />
+            <button class="ml-3" @click="$emit('close')"><font-awesome-icon icon="xmark" /></button>
         </div>
-    </div>
+        <select class="select w-full mt-3" v-model="selectedPlaylist">
+            <option v-for="playlist in playlists" :value="playlist.id" :key="playlist.id" v-text="playlist.name" />
+        </select>
+        <div class="flex justify-end mt-3">
+            <button
+                class="btn"
+                @click="handleClick(selectedPlaylist)"
+                ref="addButton"
+                v-t="'actions.add_to_playlist'"
+            />
+        </div>
+    </ModalComponent>
 </template>
 
 <script>
+import ModalComponent from "./ModalComponent.vue";
+
 export default {
+    components: {
+        ModalComponent,
+    },
     props: {
         videoId: {
             type: String,
@@ -53,12 +49,10 @@ export default {
     },
     methods: {
         handleKeyDown(event) {
-            if (event.code === "Escape") {
-                this.$emit("close");
-            } else if (event.code === "Enter") {
+            if (event.code === "Enter") {
                 this.handleClick(this.selectedPlaylist);
-            } else return;
-            event.preventDefault();
+                event.preventDefault();
+            }
         },
         handleClick(playlistId) {
             if (!playlistId) {
@@ -99,17 +93,3 @@ export default {
     },
 };
 </script>
-
-<style scoped>
-.modal {
-    @apply fixed z-50 top-0 left-0 w-full h-full bg-dark-900 bg-opacity-80 transition-opacity table;
-}
-
-.modal > div {
-    @apply table-cell align-middle;
-}
-
-.modal-container {
-    @apply w-min m-auto px-8 bg-dark-700 p-6 rounded-xl;
-}
-</style>
diff --git a/src/components/ShareModal.vue b/src/components/ShareModal.vue
index 0fb02e56..1274ee56 100644
--- a/src/components/ShareModal.vue
+++ b/src/components/ShareModal.vue
@@ -1,31 +1,29 @@
 <template>
-    <div class="modal">
-        <div>
-            <div class="modal-container">
-                <h2 v-t="'actions.share'" />
-                <div class="flex justify-between mt-4">
-                    <label v-t="'actions.with_timecode'" for="withTimeCode" />
-                    <input id="withTimeCode" type="checkbox" v-model="withTimeCode" />
-                </div>
-                <div class="flex justify-between">
-                    <label v-t="'actions.piped_link'" />
-                    <input type="checkbox" v-model="pipedLink" />
-                </div>
-                <div class="flex justify-between mt-2">
-                    <label v-t="'actions.time_code'" />
-                    <input class="input w-12" type="text" v-model="timeStamp" />
-                </div>
-                <h3 class="mt-4" v-text="generatedLink" />
-                <div class="flex justify-end mt-4">
-                    <button class="btn" v-t="'actions.follow_link'" @click="followLink()" />
-                    <button class="btn ml-3" v-t="'actions.copy_link'" @click="copyLink()" />
-                </div>
-            </div>
+    <ModalComponent>
+        <h2 v-t="'actions.share'" />
+        <div class="flex justify-between mt-4">
+            <label v-t="'actions.with_timecode'" for="withTimeCode" />
+            <input id="withTimeCode" type="checkbox" v-model="withTimeCode" />
         </div>
-    </div>
+        <div class="flex justify-between">
+            <label v-t="'actions.piped_link'" />
+            <input type="checkbox" v-model="pipedLink" />
+        </div>
+        <div class="flex justify-between mt-2">
+            <label v-t="'actions.time_code'" />
+            <input class="input w-12" type="text" v-model="timeStamp" />
+        </div>
+        <h3 class="mt-4" v-text="generatedLink" />
+        <div class="flex justify-end mt-4">
+            <button class="btn" v-t="'actions.follow_link'" @click="followLink()" />
+            <button class="btn ml-3" v-t="'actions.copy_link'" @click="copyLink()" />
+        </div>
+    </ModalComponent>
 </template>
 
 <script>
+import ModalComponent from "./ModalComponent.vue";
+
 export default {
     props: {
         videoId: {
@@ -37,6 +35,9 @@ export default {
             required: true,
         },
     },
+    components: {
+        ModalComponent,
+    },
     data() {
         return {
             withTimeCode: true,
@@ -45,19 +46,9 @@ export default {
         };
     },
     mounted() {
-        window.addEventListener("keydown", this.handleKeyDown);
         this.timeStamp = parseInt(this.currentTime);
     },
-    unmounted() {
-        window.removeEventListener("keydown", this.handleKeyDown);
-    },
     methods: {
-        handleKeyDown(event) {
-            if (event.code === "Escape") {
-                this.$emit("close");
-            } else return;
-            event.preventDefault();
-        },
         followLink() {
             window.open(this.generatedLink, "_blank").focus();
         },
@@ -84,17 +75,3 @@ export default {
     },
 };
 </script>
-
-<style scoped>
-.modal {
-    @apply fixed z-50 top-0 left-0 w-full h-full bg-dark-900 bg-opacity-80 transition-opacity table;
-}
-
-.modal > div {
-    @apply table-cell align-middle;
-}
-
-.modal-container {
-    @apply w-100 m-auto px-8 bg-dark-700 p-5 flex flex-col rounded-xl;
-}
-</style>