feat(note-block): expand media embed support with tuned aspect ratios #3016

waleedlatif1 · 2026-01-27T01:02:46Z

Summary

Added embed support for 20+ platforms (Spotify, Vimeo, TikTok, Twitch, Instagram, Twitter, SoundCloud, Apple Music, Bandcamp, etc.)
Tuned aspect ratios to match provider recommendations and eliminate whitespace
Added iframe scaling to fit embeds in narrow note blocks
Removed Kick support (unreliable third-party embeds)
Added markdown table support

Type of Change

New feature

Testing

Tested manually with real embed URLs

Checklist

Code follows project style guidelines
Self-reviewed my changes
Tests added/updated and passing
No new warnings introduced
I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

vercel · 2026-01-27T01:02:50Z

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Review	Updated (UTC)
docs	Skipped		Jan 27, 2026 1:22am

greptile-apps · 2026-01-27T01:06:07Z

Greptile Overview

Greptile Summary

Expanded media embed support from YouTube-only to 20+ platforms including Spotify, Vimeo, TikTok, Twitch, Instagram, Twitter/X, SoundCloud, Apple Music, and Bandcamp. Added platform-specific aspect ratios and iframe scaling (0.78x) to properly fit embeds within narrow note blocks. Implemented markdown table rendering support.

Fixed Bandcamp embed URL construction to properly include artist parameter
Added support for video (<video>) and audio (<audio>) elements for direct media file URLs
Added specialized handling for Twitch embeds with dynamic parent parameter
Two minor syntax issues: <track> elements in video/audio tags are missing required src attributes (lines 436, 441)

Confidence Score: 4/5

Safe to merge with minor HTML syntax fixes needed
Well-structured feature expansion with proper embed URL handling and aspect ratio tuning. The Bandcamp URL construction issue from previous review has been addressed. Only minor HTML5 validation issues with <track> elements missing src attributes.
No files require special attention beyond the two minor syntax fixes

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx	Expanded media embed support from YouTube-only to 20+ platforms with tuned aspect ratios and iframe scaling. Minor syntax issues with `<track>` elements missing required `src` attributes.

Sequence Diagram

sequenceDiagram
    participant User
    participant NoteBlock
    participant NoteMarkdown
    participant getEmbedInfo
    participant ReactMarkdown
    participant Browser

    User->>NoteBlock: Views note with URL
    NoteBlock->>NoteMarkdown: Renders content
    NoteMarkdown->>ReactMarkdown: Process markdown
    ReactMarkdown->>getEmbedInfo: Check if URL is embeddable
    
    alt URL matches platform pattern
        getEmbedInfo->>getEmbedInfo: Extract ID/parameters from URL
        getEmbedInfo->>getEmbedInfo: Determine embed type (iframe/video/audio)
        getEmbedInfo->>getEmbedInfo: Set platform-specific aspect ratio
        getEmbedInfo-->>ReactMarkdown: Return EmbedInfo object
        
        alt Embed type is iframe
            ReactMarkdown->>Browser: Render iframe with scaling (0.78x)
            Browser->>Browser: Apply aspect ratio and transform
            Browser-->>User: Display embedded media
        else Embed type is video
            ReactMarkdown->>Browser: Render video element
            Browser-->>User: Display video player
        else Embed type is audio
            ReactMarkdown->>Browser: Render audio element
            Browser-->>User: Display audio player
        end
    else URL is not embeddable
        getEmbedInfo-->>ReactMarkdown: Return null
        ReactMarkdown->>Browser: Render as regular link
        Browser-->>User: Display clickable link
    end

greptile-apps

_{4 files reviewed, 4 comments}

_{Edit Code Review Agent Settings | Greptile}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx

greptile-apps · 2026-01-27T01:06:18Z

Additional Comments (1)

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx
Uses any type for component props - violates TypeScript conventions. Use proper React component prop types like React.HTMLAttributes<HTMLElement> or define specific interfaces

Context Used: Context from dashboard - TypeScript conventions and type safety (source)

Prompt To Fix With AI

This is a comment left during a code review.
Path: apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx
Line: 368:390

Comment:
Uses `any` type for component props - violates TypeScript conventions. Use proper React component prop types like `React.HTMLAttributes<HTMLElement>` or define specific interfaces

