pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
remove top and bottom controls when caption bg blur is disabled to prevent hdr flicker
Updated TopControls and BottomControls to render the background gradient transitions only if backgroundBlurEnabled is true in the subtitle store. This ensures the UI matches the subtitle styling preferences.
+25
-13
+11
-5
src/components/player/base/BottomControls.tsx
+11
-5
src/components/player/base/BottomControls.tsx
···
2
2
3
3
import { Transition } from "@/components/utils/Transition";
4
4
import { usePlayerStore } from "@/stores/player/store";
5
+
import { useSubtitleStore } from "@/stores/subtitles";
5
6
6
7
export function BottomControls(props: {
7
8
show?: boolean;
···
9
10
}) {
10
11
const setHoveringAnyControls = usePlayerStore(
11
12
(s) => s.setHoveringAnyControls,
13
+
);
14
+
const backgroundBlurEnabled = useSubtitleStore(
15
+
(s) => s.styling.backgroundBlurEnabled,
12
16
);
13
17
14
18
useEffect(() => {
···
19
23
20
24
return (
21
25
<div className="w-full text-white">
22
-
<Transition
23
-
animation="fade"
24
-
show={props.show}
25
-
className="pointer-events-none flex justify-end pt-32 bg-gradient-to-t from-black to-transparent transition-opacity duration-200 absolute bottom-0 w-full"
26
-
/>
26
+
{backgroundBlurEnabled && (
27
+
<Transition
28
+
animation="fade"
29
+
show={props.show}
30
+
className="pointer-events-none flex justify-end pt-32 bg-gradient-to-t from-black to-transparent transition-opacity duration-200 absolute bottom-0 w-full"
31
+
/>
32
+
)}
27
33
<div
28
34
onMouseOver={() => setHoveringAnyControls(true)}
29
35
onMouseOut={() => setHoveringAnyControls(false)}
+14
-8
src/components/player/base/TopControls.tsx
+14
-8
src/components/player/base/TopControls.tsx
···
4
4
import { useBannerSize } from "@/stores/banner";
5
5
import { BannerLocation } from "@/stores/banner/BannerLocation";
6
6
import { usePlayerStore } from "@/stores/player/store";
7
+
import { useSubtitleStore } from "@/stores/subtitles";
7
8
8
9
export function TopControls(props: {
9
10
show?: boolean;
···
13
14
const setHoveringAnyControls = usePlayerStore(
14
15
(s) => s.setHoveringAnyControls,
15
16
);
17
+
const backgroundBlurEnabled = useSubtitleStore(
18
+
(s) => s.styling.backgroundBlurEnabled,
19
+
);
16
20
17
21
useEffect(() => {
18
22
return () => {
···
22
26
23
27
return (
24
28
<div className="w-full text-white">
25
-
<Transition
26
-
animation="fade"
27
-
show={props.show}
28
-
style={{
29
-
top: `${bannerSize}px`,
30
-
}}
31
-
className="pointer-events-none flex justify-end pb-32 bg-gradient-to-b from-black to-transparent [margin-bottom:env(safe-area-inset-bottom)] transition-opacity duration-200 absolute top-0 w-full"
32
-
/>
29
+
{backgroundBlurEnabled && (
30
+
<Transition
31
+
animation="fade"
32
+
show={props.show}
33
+
style={{
34
+
top: `${bannerSize}px`,
35
+
}}
36
+
className="pointer-events-none flex justify-end pb-32 bg-gradient-to-b from-black to-transparent [margin-bottom:env(safe-area-inset-bottom)] transition-opacity duration-200 absolute top-0 w-full"
37
+
/>
38
+
)}
33
39
<div className="relative z-10">
34
40
<BannerLocation location="player" />
35
41
</div>