✨ Add YouTube share link option below the video (#2610)

* [Issue #2487] Add YouTube share link option below the video * Add YouTube share button * Handle non-HTTPS environment in copy operation * [Issue #2487] Remove unused import and require the videoId prop. Fix formatting * [Issue #2487] Use messagesStore instead raw JS alert
ViewTube · Feb 2, 2024 · daab248 · daab248
1 parent c02cda5
commit daab248
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 11 deletions.
diff --git a/client/components/watch/ShareOptions.vue b/client/components/watch/ShareOptions.vue
@@ -1,10 +1,14 @@
 <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,29 +35,53 @@
 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',
   components: {
     ShareOptionEntry,
     QrPopUp
   },
-  setup() {
+  props: {
+    videoId: {
+      type: String,
+      required: true
+    }
+  },
+  setup(props) {
+    const messagesStore = useMessagesStore();
     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) {
+        messagesStore.createMessage({
+          title: 'Unable to copy',
+          message: 'Running ViewTube on non-https website.',
+          type: 'error',
+          dismissDelay: 3000
+        });
+        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);
-    }
+      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');
     };
@@ -75,7 +103,8 @@ export default defineComponent({
     return {
       qrPopUpOpen,
       url,
-      shareCopyLink,
+      shareCopyViewTubeLink,
+      shareCopyYouTubeLink,
       shareCopyLinkAtCurrentTimestamp,
       qrOpen,
       encodedUrl,
@@ -89,6 +118,7 @@ export default defineComponent({
 <style lang="scss">
 .share-options {
   height: 60px;
+
   .share-options-container {
     display: flex;
     flex-direction: row;

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>