UI tweaks (#10946)

* fix warning

* Improve event switching speed

* Fix icon colors

* Only show frigate+ page when frigate+ is enabled

* Add link from reecordings to live as well

web/src/views/events/EventView.tsx

@@ -295,6 +295,7 @@ export default function EventView({
             filter={filter}
             timeRange={timeRange}
             startTime={startTime}
+            loading={severity != severityToggle}
             markItemAsReviewed={markItemAsReviewed}
             markAllItemsAsReviewed={markAllItemsAsReviewed}
             onSelectReview={onSelectReview}
@@ -334,6 +335,7 @@ type DetectionReviewProps = {
   filter?: ReviewFilter;
   timeRange: { before: number; after: number };
   startTime?: number;
+  loading: boolean;
   markItemAsReviewed: (review: ReviewSegment) => void;
   markAllItemsAsReviewed: (currentItems: ReviewSegment[]) => void;
   onSelectReview: (review: ReviewSegment, ctrl: boolean) => void;
@@ -349,6 +351,7 @@ function DetectionReview({
   filter,
   timeRange,
   startTime,
+  loading,
   markItemAsReviewed,
   markAllItemsAsReviewed,
   onSelectReview,
@@ -600,33 +603,41 @@ function DetectionReview({
       </div>
       <div className="w-[65px] md:w-[110px] flex flex-row">
         <div className="w-[55px] md:w-[100px] overflow-y-auto no-scrollbar">
-          <EventReviewTimeline
-            segmentDuration={segmentDuration}
-            timestampSpread={15}
-            timelineStart={timeRange.before}
-            timelineEnd={timeRange.after}
-            showMinimap={showMinimap && !previewTime}
-            minimapStartTime={minimapBounds.start}
-            minimapEndTime={minimapBounds.end}
-            showHandlebar={previewTime != undefined}
-            handlebarTime={previewTime}
-            visibleTimestamps={visibleTimestamps}
-            events={reviewItems?.all ?? []}
-            severityType={severity}
-            contentRef={contentRef}
-            timelineRef={reviewTimelineRef}
-            dense={isMobile}
-          />
+          {loading ? (
+            <Skeleton className="size-full" />
+          ) : (
+            <EventReviewTimeline
+              segmentDuration={segmentDuration}
+              timestampSpread={15}
+              timelineStart={timeRange.before}
+              timelineEnd={timeRange.after}
+              showMinimap={showMinimap && !previewTime}
+              minimapStartTime={minimapBounds.start}
+              minimapEndTime={minimapBounds.end}
+              showHandlebar={previewTime != undefined}
+              handlebarTime={previewTime}
+              visibleTimestamps={visibleTimestamps}
+              events={reviewItems?.all ?? []}
+              severityType={severity}
+              contentRef={contentRef}
+              timelineRef={reviewTimelineRef}
+              dense={isMobile}
+            />
+          )}
         </div>
         <div className="w-[10px]">
-          <SummaryTimeline
-            reviewTimelineRef={reviewTimelineRef}
-            timelineStart={timeRange.before}
-            timelineEnd={timeRange.after}
-            segmentDuration={segmentDuration}
-            events={reviewItems?.all ?? []}
-            severityType={severity}
-          />
+          {loading ? (
+            <Skeleton className="w-full" />
+          ) : (
+            <SummaryTimeline
+              reviewTimelineRef={reviewTimelineRef}
+              timelineStart={timeRange.before}
+              timelineEnd={timeRange.after}
+              segmentDuration={segmentDuration}
+              events={reviewItems?.all ?? []}
+              severityType={severity}
+            />
+          )}
         </div>
       </div>
     </>

web/src/views/events/RecordingView.tsx

@@ -39,6 +39,7 @@ import MobileTimelineDrawer from "@/components/overlay/MobileTimelineDrawer";
 import MobileReviewSettingsDrawer from "@/components/overlay/MobileReviewSettingsDrawer";
 import Logo from "@/components/Logo";
 import { Skeleton } from "@/components/ui/skeleton";
+import { FaVideo } from "react-icons/fa";
 
 const SEGMENT_DURATION = 30;
 
@@ -251,14 +252,28 @@ export function RecordingView({
         {isMobile && (
           <Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" />
         )}
-        <Button
-          className="flex items-center gap-2 rounded-lg"
-          size="sm"
-          onClick={() => navigate(-1)}
+        <div
+          className={`flex items-center gap-2 ${isMobile ? "landscape:flex-col" : ""}`}
         >
-          <IoMdArrowRoundBack className="size-5" size="small" />
-          {isDesktop && <div className="text-primary">Back</div>}
-        </Button>
+          <Button
+            className={`flex items-center gap-2.5 rounded-lg`}
+            size="sm"
+            onClick={() => navigate(-1)}
+          >
+            <IoMdArrowRoundBack className="size-5 text-secondary-foreground" />
+            {isDesktop && <div className="text-primary">Back</div>}
+          </Button>
+          <Button
+            className="flex items-center gap-2.5 rounded-lg"
+            size="sm"
+            onClick={() => {
+              navigate(`/#${mainCamera}`);
+            }}
+          >
+            <FaVideo className="size-5 text-secondary-foreground" />
+            {isDesktop && <div className="text-primary">Live</div>}
+          </Button>
+        </div>
         <div className="flex items-center justify-end gap-2">
           <MobileCameraDrawer
             allCameras={allCameras}

web/src/views/live/LiveCameraView.tsx

@@ -228,7 +228,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
                 size="sm"
                 onClick={() => navigate(-1)}
               >
-                <IoMdArrowRoundBack className="size-5" />
+                <IoMdArrowRoundBack className="size-5 text-secondary-foreground" />
                 {isDesktop && <div className="text-primary">Back</div>}
               </Button>
               <Button
@@ -247,7 +247,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
                   });
                 }}
               >
-                <LuHistory className="size-5" />
+                <LuHistory className="size-5 text-secondary-foreground" />
                 {isDesktop && <div className="text-primary">History</div>}
               </Button>
             </div>