Add timer showing segment time remaining

Author: Pillowytuba

src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js

@@ -574,6 +574,7 @@ export default defineComponent({
             clearInterval(existingSkip.intervalId)
 
             existingSkip.timeLeft = 4
+            existingSkip.segmentTimeLeft = 0
             existingSkip.intervalId = setInterval(() => {
               existingSkip.timeLeft--
             }, 1000)
@@ -586,6 +587,7 @@ export default defineComponent({
               endTime,
               unskipped: false,
               timeLeft: 4,
+              segmentTimeLeft: 0,
               intervalId: null,
               timeoutId: null
             }
@@ -1240,6 +1242,14 @@ export default defineComponent({
         if (useSponsorBlock.value && sponsorBlockSegments.length > 0 && canSeek()) {
           skipSponsorBlockSegments(currentTime)
         }
+
+        if (useSponsorBlock.value) {
+          for (const segment of skippedSponsorBlockSegments.value) {
+            if (segment.unskipped) {
+              segment.segmentTimeLeft = Math.max(0, segment.endTime - currentTime)
+            }
+          }
+        }
       }
     }
 
@@ -2322,6 +2332,7 @@ export default defineComponent({
               clearTimeout(segment.timeoutId)
               clearInterval(segment.intervalId)
               segment.timeLeft = null
+              segment.segmentTimeLeft = Math.max(0, segment.endTime - video_.currentTime)
               ignoredSponsorBlockSegments.add(segment.uuid)
             }
           }

src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.vue

@@ -116,14 +116,14 @@
       class="skippedSegmentsWrapper"
     >
       <p
-        v-for="{ uuid, translatedCategory, unskipped, timeLeft } in skippedSponsorBlockSegments"
+        v-for="{ uuid, translatedCategory, unskipped, timeLeft, segmentTimeLeft } in skippedSponsorBlockSegments"
         :key="uuid"
         class="skippedSegment"
       >
         {{ $t('Video.Player.Skipped segment', { segmentCategory: translatedCategory }) }}
         <br>
         <span class="unskipInstruction">
-          {{ unskipped ? $t('Video.Player.Press Enter to reskip') : $t('Video.Player.Press Enter to unskip', { timeLeft }) }}
+          {{ unskipped ? $t('Video.Player.Press Enter to reskip', { timeLeft: Math.ceil(segmentTimeLeft) }) : $t('Video.Player.Press Enter to unskip', { timeLeft }) }}
         </span>
       </p>
     </div>

static/locales/en-US.yaml

@@ -944,7 +944,7 @@ Video:
     Playback will resume automatically when your connection comes back: Playback will resume automatically when your connection comes back.
     Skipped segment: 'Skipped {segmentCategory} segment'
     Press Enter to unskip: 'Press Enter to unskip ({timeLeft}s)'
-    Press Enter to reskip: 'Press Enter to reskip'
+    Press Enter to reskip: 'Press Enter to reskip ({timeLeft}s remaining)'
   Watch:
     'Remaining preroll-ad time: {remindingTimeSeconds}s': 'Remaining preroll-ad time: {remindingTimeSeconds}s'
     'Remaining SABR backoff time: {remindingTimeSeconds}s': 'Remaining SABR backoff time: {remindingTimeSeconds}s'