Skip to content

feat(editor): add always-use-pointer-cursor toggle#539

Open
definitelynotchirag wants to merge 2 commits into
webadderallorg:mainfrom
definitelynotchirag:feat/always-use-pointer-cursor
Open

feat(editor): add always-use-pointer-cursor toggle#539
definitelynotchirag wants to merge 2 commits into
webadderallorg:mainfrom
definitelynotchirag:feat/always-use-pointer-cursor

Conversation

@definitelynotchirag
Copy link
Copy Markdown

@definitelynotchirag definitelynotchirag commented May 19, 2026

Description

Adds an Always use pointer cursor toggle to the editor's Cursor settings panel. When enabled, every cursor sample is rendered as the pointer (hand) cursor, eliminating cursor-shape flicker over text inputs, links and other interactive elements.

Motivation

Resolves #515. Frequent cursor-type switches between pointer / I-beam / arrow create visual noise during animated playback. Applying the override at playback/export time (not capture) means it also works on existing recordings.

Type of Change

  • New Feature
  • Bug Fix
  • Refactor / Code Cleanup
  • Documentation Update
  • Other (please specify)

Related Issue(s)

Closes #515

Screenshots / Video

Recording:

alwaysusepointer.mov

## Testing Guide
1. Open any recording with cursor telemetry that crosses text fields / links.
2. Open the Cursor settings panel — the new toggle sits below Show Cursor / Loop cursor.
3. Toggle on → preview cursor stays as the pointer everywhere; toggle off → original shapes return.
4. Export the video and confirm the rendered output matches the preview.
5. Verify the preference persists across reload and is saved into the project JSON.

## Checklist
- [x] I have performed a self-review of my code.
- [x] I have added any necessary screenshots or videos.
- [x] I have linked related issue(s) and updated the changelog if applicable.

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

## Release Notes

* **New Features**
  * Added "Always use pointer cursor" setting in video editor settings panel. Users can now toggle this option to consistently display a pointer cursor during video playback, preview, and export. The setting is persisted across projects and supported in 12 languages.

<!-- review_stack_entry_start -->

