Refactoring based on PR comments.

This commit is contained in:
Violet Rose 2020-09-11 20:20:26 -07:00
parent 5725c18e2c
commit 61c25a05f5
6 changed files with 43 additions and 82 deletions

View File

@ -1,23 +1,32 @@
import Vue from 'vue'
import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
import FtButton from '../ft-button/ft-button.vue'
import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
import { mapActions } from 'vuex'
export default Vue.extend({
name: 'FtShareButton',
components: {
'ft-flex-box': FtFlexBox,
'ft-icon-button': FtIconButton,
'ft-button': FtButton
'ft-button': FtButton,
'ft-toggle-switch': FtToggleSwitch
},
props: {
id: {
type: String,
required: true
},
timestamp: {
default: 0,
type: Number
getTimestamp: {
type: Function,
required: true
}
},
data: function () {
return {
includeTime: false
}
},
computed: {
@ -33,10 +42,6 @@ export default Vue.extend({
return `${this.invidiousInstance}/watch?v=${this.id}`
},
invidiousURLWithTime() {
return `${this.invidiousInstance}/watch?v=${this.id}&t=${this.timestamp}`
},
invidiousEmbedURL() {
return `${this.invidiousInstance}/embed/${this.id}`
},
@ -45,14 +50,9 @@ export default Vue.extend({
return `https://www.youtube.com/watch?v=${this.id}`
},
youtubeURLWithTime() {
return `https://www.youtube.com/watch?v=${this.id}&t=${this.timestamp}`
},
youtubeEmbedURL() {
return `https://www.youtube-nocookie.com/embed/${this.id}`
}
},
methods: {
copy(text) {
@ -67,12 +67,7 @@ export default Vue.extend({
},
openInvidious() {
this.open(this.invidiousURL)
this.$refs.iconButton.toggleDropdown()
},
openInvidiousAtTime() {
this.open(this.invidiousURLWithTime)
this.open(this.getFinalUrl(this.invidiousURL))
this.$refs.iconButton.toggleDropdown()
},
@ -80,25 +75,12 @@ export default Vue.extend({
this.showToast({
message: this.$t('Share.Invidious URL copied to clipboard')
})
this.copy(this.invidiousURL)
this.$refs.iconButton.toggleDropdown()
},
copyInvidiousAtTime() {
this.showToast({
message: this.$t('Share.Invidious URL copied to clipboard')
})
this.copy(this.invidiousURLWithTime)
this.copy(this.getFinalUrl(this.invidiousURL))
this.$refs.iconButton.toggleDropdown()
},
openYoutube() {
this.open(this.youtubeURL)
this.$refs.iconButton.toggleDropdown()
},
openYoutubeAtTime() {
this.open(this.youtubeURLWithTime)
this.open(this.getFinalUrl(this.youtubeURL))
this.$refs.iconButton.toggleDropdown()
},
@ -106,20 +88,12 @@ export default Vue.extend({
this.showToast({
message: this.$t('Share.YouTube URL copied to clipboard')
})
this.copy(this.youtubeURL)
this.$refs.iconButton.toggleDropdown()
},
copyYoutubeAtTime() {
this.showToast({
message: this.$t('Share.YouTube URL copied to clipboard')
})
this.copy(this.youtubeURLWithTime)
this.copy(this.getFinalUrl(this.youtubeURL))
this.$refs.iconButton.toggleDropdown()
},
openYoutubeEmbed() {
this.open(this.youtubeEmbedURL)
this.open(this.getFinalUrl(this.youtubeEmbedURL))
this.$refs.iconButton.toggleDropdown()
},
@ -127,12 +101,12 @@ export default Vue.extend({
this.showToast({
message: this.$t('Share.YouTube Embed URL copied to clipboard')
})
this.copy(this.youtubeEmbedURL)
this.copy(this.getFinalUrl(this.youtubeEmbedURL))
this.$refs.iconButton.toggleDropdown()
},
openInvidiousEmbed() {
this.open(this.invidiousEmbedURL)
this.open(this.getFinalUrl(this.invidiousEmbedURL))
this.$refs.iconButton.toggleDropdown()
},
@ -140,10 +114,18 @@ export default Vue.extend({
this.showToast({
message: this.$t('Share.Invidious Embed URL copied to clipboard')
})
this.copy(this.invidiousEmbedURL)
this.copy(this.getFinalUrl(this.invidiousEmbedURL))
this.$refs.iconButton.toggleDropdown()
},
updateIncludeTime() {
this.includeTime = !this.includeTime
},
getFinalUrl(url) {
return this.includeTime ? `${url}&t=${this.getTimestamp()}` : url
},
...mapActions([
'showToast'
])

View File

@ -7,6 +7,14 @@
dropdown-position-x="left"
:force-dropdown="true"
>
<ft-flex-box>
<ft-toggle-switch
:label="$t('Share.Include Time')"
:compact="true"
:default-value="includeTime"
@change="updateIncludeTime"
/>
</ft-flex-box>
<div class="shareLinks">
<div class="header">
<img
@ -26,13 +34,6 @@
<font-awesome-icon icon="copy" />
{{ $t("Share.Copy Link") }}
</ft-button>
<ft-button
class="action"
@click="copyYoutubeAtTime()"
>
<font-awesome-icon icon="copy" />
{{ $t("Share.Copy Link At Current Time") }}
</ft-button>
<ft-button
class="action"
@click="openYoutube()"
@ -40,13 +41,6 @@
<font-awesome-icon icon="globe" />
{{ $t("Share.Open Link") }}
</ft-button>
<ft-button
class="action"
@click="openYoutubeAtTime()"
>
<font-awesome-icon icon="globe" />
{{ $t("Share.Open Link At Current Time") }}
</ft-button>
<ft-button
class="action"
background-color="var(--accent-color-active)"
@ -79,13 +73,6 @@
<font-awesome-icon icon="copy" />
{{ $t("Share.Copy Link") }}
</ft-button>
<ft-button
class="action"
@click="copyInvidiousAtTime()"
>
<font-awesome-icon icon="copy" />
{{ $t("Share.Copy Link At Current Time") }}
</ft-button>
<ft-button
class="action"
@click="openInvidious()"
@ -93,13 +80,6 @@
<font-awesome-icon icon="globe" />
{{ $t("Share.Open Link") }}
</ft-button>
<ft-button
class="action"
@click="openInvidiousAtTime()"
>
<font-awesome-icon icon="globe" />
{{ $t("Share.Open Link At Current Time") }}
</ft-button>
<ft-button
class="action"
background-color="var(--accent-color-active)"

View File

@ -59,9 +59,9 @@ export default Vue.extend({
type: Number,
default: 0
},
timestamp: {
default: 0,
type: Number
getTimestamp: {
type: Function,
required: true
}
},
data: function () {

View File

@ -77,7 +77,7 @@
/>
<ft-share-button
:id="id"
:timestamp="timestamp"
:get-timestamp="getTimestamp"
class="option"
/>
</div>

View File

@ -42,7 +42,7 @@
:like-count="videoLikeCount"
:dislike-count="videoDislikeCount"
:view-count="videoViewCount"
:timestamp="getTimestamp()"
:get-timestamp="getTimestamp"
class="watchVideo"
:class="{ theatreWatchVideo: useTheatreMode }"
@theatreMode="toggleTheatreMode"

View File

@ -424,10 +424,9 @@ Change Format:
Use Audio Formats: Use Audio Formats
Share:
Share Video: Share Video
Include Time: Include Time
Copy Link: Copy Link
Copy Link At Current Time: Copy Link At Current Time
Open Link: Open Link
Open Link At Current Time: Open Link At Current Time
Copy Embed: Copy Embed
Open Embed: Open Embed
# On Click