Fix time display in review step (#1137)

Fix #1136 

See commit messages.

Author: owi92

src/i18n/index.ts

@@ -32,36 +32,8 @@ void i18n
     fallbackLng: "en",
 
     interpolation: {
+      // React already escapes. Disabled here to avoid double escapes.
       escapeValue: false,
-      format: (value, format, lng) => {
-        if (format === "duration-seconds") {
-          if (value == null) {
-            return "-:--:--";
-          }
-
-          const seconds = value % 60;
-          value /= 60;
-          const minutes = Math.floor(value % 60);
-          value /= 60;
-          const hours = Math.floor(value % 60);
-
-          const secondsString = seconds.toLocaleString(lng, {
-            minimumFractionDigits: 1,
-            maximumFractionDigits: 1,
-          });
-          const result = [
-            `${(minutes < 10 ? "0" : "")} + ${minutes}`,
-            `${(seconds < 10 ? "0" : "")} + ${secondsString}`,
-          ];
-          if (hours > 0) {
-            result.unshift(hours.toString());
-          }
-
-          return result.join(":");
-        } else {
-          return value;
-        }
-      },
     },
 
     detection: {

src/i18n/locales/en.json

@@ -84,7 +84,6 @@
       "set-start": "Set current time as start",
       "set-end": "Set current time as end",
       "part-will-be-removed": "This part will be removed",
-      "player-progress": "{{currentTime}} / {{duration}}",
       "play": "Play",
       "pause": "Pause",
       "jump-to-cut-point": "Jump to cut point"

src/i18n/locales/es.json

@@ -59,7 +59,6 @@
       "set-start": "Establecer el instante actual como inicio",
       "set-end": "Establecer el instante actual como fin",
       "part-will-be-removed": "Esta parte será eliminada",
-      "player-progress": "{{currentTime, duration-seconds}} / {{duration, duration-seconds}}",
       "play": "Reproducir",
       "pause": "Pausar"
     },

src/i18n/locales/fr.json

@@ -67,7 +67,6 @@
       "set-start": "Définir l’heure actuelle comme début",
       "set-end": "Définir l’heure actuelle comme fin",
       "part-will-be-removed": "Cette section sera retirée",
-      "player-progress": "{{currentTime, duration-seconds}} / {{duration, duration-seconds}}",
       "play": "Jouer",
       "pause": "Pause"
     },

src/i18n/locales/nl.json

@@ -59,7 +59,6 @@
       "set-start": "Stel de actuele tijd in als starttijd",
       "set-end": "Stel de actuele tijd in als eindtijd",
       "part-will-be-removed": "Dit deel wordt verwijderd.",
-      "player-progress": "{{currentTime, duration-seconds}} / {{duration, duration-seconds}}",
       "play": "Afspelen",
       "pause": "Pauze"
     },

src/i18n/locales/zh.json

@@ -60,7 +60,6 @@
       "set-start": "将当前时间设置为开始时间",
       "set-end": "将当前时间设置为结束",
       "part-will-be-removed": "此部分将被删除",
-      "player-progress": "{{当前时间, 持续时间-秒}} / {{期间, 持续时间-秒}}",
       "play": "播放",
       "pause": "暂停"
     },
@@ -96,7 +95,7 @@
           "seconds": "秒",
           "minutes": "分",
           "hours": "小时",
-          "left": "剩余{{时间}}"
+          "left": "剩余{{time}}"
         }
       }
     }

src/steps/review/control-box.tsx

@@ -19,7 +19,7 @@ type SharedProps = {
 };
 
 export const ControlBox: React.FC<SharedProps> = ({ previewController, currentTime }) => {
-  const { t, i18n } = useTranslation();
+  const { i18n } = useTranslation();
   const duration = previewController.current?.duration;
   const { isHighContrast } = useColorScheme();
 
@@ -35,10 +35,9 @@ export const ControlBox: React.FC<SharedProps> = ({ previewController, currentTi
     }}>
       <Controls {...{ previewController, currentTime }} />
       <div css={{ textAlign: "center", color: COLORS.neutral70 }}>
-        {t("steps.review.player-progress", {
-          currentTime: formatTime(currentTime, duration, i18n.language),
-          duration: formatTime(duration, duration, i18n.language),
-        })}
+        {formatTime(currentTime, duration, i18n.language)}
+        /
+        {formatTime(duration, duration, i18n.language)}
       </div>
       <Scrubber {...{ previewController, currentTime }} />
     </div>