Improved clip layout. Using format module for duration and time.

assets/js/format.js

@@ -0,0 +1,29 @@
+import dayjs from 'dayjs';
+
+export function formatDuration(duration, forceHours) {
+	const hours = Math.floor(duration / 3600);
+	const minutes = Math.floor((duration % 3600) / 60);
+	const seconds = Math.floor(duration % 60);
+
+	const [formattedHours, formattedMinutes, formattedSeconds] = [hours, minutes, seconds].map(segment => segment.toString().padStart(2, '0'));
+
+	if (duration >= 3600 || forceHours) {
+		return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
+	}
+
+	return `${formattedMinutes}:${formattedSeconds}`;
+}
+
+export function formatDate(date, format = 'MMMM D, YYYY', precision = 'day') {
+	if (precision === 'year') {
+		const newFormat = format.match(/Y+/);
+		return dayjs(date).format(newFormat ? newFormat[0] : 'YYYY');
+	}
+
+	if (precision === 'month') {
+		const newFormat = format.match(/(M{1,4})|(Y{2,4})/g);
+		return dayjs(date).format(newFormat ? newFormat.join(' ') : 'MMMM YYYY');
+	}
+
+	return dayjs(date).format(format);
+}