pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
Add setting to make captions lower
+112
-7
+4
-1
src/assets/locales/en.json
+4
-1
src/assets/locales/en.json
···
766
766
"previewQuote": "Convinced life is meaningless, I lack the courage of my conviction.",
767
767
"textSizeLabel": "Text size",
768
768
"title": "Subtitles",
769
-
"textBoldLabel": "Bold text"
769
+
"textBoldLabel": "Bold text",
770
+
"verticalPositionLabel": "Vertical position",
771
+
"default": "Default",
772
+
"low": "Low"
770
773
},
771
774
"unsaved": "You have unsaved changes... ฅ^•ﻌ•^ฅ"
772
775
},
+41
src/components/player/atoms/settings/CaptionSettingsView.tsx
+41
src/components/player/atoms/settings/CaptionSettingsView.tsx
···
327
327
/>
328
328
<div className="flex justify-between items-center">
329
329
<Menu.FieldTitle>
330
+
{t("settings.subtitles.verticalPositionLabel")}
331
+
</Menu.FieldTitle>
332
+
<div className="flex justify-center items-center space-x-2">
333
+
<button
334
+
type="button"
335
+
className={classNames(
336
+
"px-3 py-1 rounded transition-colors duration-100",
337
+
styling.verticalPosition === 3
338
+
? "bg-video-context-buttonFocus"
339
+
: "bg-video-context-buttonFocus bg-opacity-0 hover:bg-opacity-50",
340
+
)}
341
+
onClick={() =>
342
+
handleStylingChange({
343
+
...styling,
344
+
verticalPosition: 3,
345
+
})
346
+
}
347
+
>
348
+
{t("settings.subtitles.default")}
349
+
</button>
350
+
<button
351
+
type="button"
352
+
className={classNames(
353
+
"px-3 py-1 rounded transition-colors duration-100",
354
+
styling.verticalPosition === 1
355
+
? "bg-video-context-buttonFocus"
356
+
: "bg-video-context-buttonFocus bg-opacity-0 hover:bg-opacity-50",
357
+
)}
358
+
onClick={() =>
359
+
handleStylingChange({
360
+
...styling,
361
+
verticalPosition: 1,
362
+
})
363
+
}
364
+
>
365
+
{t("settings.subtitles.low")}
366
+
</button>
367
+
</div>
368
+
</div>
369
+
<div className="flex justify-between items-center">
370
+
<Menu.FieldTitle>
330
371
{t("settings.subtitles.colorLabel")}
331
372
</Menu.FieldTitle>
332
373
<div className="flex justify-center items-center space-x-2">
+7
-5
src/components/player/base/SubtitleView.tsx
+7
-5
src/components/player/base/SubtitleView.tsx
···
1
-
import classNames from "classnames";
2
1
import { useMemo } from "react";
3
2
4
3
import {
···
123
122
const captionAsTrack = usePlayerStore((s) => s.caption.asTrack);
124
123
const display = usePlayerStore((s) => s.display);
125
124
const isCasting = display?.getType() === "casting";
125
+
const styling = useSubtitleStore((s) => s.styling);
126
126
127
127
if (captionAsTrack || !caption || isCasting) return null;
128
128
···
133
133
show
134
134
>
135
135
<div
136
-
className={classNames([
137
-
"text-white absolute flex w-full flex-col items-center transition-[bottom]",
138
-
props.controlsShown ? "bottom-24" : "bottom-12",
139
-
])}
136
+
className="text-white absolute flex w-full flex-col items-center transition-[bottom]"
137
+
style={{
138
+
bottom: props.controlsShown
139
+
? "6rem"
140
+
: `${styling.verticalPosition}rem`,
141
+
}}
140
142
>
141
143
<SubtitleRenderer />
142
144
</div>
+48
-1
src/pages/parts/settings/CaptionsPart.tsx
+48
-1
src/pages/parts/settings/CaptionsPart.tsx
···
53
53
<Icon icon={props.fullscreen ? Icons.X : Icons.EXPAND} />
54
54
</button>
55
55
56
-
<div className="text-white pointer-events-none absolute flex w-full flex-col items-center transition-[bottom] bottom-0 p-4">
56
+
<div
57
+
className="text-white pointer-events-none absolute flex w-full flex-col items-center transition-[bottom] p-4"
58
+
style={{
59
+
bottom: `${props.styling.verticalPosition * 4}px`,
60
+
}}
61
+
>
57
62
<div
58
63
className={
59
64
props.fullscreen ? "" : "transform origin-bottom text-[0.5rem]"
···
98
103
size: 1,
99
104
backgroundBlur: 0.5,
100
105
bold: false,
106
+
verticalPosition: 3,
101
107
});
102
108
};
103
109
···
145
151
}
146
152
value={props.styling.size * 100}
147
153
/>
154
+
<div className="flex justify-between items-center">
155
+
<Menu.FieldTitle>
156
+
{t("settings.subtitles.verticalPositionLabel")}
157
+
</Menu.FieldTitle>
158
+
<div className="flex justify-center items-center space-x-2">
159
+
<button
160
+
type="button"
161
+
className={classNames(
162
+
"px-3 py-1 rounded transition-colors duration-100",
163
+
props.styling.verticalPosition === 3
164
+
? "bg-video-context-buttonFocus"
165
+
: "bg-video-context-buttonFocus bg-opacity-0 hover:bg-opacity-50",
166
+
)}
167
+
onClick={() =>
168
+
handleStylingChange({
169
+
...props.styling,
170
+
verticalPosition: 3,
171
+
})
172
+
}
173
+
>
174
+
{t("settings.subtitles.default")}
175
+
</button>
176
+
<button
177
+
type="button"
178
+
className={classNames(
179
+
"px-3 py-1 rounded transition-colors duration-100",
180
+
props.styling.verticalPosition === 1
181
+
? "bg-video-context-buttonFocus"
182
+
: "bg-video-context-buttonFocus bg-opacity-0 hover:bg-opacity-50",
183
+
)}
184
+
onClick={() =>
185
+
handleStylingChange({
186
+
...props.styling,
187
+
verticalPosition: 1,
188
+
})
189
+
}
190
+
>
191
+
{t("settings.subtitles.low")}
192
+
</button>
193
+
</div>
194
+
</div>
148
195
<div className="flex justify-between items-center">
149
196
<Menu.FieldTitle>
150
197
{t("settings.subtitles.textBoldLabel")}
+12
src/stores/subtitles/index.ts
+12
src/stores/subtitles/index.ts
···
28
28
* bold, boolean
29
29
*/
30
30
bold: boolean;
31
+
32
+
/**
33
+
* vertical position percentage, ranges between 1 and 3 (rem)
34
+
*/
35
+
verticalPosition: number;
31
36
}
32
37
33
38
export interface SubtitleStore {
···
70
75
size: 1,
71
76
backgroundBlur: 0.5,
72
77
bold: false,
78
+
verticalPosition: 3,
73
79
},
74
80
showDelayIndicator: false,
75
81
resetSubtitleSpecificSettings() {
···
95
101
if (newStyling.size !== undefined)
96
102
s.styling.size = Math.min(10, Math.max(0.01, newStyling.size));
97
103
if (newStyling.bold !== undefined) s.styling.bold = newStyling.bold;
104
+
if (newStyling.verticalPosition !== undefined)
105
+
s.styling.verticalPosition = Math.min(
106
+
100,
107
+
Math.max(0, newStyling.verticalPosition),
108
+
);
98
109
});
99
110
},
100
111
resetStyling() {
···
105
116
size: 1,
106
117
backgroundBlur: 0.5,
107
118
bold: false,
119
+
verticalPosition: 3,
108
120
};
109
121
});
110
122
},