diff --git a/src/renderer/components/ft-share-button/ft-share-button.js b/src/renderer/components/ft-share-button/ft-share-button.js
index 50e35496..764ed906 100644
--- a/src/renderer/components/ft-share-button/ft-share-button.js
+++ b/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())
+ }
}
})
diff --git a/src/renderer/components/ft-share-button/ft-share-button.sass b/src/renderer/components/ft-share-button/ft-share-button.sass
index 82877134..21239972 100644
--- a/src/renderer/components/ft-share-button/ft-share-button.sass
+++ b/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,8 +11,12 @@
margin: 4px 0px 8px
color: var(--primary-text-color)
- .action
- padding: 6px
+ .buttons
+ display: flex
+ flex-direction: column
+
+ .action
+ padding: 6px
.divider
grid-row: span 3
diff --git a/src/renderer/components/ft-share-button/ft-share-button.vue b/src/renderer/components/ft-share-button/ft-share-button.vue
index bd47d576..b0bf59b4 100644
--- a/src/renderer/components/ft-share-button/ft-share-button.vue
+++ b/src/renderer/components/ft-share-button/ft-share-button.vue
@@ -10,27 +10,57 @@
-