subtitles: add bold setting

src/assets/locales/en.json

@@ -619,7 +619,8 @@
       "colorLabel": "Color",
       "previewQuote": "Would you rather have a thot daughter or a gay son? 🤔",
       "textSizeLabel": "Text size",
-      "title": "Subtitles"
+      "title": "Subtitles",
+      "textBoldLabel": "Text bold"
     },
     "unsaved": "You have unsaved changes... ฅ^•ﻌ•^ฅ"
   }

src/components/player/atoms/settings/CaptionSettingsView.tsx

@@ -278,6 +278,17 @@ export function CaptionSettingsView({ id }: { id: string }) {
           onChange={(v) => updateStyling({ size: v / 100 })}
           value={styling.size * 100}
         />
+        <div className="flex justify-between items-center">
+          <Menu.FieldTitle>
+            {t("settings.subtitles.textBoldLabel")}
+          </Menu.FieldTitle>
+          <div className="flex justify-center items-center">
+            <Toggle
+              enabled={styling.bold}
+              onClick={() => updateStyling({ bold: !styling.bold })}
+            />
+          </div>
+        </div>
         <div className="flex justify-between items-center">
           <Menu.FieldTitle>
             {t("settings.subtitles.colorLabel")}

src/components/player/base/SubtitleView.tsx

@@ -59,6 +59,7 @@ export function CaptionCue({
           styling.backgroundBlur !== 0
             ? `blur(${Math.floor(styling.backgroundBlur * 64)}px)`
             : "none",
+        fontWeight: styling.bold ? "bold" : "normal",
       }}
     >
       <span

src/pages/parts/settings/CaptionsPart.tsx

@@ -3,6 +3,7 @@ import { useState } from "react";
 import { Helmet } from "react-helmet-async";
 import { useTranslation } from "react-i18next";
 
+import { Toggle } from "@/components/buttons/Toggle";
 import { Icon, Icons } from "@/components/Icon";
 import {
   CaptionSetting,
@@ -112,6 +113,22 @@ export function CaptionsPart(props: {
             }
             value={props.styling.size * 100}
           />
+          <div className="flex justify-between items-center">
+            <Menu.FieldTitle>
+              {t("settings.subtitles.textBoldLabel")}
+            </Menu.FieldTitle>
+            <div className="flex justify-center items-center">
+              <Toggle
+                enabled={props.styling.bold}
+                onClick={() =>
+                  props.setStyling({
+                    ...props.styling,
+                    bold: !props.styling.bold,
+                  })
+                }
+              />
+            </div>
+          </div>
           <div className="flex justify-between items-center">
             <Menu.FieldTitle>
               {t("settings.subtitles.colorLabel")}

src/stores/subtitles/index.ts

@@ -23,6 +23,11 @@ export interface SubtitleStyling {
    * background blur, ranges between 0 and 1
    */
   backgroundBlur: number;
+
+  /**
+   * bold, boolean
+   */
+  bold: boolean;
 }
 
 export interface SubtitleStore {
@@ -58,6 +63,7 @@ export const useSubtitleStore = create(
         backgroundOpacity: 0.5,
         size: 1,
         backgroundBlur: 0.5,
+        bold: false,
       },
       resetSubtitleSpecificSettings() {
         set((s) => {
@@ -81,6 +87,7 @@ export const useSubtitleStore = create(
             s.styling.color = newStyling.color.toLowerCase();
           if (newStyling.size !== undefined)
             s.styling.size = Math.min(10, Math.max(0.01, newStyling.size));
+          if (newStyling.bold !== undefined) s.styling.bold = newStyling.bold;
         });
       },
       setLanguage(lang) {