diff --git a/SearchFrontend/search_ui/src/App.css b/SearchFrontend/search_ui/src/App.css index 8dc17ae..573067d 100644 --- a/SearchFrontend/search_ui/src/App.css +++ b/SearchFrontend/search_ui/src/App.css @@ -26,12 +26,15 @@ /* Main app container */ .app-container { + display: flex; + flex-direction: column; height: 100vh; width: 95vw; max-width: 95vw; margin: 0 auto; padding: 0; gap: 0; + overflow: hidden; } /* Controls section */ @@ -62,8 +65,7 @@ /* Timeline container */ .timeline-section { width: 100%; - height: 30vh; - min-height: 200px; + min-height: 60px; background: #20232a; border-radius: 10px; margin: 0 auto; @@ -72,14 +74,15 @@ box-sizing: border-box; margin-bottom: 12px; padding: 0; + overflow: hidden; + transition: flex 0.15s ease; } /* Video player section */ .video-section { + flex: 1 1 0; + min-height: 0; width: 100%; - height: 60vw; - margin-top: 12px; - min-height: 40vw; background: #23272f; border-radius: 10px; margin: 0 auto; @@ -88,6 +91,8 @@ box-sizing: border-box; margin-bottom: 12px; padding: 0; + overflow: hidden; + transition: flex 0.15s ease; } /* Date range picker styles */ diff --git a/SearchFrontend/search_ui/src/App.jsx b/SearchFrontend/search_ui/src/App.jsx index 07561d4..910b7c5 100644 --- a/SearchFrontend/search_ui/src/App.jsx +++ b/SearchFrontend/search_ui/src/App.jsx @@ -37,8 +37,19 @@ function App() { ); const [endRange, setEndRange] = useState(new Date()); // const [endRange, setEndRange] = useState(new Date(new Date().getTime() - 6 * 24 * 60 * 60 * 1000)); - const [queryText, setQueryText] = useState("Two clouded leopards being aggressive"); + const [queryText, setQueryText] = useState( + "Two clouded leopards being aggressive", + ); const [sliderValue, setSliderValue] = useState(0); + const [videoFlex, setVideoFlex] = useState(5.8); // ratio: video vs timeline + + const handleVideoWheel = useCallback((e) => { + e.preventDefault(); + setVideoFlex((prev) => { + const delta = e.deltaY > 0 ? 0.3 : -0.3; + return Math.max(3, Math.min(10, Math.max(1, prev + 0.5*delta))) + }); + }, []); // State to track last submitted values const [lastSubmitted, setLastSubmitted] = useState({ @@ -157,22 +168,24 @@ function App() { queryText, selectedCamera, }); - - - - - }; - - function selectHighResFunc(selectedHighRes, setSelectedHighRes, toggleCheckbox = true) { + function selectHighResFunc( + selectedHighRes, + setSelectedHighRes, + sendState = false, + ) { console.log(selectedHighRes); const params = new URLSearchParams(); - params.append("do_high_res", !selectedHighRes); + if (sendState) { + params.append("do_high_res", selectedHighRes); + } else { + params.append("do_high_res", !selectedHighRes); + } authenticatedFetch("api/set_parameter?" + params.toString()) .then((res) => res.json()) .then((data) => { - if (toggleCheckbox) { + if (!sendState) { setSelectedHighRes(!selectedHighRes); } }); @@ -267,8 +280,8 @@ function App() { tech.el_.addEventListener("loadstart", () => { // Force range request capability if ( - tech.el_.seekable && - tech.el_.seekable.length === 0 + tech.el_.seekable + && tech.el_.seekable.length === 0 ) { console.log( "Video doesn't support seeking - range headers may be needed", @@ -339,11 +352,7 @@ function App() { useEffect(() => { const params = new URLSearchParams(window.location.search); - selectHighResFunc( - selectedHighRes, - setSelectedHighRes, - false - ) + selectHighResFunc(selectedHighRes, setSelectedHighRes, true); handleResubmit(params.get("test_mode") === "true"); }, []); @@ -367,10 +376,9 @@ function App() { ), ); setSliderMax(max_value); - original_data.current = data; setDataResults(data); - updateDataAndValue(sliderValue) + updateDataAndValue(sliderValue); } }); }; @@ -601,20 +609,32 @@ function App() { )} -
-
+
= 6 ? "0" : "12px 16px", + background: + "linear-gradient(135deg, #2a2d3a 0%, #1f2129 100%)", + borderRadius: "12px", + boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)", + border: videoFlex >= 6 ? "none" : "1px solid #3a3f4f", + overflowX: "auto", + maxHeight: videoFlex >= 6 ? "0px" : "200px", + overflow: "hidden", + opacity: videoFlex >= 6 ? 0 : 1, + marginBottom: videoFlex >= 6 ? 0 : 12, + transition: "max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease, margin-bottom 0.3s ease", + }} + > +
-
+
-
+
{ e.target.style.borderColor = "#4a90e2"; - e.target.style.boxShadow = "inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(74, 144, 226, 0.15)"; + e.target.style.boxShadow = + "inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(74, 144, 226, 0.15)"; }} onBlur={(e) => { e.target.style.borderColor = "#3a3f4f"; - e.target.style.boxShadow = "inset 0 2px 4px rgba(0, 0, 0, 0.1)"; + e.target.style.boxShadow = + "inset 0 2px 4px rgba(0, 0, 0, 0.1)"; }} ref={inputRef} />
-
+
- HD + + HD +
-
-
-
+
= 6} />
-
+
{showCalendar && ( -
+