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

Revamp mobile UI (#10103)

Browse Source 
* Simplify nav components

* Allow ability to choose live layout on mobile

* Combine event views

* Undo vite

* Fix autoplay

* Remove import

* Show filters on mobile view

* Spacing

* Don't separate properties
This commit is contained in:
Nicolas Mowen
2024-02-27 14:39:05 -07:00
committed by GitHub
parent 622e9741c0
commit fd24007618
12 changed files with 230 additions and 485 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,6 +12,7 @@ import useCameraActivity from "@/hooks/use-camera-activity";
import { useRecordingsState } from "@/api/ws";
import { LivePlayerMode } from "@/types/live";
import useCameraLiveMode from "@/hooks/use-camera-live-mode";
import { isDesktop } from "react-device-detect";
type LivePlayerProps = {
className?: string;
@@ -153,7 +154,7 @@ export default function LivePlayer({
className={`bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500`}
>
<MdLeakAdd className="w-4 h-4 text-motion" />
<div className="ml-1 text-white text-xs">Motion</div>
<div className="hidden md:block ml-1 text-white text-xs">Motion</div>
</Chip>
{cameraConfig.audio.enabled_in_config && (
@@ -162,19 +163,21 @@ export default function LivePlayer({
className={`bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500`}
>
<BsSoundwave className="w-4 h-4 text-audio" />
<div className="ml-1 text-white text-xs">Sound</div>
<div className="hidden md:block ml-1 text-white text-xs">Sound</div>
</Chip>
)}
</div>
<Chip className="absolute right-2 top-2 bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500">
{recording == "ON" && (
<MdCircle className="w-2 h-2 drop-shadow-md shadow-danger text-danger" />
)}
<div className="ml-1 capitalize text-white text-xs">
{cameraConfig.name.replaceAll("_", " ")}
</div>
</Chip>
{isDesktop && (
<Chip className="absolute right-2 top-2 bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500">
{recording == "ON" && (
<MdCircle className="w-2 h-2 drop-shadow-md shadow-danger text-danger" />
)}
<div className="ml-1 capitalize text-white text-xs">
{cameraConfig.name.replaceAll("_", " ")}
</div>
</Chip>
)}
</div>
);
}