diff --git a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass index 02f9b36d..c52f0574 100644 --- a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass +++ b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass @@ -23,7 +23,6 @@ .switch-label position: relative display: inline-block - min-width: 112px cursor: pointer font-weight: 500 text-align: left diff --git a/src/renderer/components/player-settings/player-settings.js b/src/renderer/components/player-settings/player-settings.js index cae28780..a0622b76 100644 --- a/src/renderer/components/player-settings/player-settings.js +++ b/src/renderer/components/player-settings/player-settings.js @@ -29,10 +29,7 @@ export default Vue.extend({ 360, 480, 720, - 1080, - 1440, - 2160, - 4320 + 1080 ] } }, @@ -97,10 +94,7 @@ export default Vue.extend({ this.$t('Settings.Player Settings.Default Quality.360p'), this.$t('Settings.Player Settings.Default Quality.480p'), this.$t('Settings.Player Settings.Default Quality.720p'), - this.$t('Settings.Player Settings.Default Quality.1080p'), - this.$t('Settings.Player Settings.Default Quality.1440p'), - this.$t('Settings.Player Settings.Default Quality.4k'), - this.$t('Settings.Player Settings.Default Quality.8k') + this.$t('Settings.Player Settings.Default Quality.1080p') ] } }, diff --git a/src/renderer/components/player-settings/player-settings.vue b/src/renderer/components/player-settings/player-settings.vue index df27dc0b..db3d4967 100644 --- a/src/renderer/components/player-settings/player-settings.vue +++ b/src/renderer/components/player-settings/player-settings.vue @@ -28,6 +28,12 @@ :default-value="proxyVideos" @change="updateProxyVideos" /> +
-
diff --git a/src/renderer/components/watch-video-recommendations/watch-video-recommendations.css b/src/renderer/components/watch-video-recommendations/watch-video-recommendations.css index 44c3783c..2054564c 100644 --- a/src/renderer/components/watch-video-recommendations/watch-video-recommendations.css +++ b/src/renderer/components/watch-video-recommendations/watch-video-recommendations.css @@ -1,4 +1,15 @@ +.relative { + position: relative; +} + .watchVideoRecommendations { display: grid; grid-gap: 8px; } + +.autoPlayToggle { + width: 120px; + position: absolute; + top: 10px; + right: 0px; +} diff --git a/src/renderer/components/watch-video-recommendations/watch-video-recommendations.js b/src/renderer/components/watch-video-recommendations/watch-video-recommendations.js index 9cfd3d6c..1652c16e 100644 --- a/src/renderer/components/watch-video-recommendations/watch-video-recommendations.js +++ b/src/renderer/components/watch-video-recommendations/watch-video-recommendations.js @@ -1,22 +1,37 @@ import Vue from 'vue' +import { mapActions } from 'vuex' import FtCard from '../ft-card/ft-card.vue' import FtListVideo from '../ft-list-video/ft-list-video.vue' +import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue' export default Vue.extend({ name: 'WatchVideoRecommendations', components: { 'ft-card': FtCard, - 'ft-list-video': FtListVideo + 'ft-list-video': FtListVideo, + 'ft-toggle-switch': FtToggleSwitch }, props: { data: { type: Array, required: true + }, + watchingPlaylist: { + type: Boolean, + default: false } }, computed: { listType: function () { return this.$store.getters.getListType + }, + playNextVideo: function () { + return this.$store.getters.getPlayNextVideo } + }, + methods: { + ...mapActions([ + 'updatePlayNextVideo' + ]) } }) diff --git a/src/renderer/components/watch-video-recommendations/watch-video-recommendations.vue b/src/renderer/components/watch-video-recommendations/watch-video-recommendations.vue index 8dbabd64..0c3a004a 100644 --- a/src/renderer/components/watch-video-recommendations/watch-video-recommendations.vue +++ b/src/renderer/components/watch-video-recommendations/watch-video-recommendations.vue @@ -3,6 +3,14 @@

{{ $t("Up Next") }}

+ { + const nextVideoId = this.recommendedVideos[0].videoId + this.$router.push( + { + path: `/watch/${nextVideoId}` + } + ) + this.showToast({ + message: this.$t('Playing Next Video') + }) + }, 5000) + + this.showToast({ + message: this.$t('Playing next video in 5 seconds. Click to cancel'), + time: 5500, + action: () => { + clearTimeout(timeout) + this.showToast({ + message: this.$t('Canceled next video autoplay') + }) + } + }) + } + }, + + handleRouteChange: function () { + if (this.rememberHistory && !this.isLoading && !this.isLive) { + const player = this.$refs.videoPlayer.player + + if (player !== null && this.saveWatchedProgress) { + const currentTime = this.$refs.videoPlayer.player.currentTime() + const payload = { + videoId: this.videoId, + watchProgress: currentTime + } + + console.log('update watch progress') + this.updateWatchProgress(payload) + } } }, @@ -739,21 +771,7 @@ export default Vue.extend({ ]) }, beforeRouteLeave: function (to, from, next) { - if (this.rememberHistory && !this.isLoading && !this.isLive) { - const player = this.$refs.videoPlayer.player - - if (player !== null && this.saveWatchedProgress) { - const currentTime = this.$refs.videoPlayer.player.currentTime() - const payload = { - videoId: this.videoId, - watchProgress: currentTime - } - - console.log('update watch progress') - this.updateWatchProgress(payload) - } - } - + this.handleRouteChange() next() } }) diff --git a/src/renderer/views/Watch/Watch.vue b/src/renderer/views/Watch/Watch.vue index 298347f9..531f1781 100644 --- a/src/renderer/views/Watch/Watch.vue +++ b/src/renderer/views/Watch/Watch.vue @@ -80,6 +80,7 @@ />