Merge pull request #130 from VioletRose/share-video-at-current-time
Adding "at current time" share menu buttons
This commit is contained in:
commit
cc77cd9a6a
|
@ -1,19 +1,32 @@
|
||||||
import Vue from 'vue'
|
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 FtIconButton from '../ft-icon-button/ft-icon-button.vue'
|
||||||
import FtButton from '../ft-button/ft-button.vue'
|
import FtButton from '../ft-button/ft-button.vue'
|
||||||
|
import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
|
||||||
import { mapActions } from 'vuex'
|
import { mapActions } from 'vuex'
|
||||||
|
|
||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
name: 'FtShareButton',
|
name: 'FtShareButton',
|
||||||
components: {
|
components: {
|
||||||
|
'ft-flex-box': FtFlexBox,
|
||||||
'ft-icon-button': FtIconButton,
|
'ft-icon-button': FtIconButton,
|
||||||
'ft-button': FtButton
|
'ft-button': FtButton,
|
||||||
|
'ft-toggle-switch': FtToggleSwitch
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
id: {
|
id: {
|
||||||
type: String,
|
type: String,
|
||||||
required: true
|
required: true
|
||||||
|
},
|
||||||
|
getTimestamp: {
|
||||||
|
type: Function,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: function () {
|
||||||
|
return {
|
||||||
|
includeTimestamp: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -40,7 +53,6 @@ export default Vue.extend({
|
||||||
youtubeEmbedURL() {
|
youtubeEmbedURL() {
|
||||||
return `https://www.youtube-nocookie.com/embed/${this.id}`
|
return `https://www.youtube-nocookie.com/embed/${this.id}`
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
copy(text) {
|
copy(text) {
|
||||||
|
@ -55,7 +67,7 @@ export default Vue.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
openInvidious() {
|
openInvidious() {
|
||||||
this.open(this.invidiousURL)
|
this.open(this.getFinalUrl(this.invidiousURL))
|
||||||
this.$refs.iconButton.toggleDropdown()
|
this.$refs.iconButton.toggleDropdown()
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -63,12 +75,12 @@ export default Vue.extend({
|
||||||
this.showToast({
|
this.showToast({
|
||||||
message: this.$t('Share.Invidious URL copied to clipboard')
|
message: this.$t('Share.Invidious URL copied to clipboard')
|
||||||
})
|
})
|
||||||
this.copy(this.invidiousURL)
|
this.copy(this.getFinalUrl(this.invidiousURL))
|
||||||
this.$refs.iconButton.toggleDropdown()
|
this.$refs.iconButton.toggleDropdown()
|
||||||
},
|
},
|
||||||
|
|
||||||
openYoutube() {
|
openYoutube() {
|
||||||
this.open(this.youtubeURL)
|
this.open(this.getFinalUrl(this.youtubeURL))
|
||||||
this.$refs.iconButton.toggleDropdown()
|
this.$refs.iconButton.toggleDropdown()
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -76,12 +88,12 @@ export default Vue.extend({
|
||||||
this.showToast({
|
this.showToast({
|
||||||
message: this.$t('Share.YouTube URL copied to clipboard')
|
message: this.$t('Share.YouTube URL copied to clipboard')
|
||||||
})
|
})
|
||||||
this.copy(this.youtubeURL)
|
this.copy(this.getFinalUrl(this.youtubeURL))
|
||||||
this.$refs.iconButton.toggleDropdown()
|
this.$refs.iconButton.toggleDropdown()
|
||||||
},
|
},
|
||||||
|
|
||||||
openYoutubeEmbed() {
|
openYoutubeEmbed() {
|
||||||
this.open(this.youtubeEmbedURL)
|
this.open(this.getFinalUrl(this.youtubeEmbedURL))
|
||||||
this.$refs.iconButton.toggleDropdown()
|
this.$refs.iconButton.toggleDropdown()
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -89,12 +101,12 @@ export default Vue.extend({
|
||||||
this.showToast({
|
this.showToast({
|
||||||
message: this.$t('Share.YouTube Embed URL copied to clipboard')
|
message: this.$t('Share.YouTube Embed URL copied to clipboard')
|
||||||
})
|
})
|
||||||
this.copy(this.youtubeEmbedURL)
|
this.copy(this.getFinalUrl(this.youtubeEmbedURL))
|
||||||
this.$refs.iconButton.toggleDropdown()
|
this.$refs.iconButton.toggleDropdown()
|
||||||
},
|
},
|
||||||
|
|
||||||
openInvidiousEmbed() {
|
openInvidiousEmbed() {
|
||||||
this.open(this.invidiousEmbedURL)
|
this.open(this.getFinalUrl(this.invidiousEmbedURL))
|
||||||
this.$refs.iconButton.toggleDropdown()
|
this.$refs.iconButton.toggleDropdown()
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -102,10 +114,18 @@ export default Vue.extend({
|
||||||
this.showToast({
|
this.showToast({
|
||||||
message: this.$t('Share.Invidious Embed URL copied to clipboard')
|
message: this.$t('Share.Invidious Embed URL copied to clipboard')
|
||||||
})
|
})
|
||||||
this.copy(this.invidiousEmbedURL)
|
this.copy(this.getFinalUrl(this.invidiousEmbedURL))
|
||||||
this.$refs.iconButton.toggleDropdown()
|
this.$refs.iconButton.toggleDropdown()
|
||||||
},
|
},
|
||||||
|
|
||||||
|
updateincludeTimestamp() {
|
||||||
|
this.includeTimestamp = !this.includeTimestamp
|
||||||
|
},
|
||||||
|
|
||||||
|
getFinalUrl(url) {
|
||||||
|
return this.includeTimestamp ? `${url}&t=${this.getTimestamp()}` : url
|
||||||
|
},
|
||||||
|
|
||||||
...mapActions([
|
...mapActions([
|
||||||
'showToast'
|
'showToast'
|
||||||
])
|
])
|
||||||
|
|
|
@ -7,6 +7,14 @@
|
||||||
dropdown-position-x="left"
|
dropdown-position-x="left"
|
||||||
:force-dropdown="true"
|
:force-dropdown="true"
|
||||||
>
|
>
|
||||||
|
<ft-flex-box>
|
||||||
|
<ft-toggle-switch
|
||||||
|
:label="$t('Share.Include Timestamp')"
|
||||||
|
:compact="true"
|
||||||
|
:default-value="includeTimestamp"
|
||||||
|
@change="updateincludeTimestamp"
|
||||||
|
/>
|
||||||
|
</ft-flex-box>
|
||||||
<div class="shareLinks">
|
<div class="shareLinks">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<img
|
<img
|
||||||
|
|
|
@ -58,6 +58,10 @@ export default Vue.extend({
|
||||||
dislikeCount: {
|
dislikeCount: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 0
|
default: 0
|
||||||
|
},
|
||||||
|
getTimestamp: {
|
||||||
|
type: Function,
|
||||||
|
required: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data: function () {
|
data: function () {
|
||||||
|
|
|
@ -77,6 +77,7 @@
|
||||||
/>
|
/>
|
||||||
<ft-share-button
|
<ft-share-button
|
||||||
:id="id"
|
:id="id"
|
||||||
|
:get-timestamp="getTimestamp"
|
||||||
class="option"
|
class="option"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -611,7 +611,7 @@ export default Vue.extend({
|
||||||
const player = this.$refs.videoPlayer.player
|
const player = this.$refs.videoPlayer.player
|
||||||
|
|
||||||
if (player !== null && this.saveWatchedProgress) {
|
if (player !== null && this.saveWatchedProgress) {
|
||||||
const currentTime = this.$refs.videoPlayer.player.currentTime()
|
const currentTime = this.getWatchedProgress()
|
||||||
const payload = {
|
const payload = {
|
||||||
videoId: this.videoId,
|
videoId: this.videoId,
|
||||||
watchProgress: currentTime
|
watchProgress: currentTime
|
||||||
|
@ -765,6 +765,14 @@ export default Vue.extend({
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
|
getWatchedProgress: function () {
|
||||||
|
return this.$refs.videoPlayer && this.$refs.videoPlayer.player ? this.$refs.videoPlayer.player.currentTime() : 0
|
||||||
|
},
|
||||||
|
|
||||||
|
getTimestamp: function () {
|
||||||
|
return Math.floor(this.getWatchedProgress())
|
||||||
|
},
|
||||||
|
|
||||||
...mapActions([
|
...mapActions([
|
||||||
'showToast',
|
'showToast',
|
||||||
'buildVTTFileLocally',
|
'buildVTTFileLocally',
|
||||||
|
|
|
@ -42,6 +42,7 @@
|
||||||
:like-count="videoLikeCount"
|
:like-count="videoLikeCount"
|
||||||
:dislike-count="videoDislikeCount"
|
:dislike-count="videoDislikeCount"
|
||||||
:view-count="videoViewCount"
|
:view-count="videoViewCount"
|
||||||
|
:get-timestamp="getTimestamp"
|
||||||
class="watchVideo"
|
class="watchVideo"
|
||||||
:class="{ theatreWatchVideo: useTheatreMode }"
|
:class="{ theatreWatchVideo: useTheatreMode }"
|
||||||
@theatreMode="toggleTheatreMode"
|
@theatreMode="toggleTheatreMode"
|
||||||
|
|
|
@ -424,6 +424,7 @@ Change Format:
|
||||||
Use Audio Formats: Use Audio Formats
|
Use Audio Formats: Use Audio Formats
|
||||||
Share:
|
Share:
|
||||||
Share Video: Share Video
|
Share Video: Share Video
|
||||||
|
Include Timestamp: Include Timestamp
|
||||||
Copy Link: Copy Link
|
Copy Link: Copy Link
|
||||||
Open Link: Open Link
|
Open Link: Open Link
|
||||||
Copy Embed: Copy Embed
|
Copy Embed: Copy Embed
|
||||||
|
|
Loading…
Reference in New Issue