Use player time to convert to timeline time

This commit is contained in:
Nick Mowen 2024-01-19 13:50:08 -07:00
parent e19ff12087
commit 58d66c5353
4 changed files with 34 additions and 10 deletions

View File

@ -1859,6 +1859,7 @@ def recordings(camera_name):
Recordings.segment_size, Recordings.segment_size,
Recordings.motion, Recordings.motion,
Recordings.objects, Recordings.objects,
Recordings.duration,
) )
.where( .where(
Recordings.camera == camera_name, Recordings.camera == camera_name,

View File

@ -378,7 +378,7 @@ def auto_detect_hwaccel() -> str:
try: try:
cuda = False cuda = False
vaapi = False vaapi = False
resp = requests.get("http://192.168.50.106:1984/api/ffmpeg/hardware", timeout=3) resp = requests.get("http://127.0.0.1:1984/api/ffmpeg/hardware", timeout=3)
if resp.status_code == 200: if resp.status_code == 200:
data: dict[str, list[dict[str, str]]] = resp.json() data: dict[str, list[dict[str, str]]] = resp.json()

View File

@ -5,6 +5,7 @@ type Recording = {
end_time: number; end_time: number;
path: string; path: string;
segment_size: number; segment_size: number;
duration: number;
motion: number; motion: number;
objects: number; objects: number;
dBFS: number; dBFS: number;
@ -17,6 +18,7 @@ type RecordingSegment = {
motion: number; motion: number;
objects: number; objects: number;
segment_size: number; segment_size: number;
duration: number;
}; };
type RecordingActivity = { type RecordingActivity = {

View File

@ -45,7 +45,7 @@ export default function DesktopTimelineView({
const [seeking, setSeeking] = useState(false); const [seeking, setSeeking] = useState(false);
const [timeToSeek, setTimeToSeek] = useState<number | undefined>(undefined); const [timeToSeek, setTimeToSeek] = useState<number | undefined>(undefined);
const [timelineTime, setTimelineTime] = useState( const [playerTime, setPlayerTime] = useState(
initialPlayback.timelineItems.length > 0 initialPlayback.timelineItems.length > 0
? initialPlayback.timelineItems[0].timestamp - initialPlayback.range.start ? initialPlayback.timelineItems[0].timestamp - initialPlayback.range.start
: 0 : 0
@ -121,6 +121,28 @@ export default function DesktopTimelineView({
[annotationOffset, recordings, playerRef] [annotationOffset, recordings, playerRef]
); );
const timelineTime = useMemo(() => {
if (scrubbing) {
return playerTime;
} else {
// take a player time in seconds and convert to timestamp in timeline
let timestamp = 0;
let totalTime = 0;
(recordings || []).every((segment) => {
if (totalTime + segment.duration > playerTime) {
// segment is here
timestamp = segment.start_time + (playerTime - totalTime);
return false;
} else {
totalTime += segment.duration;
return true;
}
});
return timestamp;
}
}, [playerTime]);
// handle scrolling to initial timeline item // handle scrolling to initial timeline item
useEffect(() => { useEffect(() => {
if (initialScrollRef.current != null) { if (initialScrollRef.current != null) {
@ -151,10 +173,11 @@ export default function DesktopTimelineView({
return; return;
} }
setTimelineTime( setPlayerTime(
selectedPlayback.timelineItems.length > 0 selectedPlayback.timelineItems.length > 0
? selectedPlayback.timelineItems[0].timestamp ? selectedPlayback.timelineItems[0].timestamp -
: selectedPlayback.range.start selectedPlayback.range.start
: 0
); );
playerRef.current.src({ playerRef.current.src({
@ -269,7 +292,7 @@ export default function DesktopTimelineView({
} }
player.on("playing", () => onSelectItem(undefined)); player.on("playing", () => onSelectItem(undefined));
player.on("timeupdate", () => { player.on("timeupdate", () => {
setTimelineTime(Math.floor(player.currentTime() || 0)); setPlayerTime(Math.floor(player.currentTime() || 0));
}); });
}} }}
onDispose={() => { onDispose={() => {
@ -348,9 +371,7 @@ export default function DesktopTimelineView({
isSelected isSelected
? [ ? [
{ {
time: new Date( time: new Date(timelineTime * 1000),
(timeline.range.start + timelineTime) * 1000
),
id: "playback", id: "playback",
}, },
] ]
@ -370,7 +391,7 @@ export default function DesktopTimelineView({
const seekTimestamp = data.time.getTime() / 1000; const seekTimestamp = data.time.getTime() / 1000;
const seekTime = const seekTime =
seekTimestamp - timeline.relevantPreview.start; seekTimestamp - timeline.relevantPreview.start;
setTimelineTime(seekTimestamp - timeline.range.start); setPlayerTime(seekTimestamp - timeline.range.start);
setTimeToSeek(Math.round(seekTime)); setTimeToSeek(Math.round(seekTime));
}} }}
timechangedHandler={(data) => { timechangedHandler={(data) => {