Fix remaining time for mobile + smaller heading sizes

src/assets/locales/en.json

@@ -111,9 +111,10 @@
       "short": "Back"
     },
     "time": {
-            "short": "-{{timeLeft}}",
       "regular": "{{timeWatched}} / {{duration}}",
-            "remaining": "{{timeLeft}} left • Finish at {{timeFinished, datetime}}"
+      "shortRegular": "{{timeWatched}}",
+      "remaining": "{{timeLeft}} left • Finish at {{timeFinished, datetime}}",
+      "shortRemaining": "-{{timeLeft}}"
     },
     "nextEpisode": {
       "next": "Next episode",
@@ -203,15 +204,9 @@
       "stopEditing": "Stop editing"
     },
     "titles": {
-            "morning": [
+      "morning": ["Morning title"],
-                "Morning title"
+      "day": ["Day title"],
-            ],
+      "night": ["Night title"]
-            "day": [
-                "Day title"
-            ],
-            "night": [
-                "Night title"
-            ]
     },
     "search": {
       "loading": "Loading...",

src/components/player/atoms/Time.tsx

@@ -40,10 +40,14 @@ export function Time(props: { short?: boolean }) {
   const timeFinished = new Date(Date.now() + secondsRemaining * 1e3);
   const duration = formatSeconds(timeDuration, hasHours);
 
-  let localizationKey = "regular";
+  let localizationKey =
-  if (props.short) localizationKey = "short";
+    timeFormat === VideoPlayerTimeFormat.REGULAR ? "regular" : "remaining";
-  else if (timeFormat === VideoPlayerTimeFormat.REMAINING)
+  if (props.short) {
-    localizationKey = "remaining";
+    localizationKey =
+      timeFormat === VideoPlayerTimeFormat.REGULAR
+        ? "shortRegular"
+        : "shortRemaining";
+  }
 
   return (
     <VideoPlayerButton onClick={() => toggleMode()}>

src/components/utils/Text.tsx

@@ -24,7 +24,7 @@ export function Heading2(props: TextProps) {
   return (
     <h2
       className={[
-        "text-xl lg:text-3xl font-bold text-white mt-20 mb-9",
+        "text-xl lg:text-2xl font-bold text-white mt-20 mb-9",
         props.border ? borderClass : null,
         props.className ?? "",
       ].join(" ")}