[Issue ViewTube#2487] Add YouTube share link option below the video

* Add YouTube share button * Handle non-HTTPS environment in copy operation
chonsser · Jan 31, 2024 · 3d2e3f7 · 3d2e3f7
1 parent df55f40
commit 3d2e3f7
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 8 deletions.
diff --git 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,28 +34,43 @@
 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',
   components: {
     ShareOptionEntry,
     QrPopUp
   },
-  setup() {
+  props: {
+    videoId: String
+  },
+  setup(props) {
     const qrPopUpOpen = ref(false);
     const videoPlayerStore = useVideoPlayerStore();
 
     const url = (): string => {
       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
@@ -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>