Use Intl.RelativeTimeFormat() for premiere upcoming time left (#2610)

* Improve premiere timestamp

Removes the unesseccary parts of the timestamp, year and seconds.

displays month as long name (eg., March)

* fix linting... forgot to add the file again before commit.

* get and use current locale set in freetube

this fixes issues where os locale and freetube locale don't match

* use 'default' when no locale is set in freetube.

this defaults to system locale

* use i18n to get locale and format date with intl

* format date with intl.datetimeformat

forgot to add file again after changes...

* use intl relative time format to format upcomingTimeLeft

* rename timeUnitI18nKey to just timeUnit

It's no longer used as a key and is no longer partial

src/renderer/views/Watch/Watch.js

@@ -429,34 +429,30 @@ export default Vue.extend({
 
               // Convert from ms to second to minute
               upcomingTimeLeft = (upcomingTimeLeft / 1000) / 60
-              let timeUnitI18nPartialKey = 'Minute'
+              let timeUnit = 'minute'
 
               // Youtube switches to showing time left in minutes at 120 minutes remaining
               if (upcomingTimeLeft > 120) {
                 upcomingTimeLeft = upcomingTimeLeft / 60
-                timeUnitI18nPartialKey = 'Hour'
+                timeUnit = 'hour'
               }
 
-              if (timeUnitI18nPartialKey === 'Hour' && upcomingTimeLeft > 24) {
+              if (timeUnit === 'hour' && upcomingTimeLeft > 24) {
                 upcomingTimeLeft = upcomingTimeLeft / 24
-                timeUnitI18nPartialKey = 'Day'
+                timeUnit = '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()
+                this.upcomingTimeLeft = this.$t('Video.Published.In less than a minute').toLowerCase()
               } else {
                 // TODO a I18n entry for time format might be needed here
-                this.upcomingTimeLeft = `${upcomingTimeLeft} ${timeUnitTranslated}`
+                this.upcomingTimeLeft = new Intl.RelativeTimeFormat(this.currentLocale).format(upcomingTimeLeft, timeUnit)
               }
             } else {
               this.upcomingTimestamp = null

src/renderer/views/Watch/Watch.vue

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

static/locales/en-US.yaml

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