Merge pull request #130 from VioletRose/share-video-at-current-time

Adding "at current time" share menu buttons
This commit is contained in:
Preston 2020-09-12 11:30:09 -04:00 committed by GitHub
commit cc77cd9a6a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 54 additions and 11 deletions

View File

@ -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'
]) ])

View File

@ -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

View File

@ -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 () {

View File

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

View File

@ -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',

View File

@ -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"

View File

@ -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