2020-06-17 14:15:36 +02:00
|
|
|
import Vue from 'vue'
|
|
|
|
|
2020-09-12 05:20:26 +02:00
|
|
|
import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
|
2020-06-17 14:15:36 +02:00
|
|
|
import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
|
|
|
|
import FtButton from '../ft-button/ft-button.vue'
|
2020-09-12 05:20:26 +02:00
|
|
|
import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
|
2020-07-04 17:44:35 +02:00
|
|
|
import { mapActions } from 'vuex'
|
2020-06-17 14:15:36 +02:00
|
|
|
|
|
|
|
export default Vue.extend({
|
|
|
|
name: 'FtShareButton',
|
|
|
|
components: {
|
2020-09-12 05:20:26 +02:00
|
|
|
'ft-flex-box': FtFlexBox,
|
2020-06-17 14:15:36 +02:00
|
|
|
'ft-icon-button': FtIconButton,
|
2020-09-12 05:20:26 +02:00
|
|
|
'ft-button': FtButton,
|
|
|
|
'ft-toggle-switch': FtToggleSwitch
|
2020-06-17 15:36:44 +02:00
|
|
|
},
|
|
|
|
props: {
|
|
|
|
id: {
|
|
|
|
type: String,
|
|
|
|
required: true
|
2020-09-11 05:48:06 +02:00
|
|
|
},
|
2021-05-25 19:39:34 +02:00
|
|
|
playlistId: {
|
|
|
|
type: String,
|
2021-05-31 13:23:35 +02:00
|
|
|
default: ''
|
2021-05-25 19:39:34 +02:00
|
|
|
},
|
2020-09-12 05:20:26 +02:00
|
|
|
getTimestamp: {
|
|
|
|
type: Function,
|
|
|
|
required: true
|
|
|
|
}
|
|
|
|
},
|
|
|
|
data: function () {
|
|
|
|
return {
|
2020-09-12 17:20:12 +02:00
|
|
|
includeTimestamp: false
|
2020-06-17 15:36:44 +02:00
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
2021-07-03 03:55:56 +02:00
|
|
|
currentInvidiousInstance: function () {
|
|
|
|
return this.$store.getters.getCurrentInvidiousInstance
|
2020-06-17 15:36:44 +02:00
|
|
|
},
|
|
|
|
|
2020-06-18 16:53:54 +02:00
|
|
|
invidiousURL() {
|
2021-07-03 03:55:56 +02:00
|
|
|
let videoUrl = `${this.currentInvidiousInstance}/watch?v=${this.id}`
|
2021-05-25 19:39:34 +02:00
|
|
|
// `playlistId` can be undefined
|
|
|
|
if (this.playlistId && this.playlistId.length !== 0) {
|
|
|
|
// `index` seems can be ignored
|
|
|
|
videoUrl += `&list=${this.playlistId}`
|
|
|
|
}
|
|
|
|
return videoUrl
|
2020-06-17 15:36:44 +02:00
|
|
|
},
|
|
|
|
|
2020-06-18 16:53:54 +02:00
|
|
|
invidiousEmbedURL() {
|
2021-07-03 03:55:56 +02:00
|
|
|
return `${this.currentInvidiousInstance}/embed/${this.id}`
|
2020-06-17 15:58:06 +02:00
|
|
|
},
|
|
|
|
|
2020-06-18 16:53:54 +02:00
|
|
|
youtubeURL() {
|
2021-05-25 19:39:34 +02:00
|
|
|
let videoUrl = `https://www.youtube.com/watch?v=${this.id}`
|
|
|
|
// `playlistId` can be undefined
|
|
|
|
if (this.playlistId && this.playlistId.length !== 0) {
|
|
|
|
// `index` seems can be ignored
|
|
|
|
videoUrl += `&list=${this.playlistId}`
|
|
|
|
}
|
|
|
|
return videoUrl
|
2020-06-17 15:36:44 +02:00
|
|
|
},
|
|
|
|
|
2020-10-19 16:11:50 +02:00
|
|
|
youtubeShareURL() {
|
2021-05-25 19:39:34 +02:00
|
|
|
// `playlistId` can be undefined
|
|
|
|
if (this.playlistId && this.playlistId.length !== 0) {
|
|
|
|
// `index` seems can be ignored
|
|
|
|
return `https://www.youtube.com/watch?v=${this.id}&list=${this.playlistId}`
|
|
|
|
}
|
2020-10-19 16:11:50 +02:00
|
|
|
return `https://youtu.be/${this.id}`
|
|
|
|
},
|
|
|
|
|
2020-06-18 16:53:54 +02:00
|
|
|
youtubeEmbedURL() {
|
2020-06-17 15:36:44 +02:00
|
|
|
return `https://www.youtube-nocookie.com/embed/${this.id}`
|
2020-08-05 04:18:39 +02:00
|
|
|
}
|
2020-06-18 16:53:54 +02:00
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
copy(text) {
|
|
|
|
navigator.clipboard.writeText(text)
|
|
|
|
},
|
|
|
|
|
2020-06-17 15:36:44 +02:00
|
|
|
openInvidious() {
|
2021-05-22 01:49:48 +02:00
|
|
|
this.openExternalLink(this.getFinalUrl(this.invidiousURL))
|
2020-09-21 01:15:59 +02:00
|
|
|
this.$refs.iconButton.focusOut()
|
2020-09-11 05:48:06 +02:00
|
|
|
},
|
|
|
|
|
2020-06-17 15:36:44 +02:00
|
|
|
copyInvidious() {
|
2020-08-08 04:16:06 +02:00
|
|
|
this.showToast({
|
|
|
|
message: this.$t('Share.Invidious URL copied to clipboard')
|
|
|
|
})
|
2020-09-12 05:20:26 +02:00
|
|
|
this.copy(this.getFinalUrl(this.invidiousURL))
|
2020-09-21 01:15:59 +02:00
|
|
|
this.$refs.iconButton.focusOut()
|
2020-09-11 05:48:06 +02:00
|
|
|
},
|
|
|
|
|
2020-06-17 15:36:44 +02:00
|
|
|
openYoutube() {
|
2021-05-22 01:49:48 +02:00
|
|
|
this.openExternalLink(this.getFinalUrl(this.youtubeURL))
|
2020-09-21 01:15:59 +02:00
|
|
|
this.$refs.iconButton.focusOut()
|
2020-09-11 05:48:06 +02:00
|
|
|
},
|
|
|
|
|
2020-06-17 15:36:44 +02:00
|
|
|
copyYoutube() {
|
2020-08-08 04:16:06 +02:00
|
|
|
this.showToast({
|
|
|
|
message: this.$t('Share.YouTube URL copied to clipboard')
|
|
|
|
})
|
2020-10-19 16:11:50 +02:00
|
|
|
this.copy(this.getFinalUrl(this.youtubeShareURL))
|
2020-09-21 01:15:59 +02:00
|
|
|
this.$refs.iconButton.focusOut()
|
2020-09-11 05:48:06 +02:00
|
|
|
},
|
|
|
|
|
2020-06-17 15:36:44 +02:00
|
|
|
openYoutubeEmbed() {
|
2021-05-22 01:49:48 +02:00
|
|
|
this.openExternalLink(this.getFinalUrl(this.youtubeEmbedURL))
|
2020-09-21 01:15:59 +02:00
|
|
|
this.$refs.iconButton.focusOut()
|
2020-06-17 15:36:44 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
copyYoutubeEmbed() {
|
2020-08-08 04:16:06 +02:00
|
|
|
this.showToast({
|
|
|
|
message: this.$t('Share.YouTube Embed URL copied to clipboard')
|
|
|
|
})
|
2020-09-12 05:20:26 +02:00
|
|
|
this.copy(this.getFinalUrl(this.youtubeEmbedURL))
|
2020-09-21 01:15:59 +02:00
|
|
|
this.$refs.iconButton.focusOut()
|
2020-06-17 15:58:06 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
openInvidiousEmbed() {
|
2021-05-22 01:49:48 +02:00
|
|
|
this.openExternalLink(this.getFinalUrl(this.invidiousEmbedURL))
|
2020-09-21 01:15:59 +02:00
|
|
|
this.$refs.iconButton.focusOut()
|
2020-06-17 15:58:06 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
copyInvidiousEmbed() {
|
2020-08-08 04:16:06 +02:00
|
|
|
this.showToast({
|
|
|
|
message: this.$t('Share.Invidious Embed URL copied to clipboard')
|
|
|
|
})
|
2020-09-12 05:20:26 +02:00
|
|
|
this.copy(this.getFinalUrl(this.invidiousEmbedURL))
|
2020-09-21 01:15:59 +02:00
|
|
|
this.$refs.iconButton.focusOut()
|
2020-06-17 15:58:06 +02:00
|
|
|
},
|
2020-07-04 17:44:35 +02:00
|
|
|
|
2021-05-25 19:39:34 +02:00
|
|
|
updateIncludeTimestamp() {
|
2020-09-12 17:20:12 +02:00
|
|
|
this.includeTimestamp = !this.includeTimestamp
|
2020-09-12 05:20:26 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
getFinalUrl(url) {
|
2020-11-14 20:21:22 +01:00
|
|
|
if (url.indexOf('?') === -1) {
|
|
|
|
return this.includeTimestamp ? `${url}?t=${this.getTimestamp()}` : url
|
|
|
|
}
|
2020-09-12 17:20:12 +02:00
|
|
|
return this.includeTimestamp ? `${url}&t=${this.getTimestamp()}` : url
|
2020-09-12 05:20:26 +02:00
|
|
|
},
|
|
|
|
|
2020-07-04 17:44:35 +02:00
|
|
|
...mapActions([
|
2021-05-22 01:49:48 +02:00
|
|
|
'showToast',
|
|
|
|
'openExternalLink'
|
2020-07-04 17:44:35 +02:00
|
|
|
])
|
2020-06-17 14:15:36 +02:00
|
|
|
}
|
|
|
|
})
|