From bece257c80d9a675cda6a3c474d9fd1fe8e321c2 Mon Sep 17 00:00:00 2001
From: Bnyro <yannick.fehler@web.de>
Date: Thu, 8 Sep 2022 22:47:06 +0200
Subject: [PATCH 1/2] close when clicking outside

---
 src/components/ModalComponent.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/ModalComponent.vue b/src/components/ModalComponent.vue
index f1e5ad9b..16ebf813 100644
--- a/src/components/ModalComponent.vue
+++ b/src/components/ModalComponent.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="modal">
-        <div>
+        <div @click="handleClick">
             <div class="modal-container">
                 <slot></slot>
             </div>
@@ -23,6 +23,10 @@ export default {
             } else return;
             event.preventDefault();
         },
+        handleClick(event) {
+            if (event.target !== event.currentTarget) return;
+            this.$emit("close");
+        },
     },
 };
 </script>

From d525b6991fe64d91c66ca1c2d06c8cb64a91fa0a Mon Sep 17 00:00:00 2001
From: Bnyro <yannick.fehler@web.de>
Date: Thu, 8 Sep 2022 22:56:24 +0200
Subject: [PATCH 2/2] fix close button

---
 src/components/ModalComponent.vue   | 7 ++++++-
 src/components/PlaylistAddModal.vue | 5 +----
 src/components/ShareModal.vue       | 7 ++-----
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/components/ModalComponent.vue b/src/components/ModalComponent.vue
index 16ebf813..3fdaea06 100644
--- a/src/components/ModalComponent.vue
+++ b/src/components/ModalComponent.vue
@@ -2,6 +2,7 @@
     <div class="modal">
         <div @click="handleClick">
             <div class="modal-container">
+                <button @click="$emit('close')"><font-awesome-icon icon="xmark" /></button>
                 <slot></slot>
             </div>
         </div>
@@ -41,6 +42,10 @@ export default {
 }
 
 .modal-container {
-    @apply w-min m-auto px-8 bg-dark-700 p-6 rounded-xl min-w-[20vw];
+    @apply w-min m-auto px-8 bg-dark-700 p-6 rounded-xl min-w-[20vw] relative;
+}
+
+.modal-container > button {
+    @apply absolute right-8 top-6;
 }
 </style>
diff --git a/src/components/PlaylistAddModal.vue b/src/components/PlaylistAddModal.vue
index 495f9f30..3e3a4aac 100644
--- a/src/components/PlaylistAddModal.vue
+++ b/src/components/PlaylistAddModal.vue
@@ -1,9 +1,6 @@
 <template>
     <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>
+        <span class="text-2xl w-max inline-block" v-t="'actions.select_playlist'" />
         <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>
diff --git a/src/components/ShareModal.vue b/src/components/ShareModal.vue
index 92a98ae9..34d447f4 100644
--- a/src/components/ShareModal.vue
+++ b/src/components/ShareModal.vue
@@ -1,9 +1,6 @@
 <template>
     <ModalComponent>
-        <div class="flex">
-            <h2 v-t="'actions.share'" />
-            <button class="ml-3" @click="$emit('close')"><font-awesome-icon icon="xmark" /></button>
-        </div>
+        <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" />
@@ -16,7 +13,7 @@
             <label v-t="'actions.time_code'" />
             <input class="input w-12" type="text" v-model="timeStamp" />
         </div>
-        <h3 class="mt-4" v-text="generatedLink" />
+        <a :href="generatedLink" target="_blank"><h3 class="mt-4" v-text="generatedLink" /></a>
         <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()" />