+ !this.isHiddenVideo(this.forbiddenTitles, this.channelsHidden, video)
+ )
+ },
startTimeSeconds: function () {
if (this.isLoading || this.isLive) {
return null
@@ -304,6 +318,9 @@ export default defineComponent({
created: function () {
this.videoId = this.$route.params.id
this.activeFormat = this.defaultVideoFormat
+ // So that the value for this session remains unchanged even if setting changed
+ this.autoplayNextRecommendedVideo = this.autoplayNextRecommendedVideoByDefault
+ this.autoplayNextPlaylistVideo = this.autoplayNextPlaylistVideoByDefault
this.checkIfTimestamp()
this.currentPlaybackRate = this.$store.getters.getDefaultPlayback
@@ -1124,10 +1141,6 @@ export default defineComponent({
},
checkIfPlaylist: function () {
- // On the off chance that user selected pause on current video
- // Then clicks on another video in the playlist
- this.disablePlaylistPauseOnCurrent()
-
if (this.$route.query == null) {
this.watchingPlaylist = false
return
@@ -1235,7 +1248,7 @@ export default defineComponent({
},
handleVideoEnded: function () {
- if ((!this.watchingPlaylist || !this.autoplayPlaylists) && !this.playNextVideo) {
+ if (!this.autoplayEnabled) {
return
}
@@ -1251,11 +1264,6 @@ export default defineComponent({
return
}
- if (this.watchingPlaylist && this.getPlaylistPauseOnCurrent()) {
- this.disablePlaylistPauseOnCurrent()
- return
- }
-
if (this.watchingPlaylist && this.$refs.watchVideoPlaylist?.shouldStopDueToPlaylistEnd) {
// Let `watchVideoPlaylist` handle end of playlist, no countdown needed
this.$refs.watchVideoPlaylist.playNextVideo()
@@ -1264,11 +1272,7 @@ export default defineComponent({
let nextVideoId = null
if (!this.watchingPlaylist) {
- const forbiddenTitles = this.forbiddenTitles
- const channelsHidden = this.channelsHidden
- nextVideoId = this.recommendedVideos.find((video) =>
- !this.isHiddenVideo(forbiddenTitles, channelsHidden, video)
- )?.videoId
+ nextVideoId = this.nextRecommendedVideo?.videoId
if (!nextVideoId) {
return
}
@@ -1278,7 +1282,7 @@ export default defineComponent({
this.playNextTimeout = setTimeout(() => {
const player = this.$refs.player
- if (player && player.isPaused()) {
+ if (player?.isPaused()) {
if (this.watchingPlaylist) {
this.$refs.watchVideoPlaylist.playNextVideo()
} else {
@@ -1288,6 +1292,7 @@ export default defineComponent({
showToast(this.$t('Playing Next Video'))
}
}
+ this.playNextTimeout = null
}, nextVideoInterval * 1000)
let countDownTimeLeftInSecond = nextVideoInterval
@@ -1302,11 +1307,7 @@ export default defineComponent({
// To avoid message flashing
// `time` is manually tested to be 700
const message = this.$tc('Playing Next Video Interval', countDownTimeLeftInSecond, { nextVideoInterval: countDownTimeLeftInSecond })
- showToast(message, 700, () => {
- clearTimeout(this.playNextTimeout)
- clearInterval(this.playNextCountDownIntervalId)
- showToast(this.$t('Canceled next video autoplay'))
- })
+ showToast(message, 700, this.abortAutoplayCountdown)
// At least this var should be updated AFTER showing the message
countDownTimeLeftInSecond = countDownTimeLeftInSecond - 1
@@ -1316,9 +1317,18 @@ export default defineComponent({
this.playNextCountDownIntervalId = setInterval(showCountDownMessage, 1000)
},
- handleRouteChange: function () {
+ abortAutoplayCountdown: function (hideToast = false) {
clearTimeout(this.playNextTimeout)
clearInterval(this.playNextCountDownIntervalId)
+ this.playNextTimeout = null
+
+ if (!hideToast) {
+ showToast(this.$t('Canceled next video autoplay'))
+ }
+ },
+
+ handleRouteChange: function () {
+ this.abortAutoplayCountdown(true)
this.videoChapters = []
this.videoChaptersKind = 'chapters'
@@ -1630,16 +1640,6 @@ export default defineComponent({
return this.$refs.watchVideoPlaylist ? this.$refs.watchVideoPlaylist.loopEnabled : false
},
- getPlaylistPauseOnCurrent: function () {
- return this.$refs.watchVideoPlaylist ? this.$refs.watchVideoPlaylist.pauseOnCurrentVideo : false
- },
-
- disablePlaylistPauseOnCurrent: function () {
- if (this.$refs.watchVideoPlaylist) {
- this.$refs.watchVideoPlaylist.pauseOnCurrentVideo = false
- }
- },
-
updateTitle: function () {
this.setAppTitle(`${this.videoTitle} - ${packageDetails.productName}`)
},
@@ -1650,6 +1650,18 @@ export default defineComponent({
forbiddenTitles.some((text) => video.title?.toLowerCase().includes(text.toLowerCase()))
},
+ toggleAutoplay: function() {
+ if (this.autoplayEnabled && this.playNextTimeout) {
+ this.abortAutoplayCountdown()
+ }
+
+ if (this.watchingPlaylist) {
+ this.autoplayNextPlaylistVideo = !this.autoplayEnabled
+ } else {
+ this.autoplayNextRecommendedVideo = !this.autoplayEnabled
+ }
+ },
+
updateLocalPlaylistLastPlayedAtSometimes() {
if (this.selectedUserPlaylist == null) { return }
diff --git a/src/renderer/views/Watch/Watch.vue b/src/renderer/views/Watch/Watch.vue
index 80e9e63a5a545..00f3cf6b44673 100644
--- a/src/renderer/views/Watch/Watch.vue
+++ b/src/renderer/views/Watch/Watch.vue
@@ -33,6 +33,8 @@
:title="videoTitle"
:theatre-possible="theatrePossible"
:use-theatre-mode="useTheatreMode"
+ :autoplay-possible="autoplayPossible"
+ :autoplay-enabled="autoplayEnabled"
:vr-projection="vrProjection"
:current-playback-rate="currentPlaybackRate"
class="videoPlayer"
@@ -41,6 +43,7 @@
@timeupdate="updateCurrentChapter"
@ended="handleVideoEnded"
@toggle-theatre-mode="useTheatreMode = !useTheatreMode"
+ @toggle-autoplay="toggleAutoplay"
@playback-rate-updated="updatePlaybackRate"
/>