Skip to content

Fix thumbnail dashboard card#3849

Merged
joaomariolago merged 3 commits intobluerobotics:masterfrom
joaoantoniocardoso:fix_thumbnail_dashboard_card
Mar 27, 2026
Merged

Fix thumbnail dashboard card#3849
joaomariolago merged 3 commits intobluerobotics:masterfrom
joaoantoniocardoso:fix_thumbnail_dashboard_card

Conversation

@joaoantoniocardoso
Copy link
Member

@joaoantoniocardoso joaoantoniocardoso commented Mar 24, 2026

Closes #3848

Summary by Sourcery

Fix sizing and interaction behavior of video thumbnail cards in the dashboard.

Bug Fixes:

  • Ensure thumbnail width values are correctly interpreted whether passed as numbers or CSS strings.
  • Prevent thumbnail control clicks from propagating to parent elements and causing unintended actions.
  • Adjust thumbnail rendering to maintain full visibility within its container and respect container height constraints.
  • Correct dashboard thumbnail card sizing by using full-width thumbnails instead of auto width with explicit height.

…gation on controls

Prevents the play/camera buttons from triggering navigation to the
Video Manager page when the thumbnail is embedded in the dashboard.

Closes bluerobotics#3848
The width prop was concatenated with 'px' unconditionally, producing
invalid CSS 'autopx' when the dashboard passed 'auto'. Add a computed
that only appends 'px' for purely numeric values, and pass '100%' from
the dashboard so the thumbnail fills the card like it does on the
Video Manager page.
…thin parent

Constrain the thumbnail frame height to its parent and use object-fit
contain so the full image is visible without overflow or cropping.
@sourcery-ai
Copy link

sourcery-ai bot commented Mar 24, 2026

🧙 Sourcery has finished reviewing your pull request!


Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

Copy link

@sourcery-ai sourcery-ai bot left a comment

Choose a reason for hiding this comment

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

Hey - I've left some high level feedback:

  • In parsedWidth, relying on /^\d+$/ against this.width assumes a string type; consider normalizing width to a number or using Number.isFinite(Number(this.width)) so numeric prop values (or values with whitespace) are handled robustly.
  • Adding @click.stop.prevent on the entire .thumbnail-controls container may unintentionally block default behavior for nested interactive elements; consider applying the modifiers on specific triggers (e.g., the thumbnail card itself) to avoid interfering with control interactions or accessibility.
Prompt for AI Agents
Please address the comments from this code review:

## Overall Comments
- In `parsedWidth`, relying on `/^\d+$/` against `this.width` assumes a string type; consider normalizing `width` to a number or using `Number.isFinite(Number(this.width))` so numeric prop values (or values with whitespace) are handled robustly.
- Adding `@click.stop.prevent` on the entire `.thumbnail-controls` container may unintentionally block default behavior for nested interactive elements; consider applying the modifiers on specific triggers (e.g., the thumbnail card itself) to avoid interfering with control interactions or accessibility.

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

@joaomariolago joaomariolago merged commit f5615f3 into bluerobotics:master Mar 27, 2026
7 checks passed
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.

Camera "play" to fetch for thumbnail in the dashboard redirect to video stream page

2 participants