Update next video countdown toast to be refreshed per second instead of using workaround

src/renderer/components/FtToast/FtToast.vue

@@ -26,18 +26,19 @@ let idCounter = 0
 
 /**
  * @typedef Toast
- * @property {string} message
+ * @property {string | (({elapsedMs: number, remainingMs: number}) => string)} message
  * @property {Function | null} action
  * @property {boolean} isOpen
  * @property {NodeJS.Timeout | number} timeout
+ * @property {NodeJS.Timeout | number} interval
  * @property {number} id
  */
 
 /** @type {import('vue').ShallowReactive<Toast[]>} */
 const toasts = shallowReactive([])
 
 /**
- * @param {CustomEvent<{ message: string, time: number | null, action: Function | null, abortSignal: AbortSignal | null }>} event
+ * @param {CustomEvent<{ message: string | (({elapsedMs: number, remainingMs: number}) => string), time: number | null, action: Function | null, abortSignal: AbortSignal | null }>} event
  */
 function open({ detail: { message, time, action, abortSignal } }) {
   /** @type {Toast} */
@@ -46,10 +47,24 @@ function open({ detail: { message, time, action, abortSignal } }) {
     action,
     isOpen: false,
     timeout: 0,
+    interval: 0,
     id: idCounter++
   }
+  time ||= 3000
+  let elapsed = 0
+  const updateDelay = 1000
+
+  if (typeof message === 'function') {
+    toast.message = message({ elapsedMs: elapsed, remainingMs: time - elapsed })
+    toast.interval = setInterval(() => {
+      elapsed += updateDelay
+      // Skip last update
+      if (elapsed >= time) { return }
+      toast.message = message({ elapsedMs: elapsed, remainingMs: time - elapsed })
+    }, updateDelay)
+  }
 
-  toast.timeout = setTimeout(close, time || 3000, toast)
+  toast.timeout = setTimeout(close, time, toast)
   if (abortSignal != null) {
     abortSignal.addEventListener('abort', () => {
       close(toast)
@@ -91,17 +106,26 @@ function remove(toast) {
 
   if (index !== -1) {
     toasts.splice(index, 1)
-    clearTimeout(toast.timeout)
+    cleanup(toast)
   }
 }
 
+/**
+ * @param {Toast} toast
+ */
+function cleanup(toast) {
+  // assumes `toasts.indexOf(toast) !== -1`
+  clearTimeout(toast.timeout)
+  clearInterval(toast.interval)
+}
+
 onMounted(() => {
   ToastEventBus.addEventListener('toast-open', open)
 })
 
 onBeforeUnmount(() => {
   ToastEventBus.removeEventListener('toast-open', open)
-  toasts.forEach((toast) => clearTimeout(toast.timeout))
+  toasts.forEach(cleanup)
 })
 </script>
 

src/renderer/helpers/utils.js

@@ -163,7 +163,7 @@ export function buildVTTFileLocally(storyboard, videoLengthSeconds) {
 export const ToastEventBus = new EventTarget()
 
 /**
- * @param {string} message
+ * @param {string | (({elapsedMs: number, remainingMs: number}) => string)} message
  * @param {number} time
  * @param {Function} action
  * @param {AbortSignal} abortSignal

src/renderer/views/Watch/Watch.js

@@ -1367,26 +1367,15 @@ export default defineComponent({
         this.playNextTimeout = null
       }, nextVideoInterval * 1000)
 
-      let countDownTimeLeftInSecond = nextVideoInterval
-      const showCountDownMessage = () => {
-        // Will not display "Playing next video in no time" as it's too late to cancel
-        // Also there is a separate message when playing next video
-        if (countDownTimeLeftInSecond <= 0) {
-          clearInterval(this.playNextCountDownIntervalId)
-          return
-        }
-
-        // 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, this.abortAutoplayCountdown)
-
-        // At least this var should be updated AFTER showing the message
-        countDownTimeLeftInSecond = countDownTimeLeftInSecond - 1
-      }
-      // Execute once before scheduling it
-      showCountDownMessage()
-      this.playNextCountDownIntervalId = setInterval(showCountDownMessage, 1000)
+      showToast(
+        ({ remainingMs }) => {
+          const countDownTimeLeftInSecond = remainingMs / 1000
+          return this.$tc('Playing Next Video Interval', countDownTimeLeftInSecond, { nextVideoInterval: countDownTimeLeftInSecond })
+        },
+        // So that we don't see last countdown text like 0/N
+        nextVideoInterval * 1000,
+        this.abortAutoplayCountdown,
+      )
     },
 
     // Skip to the next video if in a playlist