From 3d2e3f7ac548f3fff358667ef764b998d1640df0 Mon Sep 17 00:00:00 2001
From: dszymanski <chonsser@gmail.com>
Date: Wed, 31 Jan 2024 21:57:48 +0100
Subject: [PATCH 1/3] [Issue #2487] Add YouTube share link option below the
 video * Add YouTube share button * Handle non-HTTPS environment in copy
 operation

---
 client/components/watch/ShareOptions.vue | 33 +++++++++++++++++++-----
 client/pages/watch.vue                   |  2 +-
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/client/components/watch/ShareOptions.vue b/client/components/watch/ShareOptions.vue
index f49592327..77e0ddafe 100644
--- a/client/components/watch/ShareOptions.vue
+++ b/client/components/watch/ShareOptions.vue
@@ -1,10 +1,13 @@
 <template>
   <div class="share-options">
     <div class="share-options-container">
-      <ShareOptionEntry class="share-option" option-name="Copy Link" :click="shareCopyLink">
+      <ShareOptionEntry class="share-option" option-name="Copy ViewTube Link" :click="shareCopyViewTubeLink">
         <VTIcon name="mdi:content-copy" class="copy-icon" />
       </ShareOptionEntry>
-      <ShareOptionEntry class="share-option" option-name="Copy Link at Current Timestamp" :click="shareCopyLinkAtCurrentTimestamp">
+      <ShareOptionEntry class="share-option" option-name="Copy YouTube Link" :click="shareCopyYouTubeLink">
+        <VTIcon name="mdi:youtube" class="copy-icon" />
+      </ShareOptionEntry>
+      <ShareOptionEntry class="share-option" option-name="Copy ViewTube Link at Current Timestamp" :click="shareCopyLinkAtCurrentTimestamp">
         <VTIcon name="mdi:clipboard-text-time-outline" class="copy-icon" />
       </ShareOptionEntry>
       <ShareOptionEntry class="share-option" option-name="Open QR-Code" :click="qrOpen">
@@ -31,6 +34,7 @@
 import QrPopUp from '@/components/popup/QrPopUp.vue';
 import ShareOptionEntry from '@/components/list/ShareOptionEntry.vue';
 import { useVideoPlayerStore } from '@/store/videoPlayer';
+import type { Result } from 'ytpl';
 
 export default defineComponent({
   name: 'ShareOptions',
@@ -38,7 +42,10 @@ export default defineComponent({
     ShareOptionEntry,
     QrPopUp
   },
-  setup() {
+  props: {
+    videoId: String
+  },
+  setup(props) {
     const qrPopUpOpen = ref(false);
     const videoPlayerStore = useVideoPlayerStore();
 
@@ -46,13 +53,24 @@ export default defineComponent({
       return window?.location.href ?? '';
     };
     // shareReddit() {},
-    const shareCopyLink = () => {
-      navigator.clipboard.writeText(url());
+    const shareCopyViewTubeLink = () => {
+      writeToClipboard(url())
+    };
+    const shareCopyYouTubeLink = () => {
+      const url = `https://youtu.be/${props.videoId}`
+      writeToClipboard(url)
     };
+    const writeToClipboard = (text: string) => {
+      if(!navigator.clipboard) {
+        alert('Unable to copy (running ViewTube on non-https website).')
+        return;
+      }
+      navigator.clipboard.writeText(text);
+    }
     const shareCopyLinkAtCurrentTimestamp = () => {
       const currentHref = new URL(url())
       currentHref.searchParams.set('t', Math.round(videoPlayerStore.currentTime).toString())
-      navigator.clipboard.writeText(currentHref.href);
+      writeToClipboard(currentHref.href)
     }
     const saveToPocket = () => {
       window.open(`https://getpocket.com/save?url=${encodedUrl}`, '_blank');
@@ -75,7 +93,8 @@ export default defineComponent({
     return {
       qrPopUpOpen,
       url,
-      shareCopyLink,
+      shareCopyViewTubeLink,
+      shareCopyYouTubeLink,
       shareCopyLinkAtCurrentTimestamp,
       qrOpen,
       encodedUrl,
diff --git a/client/pages/watch.vue b/client/pages/watch.vue
index f2da62a72..3d8fd4c6d 100644
--- a/client/pages/watch.vue
+++ b/client/pages/watch.vue
@@ -408,7 +408,7 @@ const watchPageTitle = computed(() => {
         </div>
         <transition name="share-fade-down">
           <div v-show="shareOpen">
-            <ShareOptions class="share-options-display" />
+            <ShareOptions class="share-options-display" :video-id="video.id" />
           </div>
         </transition>
         <p v-if="video.keywords" class="video-infobox-text">Tags</p>

From 9ca716d193870697cec211af28ba255be5c019ff Mon Sep 17 00:00:00 2001
From: dszymanski <chonsser@gmail.com>
Date: Wed, 31 Jan 2024 22:03:56 +0100
Subject: [PATCH 2/3] [Issue #2487] Remove unused import and require the
 videoId prop. Fix formatting

---
 client/components/watch/ShareOptions.vue | 30 ++++++++++++++----------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/client/components/watch/ShareOptions.vue b/client/components/watch/ShareOptions.vue
index 77e0ddafe..1ecc2486b 100644
--- a/client/components/watch/ShareOptions.vue
+++ b/client/components/watch/ShareOptions.vue
@@ -7,7 +7,8 @@
       <ShareOptionEntry class="share-option" option-name="Copy YouTube Link" :click="shareCopyYouTubeLink">
         <VTIcon name="mdi:youtube" class="copy-icon" />
       </ShareOptionEntry>
-      <ShareOptionEntry class="share-option" option-name="Copy ViewTube Link at Current Timestamp" :click="shareCopyLinkAtCurrentTimestamp">
+      <ShareOptionEntry class="share-option" option-name="Copy ViewTube Link at Current Timestamp"
+                        :click="shareCopyLinkAtCurrentTimestamp">
         <VTIcon name="mdi:clipboard-text-time-outline" class="copy-icon" />
       </ShareOptionEntry>
       <ShareOptionEntry class="share-option" option-name="Open QR-Code" :click="qrOpen">
@@ -34,7 +35,6 @@
 import QrPopUp from '@/components/popup/QrPopUp.vue';
 import ShareOptionEntry from '@/components/list/ShareOptionEntry.vue';
 import { useVideoPlayerStore } from '@/store/videoPlayer';
-import type { Result } from 'ytpl';
 
 export default defineComponent({
   name: 'ShareOptions',
@@ -43,7 +43,10 @@ export default defineComponent({
     QrPopUp
   },
   props: {
-    videoId: String
+    videoId: {
+      type: String,
+      required: true
+    }
   },
   setup(props) {
     const qrPopUpOpen = ref(false);
@@ -54,24 +57,24 @@ export default defineComponent({
     };
     // shareReddit() {},
     const shareCopyViewTubeLink = () => {
-      writeToClipboard(url())
+      writeToClipboard(url());
     };
     const shareCopyYouTubeLink = () => {
-      const url = `https://youtu.be/${props.videoId}`
-      writeToClipboard(url)
+      const url = `https://youtu.be/${props.videoId}`;
+      writeToClipboard(url);
     };
     const writeToClipboard = (text: string) => {
-      if(!navigator.clipboard) {
-        alert('Unable to copy (running ViewTube on non-https website).')
+      if (!navigator.clipboard) {
+        alert('Unable to copy (running ViewTube on non-https website).');
         return;
       }
       navigator.clipboard.writeText(text);
-    }
+    };
     const shareCopyLinkAtCurrentTimestamp = () => {
-      const currentHref = new URL(url())
-      currentHref.searchParams.set('t', Math.round(videoPlayerStore.currentTime).toString())
-      writeToClipboard(currentHref.href)
-    }
+      const currentHref = new URL(url());
+      currentHref.searchParams.set('t', Math.round(videoPlayerStore.currentTime).toString());
+      writeToClipboard(currentHref.href);
+    };
     const saveToPocket = () => {
       window.open(`https://getpocket.com/save?url=${encodedUrl}`, '_blank');
     };
@@ -108,6 +111,7 @@ export default defineComponent({
 <style lang="scss">
 .share-options {
   height: 60px;
+
   .share-options-container {
     display: flex;
     flex-direction: row;

From aaf435a27e2b680c3883723b2955faadbbe313ca Mon Sep 17 00:00:00 2001
From: dszymanski <chonsser@gmail.com>
Date: Thu, 1 Feb 2024 17:24:24 +0100
Subject: [PATCH 3/3] [Issue #2487] Use messagesStore instead raw JS alert

---
 client/components/watch/ShareOptions.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/client/components/watch/ShareOptions.vue b/client/components/watch/ShareOptions.vue
index 1ecc2486b..452362699 100644
--- a/client/components/watch/ShareOptions.vue
+++ b/client/components/watch/ShareOptions.vue
@@ -35,6 +35,7 @@
 import QrPopUp from '@/components/popup/QrPopUp.vue';
 import ShareOptionEntry from '@/components/list/ShareOptionEntry.vue';
 import { useVideoPlayerStore } from '@/store/videoPlayer';
+import { useMessagesStore } from '@/store/messages';
 
 export default defineComponent({
   name: 'ShareOptions',
@@ -49,6 +50,7 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const messagesStore = useMessagesStore();
     const qrPopUpOpen = ref(false);
     const videoPlayerStore = useVideoPlayerStore();
 
@@ -65,7 +67,12 @@ export default defineComponent({
     };
     const writeToClipboard = (text: string) => {
       if (!navigator.clipboard) {
-        alert('Unable to copy (running ViewTube on non-https website).');
+        messagesStore.createMessage({
+          title: 'Unable to copy',
+          message: 'Running ViewTube on non-https website.',
+          type: 'error',
+          dismissDelay: 3000
+        });
         return;
       }
       navigator.clipboard.writeText(text);