From 5725c18e2cc891c0354a1e25752012d1d2fca004 Mon Sep 17 00:00:00 2001 From: Violet Rose Date: Thu, 10 Sep 2020 20:48:06 -0700 Subject: [PATCH 1/3] Added "current time" share buttons. --- .../ft-share-button/ft-share-button.js | 38 +++++++++++++++++++ .../ft-share-button/ft-share-button.vue | 28 ++++++++++++++ .../watch-video-info/watch-video-info.js | 4 ++ .../watch-video-info/watch-video-info.vue | 1 + src/renderer/views/Watch/Watch.js | 10 ++++- src/renderer/views/Watch/Watch.vue | 1 + static/locales/en-US.yaml | 2 + 7 files changed, 83 insertions(+), 1 deletion(-) 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 35e5f57c..494ceaa5 100644 --- a/src/renderer/components/ft-share-button/ft-share-button.js +++ b/src/renderer/components/ft-share-button/ft-share-button.js @@ -14,6 +14,10 @@ export default Vue.extend({ id: { type: String, required: true + }, + timestamp: { + default: 0, + type: Number } }, computed: { @@ -29,6 +33,10 @@ 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}` }, @@ -37,6 +45,10 @@ 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}` } @@ -59,6 +71,11 @@ export default Vue.extend({ this.$refs.iconButton.toggleDropdown() }, + openInvidiousAtTime() { + this.open(this.invidiousURLWithTime) + this.$refs.iconButton.toggleDropdown() + }, + copyInvidious() { this.showToast({ message: this.$t('Share.Invidious URL copied to clipboard') @@ -67,11 +84,24 @@ export default Vue.extend({ this.$refs.iconButton.toggleDropdown() }, + copyInvidiousAtTime() { + this.showToast({ + message: this.$t('Share.Invidious URL copied to clipboard') + }) + this.copy(this.invidiousURLWithTime) + this.$refs.iconButton.toggleDropdown() + }, + openYoutube() { this.open(this.youtubeURL) this.$refs.iconButton.toggleDropdown() }, + openYoutubeAtTime() { + this.open(this.youtubeURLWithTime) + this.$refs.iconButton.toggleDropdown() + }, + copyYoutube() { this.showToast({ message: this.$t('Share.YouTube URL copied to clipboard') @@ -80,6 +110,14 @@ export default Vue.extend({ this.$refs.iconButton.toggleDropdown() }, + copyYoutubeAtTime() { + this.showToast({ + message: this.$t('Share.YouTube URL copied to clipboard') + }) + this.copy(this.youtubeURLWithTime) + this.$refs.iconButton.toggleDropdown() + }, + openYoutubeEmbed() { this.open(this.youtubeEmbedURL) this.$refs.iconButton.toggleDropdown() 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 8022ae78..a6b8c668 100644 --- a/src/renderer/components/ft-share-button/ft-share-button.vue +++ b/src/renderer/components/ft-share-button/ft-share-button.vue @@ -26,6 +26,13 @@ {{ $t("Share.Copy Link") }} + + + {{ $t("Share.Copy Link At Current Time") }} + {{ $t("Share.Open Link") }} + + + {{ $t("Share.Open Link At Current Time") }} + {{ $t("Share.Copy Link") }} + + + {{ $t("Share.Copy Link At Current Time") }} + {{ $t("Share.Open Link") }} + + + {{ $t("Share.Open Link At Current Time") }} + diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js index a99d4ce0..86a61ded 100644 --- a/src/renderer/views/Watch/Watch.js +++ b/src/renderer/views/Watch/Watch.js @@ -611,7 +611,7 @@ export default Vue.extend({ const player = this.$refs.videoPlayer.player if (player !== null && this.saveWatchedProgress) { - const currentTime = this.$refs.videoPlayer.player.currentTime() + const currentTime = this.getWatchedProgress() const payload = { videoId: this.videoId, 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([ 'showToast', 'buildVTTFileLocally', diff --git a/src/renderer/views/Watch/Watch.vue b/src/renderer/views/Watch/Watch.vue index 73f1b6f1..563b7809 100644 --- a/src/renderer/views/Watch/Watch.vue +++ b/src/renderer/views/Watch/Watch.vue @@ -42,6 +42,7 @@ :like-count="videoLikeCount" :dislike-count="videoDislikeCount" :view-count="videoViewCount" + :timestamp="getTimestamp()" class="watchVideo" :class="{ theatreWatchVideo: useTheatreMode }" @theatreMode="toggleTheatreMode" diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml index 7a12dc25..3b1b92e7 100644 --- a/static/locales/en-US.yaml +++ b/static/locales/en-US.yaml @@ -425,7 +425,9 @@ Change Format: Share: Share Video: Share Video 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 From 61c25a05f50ecb66497cb11e94913aca5c028ed6 Mon Sep 17 00:00:00 2001 From: Violet Rose Date: Fri, 11 Sep 2020 20:20:26 -0700 Subject: [PATCH 2/3] Refactoring based on PR comments. --- .../ft-share-button/ft-share-button.js | 76 +++++++------------ .../ft-share-button/ft-share-button.vue | 36 ++------- .../watch-video-info/watch-video-info.js | 6 +- .../watch-video-info/watch-video-info.vue | 2 +- src/renderer/views/Watch/Watch.vue | 2 +- static/locales/en-US.yaml | 3 +- 6 files changed, 43 insertions(+), 82 deletions(-) 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 494ceaa5..e8d1e36b 100644 --- a/src/renderer/components/ft-share-button/ft-share-button.js +++ b/src/renderer/components/ft-share-button/ft-share-button.js @@ -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' ]) 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 a6b8c668..6e264fcb 100644 --- a/src/renderer/components/ft-share-button/ft-share-button.vue +++ b/src/renderer/components/ft-share-button/ft-share-button.vue @@ -7,6 +7,14 @@ dropdown-position-x="left" :force-dropdown="true" > + + +