Creepso/p-stream
1
0
Fork 0
mirror of https://github.com/p-stream/p-stream.git synced 2026-04-21 04:42:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

remove top and bottom controls when caption bg blur is disabled to prevent hdr flicker

Browse source 
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.
This commit is contained in:
Pas 2025-11-09 12:47:47 -07:00
parent ebfa034cb2
commit 0c08052b8f
2 changed files with 25 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/player/base/BottomControls.tsx
View file

@ -2,6 +2,7 @@ import { useEffect } from "react";
import { Transition } from "@/components/utils/Transition"; import { Transition } from "@/components/utils/Transition";
import { usePlayerStore } from "@/stores/player/store"; import { usePlayerStore } from "@/stores/player/store";
import { useSubtitleStore } from "@/stores/subtitles";
export function BottomControls(props: { export function BottomControls(props: {
show?: boolean; show?: boolean;
@ -10,6 +11,9 @@ export function BottomControls(props: {
const setHoveringAnyControls = usePlayerStore( const setHoveringAnyControls = usePlayerStore(
(s) => s.setHoveringAnyControls, (s) => s.setHoveringAnyControls,
); );
const backgroundBlurEnabled = useSubtitleStore(
(s) => s.styling.backgroundBlurEnabled,
);
useEffect(() => { useEffect(() => {
return () => { return () => {
@ -19,11 +23,13 @@ export function BottomControls(props: {
return ( return (
<div className="w-full text-white"> <div className="w-full text-white">
<Transition {backgroundBlurEnabled && (
animation="fade" <Transition
show={props.show} animation="fade"
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" show={props.show}
/> 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"
/>
)}
<div <div
onMouseOver={() => setHoveringAnyControls(true)} onMouseOver={() => setHoveringAnyControls(true)}
onMouseOut={() => setHoveringAnyControls(false)} onMouseOut={() => setHoveringAnyControls(false)}

22
src/components/player/base/TopControls.tsx
View file

@ -4,6 +4,7 @@ import { Transition } from "@/components/utils/Transition";
import { useBannerSize } from "@/stores/banner"; import { useBannerSize } from "@/stores/banner";
import { BannerLocation } from "@/stores/banner/BannerLocation"; import { BannerLocation } from "@/stores/banner/BannerLocation";
import { usePlayerStore } from "@/stores/player/store"; import { usePlayerStore } from "@/stores/player/store";
import { useSubtitleStore } from "@/stores/subtitles";
export function TopControls(props: { export function TopControls(props: {
show?: boolean; show?: boolean;
@ -13,6 +14,9 @@ export function TopControls(props: {
const setHoveringAnyControls = usePlayerStore( const setHoveringAnyControls = usePlayerStore(
(s) => s.setHoveringAnyControls, (s) => s.setHoveringAnyControls,
); );
const backgroundBlurEnabled = useSubtitleStore(
(s) => s.styling.backgroundBlurEnabled,
);
useEffect(() => { useEffect(() => {
return () => { return () => {
@ -22,14 +26,16 @@ export function TopControls(props: {
return ( return (
<div className="w-full text-white"> <div className="w-full text-white">
<Transition {backgroundBlurEnabled && (
animation="fade" <Transition
show={props.show} animation="fade"
style={{ show={props.show}
top: `${bannerSize}px`, style={{
}} top: `${bannerSize}px`,
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" }}
/> 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"
/>
)}
<div className="relative z-10"> <div className="relative z-10">
<BannerLocation location="player" /> <BannerLocation location="player" />
</div> </div>