refactor -> ModalComponent

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>

src/components/PlaylistAddModal.vue

@@ -1,18 +1,11 @@
 <template>
-    <div class="modal">
+    <ModalComponent>
-        <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
+            <option v-for="playlist in playlists" :value="playlist.id" :key="playlist.id" v-text="playlist.name" />
-                        v-for="playlist in playlists"
-                        :value="playlist.id"
-                        :key="playlist.id"
-                        v-text="playlist.name"
-                    />
         </select>
         <div class="flex justify-end mt-3">
             <button
@@ -22,13 +15,16 @@
                 v-t="'actions.add_to_playlist'"
             />
         </div>
-            </div>
+    </ModalComponent>
-        </div>
-    </div>
 </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") {
+            if (event.code === "Enter") {
-                this.$emit("close");
-            } else if (event.code === "Enter") {
                 this.handleClick(this.selectedPlaylist);
-            } else return;
                 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>

src/components/ShareModal.vue

@@ -1,7 +1,5 @@
 <template>
-    <div class="modal">
+    <ModalComponent>
-        <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" />
@@ -20,12 +18,12 @@
             <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>
-        </div>
-    </div>
 </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>