Skip to content

fix(studio): keep preview selection overlay visible for selected item#777

Merged
miguel-heygen merged 1 commit into
heygen-com:mainfrom
func25:fix/keep-preview-selection-overlay-visible
May 13, 2026
Merged

fix(studio): keep preview selection overlay visible for selected item#777
miguel-heygen merged 1 commit into
heygen-com:mainfrom
func25:fix/keep-preview-selection-overlay-visible

Conversation

@func25
Copy link
Copy Markdown
Contributor

@func25 func25 commented May 13, 2026

What

Keep the Studio preview selection overlay visible while an element is still selected

Why

The overlay can disappear evenn though the element is still selected. Because overlay visibility was tied to timeline active state.

How

Remove the timeline active-state check from shouldShowSelectedDomBounds. The overlay should be visible based on selection and inspector state, not timeline activity.

Test plan

How was this tested?

  • Unit tests added/updated
  • Manual testing performed
  • Documentation updated (if applicable)

Copy link
Copy Markdown
Collaborator

@miguel-heygen miguel-heygen left a comment

Choose a reason for hiding this comment

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

The intent is solid — the overlay disappearing when you select an element and the playhead is outside its range is genuinely annoying UX.

However, the removed check was there for a reason: it prevents the selection overlay from rendering on elements that aren't visible at the current time. Consider this scenario:

  1. Select Scene 1 (active 0–5s)
  2. Seek to 7s (where Scene 2 is active)
  3. Scene 1 is now hidden by the player framework, but the overlay still renders

The overlay uses getBoundingClientRect() on the underlying DOM element. If the element is hidden via opacity: 0 (which is how GSAP animations often exit elements), the rect is still valid — so you'd get green selection handles floating on an invisible element.

Alternative approach worth considering: instead of removing the timeline check entirely, use the existing getTimelineLayerVisibilityInPreview from the same timelineInspector.ts file to check if the DOM element itself is actually visible at render time:

const shouldShowSelectedDomBounds =
    inspectorPanelActive &&
    !panelLayout.rightCollapsed &&
    !isPlaying;

This simplified version (what the PR does) is probably fine in practice — most users won't select-then-seek — but be aware of the edge case. If it ships and users report phantom overlays, that's the root cause.

The code cleanup is clean — selectedTimelineElement, selectedTimelineElementId, and the two imports are correctly removed since they have no other consumers in App.tsx.

@miguel-heygen miguel-heygen merged commit 51f968e into heygen-com:main May 13, 2026
21 of 24 checks passed
@miguel-heygen
Copy link
Copy Markdown
Collaborator

admin-merged btw

@func25 func25 deleted the fix/keep-preview-selection-overlay-visible branch May 13, 2026 05:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants