chore: Change time format (#7274)

* fix: typos

* fix: remove newlines from latex delimiters

* add changeset

* chore: change time format to HH:MM:SS

* add changeset

* Revert "fix: remove newlines from latex delimiters"

This reverts commit cebfabb51c.

* fix: remove accidental changes from different pr

* add changeset

* chore: change time format for player to use global formatting function

* fix: remove pipfile

* chore: use global time formatting for static video player

* chore: change to snake_case

* change

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

.changeset/mean-aliens-warn.md

@@ -0,0 +1,8 @@
+---
+"@gradio/audio": patch
+"@gradio/utils": patch
+"@gradio/video": patch
+"gradio": patch
+---
+
+feat:chore: Change time format (thanks @jjshoots for the independent contribution).

js/audio/player/AudioPlayer.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount } from "svelte";
 	import { Music } from "@gradio/icons";
-	import type { I18nFormatter } from "@gradio/utils";
+	import { format_time, type I18nFormatter } from "@gradio/utils";
 	import WaveSurfer from "wavesurfer.js";
 	import { skip_audio, process_audio } from "../shared/utils";
 	import WaveformControls from "../shared/WaveformControls.svelte";
@@ -47,13 +47,6 @@
 		end: undefined;
 	}>();
 
-	const formatTime = (seconds: number): string => {
-		const minutes = Math.floor(seconds / 60);
-		const secondsRemainder = Math.round(seconds) % 60;
-		const paddedSeconds = `0${secondsRemainder}`.slice(-2);
-		return `${minutes}:${paddedSeconds}`;
-	};
-
 	const create_waveform = (): void => {
 		waveform = WaveSurfer.create({
 			container: container,
@@ -75,13 +68,13 @@
 
 	$: waveform?.on("decode", (duration: any) => {
 		audio_duration = duration;
-		durationRef && (durationRef.textContent = formatTime(duration));
+		durationRef && (durationRef.textContent = format_time(duration));
 	});
 
 	$: waveform?.on(
 		"timeupdate",
 		(currentTime: any) =>
-			timeRef && (timeRef.textContent = formatTime(currentTime))
+			timeRef && (timeRef.textContent = format_time(currentTime))
 	);
 
 	$: waveform?.on("ready", () => {
@@ -170,7 +163,7 @@
 			<time bind:this={timeRef} id="time">0:00</time>
 			<div>
 				{#if mode === "edit" && trimDuration > 0}
-					<time id="trim-duration">{formatTime(trimDuration)}</time>
+					<time id="trim-duration">{format_time(trimDuration)}</time>
 				{/if}
 				<time bind:this={durationRef} id="duration">0:00</time>
 			</div>

js/audio/recorder/AudioRecorder.svelte

@@ -9,6 +9,7 @@
 	import WaveformRecordControls from "../shared/WaveformRecordControls.svelte";
 	import RecordPlugin from "wavesurfer.js/dist/plugins/record.js";
 	import type { WaveformOptions } from "../shared/types";
+	import { format_time } from "@gradio/utils";
 
 	export let mode: string;
 	export let i18n: I18nFormatter;
@@ -61,13 +62,6 @@
 		edit: undefined;
 	}>();
 
-	const format_time = (seconds: number): string => {
-		const minutes = Math.floor(seconds / 60);
-		const secondsRemainder = Math.round(seconds) % 60;
-		const paddedSeconds = `0${secondsRemainder}`.slice(-2);
-		return `${minutes}:${paddedSeconds}`;
-	};
-
 	$: record?.on("record-start", () => {
 		start_interval();
 		timing = true;

js/utils/src/utils.ts

@@ -151,6 +151,21 @@ async function copy_to_clipboard(value: string): Promise<boolean> {
 	return copied;
 }
 
+export const format_time = (seconds: number): string => {
+	const hours = Math.floor(seconds / 3600);
+	const minutes = Math.floor((seconds % 3600) / 60);
+	const seconds_remainder = Math.round(seconds) % 60;
+	const padded_minutes = `${minutes < 10 ? "0" : ""}${minutes}`;
+	const padded_seconds = `${
+		seconds_remainder < 10 ? "0" : ""
+	}${seconds_remainder}`;
+
+	if (hours > 0) {
+		return `${hours}:${padded_minutes}:${padded_seconds}`;
+	}
+	return `${minutes}:${padded_seconds}`;
+};
+
 export type I18nFormatter = any;
 export class Gradio<T extends Record<string, any> = Record<string, any>> {
 	#id: number;

js/video/shared/Player.svelte

@@ -5,6 +5,7 @@
 	import VideoControls from "./VideoControls.svelte";
 	import type { FileData } from "@gradio/client";
 	import { prepare_files, upload } from "@gradio/client";
+	import { format_time } from "@gradio/utils";
 
 	export let root = "";
 	export let src: string;
@@ -70,16 +71,6 @@
 		time = (duration * (e.clientX - left)) / (right - left);
 	}
 
-	function format(seconds: number): string {
-		if (isNaN(seconds) || !isFinite(seconds)) return "...";
-
-		const minutes = Math.floor(seconds / 60);
-		let _seconds: number | string = Math.floor(seconds % 60);
-		if (_seconds < 10) _seconds = `0${_seconds}`;
-
-		return `${minutes}:${_seconds}`;
-	}
-
 	function handle_end(): void {
 		dispatch("stop");
 		dispatch("end");
@@ -138,7 +129,7 @@
 				{/if}
 			</span>
 
-			<span class="time">{format(time)} / {format(duration)}</span>
+			<span class="time">{format_time(time)} / {format_time(duration)}</span>
 
 			<!-- TODO: implement accessible video timeline for 4.0 -->
 			<!-- svelte-ignore a11y-click-events-have-key-events -->

js/video/shared/VideoControls.svelte

@@ -5,6 +5,7 @@
 	import { FFmpeg } from "@ffmpeg/ffmpeg";
 	import loadFfmpeg from "./utils";
 	import { onMount } from "svelte";
+	import { format_time } from "@gradio/utils";
 
 	export let videoElement: HTMLVideoElement;
 
@@ -24,18 +25,6 @@
 	$: if (mode === "edit" && trimmedDuration === null && videoElement)
 		trimmedDuration = videoElement.duration;
 
-	const formatTime = (seconds: number): string => {
-		const minutes = Math.floor(seconds / 60);
-		const secondsRemainder = Math.round(seconds) % 60;
-		const paddedSeconds = `0${secondsRemainder}`.slice(-2);
-
-		if (Number.isNaN(minutes) || Number.isNaN(secondsRemainder)) {
-			return "00:00";
-		}
-
-		return `${minutes}:${paddedSeconds}`;
-	};
-
 	let trimmedDuration: number | null = null;
 	let dragStart = 0;
 	let dragEnd = 0;
@@ -69,7 +58,7 @@
 		{#if mode === "edit" && trimmedDuration !== null}
 			<time
 				aria-label="duration of selected region in seconds"
-				class:hidden={loadingTimeline}>{formatTime(trimmedDuration)}</time
+				class:hidden={loadingTimeline}>{format_time(trimmedDuration)}</time
 			>
 		{:else}
 			<div />