thebears/SearchInterface
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

YACWC

Browse Source
This commit is contained in:
Ishan S. Patel
2025-09-22 11:07:28 -04:00
parent 47f631fedb
commit aa5ad8327e
9 changed files with 821 additions and 620 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
SearchFrontend/search_ui/src/App.jsx
View File

@@ -155,6 +155,8 @@ function App() {
newData["videos"] = newData["videos"].filter(
(vid) => vid["embed_scores"]["score"][1] >= floatValue
);
newData['threshold'] = floatValue;
console.log(newData['threshold'])
setDataResults(newData);
}
@@ -209,22 +211,59 @@ function App() {
);
}
}
// Memoize the timeline click handler
const handleTimelineClick = useCallback(
(path, timeoffset) => {
if (playerRef.current && playerInstanceRef.current) {
playerInstanceRef.current.src({
src: "api/" + path,
type: "video/mp4",
});
playerInstanceRef.current.on("loadedmetadata", () => {
playerInstanceRef.current.currentTime(timeoffset);
});
}
},
[] // Empty dependency array since it only uses playerRef
);
const handleTimelineClick = useCallback(
(path, timeoffset) => {
if (playerRef.current && playerInstanceRef.current) {
const player = playerInstanceRef.current;
console.log("Setting video source:", "api/" + path);
console.log("Target time offset:", timeoffset);
// Clear any existing source first
player.reset();
player.src({
src: "api/" + path,
type: "video/mp4",
});
player.load();
// Add multiple event listeners for debugging
player.one("loadedmetadata", () => {
console.log("Video metadata loaded");
console.log("Video duration:", player.duration());
player.currentTime(timeoffset);
// Try to play after setting time
const playPromise = player.play();
if (playPromise !== undefined) {
playPromise.then(() => {
console.log("Video started playing");
}).catch(error => {
console.error("Error playing video:", error);
});
}
});
player.one("error", (e) => {
console.error("Video error:", e);
console.error("Player error:", player.error());
});
player.one("loadstart", () => {
console.log("Load started");
});
player.one("canplay", () => {
console.log("Video can start playing");
});
} else {
console.error("Player ref not available");
}
},
[]
);
useEffect(() => {
const params = new URLSearchParams(window.location.search);
@@ -263,12 +302,8 @@ function App() {
return (
<div className="app-container">
<div
className={`section-box-horiz${
drawerOpen ? " drawer-open" : ""
}`}
>
<div className="flex-group">
<div className="controls-section">
<div className="control-group">
<CustomDateRangePicker
startDate={startRange}
endDate={endRange}
@@ -276,52 +311,46 @@ function App() {
setEndRange={setEndRange}
/>
</div>
<div className="flex-group">
<div style={{ position: "relative", width: "100%" }}>
<input
type="text"
placeholder="Enter query"
value={queryText}
onChange={(e) => setQueryText(e.target.value)}
onKeyDown={(e) => {
if (e.key === "Enter") handleResubmit();
}}
style={{
marginLeft: "16px",
marginRight: "16px",
padding: "8px",
borderRadius: "4px",
border: "1px solid #343a40",
color: "#fff",
backgroundColor: "#23272f",
width: "100%",
minWidth: 0,
boxSizing: "border-box",
fontSize: "1.1em",
transition: "width 0.2s",
}}
ref={inputRef}
size={Math.max(queryText.length, 1)}
/>
</div>
<div className="control-group">
<input
type="text"
placeholder="Enter query"
value={queryText}
onChange={(e) => setQueryText(e.target.value)}
onKeyDown={(e) => {
if (e.key === "Enter") handleResubmit();
}}
style={{
// padding: "8px",
// borderRadius: "4px",
// border: "1px solid #343a40",
// color: "#fff",
// backgroundColor: "#23272f",
// width: "100%",
// minWidth: 0,
// boxSizing: "border-box",
fontSize: "1.1em",
// transition: "width 0.2s",
}}
ref={inputRef}
size={Math.max(queryText.length, 25)}
/>
</div>
<div
className="flex-group"
className="control-group"
style={{ visibility: queryChanged ? "hidden" : "visible" }}
>
<label
style={{
marginLeft: "8px",
marginRight: "8px",
color: "#fff",
}}
>
Threshold:
</label>
<label style={{ color: "#fff" }}>Threshold:</label>
</div>
<div
className="flex-group"
style={{ visibility: queryChanged ? "hidden" : "visible" }}
className="control-group"
style={{
display: "inline-block",
verticalAlign: "middle",
margin: "0 8px",
width: "120px",
visibility: queryChanged ? "hidden" : "visible",
}}
>
<input
type="range"
@@ -339,15 +368,13 @@ function App() {
/>
</div>
<div
className="flex-group"
className="control-group"
style={{ visibility: queryChanged ? "hidden" : "visible" }}
>
<span style={{ marginLeft: "8px", color: "#fff" }}>
{sliderValue.toFixed(2)}
</span>
<span style={{ color: "#fff" }}>{sliderValue.toFixed(2)}</span>
</div>
<div
className="flex-group"
className="control-group"
style={{ visibility: queryChanged ? "visible" : "hidden" }}
>
<button
@@ -363,18 +390,20 @@ function App() {
</button>
</div>
</div>
<div>
<div className="status-section">
<StatusesDisplayHUD statusMessages={statusMessages} />
</div>
<div className="timeline-container">
<div className="timeline-section">
<EmbedTimeline
chartRef={chartRef}
data_in={dataResults}
onTimelineClick={handleTimelineClick}
/>
</div>
<div className="section-box">
<div className="video-section vjs-16-9 vjs-fluid">
<VideoPlayer
videoRef={playerRef}
playerInstanceRef={playerInstanceRef}