81 lines
2.5 KiB
JavaScript
81 lines
2.5 KiB
JavaScript
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;
|