Add setting to make captions lower

src/assets/locales/en.json

@@ -766,7 +766,10 @@
             "previewQuote": "Convinced life is meaningless, I lack the courage of my conviction.",
             "textSizeLabel": "Text size",
             "title": "Subtitles",
-            "textBoldLabel": "Bold text"
+            "textBoldLabel": "Bold text",
+            "verticalPositionLabel": "Vertical position",
+            "default": "Default",
+            "low": "Low"
         },
         "unsaved": "You have unsaved changes... ฅ^•ﻌ•^ฅ"
     },

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

@@ -325,6 +325,47 @@ export function CaptionSettingsView({
           onChange={(v) => handleStylingChange({ ...styling, size: v / 100 })}
           value={styling.size * 100}
         />
+        <div className="flex justify-between items-center">
+          <Menu.FieldTitle>
+            {t("settings.subtitles.verticalPositionLabel")}
+          </Menu.FieldTitle>
+          <div className="flex justify-center items-center space-x-2">
+            <button
+              type="button"
+              className={classNames(
+                "px-3 py-1 rounded transition-colors duration-100",
+                styling.verticalPosition === 3
+                  ? "bg-video-context-buttonFocus"
+                  : "bg-video-context-buttonFocus bg-opacity-0 hover:bg-opacity-50",
+              )}
+              onClick={() =>
+                handleStylingChange({
+                  ...styling,
+                  verticalPosition: 3,
+                })
+              }
+            >
+              {t("settings.subtitles.default")}
+            </button>
+            <button
+              type="button"
+              className={classNames(
+                "px-3 py-1 rounded transition-colors duration-100",
+                styling.verticalPosition === 1
+                  ? "bg-video-context-buttonFocus"
+                  : "bg-video-context-buttonFocus bg-opacity-0 hover:bg-opacity-50",
+              )}
+              onClick={() =>
+                handleStylingChange({
+                  ...styling,
+                  verticalPosition: 1,
+                })
+              }
+            >
+              {t("settings.subtitles.low")}
+            </button>
+          </div>
+        </div>
         <div className="flex justify-between items-center">
           <Menu.FieldTitle>
             {t("settings.subtitles.colorLabel")}

src/components/player/base/SubtitleView.tsx

@@ -1,4 +1,3 @@
-import classNames from "classnames";
 import { useMemo } from "react";
 
 import {
@@ -123,6 +122,7 @@ export function SubtitleView(props: { controlsShown: boolean }) {
   const captionAsTrack = usePlayerStore((s) => s.caption.asTrack);
   const display = usePlayerStore((s) => s.display);
   const isCasting = display?.getType() === "casting";
+  const styling = useSubtitleStore((s) => s.styling);
 
   if (captionAsTrack || !caption || isCasting) return null;
 
@@ -133,10 +133,12 @@ export function SubtitleView(props: { controlsShown: boolean }) {
       show
     >
       <div
-        className={classNames([
+        className="text-white absolute flex w-full flex-col items-center transition-[bottom]"
-          "text-white absolute flex w-full flex-col items-center transition-[bottom]",
+        style={{
-          props.controlsShown ? "bottom-24" : "bottom-12",
+          bottom: props.controlsShown
-        ])}
+            ? "6rem"
+            : `${styling.verticalPosition}rem`,
+        }}
       >
         <SubtitleRenderer />
       </div>

src/pages/parts/settings/CaptionsPart.tsx

@@ -53,7 +53,12 @@ export function CaptionPreview(props: {
             <Icon icon={props.fullscreen ? Icons.X : Icons.EXPAND} />
           </button>
 
-          <div className="text-white pointer-events-none absolute flex w-full flex-col items-center transition-[bottom] bottom-0 p-4">
+          <div
+            className="text-white pointer-events-none absolute flex w-full flex-col items-center transition-[bottom] p-4"
+            style={{
+              bottom: `${props.styling.verticalPosition * 4}px`,
+            }}
+          >
             <div
               className={
                 props.fullscreen ? "" : "transform origin-bottom text-[0.5rem]"
@@ -98,6 +103,7 @@ export function CaptionsPart(props: {
       size: 1,
       backgroundBlur: 0.5,
       bold: false,
+      verticalPosition: 3,
     });
   };
 
@@ -145,6 +151,47 @@ export function CaptionsPart(props: {
             }
             value={props.styling.size * 100}
           />
+          <div className="flex justify-between items-center">
+            <Menu.FieldTitle>
+              {t("settings.subtitles.verticalPositionLabel")}
+            </Menu.FieldTitle>
+            <div className="flex justify-center items-center space-x-2">
+              <button
+                type="button"
+                className={classNames(
+                  "px-3 py-1 rounded transition-colors duration-100",
+                  props.styling.verticalPosition === 3
+                    ? "bg-video-context-buttonFocus"
+                    : "bg-video-context-buttonFocus bg-opacity-0 hover:bg-opacity-50",
+                )}
+                onClick={() =>
+                  handleStylingChange({
+                    ...props.styling,
+                    verticalPosition: 3,
+                  })
+                }
+              >
+                {t("settings.subtitles.default")}
+              </button>
+              <button
+                type="button"
+                className={classNames(
+                  "px-3 py-1 rounded transition-colors duration-100",
+                  props.styling.verticalPosition === 1
+                    ? "bg-video-context-buttonFocus"
+                    : "bg-video-context-buttonFocus bg-opacity-0 hover:bg-opacity-50",
+                )}
+                onClick={() =>
+                  handleStylingChange({
+                    ...props.styling,
+                    verticalPosition: 1,
+                  })
+                }
+              >
+                {t("settings.subtitles.low")}
+              </button>
+            </div>
+          </div>
           <div className="flex justify-between items-center">
             <Menu.FieldTitle>
               {t("settings.subtitles.textBoldLabel")}

src/stores/subtitles/index.ts

@@ -28,6 +28,11 @@ export interface SubtitleStyling {
    * bold, boolean
    */
   bold: boolean;
+
+  /**
+   * vertical position percentage, ranges between 1 and 3 (rem)
+   */
+  verticalPosition: number;
 }
 
 export interface SubtitleStore {
@@ -70,6 +75,7 @@ export const useSubtitleStore = create(
         size: 1,
         backgroundBlur: 0.5,
         bold: false,
+        verticalPosition: 3,
       },
       showDelayIndicator: false,
       resetSubtitleSpecificSettings() {
@@ -95,6 +101,11 @@ export const useSubtitleStore = create(
           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;
+          if (newStyling.verticalPosition !== undefined)
+            s.styling.verticalPosition = Math.min(
+              100,
+              Math.max(0, newStyling.verticalPosition),
+            );
         });
       },
       resetStyling() {
@@ -105,6 +116,7 @@ export const useSubtitleStore = create(
             size: 1,
             backgroundBlur: 0.5,
             bold: false,
+            verticalPosition: 3,
           };
         });
       },