[Graph Mindset] - Add scrubber component and logic

[tomsmith8]

Task Branch: https://github.com/stakwork/sphinx-nav-fiber/tree/feature/graph-mindset Run locally: http://localhost:3000/mindset Create/extend new components in modules folder: https://github.com/stakwork/sphinx-nav-fiber/tree/feature/graph-mindset/src/modules/mindset

Figma: https://www.figma.com/design/YuEbi4x32Mm8ZQJdnrs4uc/Second-Brain-Final-Designs?node-id=10136-32395&t=Y4kPLcybYHQc8nCX-4

Scrubber:

Implement a scrubber for the video timeline that dynamically interacts with the box component according to the following logic:

Scrubber Behavior

1. Initial State (Start of Video): The scrubber starts at the left edge of the timeline bar (aligned with the left edge of the box). As the video plays, the scrubber moves along the timeline bar. When the scrubber reaches the middle of the box, the scrubber and box connect and start moving together.

2. User Interaction: If the user moves the scrubber: The box follows the scrubber's position. If the user moves the scrubber back to the beginning: The box stops at the left edge, while the scrubber moves to the left edge of the box.

3. End of Video: When the scrubber reaches the end of the timeline bar: The box stops at the right edge of the timeline. The scrubber disconnects from the box and continues to the end of the timeline bar independently.

Acceptance Criteria:

Scrubber Movement:

• [ ] Scrubber starts at the left edge at the start of the video.
• [ ]Scrubber moves smoothly along the timeline bar during video playback.

Box Connection Logic:

• [ ] Box connects to the scrubber when the scrubber reaches the middle of the box.
• [ ] Box moves along with the scrubber until the start or end of the video.

User Interaction:

• [ ] User dragging the scrubber updates the box position dynamically.
• [ ] Box properly stops at the left/right edges when the scrubber moves beyond those limits.

End of Video Logic:

• [ ] Scrubber and box disconnect at the end, allowing the scrubber to move independently to the rightmost edge.

Technical Notes

• Use the currentTime and duration of the video to calculate the scrubber's position dynamically.
• Ensure responsive and smooth transitions for both scrubber and box movements.
• Add unit tests for scrubber behavior, especially at boundaries (start/end).
• Keep the components modular and reusable within the mindset module.

[Rassl]

on hold

[jordan-ae]

@Rassl & @tomsmith8 available once it opens up