From dd8dd9c9a1119274054896f38158327288c3147b Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Tue, 9 Jan 2024 17:12:22 +0100
Subject: [PATCH 1/2] feat: add share button to video items

---
 src/components/VideoItem.vue | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index 0e7d28ee..de740087 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -107,9 +107,12 @@
                 >
                     <font-awesome-icon icon="headphones" />
                 </router-link>
-                <button :title="$t('actions.add_to_playlist')" @click="showModal = !showModal">
+                <button :title="$t('actions.add_to_playlist')" @click="showPlaylistModal = !showPlaylistModal">
                     <font-awesome-icon icon="circle-plus" />
                 </button>
+                <button :title="$t('actions.share')" @click="showShareModal = !showShareModal">
+                    <font-awesome-icon icon="share" />
+                </button>
                 <button
                     v-if="admin"
                     ref="removeButton"
@@ -125,10 +128,16 @@
                     @confirm="removeVideo(item.url.substr(-11))"
                 />
                 <PlaylistAddModal
-                    v-if="showModal"
+                    v-if="showPlaylistModal"
                     :video-id="item.url.substr(-11)"
                     :video-info="item"
-                    @close="showModal = !showModal"
+                    @close="showPlaylistModal = false"
+                />
+                <ShareModal
+                    v-if="showShareModal"
+                    :video-id="item.url.substr(-11)"
+                    :current-time="0"
+                    @close="showShareModal = false"
                 />
             </div>
         </div>
@@ -137,10 +146,11 @@
 
 <script>
 import PlaylistAddModal from "./PlaylistAddModal.vue";
+import ShareModal from "./ShareModal.vue";
 import ConfirmModal from "./ConfirmModal.vue";
 
 export default {
-    components: { PlaylistAddModal, ConfirmModal },
+    components: { PlaylistAddModal, ConfirmModal, ShareModal },
     props: {
         item: {
             type: Object,
@@ -162,7 +172,8 @@ export default {
     emits: ["remove"],
     data() {
         return {
-            showModal: false,
+            showPlaylistModal: false,
+            showShareModal: false,
             showVideo: true,
             showConfirmRemove: false,
         };

From 7cf8c2280a61f2b6e64d00b3e497afe759296405 Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Tue, 9 Jan 2024 17:15:43 +0100
Subject: [PATCH 2/2] style: improve share dialog ui and accessibility

---
 src/components/ShareModal.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/ShareModal.vue b/src/components/ShareModal.vue
index aaeb9366..b165c934 100644
--- a/src/components/ShareModal.vue
+++ b/src/components/ShareModal.vue
@@ -1,10 +1,11 @@
 <template>
     <ModalComponent>
-        <h2 v-t="'actions.share'" />
+        <h2 v-t="'actions.share'" class="mb-5" />
         <div class="flex justify-between">
             <label v-t="'actions.piped_link'" />
             <input v-model="pipedLink" type="checkbox" @change="onChange" />
         </div>
+        <hr />
         <div v-if="hasPlaylist" class="flex justify-between">
             <label v-t="'actions.with_playlist'" />
             <input v-model="withPlaylist" type="checkbox" @change="onChange" />
@@ -17,6 +18,7 @@
             <label v-t="'actions.time_code'" />
             <input v-model="timeStamp" class="input w-12" type="text" @change="onChange" />
         </div>
+        <hr />
         <a :href="generatedLink" target="_blank">
             <h3 class="mt-4" v-text="generatedLink" />
         </a>