* Implement playlist countdown per second (#1234)

Closes: #1214

src/renderer/views/Watch/Watch.js

@@ -876,16 +876,35 @@ export default Vue.extend({
           }
         }, nextVideoInterval * 1000)
 
-        this.showToast({
+        let countDownTimeLeftInSecond = nextVideoInterval
-          message: this.$tc('Playing Next Video Interval', nextVideoInterval, { nextVideoInterval: nextVideoInterval }),
+        const showCountDownMessage = () => {
-          time: (nextVideoInterval * 1000) + 500,
+          // Will not display "Playing next video in no time" as it's too late to cancel
-          action: () => {
+          // Also there is a separate message when playing next video
-            clearTimeout(this.playNextTimeout)
+          if (countDownTimeLeftInSecond <= 0) {
-            this.showToast({
+            clearInterval(countDownIntervalId)
-              message: this.$t('Canceled next video autoplay')
+            return
-            })
           }
-        })
+
+          this.showToast({
+            message: this.$tc('Playing Next Video Interval', countDownTimeLeftInSecond, { nextVideoInterval: countDownTimeLeftInSecond }),
+            // To avoid message flashing
+            // `time` is manually tested to be 700
+            time: 700,
+            action: () => {
+              clearTimeout(this.playNextTimeout)
+              clearInterval(countDownIntervalId)
+              this.showToast({
+                message: this.$t('Canceled next video autoplay')
+              })
+            }
+          })
+
+          // At least this var should be updated AFTER showing the message
+          countDownTimeLeftInSecond = countDownTimeLeftInSecond - 1
+        }
+        // Execute once before scheduling it
+        showCountDownMessage()
+        const countDownIntervalId = setInterval(showCountDownMessage, 1000)
       } else if (this.playNextVideo) {
         this.playNextTimeout = setTimeout(() => {
           const player = this.$refs.videoPlayer.player