Miscellaneous fixes (#23358)

* improve visibility of blurred icon buttons

* add motion search to history actions menu and mobile drawer

* i18n

* use pure css for motion search dialog video

* defer profile restoration until subscribers are connected

* change order of features in mobile review settings drawer

web/src/views/motion-search/MotionSearchDialog.tsx

@@ -112,35 +112,8 @@ export default function MotionSearchDialog({
 }: MotionSearchDialogProps) {
   const { t } = useTranslation(["views/motionSearch", "common"]);
   const apiHost = useApiHost();
-  const [containerNode, setContainerNode] = useState<HTMLDivElement | null>(
-    null,
-  );
-  const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
-  const containerWidth = containerSize.width;
-  const containerHeight = containerSize.height;
   const [imageLoaded, setImageLoaded] = useState(false);
 
-  useEffect(() => {
-    if (!containerNode) {
-      return;
-    }
-
-    const measure = () => {
-      const rect = containerNode.getBoundingClientRect();
-      setContainerSize((prev) =>
-        prev.width === rect.width && prev.height === rect.height
-          ? prev
-          : { width: rect.width, height: rect.height },
-      );
-    };
-
-    measure();
-
-    const observer = new ResizeObserver(() => measure());
-    observer.observe(containerNode);
-    return () => observer.disconnect();
-  }, [containerNode]);
-
   const cameraConfig = useMemo(() => {
     if (!selectedCamera) return undefined;
     return config.cameras[selectedCamera];
@@ -169,28 +142,6 @@ export default function MotionSearchDialog({
     setIsDrawingROI(true);
   }, [isSearching, polygonPoints.length, setIsDrawingROI, setPolygonPoints]);
 
-  const imageSize = useMemo(() => {
-    if (!containerWidth || !containerHeight || !cameraConfig) {
-      return { width: 0, height: 0 };
-    }
-
-    const cameraAspectRatio =
-      cameraConfig.detect.width / cameraConfig.detect.height;
-    const availableAspectRatio = containerWidth / containerHeight;
-
-    if (availableAspectRatio >= cameraAspectRatio) {
-      return {
-        width: containerHeight * cameraAspectRatio,
-        height: containerHeight,
-      };
-    }
-
-    return {
-      width: containerWidth,
-      height: containerWidth / cameraAspectRatio,
-    };
-  }, [containerWidth, containerHeight, cameraConfig]);
-
   useEffect(() => {
     setImageLoaded(false);
   }, [selectedCamera]);
@@ -280,19 +231,9 @@ export default function MotionSearchDialog({
                       height: "100%",
                     }}
                   >
-                    <div
-                      ref={setContainerNode}
-                      className="relative flex w-full items-center justify-center overflow-hidden rounded-lg border bg-secondary"
-                      style={{ aspectRatio: "16 / 9" }}
-                    >
+                    <div className="relative flex aspect-video w-full items-center justify-center overflow-hidden rounded-lg border bg-secondary">
                       {selectedCamera && cameraConfig ? (
-                        <div
-                          className="relative"
-                          style={{
-                            width: imageSize.width || "100%",
-                            height: imageSize.height || "100%",
-                          }}
-                        >
+                        <div className="relative h-full w-full">
                           <img
                             alt={t("dialog.previewAlt", {
                               camera: selectedCamera,

web/src/views/recording/RecordingView.tsx

@@ -95,6 +95,7 @@ type RecordingViewProps = {
   filter?: ReviewFilter;
   updateFilter: (newFilter: ReviewFilter) => void;
   refreshData?: () => void;
+  onMotionSearch?: (camera: string) => void;
 };
 export function RecordingView({
   startCamera,
@@ -107,6 +108,7 @@ export function RecordingView({
   filter,
   updateFilter,
   refreshData,
+  onMotionSearch,
 }: RecordingViewProps) {
   const { t } = useTranslation(["views/events", "components/dialog"]);
   const { data: config } = useSWR<FrigateConfig>("config");
@@ -725,6 +727,9 @@ export function RecordingView({
                   setCustomShareTimestamp(initialTimestamp);
                   setShareTimestampOpen(true);
                 }}
+                onMotionSearchClick={
+                  onMotionSearch ? () => onMotionSearch(mainCamera) : undefined
+                }
                 onDebugReplayClick={
                   isAdmin
                     ? () => {
@@ -807,6 +812,9 @@ export function RecordingView({
                 }
               }}
               onShareTimestamp={onShareReviewLink}
+              onMotionSearch={
+                onMotionSearch ? () => onMotionSearch(mainCamera) : undefined
+              }
               onUpdateFilter={updateFilter}
               setRange={setExportRange}
               setMode={setExportMode}