pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
add border caption style with thickness slider
+68
-10
+3
-2
src/assets/locales/en.json
+3
-2
src/assets/locales/en.json
···
1132
1132
"default": "Default",
1133
1133
"raised": "Raised",
1134
1134
"depressed": "Depressed",
1135
-
"uniform": "Uniform",
1135
+
"Border": "Border",
1136
1136
"dropShadow": "Drop Shadow"
1137
-
}
1137
+
},
1138
+
"BorderThicknessLabel": "Border Thickness"
1138
1139
},
1139
1140
"unsaved": "You have unsaved changes... ฅ^•ﻌ•^ฅ"
1140
1141
},
+16
-2
src/components/player/atoms/settings/CaptionSettingsView.tsx
+16
-2
src/components/player/atoms/settings/CaptionSettingsView.tsx
···
428
428
backgroundBlur: 0.5,
429
429
bold: false,
430
430
fontStyle: "default",
431
+
borderThickness: 1,
431
432
});
432
433
};
433
434
···
531
532
name: t("settings.subtitles.textStyle.depressed"),
532
533
},
533
534
{
534
-
id: "uniform",
535
-
name: t("settings.subtitles.textStyle.uniform"),
535
+
id: "Border",
536
+
name: t("settings.subtitles.textStyle.Border"),
536
537
},
537
538
{
538
539
id: "dropShadow",
···
553
554
}
554
555
/>
555
556
</div>
557
+
{styling.fontStyle === "Border" && (
558
+
<CaptionSetting
559
+
label={t("settings.subtitles.BorderThicknessLabel")}
560
+
max={10}
561
+
min={0}
562
+
onChange={(v) =>
563
+
handleStylingChange({ ...styling, borderThickness: v })
564
+
}
565
+
value={styling.borderThickness}
566
+
textTransformer={(s) => `${s}px`}
567
+
decimalsAllowed={1}
568
+
/>
569
+
)}
556
570
<div className="flex justify-between items-center">
557
571
<Menu.FieldTitle>
558
572
{t("settings.subtitles.textBoldLabel")}
+17
-3
src/components/player/base/SubtitleView.tsx
+17
-3
src/components/player/base/SubtitleView.tsx
···
58
58
textShadow:
59
59
"0 -2px 0 rgba(0,0,0,0.8), 0 -1.5px 1.5px rgba(0,0,0,0.9)",
60
60
};
61
-
case "uniform":
61
+
case "Border": {
62
+
const thickness = Math.max(
63
+
0.5,
64
+
Math.min(5, styling.borderThickness || 1),
65
+
);
66
+
const shadowColor = "rgba(0,0,0,0.8)";
62
67
return {
63
-
textShadow:
64
-
"1.5px 1.5px 1.5px rgba(0,0,0,0.8), -1.5px -1.5px 1.5px rgba(0,0,0,0.8), 1.5px -1.5px 1.5px rgba(0,0,0,0.8), -1.5px 1.5px 1.5px rgba(0,0,0,0.8)",
68
+
textShadow: [
69
+
`${thickness}px ${thickness}px 0 ${shadowColor}`,
70
+
`-${thickness}px ${thickness}px 0 ${shadowColor}`,
71
+
`${thickness}px -${thickness}px 0 ${shadowColor}`,
72
+
`-${thickness}px -${thickness}px 0 ${shadowColor}`,
73
+
`${thickness}px 0 0 ${shadowColor}`,
74
+
`-${thickness}px 0 0 ${shadowColor}`,
75
+
`0 ${thickness}px 0 ${shadowColor}`,
76
+
`0 -${thickness}px 0 ${shadowColor}`,
77
+
].join(", "),
65
78
};
79
+
}
66
80
case "dropShadow":
67
81
return { textShadow: "2.5px 2.5px 4.5px rgba(0,0,0,0.9)" };
68
82
case "default":
+19
-2
src/pages/parts/settings/CaptionsPart.tsx
+19
-2
src/pages/parts/settings/CaptionsPart.tsx
···
116
116
bold: false,
117
117
verticalPosition: 3,
118
118
fontStyle: "default",
119
+
borderThickness: 1,
119
120
});
120
121
};
121
122
···
203
204
name: t("settings.subtitles.textStyle.depressed"),
204
205
},
205
206
{
206
-
id: "uniform",
207
-
name: t("settings.subtitles.textStyle.uniform"),
207
+
id: "Border",
208
+
name: t("settings.subtitles.textStyle.Border"),
208
209
},
209
210
{
210
211
id: "dropShadow",
···
227
228
/>
228
229
</div>
229
230
</div>
231
+
{props.styling.fontStyle === "Border" && (
232
+
<CaptionSetting
233
+
label={t("settings.subtitles.BorderThicknessLabel")}
234
+
max={10}
235
+
min={0}
236
+
onChange={(v) =>
237
+
handleStylingChange({
238
+
...props.styling,
239
+
borderThickness: v,
240
+
})
241
+
}
242
+
value={props.styling.borderThickness}
243
+
textTransformer={(s) => `${s}px`}
244
+
decimalsAllowed={1}
245
+
/>
246
+
)}
230
247
<div className="flex justify-between items-center">
231
248
<Menu.FieldTitle>
232
249
{t("settings.subtitles.textBoldLabel")}
+13
-1
src/stores/subtitles/index.ts
+13
-1
src/stores/subtitles/index.ts
···
36
36
37
37
/**
38
38
* font style for text rendering
39
-
* "default" | "raised" | "depressed" | "uniform" | "dropShadow"
39
+
* "default" | "raised" | "depressed" | "Border" | "dropShadow"
40
40
*/
41
41
fontStyle: string;
42
+
43
+
/**
44
+
* border thickness for Border font style, ranges between 0 and 10
45
+
*/
46
+
borderThickness: number;
42
47
}
43
48
44
49
export interface SubtitleStore {
···
83
88
bold: false,
84
89
verticalPosition: 3,
85
90
fontStyle: "default",
91
+
borderThickness: 1,
86
92
},
87
93
showDelayIndicator: false,
88
94
resetSubtitleSpecificSettings() {
···
115
121
);
116
122
if (newStyling.fontStyle !== undefined)
117
123
s.styling.fontStyle = newStyling.fontStyle;
124
+
if (newStyling.borderThickness !== undefined)
125
+
s.styling.borderThickness = Math.min(
126
+
10,
127
+
Math.max(0, newStyling.borderThickness),
128
+
);
118
129
});
119
130
},
120
131
resetStyling() {
···
127
138
bold: false,
128
139
verticalPosition: 3,
129
140
fontStyle: "default",
141
+
borderThickness: 1,
130
142
};
131
143
});
132
144
},