Update Web deps (#10544)

* Bump react-icons from 4.12.0 to 5.0.1 in /web

Bumps [react-icons](https://github.com/react-icons/react-icons) from 4.12.0 to 5.0.1.
- [Release notes](https://github.com/react-icons/react-icons/releases)
- [Commits](https://github.com/react-icons/react-icons/compare/v4.12.0...v5.0.1)

---
updated-dependencies:
- dependency-name: react-icons
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

* Update jsdom

* Update drawer component

* Bump eslint

* Update more deps

* Fix lint

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

web/src/components/image/EventThumbnail.tsx

@@ -1,44 +0,0 @@
-import { baseUrl } from "@/api/baseUrl";
-import { Event as FrigateEvent } from "@/types/event";
-import { LuStar } from "react-icons/lu";
-import TimeAgo from "../dynamic/TimeAgo";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
-
-type EventThumbnailProps = {
-  event: FrigateEvent;
-  onFavorite?: (e: Event, event: FrigateEvent) => void;
-};
-export function EventThumbnail({ event, onFavorite }: EventThumbnailProps) {
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <div
-          className="relative rounded bg-cover aspect-square h-24 bg-no-repeat bg-center mr-4"
-          style={{
-            backgroundImage: `url(${baseUrl}api/events/${event.id}/thumbnail.jpg)`,
-          }}
-        >
-          <LuStar
-            className="absolute h-6 w-6 text-yellow-300 top-1 right-1 cursor-pointer"
-            onClick={(e: Event) => (onFavorite ? onFavorite(e, event) : null)}
-            fill={event.retain_indefinitely ? "currentColor" : "none"}
-          />
-          <div className="absolute bottom-0 w-full h-6 bg-gradient-to-t from-slate-900/50 to-transparent">
-            <div className="absolute left-1 bottom-0 text-xs text-white w-full">
-              <TimeAgo time={event.start_time * 1000} dense />
-            </div>
-          </div>
-        </div>
-      </TooltipTrigger>
-      <TooltipContent>
-        {`${event.label} ${
-          event.sub_label ? `(${event.sub_label})` : ""
-        } detected with score of ${(event.data.score * 100).toFixed(0)}% ${
-          event.data.sub_label_score
-            ? `(${event.data.sub_label_score * 100}%)`
-            : ""
-        }`}
-      </TooltipContent>
-    </Tooltip>
-  );
-}

web/src/components/player/HlsVideoPlayer.tsx

@@ -255,7 +255,7 @@ function VideoControls({
   }, []);
 
   const onReplay = useCallback(
-    (e: React.MouseEvent<HTMLDivElement>) => {
+    (e: React.MouseEvent<SVGElement>) => {
       e.stopPropagation();
 
       const currentTime = video?.currentTime;
@@ -270,7 +270,7 @@ function VideoControls({
   );
 
   const onSkip = useCallback(
-    (e: React.MouseEvent<HTMLDivElement>) => {
+    (e: React.MouseEvent<SVGElement>) => {
       e.stopPropagation();
 
       const currentTime = video?.currentTime;