mobile switch

web/src/views/events/RecordingView.tsx

@@ -4,6 +4,13 @@ import DynamicVideoPlayer, {
 import EventReviewTimeline from "@/components/timeline/EventReviewTimeline";
 import MotionReviewTimeline from "@/components/timeline/MotionReviewTimeline";
 import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { Preview } from "@/types/preview";
 import { MotionData, ReviewSegment, ReviewSeverity } from "@/types/review";
 import { getChunkedTimeDay } from "@/utils/timelineUtil";
@@ -258,6 +265,7 @@ type MobileRecordingViewProps = {
   severity: ReviewSeverity;
   reviewItems: ReviewSegment[];
   relevantPreviews?: Preview[];
+  allCameras: string[];
 };
 export function MobileRecordingView({
   startCamera,
@@ -265,6 +273,7 @@ export function MobileRecordingView({
   severity,
   reviewItems,
   relevantPreviews,
+  allCameras,
 }: MobileRecordingViewProps) {
   const navigate = useNavigate();
   const contentRef = useRef<HTMLDivElement | null>(null);
@@ -273,6 +282,8 @@ export function MobileRecordingView({
 
   const [playerReady, setPlayerReady] = useState(false);
   const controllerRef = useRef<DynamicVideoController | undefined>(undefined);
+  const [playbackCamera, setPlaybackCamera] = useState(startCamera);
+  const [playbackStart, setPlaybackStart] = useState(startTime);
 
   // timeline time
 
@@ -355,16 +366,39 @@ export function MobileRecordingView({
 
   return (
     <div ref={contentRef} className="flex flex-col relative w-full h-full">
-      <Button className="rounded-lg" onClick={() => navigate(-1)}>
+      <div className="flex justify-evenly items-center">
-        <IoMdArrowRoundBack className="size-5 mr-[10px]" />
+        <Button className="rounded-lg" onClick={() => navigate(-1)}>
-        Back
+          <IoMdArrowRoundBack className="size-5 mr-[10px]" />
-      </Button>
+          Back
+        </Button>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button>{playbackCamera}</Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuRadioGroup
+              value={playbackCamera}
+              onValueChange={(cam) => {
+                setPlaybackStart(currentTime);
+                setPlaybackCamera(cam);
+              }}
+            >
+              {allCameras.map((cam) => (
+                <DropdownMenuRadioItem key={cam} value={cam}>
+                  {cam.replaceAll("_", " ")}
+                </DropdownMenuRadioItem>
+              ))}
+            </DropdownMenuRadioGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
 
       <div>
         <DynamicVideoPlayer
           camera={startCamera}
           timeRange={currentTimeRange}
           cameraPreviews={relevantPreviews || []}
+          startTime={playbackStart}
           onControllerReady={(controller) => {
             controllerRef.current = controller;
             setPlayerReady(true);

web/vite.config.ts

@@ -12,24 +12,24 @@ export default defineConfig({
   server: {
     proxy: {
       "/api": {
-        target: "http://localhost:5000",
+        target: "http://192.168.50.106:5000",
         ws: true,
       },
       "/vod": {
-        target: "http://localhost:5000",
+        target: "http://192.168.50.106:5000",
       },
       "/clips": {
-        target: "http://localhost:5000",
+        target: "http://192.168.50.106:5000",
       },
       "/exports": {
-        target: "http://localhost:5000",
+        target: "http://192.168.50.106:5000",
       },
       "/ws": {
-        target: "ws://localhost:5000",
+        target: "ws://192.168.50.106:5000",
         ws: true,
       },
       "/live": {
-        target: "ws://localhost:5000",
+        target: "ws://192.168.50.106:5000",
         changeOrigin: true,
         ws: true,
       },