Detail Stream tweaks (#20553)

* show audio events in detail stream

* refactor object lifecycle to look similar to detail stream

* pass detail stream as prop to avoid context error

* fix highlighting timing

* add view in explore to menu

web/src/components/player/dynamic/DynamicVideoPlayer.tsx

@@ -7,6 +7,7 @@ import { Preview } from "@/types/preview";
 import PreviewPlayer, { PreviewController } from "../PreviewPlayer";
 import { DynamicVideoController } from "./DynamicVideoController";
 import HlsVideoPlayer, { HlsSource } from "../HlsVideoPlayer";
+import { useDetailStream } from "@/context/detail-stream-context";
 import { TimeRange } from "@/types/timeline";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { VideoResolutionType } from "@/types/live";
@@ -59,6 +60,9 @@ export default function DynamicVideoPlayer({
   const apiHost = useApiHost();
   const { data: config } = useSWR<FrigateConfig>("config");
 
+  // for detail stream context in History
+  const detail = useDetailStream();
+
   // controlling playback
 
   const playerRef = useRef<HTMLVideoElement | null>(null);
@@ -291,6 +295,7 @@ export default function DynamicVideoPlayer({
             setIsBuffering(true);
           }
         }}
+        detail={detail}
       />
       <PreviewPlayer
         className={cn(