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 @@ - - - Copy link - - - - Open link - +
+ + + Copy link + + + + Open link + + + + Copy embed + + + + Open embed + +
-
Invidious
+
- - - Copy link - - - - Open link - +
+ + + Copy link + + + + Open link + +
diff --git a/src/renderer/components/watch-video-info/watch-video-info.vue b/src/renderer/components/watch-video-info/watch-video-info.vue index adfddaf6..397fcf7a 100644 --- a/src/renderer/components/watch-video-info/watch-video-info.vue +++ b/src/renderer/components/watch-video-info/watch-video-info.vue @@ -71,7 +71,10 @@ :dropdown-values="formatTypeValues" @click="handleFormatChange" /> - +