[![Review Change Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/webadderallorg/Recordly/pull/539?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Adds a toggle in the editor's Cursor settings panel that overrides every
captured cursor type with the pointer (hand) cursor at playback and export
time, eliminating cursor-shape flicker on text inputs and links.

Closes webadderallorg#515
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 19, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 974d1610-62a0-423c-a7b5-dc3f70ce4207

📥 Commits

Reviewing files that changed from the base of the PR and between d18dfaf and 232ea79.

📒 Files selected for processing (1)
  • src/components/video-editor/VideoEditor.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • src/components/video-editor/VideoEditor.tsx

📝 Walkthrough

Walkthrough

Adds an editor preference to always force the pointer cursor and threads it through preferences, project persistence, preview playback (cursor overlay), export pipelines (GIF/MP4/frame rendering/telemetry), and the localized SettingsPanel toggle.

Changes

Always use pointer cursor feature

Layer / File(s) Summary
Preference and config data contracts
src/components/video-editor/editorPreferences.ts, src/components/video-editor/projectPersistence.ts, src/components/video-editor/videoPlayback/cursorRenderer.ts, src/lib/exporter/frameRenderer.ts
Define alwaysUsePointerCursor in persisted controls, defaults, normalization, ProjectEditorState, and CursorRenderConfig/FrameRenderConfig.
Editor state initialization and lifecycle
src/components/video-editor/VideoEditor.tsx
Thread editor state: initialize from initialEditorPreferences, include in preset snapshots, persist in saved editor state, restore on project load, and save preference changes.
Preview playback and settings panel wiring
src/components/video-editor/VideoPlayback.tsx, src/components/video-editor/SettingsPanel.tsx
VideoPlayback accepts the prop, stores it in a ref and syncs to PixiCursorOverlay. SettingsPanel exposes a labeled Switch, reset behavior, and change callback.
Cursor renderer pointer override logic
src/components/video-editor/videoPlayback/cursorRenderer.ts
Add setAlwaysUsePointerCursor() and force "pointer" asset in PixiCursorOverlay.update() and drawCursorOnCanvas() when enabled.
Export configuration and frame/video renderer wiring
src/lib/exporter/*, src/components/video-editor/VideoEditor.tsx
Add alwaysUsePointerCursor to GIF/MP4 exporter configs, pass through to FrameRenderer / ModernFrameRenderer, and include in native static-layout telemetry so exports respect the override.
Localized UI strings
src/i18n/locales/*/settings.json
Add effects.alwaysUsePointerCursor translation key for all provided locales.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Suggested reviewers

  • meiiie

Poem

🐇 A steady arrow, no frantic twirl,
One pointer rules when recordings unfurl,
Through edit, preview, export and play,
A calm cursor guides the demo’s way. ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title 'feat(editor): add always-use-pointer-cursor toggle' clearly summarizes the main feature being added, matching the primary change across the changeset.
Description check ✅ Passed The PR description is comprehensive, includes all required sections (Description, Motivation, Type of Change, Related Issues, Testing Guide, Checklist), provides a video demonstration, and is well-structured according to the template.
Linked Issues check ✅ Passed The PR successfully implements the feature requested in #515: adds an 'Always use pointer cursor' toggle in the Cursor settings panel that overrides cursor types during playback and export, and allows existing recordings to benefit from the feature.
Out of Scope Changes check ✅ Passed All changes are directly scoped to implementing the requested feature: UI toggle addition, preference persistence, cursor rendering logic, localization strings, and export configuration. No unrelated modifications detected.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.


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

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 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 `@src/components/video-editor/VideoEditor.tsx`:
- Line 4290: The handleExport useCallback is missing alwaysUsePointerCursor in
its dependency array which can cause stale values when building GIF/MP4 configs
inside handleExport; update the dependency array of the useCallback named
handleExport (the array near where effectiveShowCursor is listed) to include
alwaysUsePointerCursor so the GIF export branch (uses alwaysUsePointerCursor at
the GIF config) and the MP4 export branch (uses alwaysUsePointerCursor at the
MP4 config) always see the latest value when invoked.
- Line 1270: captureProjectThumbnail (the useCallback defined around lines
1338–1385) reads the alwaysUsePointerCursor variable but that identifier is
missing from the hook's dependency array, which can cause stale closures; update
the dependency array for captureProjectThumbnail to include
alwaysUsePointerCursor (alongside effectiveShowCursor) so the callback is
recreated when the setting changes, ensuring the thumbnail capture uses the
current value.
🪄 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: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 8e77bbd4-125a-453f-956f-65a18227df52

📥 Commits

Reviewing files that changed from the base of the PR and between 4f729b7 and d18dfaf.

📒 Files selected for processing (22)
  • src/components/video-editor/SettingsPanel.tsx
  • src/components/video-editor/VideoEditor.tsx
  • src/components/video-editor/VideoPlayback.tsx
  • src/components/video-editor/editorPreferences.ts
  • src/components/video-editor/projectPersistence.ts
  • src/components/video-editor/videoPlayback/cursorRenderer.ts
  • src/i18n/locales/en/settings.json
  • src/i18n/locales/es/settings.json
  • src/i18n/locales/fr/settings.json
  • src/i18n/locales/it/settings.json
  • src/i18n/locales/ko/settings.json
  • src/i18n/locales/nl/settings.json
  • src/i18n/locales/pt-BR/settings.json
  • src/i18n/locales/ru/settings.json
  • src/i18n/locales/zh-CN/settings.json
  • src/i18n/locales/zh-TW/settings.json
  • src/lib/exporter/frameRenderer.ts
  • src/lib/exporter/gifExporter.ts
  • src/lib/exporter/modernFrameRenderer.ts
  • src/lib/exporter/modernVideoExporter.ts
  • src/lib/exporter/nativeStaticLayoutTelemetry.ts
  • src/lib/exporter/videoExporter.ts

Comment thread src/components/video-editor/VideoEditor.tsx
Comment thread src/components/video-editor/VideoEditor.tsx
Adds the flag to captureProjectThumbnail and handleExport useCallback
dependency arrays so thumbnail capture and export pick up the latest value
after the user toggles the setting.
@definitelynotchirag
Copy link
Copy Markdown
Author

@webadderall @ExtraBinoss I have added an Always use pointer cursor toggle as referenced in #515. Please review when you have a moment. Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature]: Always use Pointer cursor

1 participant