Display time remaining until video goes live (#2501)

* display time left until video premiers:

* video premiere display time left with time units

Displays time left in seconds, minutes, hours, and days.

This depends on how much time is left.

* premiere time left, display time in singular if needed

also simplified the big if block

* premiere time left, display time unit in lowercase

* Add Starting Soon string to locale file

* apply fixes reported by linter

* premiere time left, add suggested changes

Better temp variable scoping, flatten nested code, rename temp variables, use string intepolation

Co-authored-by: PikachuEXE <[email protected]>

* replace tabs with spaces

tabs where used in some places in the suggested code

* display time left, remove "starting soon" string

Since upcomingTimeStamp will be null when the time has passed the scheduled timestamp
it doesn't make sense to use something that will rarely be displayed.
e.g. a user has to click on the video with less than a second remaing until it goes live for it to be displayed

it would also be displayed as "Premieres in Starting soon" which doesn't make sense

* display 'less than a minute' instead of exactly how many seconds remain

Looks better and works for values less than 0

Co-authored-by: PikachuEXE <[email protected]>

Author: Aiz0

src/renderer/views/Watch/Watch.js

@@ -49,6 +49,7 @@ export default Vue.extend({
       isLiveContent: false,
       isUpcoming: false,
       upcomingTimestamp: null,
+      upcomingTimeLeft: null,
       activeFormat: 'legacy',
       thumbnail: '',
       videoId: '',
@@ -395,8 +396,43 @@ export default Vue.extend({
             if (typeof startTimestamp !== 'undefined') {
               const upcomingTimestamp = new Date(result.videoDetails.liveBroadcastDetails.startTimestamp)
               this.upcomingTimestamp = upcomingTimestamp.toLocaleString()
+
+              let upcomingTimeLeft = upcomingTimestamp - new Date()
+
+              // Convert from ms to second to minute
+              upcomingTimeLeft = (upcomingTimeLeft / 1000) / 60
+              let timeUnitI18nPartialKey = 'Minute'
+
+              // Youtube switches to showing time left in minutes at 120 minutes remaining
+              if (upcomingTimeLeft > 120) {
+                upcomingTimeLeft = upcomingTimeLeft / 60
+                timeUnitI18nPartialKey = 'Hour'
+              }
+
+              if (timeUnitI18nPartialKey === 'Hour' && upcomingTimeLeft > 24) {
+                upcomingTimeLeft = upcomingTimeLeft / 24
+                timeUnitI18nPartialKey = 'Day'
+              }
+
+              // Value after decimal not to be displayed
+              // e.g. > 2 days = display as `2 days`
+              upcomingTimeLeft = Math.floor(upcomingTimeLeft)
+              if (upcomingTimeLeft !== 1) {
+                timeUnitI18nPartialKey = timeUnitI18nPartialKey + 's'
+              }
+              const timeUnitTranslated = this.$t(`Video.Published.${timeUnitI18nPartialKey}`).toLowerCase()
+
+              // Displays when less than a minute remains
+              // Looks better than `Premieres in x seconds`
+              if (upcomingTimeLeft < 1) {
+                this.upcomingTimeLeft = this.$t('Video.Published.Less than a minute').toLowerCase()
+              } else {
+                // TODO a I18n entry for time format might be needed here
+                this.upcomingTimeLeft = `${upcomingTimeLeft} ${timeUnitTranslated}`
+              }
             } else {
               this.upcomingTimestamp = null
+              this.upcomingTimeLeft = null
             }
           } else {
             this.videoLengthSeconds = parseInt(result.videoDetails.lengthSeconds)

src/renderer/views/Watch/Watch.vue

@@ -54,7 +54,7 @@
               v-if="upcomingTimestamp !== null"
               class="premiereText"
             >
-              {{ $t("Video.Premieres on") }}:
+              {{ $t("Video.Premieres in") }} {{ upcomingTimeLeft }}
               <br>
               {{ upcomingTimestamp }}
             </p>

static/locales/en-US.yaml

@@ -542,6 +542,7 @@ Video:
     the page to check again
   # As in a Live Video
   Premieres on: Premieres on
+  Premieres in: Premieres in
   Live: Live
   Live Now: Live Now
   Live Chat: Live Chat
@@ -592,6 +593,7 @@ Video:
     Years: Years
     Ago: Ago
     Upcoming: Premieres on
+    Less than a minute: Less than a minute
   Published on: Published on
   Streamed on: Streamed on
   Started streaming on: Started streaming on