Skip to content

Commit

Permalink
color thing
Browse files Browse the repository at this point in the history
  • Loading branch information
@louis030195
louis030195 committed Nov 6, 2024
1 parent 795e984 commit f6710fa
Show file tree
Hide file tree
Showing 2 changed files with 74 additions and 49 deletions.
81 changes: 50 additions & 31 deletions screenpipe-app-tauri/app/timeline/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,8 @@ interface AudioData {
interface TimeRange {
start: Date;
end: Date;
visibleStart?: Date;
visibleEnd?: Date;
}

interface Agent {
Expand Down Expand Up @@ -125,6 +127,8 @@ export default function Timeline() {
const [loadedTimeRange, setLoadedTimeRange] = useState<{
start: Date;
end: Date;
visibleStart?: Date;
visibleEnd?: Date;
} | null>(null);
const eventSourceRef = useRef<EventSource | null>(null);
const retryTimeoutRef = useRef<NodeJS.Timeout>();
Expand Down Expand Up @@ -169,11 +173,20 @@ export default function Timeline() {
endTime.setMinutes(endTime.getMinutes() - 2);
const startTime = new Date();
startTime.setHours(0, 1, 0, 0);

const visibleStart = new Date();
visibleStart.setHours(0, 0, 0, 0);
if (endTime < visibleStart) {
visibleStart.setDate(visibleStart.getDate() - 1);
}

const url = `http://localhost:3030/stream/frames?start_time=${startTime.toISOString()}&end_time=${endTime.toISOString()}&order=descending`;

setLoadedTimeRange({
start: startTime,
end: endTime,
visibleStart,
visibleEnd: endTime,
});

console.log("starting stream:", url);
Expand All @@ -191,7 +204,18 @@ export default function Timeline() {
const exists = prev.some((f) => f.timestamp === data.timestamp);
if (exists) return prev;

// ! HACK: Add new frame and sort in descending order
if (prev.length === 0) {
const frameTime = new Date(data.timestamp);
setLoadedTimeRange((current) => {
if (!current) return null;
return {
...current,
visibleStart: frameTime,
visibleEnd: current.end,
};
});
}

const newFrames = [...prev, data].sort((a, b) => {
return (
new Date(b.timestamp).getTime() -
Expand Down Expand Up @@ -295,20 +319,19 @@ export default function Timeline() {
};

const getCurrentTimePercentage = () => {
if (!currentFrame) return 0;
if (!currentFrame || !loadedTimeRange) return 0;

const frameTime = new Date(
currentFrame.metadata.timestamp || frames[currentIndex].timestamp
);
const startOfDay = new Date(frameTime);
startOfDay.setHours(0, 0, 0, 0);
const endOfDay = new Date(frameTime);
endOfDay.setHours(23, 59, 59, 999);

const totalDayMilliseconds = endOfDay.getTime() - startOfDay.getTime();
const currentMilliseconds = frameTime.getTime() - startOfDay.getTime();
const totalVisibleMilliseconds =
(loadedTimeRange.visibleEnd?.getTime() || 0) -
(loadedTimeRange.visibleStart?.getTime() || 0);
const currentMilliseconds =
frameTime.getTime() - (loadedTimeRange.visibleStart?.getTime() || 0);

return (currentMilliseconds / totalDayMilliseconds) * 100;
return (currentMilliseconds / totalVisibleMilliseconds) * 100;
};

const handleTimelineMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
Expand Down Expand Up @@ -716,24 +739,11 @@ export default function Timeline() {
</div>
)}
{currentFrame && (
<>
<div className="w-4/5 mx-auto mt-4 mb-4 text-center select-none">
<div className="inline-block bg-card p-2 rounded-lg shadow-lg border">
<div className="flex items-center gap-4 text-sm">
<div>device: {currentFrame.device_id}</div>
<div>app: {currentFrame.metadata.app_name || "n/a"}</div>
<div>
window: {currentFrame.metadata.window_name || "n/a"}
</div>
</div>
</div>
</div>
<img
src={`data:image/png;base64,${currentFrame.frame}`}
className="absolute inset-0 w-4/5 h-auto max-h-[75vh] object-contain mx-auto mt-12"
alt="Current frame"
/>
</>
<img
src={`data:image/png;base64,${currentFrame.frame}`}
className="absolute inset-0 w-4/5 h-auto max-h-[75vh] object-contain mx-auto"
alt="Current frame"
/>
)}
</div>

Expand All @@ -746,7 +756,9 @@ export default function Timeline() {
onMouseLeave={handleTimelineMouseUp}
>
{loadedTimeRange && (
<TimelineBlocks frames={frames} timeRange={loadedTimeRange} />
<div className="relative h-full bg-muted rounded-md overflow-hidden">
<TimelineBlocks frames={frames} timeRange={loadedTimeRange} />
</div>
)}

<div
Expand Down Expand Up @@ -939,9 +951,16 @@ export default function Timeline() {
{Array(7)
.fill(0)
.map((_, i) => {
const hour = (i * 4) % 24;
const date = new Date();
date.setHours(hour, 0, 0, 0);
if (!loadedTimeRange) return null;
const totalMinutes =
(loadedTimeRange.visibleEnd.getTime() -
loadedTimeRange.visibleStart.getTime()) /
(1000 * 60);
const minutesPerStep = totalMinutes / 6;
const date = new Date(
loadedTimeRange.visibleStart.getTime() +
i * minutesPerStep * 60 * 1000
);
return (
<div
key={i}
Expand Down
42 changes: 24 additions & 18 deletions screenpipe-app-tauri/components/timeline/timeline-block.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,12 @@ interface TimeBlock {

interface TimelineBlocksProps {
frames: StreamTimeSeriesResponse[];
timeRange: { start: Date; end: Date };
timeRange: {
start: Date;
end: Date;
visibleStart?: Date;
visibleEnd?: Date;
};
}

export function TimelineBlocks({ frames, timeRange }: TimelineBlocksProps) {
Expand Down Expand Up @@ -84,28 +89,29 @@ export function TimelineBlocks({ frames, timeRange }: TimelineBlocksProps) {
console.log("timeline blocks:", blocks);

return (
<div className="absolute inset-0">
<div className="absolute inset-0 flex flex-col">
{blocks.map((block, index) => {
// Convert block times to hours since start of day for proper scaling
const blockStartHours =
block.startTime.getHours() +
block.startTime.getMinutes() / 60 +
block.startTime.getSeconds() / 3600;
const blockEndHours =
block.endTime.getHours() +
block.endTime.getMinutes() / 60 +
block.endTime.getSeconds() / 3600;

// Calculate position and width based on 24-hour scale
const blockStart = (blockStartHours / 24) * 100;
const blockWidth = ((blockEndHours - blockStartHours) / 24) * 100;

if (blockWidth < 0.1) return null; // Skip tiny blocks
// Calculate position relative to visible range instead of 24-hour scale
const visibleStartTime = timeRange.visibleStart || timeRange.start;
const visibleEndTime = timeRange.visibleEnd || timeRange.end;
const visibleRangeMs =
visibleEndTime.getTime() - visibleStartTime.getTime();

const blockStartMs =
block.startTime.getTime() - visibleStartTime.getTime();
const blockDurationMs =
block.endTime.getTime() - block.startTime.getTime();

// Calculate percentages based on visible range
const blockStart = (blockStartMs / visibleRangeMs) * 100;
const blockWidth = (blockDurationMs / visibleRangeMs) * 100;

if (blockWidth < 0.01) return null; // Skip tiny blocks

return (
<div
key={`${block.appName}-${index}`}
className="absolute top-0 h-full opacity-50 hover:opacity-80 transition-opacity z-10"
className="absolute top-0 bottom-0 opacity-50 hover:opacity-80 transition-opacity z-10"
style={{
left: `${blockStart}%`,
width: `${blockWidth}%`,
Expand Down

0 comments on commit f6710fa

Please sign in to comment.