chris/frigate
1
0
Fork 0
forked from Github/frigate
Code Pull Requests Packages Activity

Make all corners less rounded on mobile (#11068)

Browse Source 
* make corners less rounded on mobile

* fix live dashboard classes
This commit is contained in:
Josh Hawkins
2024-04-22 10:12:45 -05:00
committed by GitHub
parent ba3930ab02
commit d6e93d039d
19 changed files with 67 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -95,7 +95,7 @@ export default function LivePlayer({
if (liveMode == "webrtc") {
player = (
<WebRtcPlayer
className={`rounded-2xl size-full ${liveReady ? "" : "hidden"}`}
className={`rounded-lg md:rounded-2xl size-full ${liveReady ? "" : "hidden"}`}
camera={cameraConfig.live.stream_name}
playbackEnabled={cameraActive}
audioEnabled={playAudio}
@@ -109,7 +109,7 @@ export default function LivePlayer({
if ("MediaSource" in window || "ManagedMediaSource" in window) {
player = (
<MSEPlayer
className={`rounded-2xl size-full ${liveReady ? "" : "hidden"}`}
className={`rounded-lg md:rounded-2xl size-full ${liveReady ? "" : "hidden"}`}
camera={cameraConfig.name}
playbackEnabled={cameraActive}
audioEnabled={playAudio}
@@ -128,7 +128,7 @@ export default function LivePlayer({
} else if (liveMode == "jsmpeg") {
player = (
<JSMpegPlayer
className="size-full flex justify-center rounded-2xl overflow-hidden"
className="size-full flex justify-center rounded-lg md:rounded-2xl overflow-hidden"
camera={cameraConfig.name}
width={cameraConfig.detect.width}
height={cameraConfig.detect.height}
@@ -144,13 +144,13 @@ export default function LivePlayer({
data-camera={cameraConfig.name}
className={`relative flex justify-center ${liveMode == "jsmpeg" ? "size-full" : "w-full"} outline cursor-pointer ${
activeTracking
? "outline-severity_alert outline-3 rounded-2xl shadow-severity_alert"
? "outline-severity_alert outline-3 rounded-lg md:rounded-2xl shadow-severity_alert"
: "outline-0 outline-background"
} transition-all duration-500 ${className}`}
onClick={onClick}
>
<div className="absolute top-0 inset-x-0 rounded-2xl z-10 w-full h-[30%] bg-gradient-to-b from-black/20 to-transparent pointer-events-none"></div>
<div className="absolute bottom-0 inset-x-0 rounded-2xl z-10 w-full h-[10%] bg-gradient-to-t from-black/20 to-transparent pointer-events-none"></div>
<div className="absolute top-0 inset-x-0 rounded-lg md:rounded-2xl z-10 w-full h-[30%] bg-gradient-to-b from-black/20 to-transparent pointer-events-none"></div>
<div className="absolute bottom-0 inset-x-0 rounded-lg md:rounded-2xl z-10 w-full h-[10%] bg-gradient-to-t from-black/20 to-transparent pointer-events-none"></div>
{player}
<div