pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
workaround for disabling caption blur to fix flicker issues
+85
-25
+3
-1
src/assets/locales/en.json
+3
-1
src/assets/locales/en.json
···
1150
1150
},
1151
1151
"subtitles": {
1152
1152
"backgroundLabel": "Background opacity",
1153
-
"backgroundBlurLabel": "Background blur",
1153
+
"backgroundBlurEnabledLabel": "Background blur",
1154
+
"backgroundBlurEnabledDescription": "Disabling caption background blur may fix some flickering issues",
1155
+
"backgroundBlurLabel": "Background blur intensity",
1154
1156
"colorLabel": "Color",
1155
1157
"previewQuote": "Convinced life is meaningless, I lack the courage of my conviction.",
1156
1158
"textSizeLabel": "Text size",
+31
-10
src/components/player/atoms/settings/CaptionSettingsView.tsx
+31
-10
src/components/player/atoms/settings/CaptionSettingsView.tsx
···
493
493
value={styling.backgroundOpacity * 100}
494
494
textTransformer={(s) => `${s}%`}
495
495
/>
496
-
<CaptionSetting
497
-
label={t("settings.subtitles.backgroundBlurLabel")}
498
-
max={100}
499
-
min={0}
500
-
onChange={(v) =>
501
-
handleStylingChange({ ...styling, backgroundBlur: v / 100 })
502
-
}
503
-
value={styling.backgroundBlur * 100}
504
-
textTransformer={(s) => `${s}%`}
505
-
/>
496
+
<div className="flex justify-between items-center">
497
+
<Menu.FieldTitle>
498
+
{t("settings.subtitles.backgroundBlurEnabledLabel")}
499
+
</Menu.FieldTitle>
500
+
<div className="flex justify-center items-center">
501
+
<Toggle
502
+
enabled={styling.backgroundBlurEnabled}
503
+
onClick={() =>
504
+
handleStylingChange({
505
+
...styling,
506
+
backgroundBlurEnabled: !styling.backgroundBlurEnabled,
507
+
})
508
+
}
509
+
/>
510
+
</div>
511
+
</div>
512
+
<span className="text-xs text-type-secondary">
513
+
{t("settings.subtitles.backgroundBlurEnabledDescription")}
514
+
</span>
515
+
{styling.backgroundBlurEnabled && (
516
+
<CaptionSetting
517
+
label={t("settings.subtitles.backgroundBlurLabel")}
518
+
max={100}
519
+
min={0}
520
+
onChange={(v) =>
521
+
handleStylingChange({ ...styling, backgroundBlur: v / 100 })
522
+
}
523
+
value={styling.backgroundBlur * 100}
524
+
textTransformer={(s) => `${s}%`}
525
+
/>
526
+
)}
506
527
<CaptionSetting
507
528
label={t("settings.subtitles.textSizeLabel")}
508
529
max={200}
+1
-1
src/components/player/base/SubtitleView.tsx
+1
-1
src/components/player/base/SubtitleView.tsx
···
95
95
fontSize: `${(1.5 * styling.size).toFixed(2)}em`,
96
96
backgroundColor: `rgba(0,0,0,${styling.backgroundOpacity.toFixed(2)})`,
97
97
backdropFilter:
98
-
styling.backgroundBlur !== 0
98
+
styling.backgroundBlurEnabled && styling.backgroundBlur !== 0
99
99
? `blur(${Math.floor(styling.backgroundBlur * 64)}px)`
100
100
: "none",
101
101
fontWeight: styling.bold ? "bold" : "normal",
+37
-13
src/pages/parts/settings/CaptionsPart.tsx
+37
-13
src/pages/parts/settings/CaptionsPart.tsx
···
19
19
import { usePlayerStore } from "@/stores/player/store";
20
20
import { usePreferencesStore } from "@/stores/preferences";
21
21
import { SubtitleStyling, useSubtitleStore } from "@/stores/subtitles";
22
+
import { isFirefox } from "@/utils/detectFeatures";
22
23
23
24
export function CaptionPreview(props: {
24
25
fullscreen?: boolean;
···
113
114
backgroundOpacity: 0.5,
114
115
size: 1,
115
116
backgroundBlur: 0.5,
117
+
backgroundBlurEnabled: !isFirefox,
116
118
bold: false,
117
119
verticalPosition: 3,
118
120
fontStyle: "default",
···
158
160
value={props.styling.backgroundOpacity * 100}
159
161
textTransformer={(s) => `${s}%`}
160
162
/>
161
-
<CaptionSetting
162
-
label={t("settings.subtitles.backgroundBlurLabel")}
163
-
max={100}
164
-
min={0}
165
-
onChange={(v) =>
166
-
handleStylingChange({
167
-
...props.styling,
168
-
backgroundBlur: v / 100,
169
-
})
170
-
}
171
-
value={props.styling.backgroundBlur * 100}
172
-
textTransformer={(s) => `${s}%`}
173
-
/>
163
+
<div className="flex justify-between items-center">
164
+
<Menu.FieldTitle>
165
+
{t("settings.subtitles.backgroundBlurEnabledLabel")}
166
+
</Menu.FieldTitle>
167
+
<div className="flex justify-center items-center">
168
+
<Toggle
169
+
enabled={props.styling.backgroundBlurEnabled}
170
+
onClick={() =>
171
+
handleStylingChange({
172
+
...props.styling,
173
+
backgroundBlurEnabled:
174
+
!props.styling.backgroundBlurEnabled,
175
+
})
176
+
}
177
+
/>
178
+
</div>
179
+
</div>
180
+
<span className="text-xs text-type-secondary">
181
+
{t("settings.subtitles.backgroundBlurEnabledDescription")}
182
+
</span>
183
+
{props.styling.backgroundBlurEnabled && (
184
+
<CaptionSetting
185
+
label={t("settings.subtitles.backgroundBlurLabel")}
186
+
max={100}
187
+
min={0}
188
+
onChange={(v) =>
189
+
handleStylingChange({
190
+
...props.styling,
191
+
backgroundBlur: v / 100,
192
+
})
193
+
}
194
+
value={props.styling.backgroundBlur * 100}
195
+
textTransformer={(s) => `${s}%`}
196
+
/>
197
+
)}
174
198
<CaptionSetting
175
199
label={t("settings.subtitles.textSizeLabel")}
176
200
max={200}
+11
src/stores/subtitles/index.ts
+11
src/stores/subtitles/index.ts
···
3
3
import { persist } from "zustand/middleware";
4
4
import { immer } from "zustand/middleware/immer";
5
5
6
+
import { isFirefox } from "@/utils/detectFeatures";
7
+
6
8
export interface SubtitleStyling {
7
9
/**
8
10
* Text color of subtitles, hex string
···
25
27
backgroundBlur: number;
26
28
27
29
/**
30
+
* whether background blur is enabled (disabled by default on Firefox due to flickering issues)
31
+
*/
32
+
backgroundBlurEnabled: boolean;
33
+
34
+
/**
28
35
* bold, boolean
29
36
*/
30
37
bold: boolean;
···
85
92
backgroundOpacity: 0.5,
86
93
size: 1,
87
94
backgroundBlur: 0.5,
95
+
backgroundBlurEnabled: !isFirefox,
88
96
bold: false,
89
97
verticalPosition: 3,
90
98
fontStyle: "default",
···
109
117
1,
110
118
Math.max(0, newStyling.backgroundBlur),
111
119
);
120
+
if (newStyling.backgroundBlurEnabled !== undefined)
121
+
s.styling.backgroundBlurEnabled = newStyling.backgroundBlurEnabled;
112
122
if (newStyling.color !== undefined)
113
123
s.styling.color = newStyling.color.toLowerCase();
114
124
if (newStyling.size !== undefined)
···
135
145
backgroundOpacity: 0.5,
136
146
size: 1,
137
147
backgroundBlur: 0.5,
148
+
backgroundBlurEnabled: !isFirefox,
138
149
bold: false,
139
150
verticalPosition: 3,
140
151
fontStyle: "default",