YACWC

SearchFrontend/search_ui/src/Explorer.jsx

@@ -0,0 +1,80 @@
+import React, { useState } from "react";
+import VideoPlayerMultiple from "./components/VideoPlayerMultiple.jsx";
+import TimelineStacked from "./components/TimelineStacked.jsx";
+import VideoPlayerTimelineStack from "./components/VideoPlayerTimelineStack.jsx";
+import VideoUploadDropzone from "./components/VideoUploadDropzone.jsx";
+import "./Explorer.css";
+
+function Explorer() {
+    const [queries, setQueries] = useState([
+        { id: 1, text: "", submitted: false },
+    ]);
+    const [nextId, setNextId] = useState(2);
+    const [uploadedVideos, setUploadedVideos] = useState([
+        // Default video
+    ]);
+
+    const handleQueryChange = (id, text) => {
+        setQueries((prev) =>
+            prev.map((query) => (query.id === id ? { ...query, text } : query))
+        );
+    };
+
+    const handleSubmitQuery = (id) => {
+        const query = queries.find((q) => q.id === id);
+        if (query && query.text.trim()) {
+            // Mark this query as submitted
+            setQueries((prev) =>
+                prev.map((q) => (q.id === id ? { ...q, submitted: true } : q))
+            );
+
+            // Add a new empty query box
+            setQueries((prev) => [
+                ...prev,
+                { id: nextId, text: "", submitted: false },
+            ]);
+            setNextId((prev) => prev + 1);
+
+            // TODO: Handle the query submission (API call, etc.)
+            console.log(`Submitted query: "${query.text}"`);
+        }
+    };
+
+    const handleRemoveQuery = (id) => {
+        if (queries.length > 1) {
+            setQueries((prev) => prev.filter((query) => query.id !== id));
+        }
+    };
+
+    const handleKeyPress = (e, id) => {
+        if (e.key === "Enter") {
+            handleSubmitQuery(id);
+        }
+    };
+
+    const handleVideoUpload = (videoUrl) => {
+        setUploadedVideos((prev) => [...prev, videoUrl]);
+    };
+
+    const handleVideoDelete = (index) => {
+        setUploadedVideos((prev) => prev.filter((_, i) => i !== index));
+    };
+
+    return (
+        <div className="explorer-container">
+            {/* Video Players */}
+            <div className="multiple-timelines-videos">
+                {uploadedVideos.map((videoSrc, index) => (
+                    <VideoPlayerTimelineStack
+                        key={index}
+                        video_src={videoSrc}
+                        onDelete={() => handleVideoDelete(index)}
+                    />
+                ))}
+            </div>
+            <VideoUploadDropzone onVideoUpload={handleVideoUpload} />
+        </div>
+    );
+}
+
+export default Explorer;