+ {/* {drawerOpen && (
+
setDrawerOpen(false)}
+ style={{
+ position: "fixed",
+ top: 0,
+ left: 0,
+ width: "100vw",
+ height: "100vh",
+ background: "rgba(0, 0, 0, 0.5)",
+ zIndex: 1400,
+ opacity: drawerOpen ? 1 : 0,
+ transition: "opacity 0.3s ease",
+ }}
+ />
+ )} */}
+
+ {drawerOpen && (
+
+ )}
+
+
+
+
+
+
+
+
+ selectHighResFunc(
+ selectedHighRes,
+ setSelectedHighRes,
+ )
+ }
+ />
+ HD Video
+
- {sliderValue.toFixed(2)}
+
+ {sliderValue.toFixed(2)}
+
+ {videoPlaying && (
+
+
+
+ )}
+ {videoPlaying && (
+
+
+
+ )}
@@ -400,14 +735,16 @@ const handleTimelineClick = useCallback(
chartRef={chartRef}
data_in={dataResults}
onTimelineClick={handleTimelineClick}
+ authenticatedFetch={authenticatedFetch}
/>
-
+
diff --git a/SearchFrontend/search_ui/src/Explorer.css b/SearchFrontend/search_ui/src/Explorer.css
new file mode 100644
index 0000000..c861dd8
--- /dev/null
+++ b/SearchFrontend/search_ui/src/Explorer.css
@@ -0,0 +1,31 @@
+.multiple-timelines-videos {
+ display: flex;
+ flex-direction: column;
+ gap: 0; /* Remove gap to ensure exact 50% */
+ padding: 0; /* Remove padding for exact sizing */
+ box-sizing: border-box;
+}
+
+/* Make each VideoPlayerTimelineStack take exactly half the available space */
+.multiple-timelines-videos > * {
+ flex: 0 0 50%; /* Exact 50% - no grow, no shrink */
+ min-height: 0vh;
+ overflow: hidden;
+ box-sizing: border-box;
+}
+
+/* Force Video.js to respect container dimensions */
+.video-timeline-container .video-js,
+.timelines-and-video-parent .video-js {
+ width: 100% !important;
+ height: 100% !important;
+ max-width: 100%;
+ max-height: 100%;
+}
+
+.video-timeline-container .video-js .vjs-tech,
+.timelines-and-video-parent .video-js .vjs-tech {
+ width: 100% !important;
+ height: 100% !important;
+ object-fit: contain;
+}
\ No newline at end of file
diff --git a/SearchFrontend/search_ui/src/Explorer.jsx b/SearchFrontend/search_ui/src/Explorer.jsx
new file mode 100644
index 0000000..8f76b8c
--- /dev/null
+++ b/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 (
+
+ {/* Video Players */}
+
+ {uploadedVideos.map((videoSrc, index) => (
+ handleVideoDelete(index)}
+ />
+ ))}
+
+
+
+ );
+}
+
+export default Explorer;
diff --git a/SearchFrontend/search_ui/src/components/CompactDateRangePicker.jsx b/SearchFrontend/search_ui/src/components/CompactDateRangePicker.jsx
deleted file mode 100644
index 6c2fc21..0000000
--- a/SearchFrontend/search_ui/src/components/CompactDateRangePicker.jsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React, { useState } from "react";
-import DatePicker from "react-datepicker";
-import "react-datepicker/dist/react-datepicker.css";
-
-export default function CompactDateRangePicker({ startDate, endDate, setStartDate, setEndDate}) {
- // const [startDate, setStartDate] = useState(null);
- // const [endDate, setEndDate] = useState(null);
- console.log(startDate)
- console.log(endDate)
- console.log(setStartDate)
- console.log(setEndDate)
- return (
-
{
- setStartDate(start);
- setEndDate(end);
- if (end && onChange) onChange({ startDate: start, endDate: end });
- }}
- isClearable
- maxDate={new Date()}
- placeholderText="Select date range"
- withPortal
- />
- );
-}
\ No newline at end of file
diff --git a/SearchFrontend/search_ui/src/components/EmbedTimeline.jsx b/SearchFrontend/search_ui/src/components/EmbedTimeline.jsx
index c4d5160..c7d6ca8 100644
--- a/SearchFrontend/search_ui/src/components/EmbedTimeline.jsx
+++ b/SearchFrontend/search_ui/src/components/EmbedTimeline.jsx
@@ -5,6 +5,7 @@ const EmbedTimeline = React.memo(function EmbedTimeline({
chartRef,
data_in,
onTimelineClick,
+ authenticatedFetch,
markerTime,
}) {
// Use useRef instead of props/state to avoid re-renders
@@ -19,13 +20,14 @@ const EmbedTimeline = React.memo(function EmbedTimeline({
// --- Constants ---
const BREAK_GAP = 0;
const ZOOM_THRESHOLD = 4 * 60 * 60 * 1000; // 1 hour in ms
+ const BREAK_THRESHOLD_SECONDS = 60 * 15;
const fetchLineData = async (startTime, endTime) => {
try {
const params = new URLSearchParams();
params.append("start_time", new Date(startTime).toISOString());
params.append("end_time", new Date(endTime).toISOString());
- const response = await fetch(
+ const response = await authenticatedFetch(
"/api/line_data.json?" + params.toString()
);
@@ -65,7 +67,7 @@ const EmbedTimeline = React.memo(function EmbedTimeline({
const handleDataZoom = async (params, chart) => {
if (!params || !chart) return;
- console.log(zoomed_range.current);
+ // console.log(zoomed_range.current);
let plot_start_time = zoomed_range.current[0];
let plot_end_time = zoomed_range.current[1];
@@ -81,9 +83,8 @@ const EmbedTimeline = React.memo(function EmbedTimeline({
let offset_start = dataZoom.startValue - plot_start_time;
let offset_end = dataZoom.endValue - plot_end_time;
- console.log(offset_start, offset_end);
+ // console.log(offset_start, offset_end);
if (offset_start < 0 || offset_end > 0) {
- console.log("Do force getting data");
isZoomedInRef.current = false;
}
@@ -109,11 +110,11 @@ const EmbedTimeline = React.memo(function EmbedTimeline({
const fetchedLineData = await fetchLineData(startTime, endTime);
lineDataRef.current = fetchedLineData;
- console.log("Fetched updated data");
+ // console.log("Fetched updated data");
// Add line directly to chart without React re-render
addLineToChart(chart, fetchedLineData);
} else if (!shouldShowLine && isZoomedInRef.current) {
- console.log("zoomed out");
+ // console.log("zoomed out");
isZoomedInRef.current = false;
lineDataRef.current = null;
zoomed_range.current = [null, null];
@@ -192,6 +193,29 @@ const EmbedTimeline = React.memo(function EmbedTimeline({
).sort((a, b) => new Date(a[0]) - new Date(b[0]));
}
+ function calculateDayBreaks(videos) {
+ const breaks = [];
+ if (videos.length < 3) {
+ return breaks;
+ }
+
+ for (let i = 0; i < videos.length - 1; i++) {
+ let end_now = new Date(videos[i]["end_time"]*1000)
+ let start_next = new Date(videos[i + 1]["start_time"]*1000)
+
+
+ Math.abs(start_next.getDay() - end_now.getDay())
+ if (Math.abs(start_next.getDay() - end_now.getDay()) > 0) {
+ // console.log("Day break:", end_now, start_next)
+ let c_st = end_now.getTime();
+ let e_st = start_next.getTime();
+ breaks.push([c_st, e_st, e_st/2 + c_st/2]);
+ }
+ }
+
+ return breaks;
+ }
+
function calculateBreaks(videos) {
const breaks = [];
if (videos.length < 3) {
@@ -202,9 +226,8 @@ const EmbedTimeline = React.memo(function EmbedTimeline({
for (let i = 0; i < videos.length - 1; i++) {
let end_now = videos[i]["end_time"];
let start_next = videos[i + 1]["start_time"];
- if (start_next - end_now > 60 * 60) {
- // still in unix timestamp. break only if spaces of 60 minutes
- breaks.push([end_now, start_next]);
+ if (start_next - end_now > BREAK_THRESHOLD_SECONDS) {
+ breaks.push([end_now*1000, start_next*1000, (end_now/2 + start_next/2)*1000]);
}
}
@@ -229,8 +252,8 @@ const EmbedTimeline = React.memo(function EmbedTimeline({
function prepareBreaks(breaksRaw) {
return breaksRaw.map(([start, end]) => ({
- start: new Date(1000 * start),
- end: new Date(1000 * end),
+ start: new Date(start),
+ end: new Date( end),
gap: BREAK_GAP,
isExpanded: false,
}));
@@ -322,8 +345,8 @@ const EmbedTimeline = React.memo(function EmbedTimeline({
symbol: "none",
lineStyle: { width: 100, opacity: 0 },
data: [],
- smooth: true,
- sampling: 'lttb',
+ smooth: true,
+ sampling: "lttb",
z: 4,
};
}
@@ -332,9 +355,12 @@ const EmbedTimeline = React.memo(function EmbedTimeline({
const videoData = prepareVideoData(data_in["videos"]);
const withNulls = videoData;
data_in["calc_breaks"] = calculateBreaks(data_in["videos"]);
-
+ data_in["day_breaks"] = calculateDayBreaks(data_in["videos"]);
+ window.data_in = data_in
// const withNulls = fillNulls(videoData);
- const breaks = prepareBreaks(data_in["calc_breaks"]);
+ const breaks = prepareBreaks(data_in["day_breaks"]);
+
+ window.breaks = breaks;
const virtualTime = buildVirtualTimeMapper(breaks);
const breaks_split = data_in["calc_breaks"].flat(1).map(function (x) {
@@ -344,14 +370,14 @@ const EmbedTimeline = React.memo(function EmbedTimeline({
// breaks_split.unshift(new Date(videoData[0][0]).getTime())
// breaks_split.push(new Date(videoData.at(-1)[0]).getTime())
// }
- const paired_splits = [];
- for (let i = 0; i < breaks_split.length; i += 2) {
- paired_splits.push([
- breaks_split[i],
- breaks_split[i + 1],
- breaks_split[i] / 2 + breaks_split[i + 1] / 2,
- ]);
- }
+ const paired_splits = data_in['calc_breaks']
+ // for (let i = 0; i < breaks_split.length; i += 2) {
+ // paired_splits.push([
+ // breaks_split[i],
+ // breaks_split[i + 1],
+ // breaks_split[i] / 2 + breaks_split[i + 1] / 2,
+ // ]);
+ // }
const split_centers = paired_splits.map((d) => new Date(d[2]));
const splitCenterVirtualTimes = split_centers.map((d) => virtualTime(d));
const splitCenterLabels = split_centers.map((d) =>
@@ -416,12 +442,12 @@ const EmbedTimeline = React.memo(function EmbedTimeline({
fontSize: 10,
},
}));
-
+ // console.log(breakMarkLines)
// Attach break mark lines to the first series
if (seriesNormal[0]) {
seriesNormal[0].markLine = {
symbol: ["none", "none"],
- data: [...(breakMarkLines || []), ...(splitCenterMarkLines || [])],
+ data: [...(breakMarkLines)],
lineStyle: { type: "dashed", color: "#888", width: 2 },
label: {
show: true,
@@ -437,7 +463,7 @@ const EmbedTimeline = React.memo(function EmbedTimeline({
(virtualData.length > 0 ? virtualData[0][0] : 0) - 100000;
const virtual_x_max =
(virtualData.length > 0 ? virtualData[virtualData.length - 1][0] : 1) +
- 4100000;
+ 100000;
const option = {
animation: false,
@@ -547,7 +573,7 @@ const EmbedTimeline = React.memo(function EmbedTimeline({
const dataCoord = echarts.convertFromPixel({ seriesIndex: 0 }, pixel);
- const res = await fetch("/api/events/click", {
+ const res = await authenticatedFetch("/api/events/click", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
diff --git a/SearchFrontend/search_ui/src/components/Login.css b/SearchFrontend/search_ui/src/components/Login.css
new file mode 100644
index 0000000..5057154
--- /dev/null
+++ b/SearchFrontend/search_ui/src/components/Login.css
@@ -0,0 +1,76 @@
+.login-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ background: #181a20;
+}
+
+.login-box {
+ background: #23272f;
+ padding: 40px;
+ border-radius: 12px;
+ box-shadow: 0 4px 24px rgba(0,0,0,0.3);
+ width: 100%;
+ max-width: 400px;
+}
+
+.login-box h2 {
+ color: #fff;
+ text-align: center;
+ margin-bottom: 30px;
+ font-weight: 600;
+}
+
+.form-group {
+ margin-bottom: 20px;
+}
+
+.form-group input {
+ width: 100%;
+ padding: 12px;
+ border: 1px solid #343a40;
+ border-radius: 6px;
+ background: #181a20;
+ color: #fff;
+ font-size: 16px;
+ box-sizing: border-box;
+}
+
+.form-group input:focus {
+ outline: none;
+ border-color: #3a7afe;
+}
+
+.form-group input::placeholder {
+ color: #888;
+}
+
+button {
+ width: 100%;
+ padding: 12px;
+ background: #3a7afe;
+ color: white;
+ border: none;
+ border-radius: 6px;
+ font-size: 16px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: background 0.2s;
+}
+
+button:hover:not(:disabled) {
+ background: #2c5ce6;
+}
+
+button:disabled {
+ background: #555;
+ cursor: not-allowed;
+}
+
+.error {
+ color: #ff6b6b;
+ text-align: center;
+ margin-bottom: 15px;
+ font-size: 14px;
+}
\ No newline at end of file
diff --git a/SearchFrontend/search_ui/src/components/Login.jsx b/SearchFrontend/search_ui/src/components/Login.jsx
new file mode 100644
index 0000000..964e3a9
--- /dev/null
+++ b/SearchFrontend/search_ui/src/components/Login.jsx
@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import './Login.css';
+
+export default function Login({ onLoginSuccess }) {
+ const [username, setUsername] = useState('');
+ const [password, setPassword] = useState('');
+ const [error, setError] = useState('');
+ const [loading, setLoading] = useState(false);
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ setLoading(true);
+ setError('');
+
+ try {
+ const formData = new FormData();
+ formData.append('username', username);
+ formData.append('password', password);
+
+ const response = await fetch('api/login', {
+ method: 'POST',
+ body: formData,
+ });
+
+ if (response.ok) {
+ const data = await response.json();
+ localStorage.setItem('access_token', data.access_token);
+ onLoginSuccess();
+ } else {
+ setError('Invalid username or password');
+ }
+ } catch (error) {
+ setError('Login failed. Please try again.');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/SearchFrontend/search_ui/src/components/MultipleTimelinesInterface.css b/SearchFrontend/search_ui/src/components/MultipleTimelinesInterface.css
new file mode 100644
index 0000000..0799a8f
--- /dev/null
+++ b/SearchFrontend/search_ui/src/components/MultipleTimelinesInterface.css
@@ -0,0 +1,103 @@
+.multiple-timelines-interface {
+ padding: 0;
+ margin: 0;
+}
+
+.input-group {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin: 0;
+ margin-bottom: 0;
+}
+
+.item-input {
+ flex: 1;
+ padding: 8px 12px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ font-size: 14px;
+ margin: 0;
+ width: 50%;
+ height: 22px;
+ transition: opacity 0.2s;
+}
+
+.item-input:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+}
+
+.item-input:focus {
+ outline: none;
+ border-color: #007bff;
+}
+
+.submit-button {
+ padding: 8px 16px;
+ background: #007bff;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ font-size: 14px;
+ cursor: pointer;
+ margin: 0;
+ min-width: 100px; /* Fixed minimum width to prevent size change */
+ width: 25%;
+ height: 40px; /* Fixed height to prevent vertical size change */
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 6px;
+ transition: background 0.2s ease; /* Only transition background, not size */
+ box-sizing: border-box; /* Ensure padding is included in width/height */
+}
+
+.submit-button:hover:not(:disabled) {
+ background: #0056b3;
+}
+
+.submit-button:disabled {
+ background: #ccc;
+ cursor: not-allowed;
+}
+
+.submit-button.loading {
+ background: #ffc107;
+ cursor: not-allowed;
+}
+
+.submit-button.loading:hover {
+ background: #ffc107;
+}
+
+.spinner {
+ width: 14px; /* Fixed width */
+ height: 14px; /* Fixed height - same as width for perfect circle */
+ border: 2px solid transparent;
+ border-top: 2px solid #fff;
+ border-radius: 50%;
+ animation: spin 1s linear infinite;
+ display: inline-block;
+ flex-shrink: 0; /* Prevent the spinner from shrinking */
+}
+
+@keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+}
+
+.timelines-container {
+ display: flex;
+ flex-direction: column;
+ gap: 0;
+ margin: 0;
+ padding: 0;
+}
+
+.timeline-item {
+ padding: 0;
+ margin: 0;
+ background: transparent;
+ border: none;
+}
\ No newline at end of file
diff --git a/SearchFrontend/search_ui/src/components/MultipleTimelinesInterface.jsx b/SearchFrontend/search_ui/src/components/MultipleTimelinesInterface.jsx
new file mode 100644
index 0000000..71837d9
--- /dev/null
+++ b/SearchFrontend/search_ui/src/components/MultipleTimelinesInterface.jsx
@@ -0,0 +1,95 @@
+import React, { useState } from "react";
+import TimelineStacked from "./TimelineStacked";
+import "./MultipleTimelinesInterface.css";
+
+function MultipleTimelinesInterface({ video_path }) {
+ const [value, setValue] = useState("");
+ const [timelines, setTimelines] = useState([]);
+ const [isLoading, setIsLoading] = useState(false);
+
+ const handleSubmit = async () => {
+ if (value.trim() && !isLoading) {
+ setIsLoading(true);
+
+ const prompt = value.trim();
+ const key = prompt;
+ const params = new URLSearchParams();
+ params.append("video_path", video_path);
+ params.append("prompt", prompt);
+
+ try {
+ const response = await fetch("api/match_scores?" + params.toString());
+ const data = await response.json();
+
+ const new_timeline_prefs = {
+ prompt: prompt,
+ key: key,
+ data: data,
+ };
+
+ setTimelines([...timelines, new_timeline_prefs]);
+ setValue(""); // Clear the input after submission
+ } catch (error) {
+ console.error("Error fetching data:", error);
+ } finally {
+ setIsLoading(false);
+ }
+ }
+ };
+
+ const handleKeyPress = (e) => {
+ if (e.key === "Enter") {
+ handleSubmit();
+ }
+ };
+
+ const handleDeleteTimeline = (timelineId) => {
+ setTimelines(prev => prev.filter(timeline => timeline.key !== timelineId));
+ };
+
+ return (
+
+
+ {timelines.map((timeline) => (
+
+ handleDeleteTimeline(timeline.key)}
+ />
+
+ ))}
+
+
+
+ setValue(e.target.value)}
+ onKeyPress={handleKeyPress}
+ className="item-input"
+ disabled={isLoading}
+ />
+
+
+
+
+
+
+
+ );
+}
+
+export default TimelineStacked;
diff --git a/SearchFrontend/search_ui/src/components/VidelUploadDropzone.css b/SearchFrontend/search_ui/src/components/VidelUploadDropzone.css
new file mode 100644
index 0000000..d395257
--- /dev/null
+++ b/SearchFrontend/search_ui/src/components/VidelUploadDropzone.css
@@ -0,0 +1,89 @@
+.video-dropzone {
+ border: 2px dashed #ccc;
+ border-radius: 8px;
+ padding: 40px 20px;
+ text-align: center;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ background: #f8f9fa;
+ margin: 20px 0;
+ min-height: 150px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.video-dropzone:hover {
+ border-color: #007bff;
+ background: #f0f7ff;
+}
+
+.video-dropzone.drag-over {
+ border-color: #28a745;
+ background: #f0fff4;
+ transform: scale(1.02);
+}
+
+.video-dropzone.uploading {
+ border-color: #ffc107;
+ background: #fffbf0;
+ cursor: not-allowed;
+}
+
+.upload-prompt {
+ color: #666;
+}
+
+.upload-icon {
+ font-size: 48px;
+ margin-bottom: 16px;
+}
+
+.upload-prompt p {
+ margin: 8px 0;
+ font-size: 16px;
+}
+
+.upload-subtitle {
+ color: #999;
+ font-size: 14px;
+}
+
+.supported-formats {
+ margin-top: 16px;
+ font-size: 12px;
+ color: #999;
+ font-style: italic;
+}
+
+.upload-status {
+ color: #666;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 16px;
+}
+
+.spinner {
+ width: 32px;
+ height: 32px;
+ border: 3px solid #f3f3f3;
+ border-top: 3px solid #007bff;
+ border-radius: 50%;
+ animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+}
+
+.explorer-container {
+ padding: 20px;
+}
+
+.multiple-timelines-videos {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
\ No newline at end of file
diff --git a/SearchFrontend/search_ui/src/components/VideoPlayer.jsx b/SearchFrontend/search_ui/src/components/VideoPlayer.jsx
index 382edae..e116cdc 100644
--- a/SearchFrontend/search_ui/src/components/VideoPlayer.jsx
+++ b/SearchFrontend/search_ui/src/components/VideoPlayer.jsx
@@ -1,72 +1,95 @@
-import React, { useRef, useEffect, forwardRef, useImperativeHandle } from "react";
+import React, {
+ useRef,
+ useEffect,
+ forwardRef,
+ useImperativeHandle,
+} from "react";
import videojs from "video.js";
import "video.js/dist/video-js.css";
-const VideoPlayer = function VideoPlayer({videoRef, playerInstanceRef, setMarkerTimeFunc}) {
-
+const VideoPlayer = function VideoPlayer({
+ videoRef,
+ playerInstanceRef,
+ setMarkerTimeFunc,
+ authenticatedFetch
+}) {
+ useEffect(() => {
+ // Prevent double init in StrictMode
+ if (!playerInstanceRef.current && videoRef.current) {
+ const token = localStorage.getItem("access_token"); // Move token here
-
- useEffect(() => {
- // Prevent double init in StrictMode
- if (!playerInstanceRef.current && videoRef.current) {
- playerInstanceRef.current = videojs(videoRef.current, {
- controls: true,
- preload: "auto",
- autoplay: true,
- });
+ playerInstanceRef.current = videojs(videoRef.current, {
+ controls: true,
+ preload: "auto",
+ autoplay: true,
+ fluid: true,
+ html5: {
+ vhs: {
+ overrideNative: true, // use Video.js native range handling
+ },
+ nativeVideoTracks: false,
+ },
+ responsive: true,
+ techOrder: ['html5'],
+ })
- playerInstanceRef.current.on('timeupdate', async function (event) {
-
- const res = await fetch('api/events/video_step', {
- method: "POST",
- headers: {
- "Content-Type": "application/json",
- },
- body: JSON.stringify({ timestamp: this.currentTime() }),
- });
- if (!res.ok) throw new Error(`HTTP error: ${res.status}`);
- const { path, timeoffset, do_update, absolute_time} = await res.json();
- setMarkerTimeFunc(1000*absolute_time)
- if (do_update) {
- playerInstanceRef.current.src({ src: 'api/' + path, type: "video/mp4" });
+ playerInstanceRef.current.on("timeupdate", async function (event) {
+ const token = localStorage.getItem("access_token");
+ const res = await authenticatedFetch("api/events/video_step", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ timestamp: this.currentTime() }),
+ });
- // Seek after metadata is loaded
- playerInstanceRef.current.on("loadedmetadata", () => {
- playerInstanceRef.current.currentTime(timeoffset);
- });
+ if (!res.ok) throw new Error(`HTTP error: ${res.status}`);
+ let js_ = await res.json()
+
+ const { path, timeoffset, do_update, absolute_time, halt } = js_
+ setMarkerTimeFunc(1000 * absolute_time);
+ if (halt) {
+ this.pause();
+ }
+ if (do_update) {
+ const authenticatedUrl = `api/${path}?token=${token}`;
+ console.log(authenticatedUrl)
+ playerInstanceRef.current.src({
+ src: authenticatedUrl,
+ type: "video/mp4",
+ });
+
+ // Seek after metadata is loaded
+ playerInstanceRef.current.on("loadedmetadata", () => {
+ playerInstanceRef.current.currentTime(timeoffset);
+ });
+ }
+ });
}
+ return () => {
+ if (playerInstanceRef.current) {
+ playerInstanceRef.current.dispose();
+ playerInstanceRef.current = null;
+ }
+ };
+ }, []);
- }
- )
- }
-
- return () => {
- if (playerInstanceRef.current) {
- playerInstanceRef.current.dispose();
- playerInstanceRef.current = null;
- }
- };
- }, []);
-
-
- return (
-
- );
+ return (
+
+ );
};
export default VideoPlayer;
diff --git a/SearchFrontend/search_ui/src/components/VideoPlayerMultiple.jsx b/SearchFrontend/search_ui/src/components/VideoPlayerMultiple.jsx
new file mode 100644
index 0000000..286448b
--- /dev/null
+++ b/SearchFrontend/search_ui/src/components/VideoPlayerMultiple.jsx
@@ -0,0 +1,11 @@
+
+import videojs from "video.js";
+
+
+
+function VideoPlayerMultiple()
+{
+
+}
+
+export default VideoPlayerMultiple
\ No newline at end of file
diff --git a/SearchFrontend/search_ui/src/components/VideoPlayerTimelineStack.css b/SearchFrontend/search_ui/src/components/VideoPlayerTimelineStack.css
new file mode 100644
index 0000000..f5585d6
--- /dev/null
+++ b/SearchFrontend/search_ui/src/components/VideoPlayerTimelineStack.css
@@ -0,0 +1,81 @@
+.timelines-and-video-parent {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ flex-direction: row;
+ overflow: hidden;
+ box-sizing: border-box;
+ position: relative; /* Add this for absolute positioning of delete button */
+}
+
+.video-parent {
+ flex: 1;
+ height: 100%;
+ min-width: 0;
+ background: #000;
+ position: relative;
+ overflow: hidden;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.timelines-parent {
+ flex: 1;
+ height: 100%;
+ min-width: 0;
+ background: #20232a;
+ color: #fff;
+ padding: 16px;
+ box-sizing: border-box;
+ overflow-y: auto;
+}
+
+/* Delete button styling */
+.delete-video-btn {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 28px;
+ height: 28px;
+ background: rgba(255, 71, 87, 0.9);
+ color: white;
+ border: none;
+ border-radius: 50%;
+ font-size: 16px;
+ font-weight: bold;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1000;
+ transition: all 0.2s ease;
+ backdrop-filter: blur(4px);
+}
+
+.delete-video-btn:hover {
+ background: rgba(255, 71, 87, 1);
+ transform: scale(1.1);
+ box-shadow: 0 2px 8px rgba(255, 71, 87, 0.4);
+}
+
+.delete-video-btn:active {
+ transform: scale(0.95);
+}
+
+/* Force Video.js to fit properly within container */
+.video-parent .video-js {
+ max-width: 100%;
+ max-height: 100%;
+ width: auto !important;
+ height: auto !important;
+}
+
+.video-parent .video-js video,
+.video-parent .video-js .vjs-tech {
+ max-width: 100%;
+ max-height: 100%;
+ width: 100%;
+ height: 100%;
+ object-fit: contain !important;
+}
\ No newline at end of file
diff --git a/SearchFrontend/search_ui/src/components/VideoPlayerTimelineStack.jsx b/SearchFrontend/search_ui/src/components/VideoPlayerTimelineStack.jsx
new file mode 100644
index 0000000..e7500fd
--- /dev/null
+++ b/SearchFrontend/search_ui/src/components/VideoPlayerTimelineStack.jsx
@@ -0,0 +1,103 @@
+import React, {
+ useRef,
+ useEffect,
+ forwardRef,
+ useImperativeHandle,
+} from "react";
+import videojs from "video.js";
+import eventBus from "../util/EventBus.jsx";
+
+import TimelineStacked from "./TimelineStacked.jsx";
+import "video.js/dist/video-js.css";
+import MultipleTimelinesInterface from "./MultipleTimelinesInterface.jsx";
+import "./VideoPlayerTimelineStack.css";
+
+const VideoPlayerTimelineStack = function VideoPlayerTimelineStack({
+ video_src,
+ onDelete
+}) {
+ const playerInstanceRef = useRef(null);
+ const videoRef = useRef(null);
+
+ useEffect(() => {
+ // Prevent double init in StrictMode
+ if (!playerInstanceRef.current && videoRef.current) {
+ playerInstanceRef.current = videojs(videoRef.current, {
+ controls: true,
+ preload: "auto",
+ autoplay: true,
+ fluid: true,
+ responsive: true,
+ fill: false,
+ aspectRatio: "16:9", // Add aspect ratio
+ width: 932,
+ height: 523, // Calculate based on aspect ratio
+ });
+ }
+
+ playerInstanceRef.current.on("timeupdate", async function (event) {
+ eventBus.publish(video_src, { time: this.currentTime() });
+ });
+
+ if (playerInstanceRef.current && videoRef.current) {
+ const player = playerInstanceRef.current;
+ player.src({ src: video_src, type: "video/mp4" });
+ }
+
+ const resizeObserver = new ResizeObserver((entries) => {
+ console.log(entries);
+ console.log(entries);
+ });
+ const videoContainer = videoRef.current.closest(".video-parent");
+ if (videoContainer) {
+ resizeObserver.observe(videoContainer);
+ }
+
+ return () => {
+ if (playerInstanceRef.current) {
+ playerInstanceRef.current.dispose();
+ playerInstanceRef.current = null;
+ }
+ };
+ }, [video_src]); // Add video_src to dependencies
+
+ const handleDelete = () => {
+ // Clean up video player before deletion
+ if (playerInstanceRef.current) {
+ playerInstanceRef.current.dispose();
+ playerInstanceRef.current = null;
+ }
+
+ // Call parent's delete handler
+ if (onDelete) {
+ onDelete();
+ }
+ };
+
+ return (
+
+ );
+};
+
+export default VideoPlayerTimelineStack;
diff --git a/SearchFrontend/search_ui/src/components/VideoUploadDropzone.css b/SearchFrontend/search_ui/src/components/VideoUploadDropzone.css
new file mode 100644
index 0000000..d395257
--- /dev/null
+++ b/SearchFrontend/search_ui/src/components/VideoUploadDropzone.css
@@ -0,0 +1,89 @@
+.video-dropzone {
+ border: 2px dashed #ccc;
+ border-radius: 8px;
+ padding: 40px 20px;
+ text-align: center;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ background: #f8f9fa;
+ margin: 20px 0;
+ min-height: 150px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.video-dropzone:hover {
+ border-color: #007bff;
+ background: #f0f7ff;
+}
+
+.video-dropzone.drag-over {
+ border-color: #28a745;
+ background: #f0fff4;
+ transform: scale(1.02);
+}
+
+.video-dropzone.uploading {
+ border-color: #ffc107;
+ background: #fffbf0;
+ cursor: not-allowed;
+}
+
+.upload-prompt {
+ color: #666;
+}
+
+.upload-icon {
+ font-size: 48px;
+ margin-bottom: 16px;
+}
+
+.upload-prompt p {
+ margin: 8px 0;
+ font-size: 16px;
+}
+
+.upload-subtitle {
+ color: #999;
+ font-size: 14px;
+}
+
+.supported-formats {
+ margin-top: 16px;
+ font-size: 12px;
+ color: #999;
+ font-style: italic;
+}
+
+.upload-status {
+ color: #666;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 16px;
+}
+
+.spinner {
+ width: 32px;
+ height: 32px;
+ border: 3px solid #f3f3f3;
+ border-top: 3px solid #007bff;
+ border-radius: 50%;
+ animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+}
+
+.explorer-container {
+ padding: 20px;
+}
+
+.multiple-timelines-videos {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
\ No newline at end of file
diff --git a/SearchFrontend/search_ui/src/components/VideoUploadDropzone.jsx b/SearchFrontend/search_ui/src/components/VideoUploadDropzone.jsx
new file mode 100644
index 0000000..2c9741f
--- /dev/null
+++ b/SearchFrontend/search_ui/src/components/VideoUploadDropzone.jsx
@@ -0,0 +1,129 @@
+import React, { useState, useRef } from 'react';
+import './VideoUploadDropzone.css';
+
+function VideoUploadDropzone({ onVideoUpload }) {
+ const [isDragOver, setIsDragOver] = useState(false);
+ const [isUploading, setIsUploading] = useState(false);
+ const fileInputRef = useRef(null);
+
+ const handleDragOver = (e) => {
+ e.preventDefault();
+ setIsDragOver(true);
+ };
+
+ const handleDragLeave = (e) => {
+ e.preventDefault();
+ setIsDragOver(false);
+ };
+
+ const handleDrop = (e) => {
+ e.preventDefault();
+ setIsDragOver(false);
+
+ const files = e.dataTransfer.files;
+ if (files.length > 0) {
+ handleFileUpload(files[0]);
+ }
+ };
+
+ const handleFileSelect = (e) => {
+ const files = e.target.files;
+ if (files.length > 0) {
+ handleFileUpload(files[0]);
+ }
+ };
+
+ const handleFileUpload = async (file) => {
+ // Validate file type
+ if (!file.type.startsWith('video/')) {
+ alert('Please select a valid video file');
+ return;
+ }
+
+ // Validate file size (e.g., max 100MB)
+ const maxSize = 100 * 1024 * 1024; // 100MB
+ if (file.size > maxSize) {
+ alert('File size too large. Please select a file under 100MB');
+ return;
+ }
+
+ setIsUploading(true);
+
+ try {
+ const formData = new FormData();
+ formData.append('video', file);
+
+ // Get auth token
+ const token = localStorage.getItem('access_token');
+
+ const response = await fetch('/api/upload-video', {
+ method: 'POST',
+ headers: {
+ 'Authorization': `Bearer ${token}`
+ },
+ body: formData
+ });
+
+ if (!response.ok) {
+ throw new Error(`Upload failed: ${response.statusText}`);
+ }
+
+ const result = await response.json();
+
+ // Call the callback with the uploaded video URL
+ if (onVideoUpload && result.video_url) {
+ onVideoUpload(result.video_url);
+ }
+
+ } catch (error) {
+ console.error('Upload error:', error);
+ alert('Upload failed. Please try again.');
+ } finally {
+ setIsUploading(false);
+ // Reset file input
+ if (fileInputRef.current) {
+ fileInputRef.current.value = '';
+ }
+ }
+ };
+
+ const handleClick = () => {
+ fileInputRef.current?.click();
+ };
+
+ return (
+
+
+
+ {isUploading ? (
+
+ ) : (
+
+
📹
+
Drag and drop a video file here
+
or click to select
+
+ Supports: MP4, AVI, MOV, WebM
+
+
+ )}
+