From c9c522a2b1597e7bb41f79681ac6d35324655c69 Mon Sep 17 00:00:00 2001
From: Aiz <66974576+Aiz0@users.noreply.github.com>
Date: Sat, 24 Sep 2022 23:23:45 +0000
Subject: [PATCH] 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  | 16 ++++++----------
 src/renderer/views/Watch/Watch.vue |  2 +-
 static/locales/en-US.yaml          |  4 ++--
 3 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js
index cb3341e2..5a6f4d57 100644
--- a/src/renderer/views/Watch/Watch.js
+++ b/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
diff --git a/src/renderer/views/Watch/Watch.vue b/src/renderer/views/Watch/Watch.vue
index 638cb97d..7a0e1ee0 100644
--- a/src/renderer/views/Watch/Watch.vue
+++ b/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>
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index f106a311..18defc5b 100644
--- a/static/locales/en-US.yaml
+++ b/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