mirror of
				https://github.com/blakeblackshear/frigate.git
				synced 2025-10-27 10:52:11 +01:00 
			
		
		
		
	UI tweaks (#11795)
* Prevent "undefined" from being displayed in searchParams string * Show message for no motion data * Use theme colors for no preview found divs
This commit is contained in:
		
							parent
							
								
									4313fd97aa
								
							
						
					
					
						commit
						9f181014a1
					
				@ -69,7 +69,7 @@ export default function AutoUpdatingCameraImage({
 | 
				
			|||||||
      <CameraImage
 | 
					      <CameraImage
 | 
				
			||||||
        camera={camera}
 | 
					        camera={camera}
 | 
				
			||||||
        onload={handleLoad}
 | 
					        onload={handleLoad}
 | 
				
			||||||
        searchParams={`cache=${key}${searchParams && `&${searchParams}`}`}
 | 
					        searchParams={`cache=${key}${searchParams ? `&${searchParams}` : ""}`}
 | 
				
			||||||
        className={cameraClasses}
 | 
					        className={cameraClasses}
 | 
				
			||||||
      />
 | 
					      />
 | 
				
			||||||
      {showFps ? <span className="text-xs">Displaying at {fps}fps</span> : null}
 | 
					      {showFps ? <span className="text-xs">Displaying at {fps}fps</span> : null}
 | 
				
			||||||
 | 
				
			|||||||
@ -84,7 +84,7 @@ export default function PreviewPlayer({
 | 
				
			|||||||
  return (
 | 
					  return (
 | 
				
			||||||
    <div
 | 
					    <div
 | 
				
			||||||
      className={cn(
 | 
					      className={cn(
 | 
				
			||||||
        "flex size-full items-center justify-center rounded-lg text-white md:rounded-2xl",
 | 
					        "flex size-full items-center justify-center rounded-lg bg-background_alt text-primary md:rounded-2xl",
 | 
				
			||||||
        className,
 | 
					        className,
 | 
				
			||||||
      )}
 | 
					      )}
 | 
				
			||||||
    >
 | 
					    >
 | 
				
			||||||
@ -322,7 +322,7 @@ function PreviewVideoPlayer({
 | 
				
			|||||||
        )}
 | 
					        )}
 | 
				
			||||||
      </video>
 | 
					      </video>
 | 
				
			||||||
      {cameraPreviews && !currentPreview && (
 | 
					      {cameraPreviews && !currentPreview && (
 | 
				
			||||||
        <div className="absolute inset-0 flex items-center justify-center rounded-lg text-white md:rounded-2xl">
 | 
					        <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-background_alt text-primary md:rounded-2xl">
 | 
				
			||||||
          No Preview Found
 | 
					          No Preview Found
 | 
				
			||||||
        </div>
 | 
					        </div>
 | 
				
			||||||
      )}
 | 
					      )}
 | 
				
			||||||
@ -535,7 +535,7 @@ function PreviewFramesPlayer({
 | 
				
			|||||||
        onLoad={onImageLoaded}
 | 
					        onLoad={onImageLoaded}
 | 
				
			||||||
      />
 | 
					      />
 | 
				
			||||||
      {previewFrames?.length === 0 && (
 | 
					      {previewFrames?.length === 0 && (
 | 
				
			||||||
        <div className="-y-translate-1/2 align-center absolute inset-x-0 top-1/2 rounded-lg bg-black text-center text-white md:rounded-2xl">
 | 
					        <div className="-y-translate-1/2 align-center absolute inset-x-0 top-1/2 rounded-lg bg-background_alt text-center text-primary md:rounded-2xl">
 | 
				
			||||||
          No Preview Found
 | 
					          No Preview Found
 | 
				
			||||||
        </div>
 | 
					        </div>
 | 
				
			||||||
      )}
 | 
					      )}
 | 
				
			||||||
 | 
				
			|||||||
@ -30,7 +30,7 @@ import {
 | 
				
			|||||||
  useState,
 | 
					  useState,
 | 
				
			||||||
} from "react";
 | 
					} from "react";
 | 
				
			||||||
import { isDesktop, isMobile } from "react-device-detect";
 | 
					import { isDesktop, isMobile } from "react-device-detect";
 | 
				
			||||||
import { LuFolderCheck } from "react-icons/lu";
 | 
					import { LuFolderCheck, LuFolderX } from "react-icons/lu";
 | 
				
			||||||
import { MdCircle } from "react-icons/md";
 | 
					import { MdCircle } from "react-icons/md";
 | 
				
			||||||
import useSWR from "swr";
 | 
					import useSWR from "swr";
 | 
				
			||||||
import MotionReviewTimeline from "@/components/timeline/MotionReviewTimeline";
 | 
					import MotionReviewTimeline from "@/components/timeline/MotionReviewTimeline";
 | 
				
			||||||
@ -858,6 +858,15 @@ function MotionReview({
 | 
				
			|||||||
    ],
 | 
					    ],
 | 
				
			||||||
  );
 | 
					  );
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  if (motionData?.length === 0) {
 | 
				
			||||||
 | 
					    return (
 | 
				
			||||||
 | 
					      <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center text-center">
 | 
				
			||||||
 | 
					        <LuFolderX className="size-16" />
 | 
				
			||||||
 | 
					        No motion data found
 | 
				
			||||||
 | 
					      </div>
 | 
				
			||||||
 | 
					    );
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  if (!relevantPreviews) {
 | 
					  if (!relevantPreviews) {
 | 
				
			||||||
    return <ActivityIndicator />;
 | 
					    return <ActivityIndicator />;
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
		Reference in New Issue
	
	Block a user