Embed Rumble Video

[tsmith123]

Fixes #134

Description

This PR allows embedding of Rumble videos (using specific embed link). It also adds a util function that:

• helps to clean up some existing code including hard to read regexes
• uses the URL constructor for more reliable parsing of embed urls
• makes code reusable so both text and item-full component can use it

Testing Notes

Rumble embed links have been tested (https://rumble.com/embed/12345/?pub=4) YouTube traditional links have been tested (https://www.youtube.com/watch?v=12345) YouTube short links have been tested (https://youtu.be/12345) YouTube links with a start time have been tested (https://youtu.be/12345?feature=shared&t=30

Screenshots

Editor View

Limitations

Rumble videos can only be embedded using the embed url specifically and not the video's webpage url. This is something that has been raised a few times already in different discussions so I won't go in to detail again.

There was a suggestion to use domino or something similar to make a request from the backend to the get the details required to support using webpage url like we do for autofilling titles etc. However, this wouldn't work because in the autofill scenario the request is done once and the title can be stored in the database. We don't really have that option for embed links and would make the whole process very messy.

I don't see a way around this unless Rumble starts adding the video id into the webpage url which might never happen. Still think embedding videos using the official embed link is a win though.

Questions

I noticed that Tweets (or should they be called Xs now 😄 ) are supported in the item-full.js component but not the text.js component. Is this intentional?

Notes

I've not tackled X/Twitter embeds as part of this PR.

[coderabbitai[bot]]

Walkthrough

The changes introduce support for embedding Rumble videos alongside existing YouTube and Twitter embeds. This includes adding a new function parseEmbedUrl for URL parsing, updating CSS classes for video containers, and modifying the Content Security Policy to allow Rumble embeds.

Changes

Files	Change Summary
components/item-full.js	Added parseEmbedUrl import, refactored embed handling, added Rumble support.
components/text.js	Added parseEmbedUrl for handling YouTube and Rumble embeds.
components/text.module.css	Renamed .youtubeContainer to .videoContainer.
lib/url.js	Added parseEmbedUrl for parsing YouTube and Rumble URLs.
middleware.js	Updated CSP frame-src directive to include rumble.com.
styles/item.module.css	Renamed classes for video elements, adjusted styling.

Sequence Diagram(s) (Beta)

sequenceDiagram
    participant User
    participant Frontend
    participant Backend
    User->>Frontend: Submit URL
    Frontend->>Backend: Parse URL with parseEmbedUrl
    Backend->>Frontend: Return embed details
    Frontend->>User: Display embedded video

Assessment against linked issues

Objective (Issue #)	Addressed	Explanation
Support for Rumble video embedding (#134)	✅
Handling of YouTube and Twitter embeds (#134)	✅

---

[!TIP]

Early Access Features

- `gpt-4o` model for chat

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

Tips

### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit .` - `Generate unit testing code for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit testing code for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai generate interesting stats about this repository and render them as a table.` - `@coderabbitai show all the console.log statements in this repository.` - `@coderabbitai read src/utils.ts and generate unit testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` - `@coderabbitai help me debug CodeRabbit configuration file.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (invoked as PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai full review` to full the review from scratch and review all the files again. - `@coderabbitai summary` to regenerate the summary of the PR. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository. - `@coderabbitai help` to get help. Additionally, you can add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. ### CodeRabbit Configration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information. - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json` ### Documentation and Community - Visit our [Documentation](https://coderabbit.ai/docs) for detailed information on how to use CodeRabbit. - Join our [Discord Community](https://discord.com/invite/GsXnASn26c) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

[tsmith123]

Adding @benalleng

[huumn]

Code looks great. I'll QA first thing tomorrow