pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
Re-add caption delay
+30
-6
+1
-1
src/components/player/atoms/Settings.tsx
+1
-1
src/components/player/atoms/Settings.tsx
···
51
51
<CaptionsView id={id} />
52
52
</Menu.CardWithScrollable>
53
53
</OverlayPage>
54
-
<OverlayPage id={id} path="/captions/settings" width={343} height={360}>
54
+
<OverlayPage id={id} path="/captions/settings" width={343} height={430}>
55
55
<Menu.Card>
56
56
<CaptionSettingsView id={id} />
57
57
</Menu.Card>
+18
-3
src/components/player/atoms/settings/CaptionSettingsView.tsx
+18
-3
src/components/player/atoms/settings/CaptionSettingsView.tsx
···
40
40
max: number;
41
41
label: string;
42
42
min: number;
43
+
decimalsAllowed?: number;
43
44
}) {
44
45
const inputRef = useRef<HTMLInputElement | null>(null);
45
46
const ref = useRef<HTMLDivElement>(null);
···
131
132
onBlur={(e) => {
132
133
setIsFocused(false);
133
134
const num = Number((e.target as HTMLInputElement).value);
134
-
if (!Number.isNaN(num)) props.onChange?.(Math.round(num));
135
+
if (!Number.isNaN(num))
136
+
props.onChange?.(
137
+
(props.decimalsAllowed ?? 0) === 0 ? Math.round(num) : num
138
+
);
135
139
}}
136
140
ref={inputRef}
137
141
onChange={(e) =>
···
142
146
<button
143
147
className={inputClasses}
144
148
onClick={() => {
145
-
setInputValue(Math.floor(props.value).toString());
149
+
setInputValue(props.value.toFixed(props.decimalsAllowed ?? 0));
146
150
setIsFocused(true);
147
151
}}
148
152
type="button"
149
153
tabIndex={0}
150
154
>
151
-
{textTransformer(Math.floor(props.value).toString())}
155
+
{textTransformer(props.value.toFixed(props.decimalsAllowed ?? 0))}
152
156
</button>
153
157
)}
154
158
</div>
···
163
167
const router = useOverlayRouter(id);
164
168
const styling = useSubtitleStore((s) => s.styling);
165
169
const overrideCasing = useSubtitleStore((s) => s.overrideCasing);
170
+
const delay = useSubtitleStore((s) => s.delay);
166
171
const setOverrideCasing = useSubtitleStore((s) => s.setOverrideCasing);
172
+
const setDelay = useSubtitleStore((s) => s.setDelay);
167
173
const updateStyling = useSubtitleStore((s) => s.updateStyling);
168
174
169
175
return (
···
172
178
Custom captions
173
179
</Menu.BackLink>
174
180
<Menu.Section className="space-y-6">
181
+
<CaptionSetting
182
+
label="Caption delay"
183
+
max={10}
184
+
min={-10}
185
+
onChange={(v) => setDelay(v)}
186
+
value={delay}
187
+
textTransformer={(s) => `${s}s`}
188
+
decimalsAllowed={1}
189
+
/>
175
190
<CaptionSetting
176
191
label="Text size"
177
192
max={200}
+3
-2
src/components/player/base/SubtitleView.tsx
+3
-2
src/components/player/base/SubtitleView.tsx
···
70
70
const srtData = usePlayerStore((s) => s.caption.selected?.srtData);
71
71
const styling = useSubtitleStore((s) => s.styling);
72
72
const overrideCasing = useSubtitleStore((s) => s.overrideCasing);
73
+
const delay = useSubtitleStore((s) => s.delay);
73
74
74
75
const parsedCaptions = useMemo(
75
76
() => (srtData ? parseSubtitles(srtData) : []),
···
79
80
const visibileCaptions = useMemo(
80
81
() =>
81
82
parsedCaptions.filter(({ start, end }) =>
82
-
captionIsVisible(start, end, 0, videoTime)
83
+
captionIsVisible(start, end, delay, videoTime)
83
84
),
84
-
[parsedCaptions, videoTime]
85
+
[parsedCaptions, videoTime, delay]
85
86
);
86
87
87
88
return (
+8
src/stores/subtitles/index.ts
+8
src/stores/subtitles/index.ts
···
24
24
lastSelectedLanguage: string | null;
25
25
styling: SubtitleStyling;
26
26
overrideCasing: boolean;
27
+
delay: number;
27
28
updateStyling(newStyling: Partial<SubtitleStyling>): void;
28
29
setLanguage(language: string | null): void;
29
30
setOverrideCasing(enabled: boolean): void;
31
+
setDelay(delay: number): void;
30
32
}
31
33
32
34
// TODO add migration from previous stored settings
···
36
38
enabled: false,
37
39
lastSelectedLanguage: null,
38
40
overrideCasing: false,
41
+
delay: 0,
39
42
styling: {
40
43
color: "#ffffff",
41
44
backgroundOpacity: 0.5,
···
60
63
setOverrideCasing(enabled) {
61
64
set((s) => {
62
65
s.overrideCasing = enabled;
66
+
});
67
+
},
68
+
setDelay(delay) {
69
+
set((s) => {
70
+
s.delay = delay;
63
71
});
64
72
},
65
73
})),