From 3608eb4f1ec34de223843a9c3c463d4ab095dece Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 3 Jan 2024 11:10:41 +0100 Subject: [PATCH] Fix input mask with 10h+ videos --- .../timestamp-input.component.html | 2 +- .../timestamp-input.component.scss | 2 ++ .../shared-forms/timestamp-input.component.ts | 3 +- ...eo-playlist-element-miniature.component.ts | 4 +-- packages/core-utils/src/common/date.ts | 35 ++++++++++++++----- 5 files changed, 33 insertions(+), 13 deletions(-) diff --git a/client/src/app/shared/shared-forms/timestamp-input.component.html b/client/src/app/shared/shared-forms/timestamp-input.component.html index c89a7b019..cea73852d 100644 --- a/client/src/app/shared/shared-forms/timestamp-input.component.html +++ b/client/src/app/shared/shared-forms/timestamp-input.component.html @@ -1,5 +1,5 @@ diff --git a/client/src/app/shared/shared-forms/timestamp-input.component.scss b/client/src/app/shared/shared-forms/timestamp-input.component.scss index df19240b4..5b5a6a5f6 100644 --- a/client/src/app/shared/shared-forms/timestamp-input.component.scss +++ b/client/src/app/shared/shared-forms/timestamp-input.component.scss @@ -26,6 +26,8 @@ p-inputmask { &:not(.border-disabled) { ::ng-deep input { @include peertube-input-text(80px); + + padding: 3px 10px; } } } diff --git a/client/src/app/shared/shared-forms/timestamp-input.component.ts b/client/src/app/shared/shared-forms/timestamp-input.component.ts index 280491852..d3ae91875 100644 --- a/client/src/app/shared/shared-forms/timestamp-input.component.ts +++ b/client/src/app/shared/shared-forms/timestamp-input.component.ts @@ -36,7 +36,8 @@ export class TimestampInputComponent implements ControlValueAccessor, OnInit { writeValue (timestamp: number) { this.timestamp = timestamp - this.timestampString = secondsToTime(this.timestamp, true, ':') + this.timestampString = secondsToTime({ seconds: this.timestamp, fullFormat: true, symbol: ':' }) + console.log(this.timestampString) } registerOnChange (fn: (_: any) => void) { diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.ts b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.ts index 16a1e51ca..d03e11e34 100644 --- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.ts +++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.ts @@ -144,8 +144,8 @@ export class VideoPlaylistElementMiniatureComponent implements OnInit { const start = playlistElement.startTimestamp const stop = playlistElement.stopTimestamp - const startFormatted = secondsToTime(start, true, ':') - const stopFormatted = secondsToTime(stop, true, ':') + const startFormatted = secondsToTime({ seconds: start, fullFormat: true, symbol: ':' }) + const stopFormatted = secondsToTime({ seconds: stop, fullFormat: true, symbol: ':' }) if (start === null && stop === null) return '' diff --git a/packages/core-utils/src/common/date.ts b/packages/core-utils/src/common/date.ts index 8cf5ac5db..f3f0d4c65 100644 --- a/packages/core-utils/src/common/date.ts +++ b/packages/core-utils/src/common/date.ts @@ -83,29 +83,46 @@ function timeToInt (time: number | string) { return result } -function secondsToTime (seconds: number, full = false, symbol?: string) { +function secondsToTime (options: { + seconds: number + fullFormat?: boolean // default false + symbol?: string +} | number) { + let seconds: number + let fullFormat = false + let symbol: string + + if (typeof options === 'number') { + seconds = options + } else { + seconds = options.seconds + fullFormat = options.fullFormat ?? false + symbol = options.symbol + } + let time = '' - if (seconds === 0 && !full) return '0s' + if (seconds === 0 && !fullFormat) return '0s' const hourSymbol = (symbol || 'h') const minuteSymbol = (symbol || 'm') - const secondsSymbol = full ? '' : 's' + const secondsSymbol = fullFormat ? '' : 's' const hours = Math.floor(seconds / 3600) - if (hours >= 1) time = hours + hourSymbol - else if (full) time = '0' + hourSymbol + if (hours >= 1 && hours < 10 && fullFormat) time = '0' + hours + hourSymbol + else if (hours >= 1) time = hours + hourSymbol + else if (fullFormat) time = '00' + hourSymbol seconds %= 3600 const minutes = Math.floor(seconds / 60) - if (minutes >= 1 && minutes < 10 && full) time += '0' + minutes + minuteSymbol + if (minutes >= 1 && minutes < 10 && fullFormat) time += '0' + minutes + minuteSymbol else if (minutes >= 1) time += minutes + minuteSymbol - else if (full) time += '00' + minuteSymbol + else if (fullFormat) time += '00' + minuteSymbol seconds %= 60 - if (seconds >= 1 && seconds < 10 && full) time += '0' + seconds + secondsSymbol + if (seconds >= 1 && seconds < 10 && fullFormat) time += '0' + seconds + secondsSymbol else if (seconds >= 1) time += seconds + secondsSymbol - else if (full) time += '00' + else if (fullFormat) time += '00' return time }