**Context Used:** Context from `dashboard` - TypeScript conventions and type safety ([source](https://app.greptile.com/review/custom-context?memory=b4f0be8d-a787-4d5a-9098-a66b1449df25))

How can I resolve this? If you propose a fix, please make it concise.

waleedlatif1 · 2026-01-27T01:10:58Z

@greptile

Include the artist subdomain in Bandcamp track and album embed URLs to ensure proper embed resolution.

greptile-apps

_{2 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx

HTML spec requires track elements to have a src attribute.

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx

- Fix YouTube regex to handle v= anywhere in query params - Fix Twitch channel match to exclude /clip/ URLs - Remove Mux support (HLS not supported in most browsers) - Remove Bandcamp support (requires numeric IDs, not slugs) Co-Authored-By: Claude Opus 4.5 <[email protected]>

cursor

Cursor Bugbot has reviewed your changes and found 2 potential issues.

^{Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.}

cursor · 2026-01-27T01:28:27Z

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx

+    const directUrl = url
+      .replace('www.dropbox.com', 'dl.dropboxusercontent.com')
+      .replace('?dl=0', '')
+    return { url: directUrl, type: 'video' }


Dropbox URL replacement can create malformed URLs

Low Severity

The Dropbox URL transformation using replace('?dl=0', '') creates malformed URLs when additional query parameters exist. For example, a URL like dropbox.com/file.mp4?dl=0&ref=123 becomes dropbox.com/file.mp4&ref=123 with an orphaned & instead of a ?, resulting in an invalid URL that the video element cannot load correctly.

cursor · 2026-01-27T01:28:27Z

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx

+                          height: EMBED_INVERSE_SCALE,
+                          transform: `scale(${EMBED_SCALE})`,
+                        }}
+                      />


Iframe sandbox attribute removal reduces security posture

Medium Severity

The previous YouTube embed included sandbox='allow-scripts allow-same-origin allow-presentation allow-popups' which restricted iframe capabilities. The new generic iframe rendering removes this attribute entirely for all 20+ embed providers. Without the sandbox, embedded content gains unrestricted capabilities including top-frame navigation, form submission, and modal dialogs. The referrerPolicy attribute was also removed.

waleedlatif1 force-pushed the fix/nonte branch from ae69b5f to ad53a7e Compare January 27, 2026 01:03

vercel bot temporarily deployed to Preview January 27, 2026 01:03 Inactive

waleedlatif1 force-pushed the fix/nonte branch from ad53a7e to 9f8b4a4 Compare January 27, 2026 01:05

vercel bot temporarily deployed to Preview January 27, 2026 01:05 Inactive

greptile-apps bot reviewed Jan 27, 2026

View reviewed changes

waleedlatif1 force-pushed the fix/nonte branch from 9f8b4a4 to 9ed0fae Compare January 27, 2026 01:06

vercel bot temporarily deployed to Preview January 27, 2026 01:06 Inactive

feat(note-block): expand media embed support with tuned aspect ratios

e477bc8

waleedlatif1 force-pushed the fix/nonte branch from 9ed0fae to e477bc8 Compare January 27, 2026 01:08

vercel bot temporarily deployed to Preview January 27, 2026 01:08 Inactive

vercel bot temporarily deployed to Preview January 27, 2026 01:10 Inactive

fix(note-block): add artist parameter to Bandcamp embed URLs

4ce7c4e

Include the artist subdomain in Bandcamp track and album embed URLs to ensure proper embed resolution.

waleedlatif1 force-pushed the fix/nonte branch from ed4a335 to 4ce7c4e Compare January 27, 2026 01:11

vercel bot temporarily deployed to Preview January 27, 2026 01:11 Inactive

greptile-apps bot reviewed Jan 27, 2026

View reviewed changes

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx Outdated Show resolved Hide resolved

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx Outdated Show resolved Hide resolved

vercel bot temporarily deployed to Preview January 27, 2026 01:14 Inactive

fix(note-block): add required src attribute to track elements

0e99cd5

HTML spec requires track elements to have a src attribute.

waleedlatif1 force-pushed the fix/nonte branch from ffbd43d to 0e99cd5 Compare January 27, 2026 01:14

vercel bot temporarily deployed to Preview January 27, 2026 01:15 Inactive

cursor bot reviewed Jan 27, 2026

View reviewed changes

vercel bot temporarily deployed to Preview January 27, 2026 01:22 Inactive

waleedlatif1 merged commit 9dbf56f into staging Jan 27, 2026
7 checks passed

waleedlatif1 deleted the fix/nonte branch January 27, 2026 01:22

waleedlatif1 mentioned this pull request Jan 27, 2026

v0.5.73: ci, helm updates, kb, ui fixes. note block enhancements #3017

Merged

cursor bot reviewed Jan 27, 2026

View reviewed changes

feat(note-block): expand media embed support with tuned aspect ratios #3016

feat(note-block): expand media embed support with tuned aspect ratios #3016

Uh oh!

Conversation

waleedlatif1 commented Jan 27, 2026

Summary

Type of Change

Testing

Checklist

Uh oh!

vercel bot commented Jan 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

greptile-apps bot commented Jan 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Greptile Overview

Greptile Summary

Confidence Score: 4/5

Important Files Changed

Sequence Diagram

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

greptile-apps bot commented Jan 27, 2026

Uh oh!

waleedlatif1 commented Jan 27, 2026

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor bot Jan 27, 2026

Choose a reason for hiding this comment

Dropbox URL replacement can create malformed URLs

Uh oh!

cursor bot Jan 27, 2026

Choose a reason for hiding this comment

Iframe sandbox attribute removal reduces security posture

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel bot commented Jan 27, 2026 •

edited

Loading

greptile-apps bot commented Jan 27, 2026 •

edited

Loading