Share buttons do stuff

src/renderer/components/ft-share-button/ft-share-button.js

@@ -8,5 +8,68 @@ export default Vue.extend({
   components: {
     'ft-icon-button': FtIconButton,
     'ft-button': FtButton
+  },
+  props: {
+    id: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    invidiousInstance: function () {
+      return this.$store.getters.getInvidiousInstance
+    },
+
+    usingElectron: function () {
+      return this.$store.getters.getUsingElectron
+    },
+  },
+  methods: {
+    copy(text) {
+      navigator.clipboard.writeText(text)
+    },
+
+    open(url) {
+      if (this.usingElectron) {
+        const shell = require('electron').shell
+        shell.openExternal(url)
+      }
+    },
+
+    getInvidiousURL() {
+      return `${this.invidiousInstance}/watch?v=${this.id}`
+    },
+
+    getYoutubeURL() {
+      return `https://www.youtube.com/watch?v=${this.id}`
+    },
+
+    getYoutubeEmbedURL() {
+      return `https://www.youtube-nocookie.com/embed/${this.id}`
+    },
+
+    openInvidious() {
+      this.open(this.getInvidiousURL())
+    },
+
+    copyInvidious() {
+      this.copy(this.getInvidiousURL())
+    },
+
+    openYoutube() {
+      this.open(this.getYoutubeURL())
+    },
+
+    copyYoutube() {
+      this.copy(this.getYoutubeURL())
+    },
+
+    openYoutubeEmbed() {
+      this.open(this.getYoutubeEmbedURL())
+    },
+
+    copyYoutubeEmbed() {
+      this.copy(this.getYoutubeEmbedURL())
+    }
   }
 })

src/renderer/components/ft-share-button/ft-share-button.sass

@@ -1,6 +1,6 @@
 .shareLinks
 	display: grid
-	grid-template-rows: auto auto auto
+	grid-template-rows: auto auto
 	grid-auto-flow: column
 	padding: 12px
 	width: max-content
@@ -11,6 +11,10 @@
 		margin: 4px 0px 8px
 		color: var(--primary-text-color)
 
+	.buttons
+		display: flex
+		flex-direction: column
+
 		.action
 			padding: 6px
 

src/renderer/components/ft-share-button/ft-share-button.vue

@@ -10,28 +10,58 @@
 				<img class="youtubeLogo" src="~../../assets/img/yt_logo_mono_dark.png" alt="YouTube" width="794" height="178">
 			</div>
 
-			<ft-button class="action">
+			<div class="buttons">
-				<font-awesome-icon icon="copy"></font-awesome-icon>
+				<ft-button
+					class="action"
+					@click="copyYoutube()"
+				>
+					<font-awesome-icon icon="copy"/>
 					Copy link
 				</ft-button>
-			<ft-button class="action">
+				<ft-button
-				<font-awesome-icon icon="globe"></font-awesome-icon>
+					class="action"
+					@click="openYoutube()"
+				>
+					<font-awesome-icon icon="globe"/>
 					Open link
 				</ft-button>
+				<ft-button
+					class="action"
+					@click="copyYoutubeEmbed()"
+				>
+					<font-awesome-icon icon="file-video"/>
+					Copy embed
+				</ft-button>
+				<ft-button
+					class="action"
+					@click="openYoutubeEmbed()"
+				>
+					<font-awesome-icon icon="file-video"/>
+					Open embed
+				</ft-button>
+			</div>
 
 			<div class="divider"></div>
 
-			<div class="header invidious"><span class="invidiousLogo"></span>Invidious</div>
+			<div class="header invidious"><span class="invidiousLogo"/>Invidious</div>
 
-			<ft-button class="action">
+			<div class="buttons">
-				<font-awesome-icon icon="copy"></font-awesome-icon>
+				<ft-button
+					class="action"
+					@click="copyInvidious()"
+				>
+					<font-awesome-icon icon="copy"/>
 					Copy link
 				</ft-button>
-			<ft-button class="action">
+				<ft-button
-				<font-awesome-icon icon="globe"></font-awesome-icon>
+					class="action"
+					@click="openInvidious()"
+				>
+					<font-awesome-icon icon="globe"/>
 					Open link
 				</ft-button>
 			</div>
+		</div>
 	</ft-icon-button>
 </template>
 

src/renderer/components/watch-video-info/watch-video-info.vue

@@ -71,7 +71,10 @@
           :dropdown-values="formatTypeValues"
           @click="handleFormatChange"
         />
-        <ft-share-button class="option"></ft-share-button>
+        <ft-share-button
+          class="option"
+          :id="id"
+        />
       </div>
     </div>
   </ft-card>