Fix input mask with 10h+ videos

client/src/app/shared/shared-forms/timestamp-input.component.html

@@ -1,5 +1,5 @@
 <p-inputMask
   [disabled]="disabled" [(ngModel)]="timestampString" (onBlur)="onBlur()"
   [ngClass]="{ 'border-disabled': disableBorder }"
-  mask="9:99:99" slotChar="0" (ngModelChange)="onModelChange()" [inputId]="inputName"
+  mask="99:99:99" slotChar="0" (ngModelChange)="onModelChange()" [inputId]="inputName"
 ></p-inputMask>

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;
     }
   }
 }

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) {

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 ''
 

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
 }