diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js index e4f86aa67..db3435d34 100644 --- a/src/renderer/views/Watch/Watch.js +++ b/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) diff --git a/src/renderer/views/Watch/Watch.vue b/src/renderer/views/Watch/Watch.vue index c582beb7a..0e9091fd5 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 on") }}: + {{ $t("Video.Premieres in") }} {{ upcomingTimeLeft }}
{{ upcomingTimestamp }}

diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml index f755fdc8e..f3dd927e0 100644 --- a/static/locales/en-US.yaml +++ b/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