feat: add pointer drag seeking to section map

[saleemk]

What

Add Pointer Events drag seeking to Section Map for touch, pen, and mouse input.

• crossing a horizontal movement threshold starts a drag preview
• the position marker follows the pointer without seeking during movement
• a compact m:ss / m:ss label shows the target time
• releasing seeks once through the existing host seek API
• taps and wheel seeking keep their existing behavior
• drag state is cleared on cancellation, capture loss, Player exit, and map removal

Why

Section Map currently provides discrete click and tap seeking. Adding drag preview and release-to-seek makes precise navigation easier across pointer input types.

Keeping this behavior inside Section Map also ensures that the plugin owning the control owns its interaction lifecycle, without requiring another plugin to intercept or recreate its behavior.

Testing

Automated:

• node --check screen.js
• node --test tests/screen.test.js
• 20 tests passed

Manual:

• phone and tablet touch dragging
• desktop mouse dragging
• tap seeking
• wheel seeking
• drag-time label placement and edge clamping
• cancellation and Player exit cleanup
• no duplicate seek on release

Summary by CodeRabbit

• New Features

  • Added drag-to-seek support to the section map with a live position preview and a visible time label while dragging.
  • Enhanced pointer-based interactions for smoother seek previews and correct gesture handling.

• Bug Fixes

  • Prevented automatic playback-position updates from overriding an active drag preview.
  • Suppressed the immediate follow-up click after a drag to avoid accidental seeks.
  • Ensured the section map updates correctly when the screen changes, including safe cleanup and label hiding.

• Tests

  • Expanded coverage for pointer/drag behaviors, cancellations, and screen-change scenarios.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: c8949bec-7476-4f68-ba6e-b9b93056dc35

📥 Commits

Reviewing files that changed from the base of the PR and between 3cbea12 and 8a77ddc.

📒 Files selected for processing (2)

• screen.js
• tests/screen.test.js

🚧 Files skipped from review as they are similar to previous changes (1)

• tests/screen.test.js

---

📝 Walkthrough

Walkthrough

The Section Map now supports pointer-based drag previews and seeking, including a time label, pointer capture, click suppression, cancellation, and screen-change cleanup. CommonJS test hooks expose the new handlers and drag state, with expanded behavioral coverage.

Changes

Section Map Drag Interaction

Layer / File(s)	Summary
Drag state and pointer event flow screen.js	Pointer events track drag state, render seek previews, commit sectionmap-drag seeks, and suppress the synthetic follow-up click.
Preview rendering and lifecycle integration screen.js	Rendering adds sm-drag-time, playback marker updates pause during active drags, and screen changes clean up the map through feedBack.on.
Drag behavior test coverage tests/screen.test.js	Test fixtures and cases cover pointer capture, previews, taps, cancellation, capture loss, and screen-change cleanup.

Estimated code review effort: 4 (Complex) | ~45 minutes

Possibly related PRs

• got-feedBack/feedBack-plugin-sectionmap#9: Both update the CommonJS test hooks and Section Map test harness.
• got-feedBack/feedBack-plugin-sectionmap#10: Both modify Section Map seeking and host integration in screen.js.

Sequence Diagram(s)

sequenceDiagram
  participant Pointer
  participant SectionMap
  participant FeedBack
  Pointer->>SectionMap: Drag across section map
  SectionMap->>SectionMap: Update marker and time label preview
  Pointer->>SectionMap: Release pointer
  SectionMap->>FeedBack: Seek with sectionmap-drag
  FeedBack-->>SectionMap: Continue playback marker updates

Loading

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: adding pointer drag seeking to the section map.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

screen.js (1)

233-245: 🚀 Performance & Scalability | 🔵 Trivial | 💤 Low value

Optional: cache the label width for the duration of the drag.

label.offsetWidth is read on every pointermove, forcing a layout each frame on a touch hot path. The label text width does change as the time string changes, but you could measure once per drag (or only when textContent changes) instead.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@screen.js` around lines 233 - 245, Optimize _smPreviewTimeLabel by avoiding a
fresh label.offsetWidth layout read on every pointermove: cache the measured
width for the drag, or invalidate and remeasure only when the displayed text
changes. Ensure the cached measurement is reset when a new drag begins and
preserve the existing clamping and positioning behavior.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@tests/screen.test.js`:
- Around line 310-334: Update the move coordinates in the vertical pointer
movement test around _smOnPointerMove so horizontal displacement exceeds
SM_DRAG_THRESHOLD_PX while vertical displacement remains larger than horizontal.
Keep the assertions unchanged so the test specifically exercises the axis-lock
branch rather than only the drag-threshold guard.

---

Nitpick comments:
In `@screen.js`:
- Around line 233-245: Optimize _smPreviewTimeLabel by avoiding a fresh
label.offsetWidth layout read on every pointermove: cache the measured width for
the drag, or invalidate and remeasure only when the displayed text changes.
Ensure the cached measurement is reset when a new drag begins and preserve the
existing clamping and positioning behavior.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 80c5c630-6e9c-4ab5-8753-43dd3d66a02f

📥 Commits

Reviewing files that changed from the base of the PR and between 33953e9 and 3cbea12.

📒 Files selected for processing (2)

• screen.js
• tests/screen.test.js

[saleemk]

@coderabbitai review

[coderabbitai]

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.