administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-08 20:25:26 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

add subtle overlay gradient

Browse Source
This commit is contained in:
Josh Hawkins 2024-02-12 09:02:04 -06:00
parent 9e503dce10
commit 1beb990f43
1 changed files with 12 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
web/src/components/player/LivePlayer.tsx
View File

@ -40,7 +40,10 @@ export default function LivePlayer({
const { activeMotion, activeAudio, activeTracking } = const { activeMotion, activeAudio, activeTracking } =
useCameraActivity(cameraConfig); useCameraActivity(cameraConfig);
const cameraActive = useMemo(() => activeMotion || activeTracking, [activeMotion, activeTracking]) const cameraActive = useMemo(
() => activeMotion || activeTracking,
[activeMotion, activeTracking]
);
const liveMode = useCameraLiveMode(cameraConfig, preferredLiveMode); const liveMode = useCameraLiveMode(cameraConfig, preferredLiveMode);
const [liveReady, setLiveReady] = useState(false); const [liveReady, setLiveReady] = useState(false);
@ -168,8 +171,10 @@ export default function LivePlayer({
: "outline-0" : "outline-0"
} transition-all duration-500 ${className}`} } transition-all duration-500 ${className}`}
> >
{(showStillWithoutActivity == false || cameraActive) && <div className="absolute top-0 left-0 right-0 z-10 w-full h-[30%] bg-gradient-to-b from-black/20 to-transparent pointer-events-none"></div>
player} <div className="absolute bottom-0 left-0 right-0 z-10 w-full h-[10%] bg-gradient-to-t from-black/20 to-transparent pointer-events-none"></div>
{(showStillWithoutActivity == false || cameraActive) && player}
<div <div
className={`absolute left-0 top-0 right-0 bottom-0 w-full ${ className={`absolute left-0 top-0 right-0 bottom-0 w-full ${
@ -180,14 +185,14 @@ export default function LivePlayer({
className="w-full h-full" className="w-full h-full"
camera={cameraConfig.name} camera={cameraConfig.name}
showFps={false} showFps={false}
reloadInterval={(cameraActive && !liveReady) ? 200 : 30000} reloadInterval={cameraActive && !liveReady ? 200 : 30000}
/> />
</div> </div>
<div className="absolute flex left-2 top-2 gap-2"> <div className="absolute flex left-2 top-2 gap-2">
<Chip <Chip
in={activeMotion} in={activeMotion}
className={`bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500/90`} className={`bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500`}
> >
<MdLeakAdd className="w-4 h-4 text-motion" /> <MdLeakAdd className="w-4 h-4 text-motion" />
<div className="ml-1 text-white text-xs">Motion</div> <div className="ml-1 text-white text-xs">Motion</div>
@ -196,7 +201,7 @@ export default function LivePlayer({
{cameraConfig.audio.enabled_in_config && ( {cameraConfig.audio.enabled_in_config && (
<Chip <Chip
in={activeAudio} in={activeAudio}
className={`bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500/90`} className={`bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500`}
> >
<BsSoundwave className="w-4 h-4 text-audio" /> <BsSoundwave className="w-4 h-4 text-audio" />
<div className="ml-1 text-white text-xs">Sound</div> <div className="ml-1 text-white text-xs">Sound</div>
@ -204,7 +209,7 @@ export default function LivePlayer({
)} )}
</div> </div>
<Chip className="absolute right-2 top-2 bg-gradient-to-br from-gray-300/50 to-gray-500/90"> <Chip className="absolute right-2 top-2 bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500">
{recording == "ON" && ( {recording == "ON" && (
<MdCircle className="w-2 h-2 drop-shadow-md shadow-danger text-danger" /> <MdCircle className="w-2 h-2 drop-shadow-md shadow-danger text-danger" />
)} )}