Creepso/p-stream
1
0
Fork 0
mirror of https://github.com/p-stream/p-stream.git synced 2026-01-11 20:10:32 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add setting to make captions lower

Browse source
This commit is contained in:
Pas 2025-04-30 20:55:53 -06:00
parent df21c1e307
commit 648df78aad
5 changed files with 112 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/assets/locales/en.json
View file

@ -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... ฅ^•ﻌ•^ฅ"
},

41
src/components/player/atoms/settings/CaptionSettingsView.tsx
View file

@ -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")}

12
src/components/player/base/SubtitleView.tsx
View file

@ -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([
"text-white absolute flex w-full flex-col items-center transition-[bottom]",
props.controlsShown ? "bottom-24" : "bottom-12",
])}
className="text-white absolute flex w-full flex-col items-center transition-[bottom]"
style={{
bottom: props.controlsShown
? "6rem"
: `${styling.verticalPosition}rem`,
}}
>
<SubtitleRenderer />
</div>

49
src/pages/parts/settings/CaptionsPart.tsx
View file

@ -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")}

12
src/stores/subtitles/index.ts
View file

@ -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,
};
});
},