Make all corners less rounded on mobile (#11068)

* make corners less rounded on mobile

* fix live dashboard classes
This commit is contained in:
Josh Hawkins
2024-04-22 09:12:45 -06:00
committed by GitHub
parent ba3930ab02
commit d6e93d039d
19 changed files with 67 additions and 55 deletions
@@ -21,12 +21,18 @@ export default function BirdseyeLivePlayer({
let player;
if (liveMode == "webrtc") {
player = (
<WebRtcPlayer className={`rounded-2xl size-full`} camera="birdseye" />
<WebRtcPlayer
className={`rounded-lg md:rounded-2xl size-full`}
camera="birdseye"
/>
);
} else if (liveMode == "mse") {
if ("MediaSource" in window || "ManagedMediaSource" in window) {
player = (
<MSEPlayer className={`rounded-2xl size-full`} camera="birdseye" />
<MSEPlayer
className={`rounded-lg md:rounded-2xl size-full`}
camera="birdseye"
/>
);
} else {
player = (
@@ -39,7 +45,7 @@ export default function BirdseyeLivePlayer({
} 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="birdseye"
width={birdseyeConfig.width}
height={birdseyeConfig.height}
@@ -54,8 +60,8 @@ export default function BirdseyeLivePlayer({
className={`relative flex justify-center w-full cursor-pointer ${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>
<div className="size-full">{player}</div>
</div>
);