feat: display date & time in torrent detail for web client (#5918)

web/src/formatter.js

@@ -133,24 +133,28 @@ export const Formatter = {
     return ['E2BIG', 'NaN'].some((badStr) => str.includes(badStr)) ? `…` : str;
   },
 
-  timeInterval(seconds) {
+  timeInterval(seconds, granular_depth = 3) {
     const days = Math.floor(seconds / 86_400);
+    let buffer = [];
     if (days) {
-      return this.countString('day', 'days', days);
+      buffer.push(this.countString('day', 'days', days));
     }
 
     const hours = Math.floor((seconds % 86_400) / 3600);
-    if (hours) {
-      return this.countString('hour', 'hours', hours);
+    if (days || hours) {
+      buffer.push(this.countString('hour', 'hours', hours));
     }
 
     const minutes = Math.floor((seconds % 3600) / 60);
-    if (minutes) {
-      return this.countString('minute', 'minutes', minutes);
+    if (days || hours || minutes) {
+      buffer.push(this.countString('minute', 'minutes', minutes));
+      buffer = buffer.slice(0, granular_depth);
+      return buffer.length > 1
+        ? `${buffer.slice(0, -1).join(', ')} and ${buffer.slice(-1)}`
+        : buffer[0];
     }
 
-    seconds = Math.floor(seconds % 60);
-    return this.countString('second', 'seconds', seconds);
+    return this.countString('second', 'seconds', Math.floor(seconds % 60));
   },
 
   timestamp(seconds) {

web/src/inspector.js

@@ -539,7 +539,17 @@ export class Inspector extends EventTarget {
       const get = (t) => t.getDateAdded();
       const first = get(torrents[0]);
       string = torrents.every((t) => get(t) === first)
-        ? new Date(first * 1000).toDateString()
+        ? new Date(first * 1000).toLocaleString(navigator.language, {
+            day: '2-digit',
+            hour: '2-digit',
+            hour12: false,
+            minute: '2-digit',
+            month: 'short',
+            second: '2-digit',
+            timeZoneName: 'short',
+            weekday: 'short',
+            year: 'numeric',
+          })
         : mixed;
     }
     setTextContent(e.info.dateAdded, string);

web/src/torrent-row.js

@@ -16,7 +16,7 @@ const TorrentRendererHelper = {
     if (eta < 0 || eta >= 999 * 60 * 60) {
       return '';
     }
-    return `ETA: ${Formatter.timeInterval(eta)}`;
+    return `ETA: ${Formatter.timeInterval(eta, 1)}`;
   },
   formatLabels: (t, label) => {
     const labels = t.getLabels();
@@ -209,7 +209,7 @@ export class TorrentRendererFull {
       if (eta < 0 || eta >= 999 * 60 * 60 /* arbitrary */) {
         c.push('remaining time unknown');
       } else {
-        c.push(Formatter.timeInterval(t.getETA()), ' remaining');
+        c.push(Formatter.timeInterval(t.getETA(), 1), ' remaining');
       }
     }