Embed Rumble Video #1191
Embed Rumble Video #1191
Conversation
WalkthroughThe changes introduce support for embedding Rumble videos alongside existing YouTube and Twitter embeds. This includes adding a new function Changes
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
Tip Early Access Features
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? TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Additionally, you can add CodeRabbit Configration File (
|
|
Adding @benalleng |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
| @@ -42,7 +42,7 @@ export function middleware (request) { | |||
| // unsafe-inline for styles is not ideal but okay if script-src is using nonces | |||
| "style-src 'self' a.stacker.news 'unsafe-inline'", | |||
| "manifest-src 'self'", | |||
| 'frame-src www.youtube.com platform.twitter.com', | |||
| 'frame-src www.youtube.com platform.twitter.com rumble.com', | |||
There was a problem hiding this comment.
Adding rumble.com to the CSP is necessary for embedding Rumble videos. Consider using template literals for consistency with other parts of the CSP.
- 'frame-src www.youtube.com platform.twitter.com rumble.com',
+ `frame-src www.youtube.com platform.twitter.com rumble.com`,Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| 'frame-src www.youtube.com platform.twitter.com rumble.com', | |
| `frame-src www.youtube.com platform.twitter.com rumble.com`, |
There was a problem hiding this comment.
Actionable comments posted: 1
Outside diff range and nitpick comments (3)
lib/url.js (3)
Line range hint
3-5: Avoid reassigning function parameters and use template literals for string operations.- value = value.trim() - if (!/^([a-z0-9]+:\/\/|mailto:)/.test(value)) { - value = 'http://' + value + const trimmedValue = value.trim() + if (!/^([a-z0-9]+:\/\/|mailto:)/.test(trimmedValue)) { + return `http://${trimmedValue}` + } + return trimmedValue
Line range hint
21-21: Avoid reassigning function parameters to maintain clarity and prevent side effects.- value = expr.exec(value)?.groups.url ?? value + const newValue = expr.exec(value)?.groups.url ?? value + return newValue
Line range hint
101-101: Avoid reassigning function parameters to maintain clarity and prevent side effects.- walletConnectUrl = walletConnectUrl + const cleanedWalletConnectUrl = walletConnectUrl
lib/url.js
Outdated
| export function parseEmbedUrl (href) { | ||
| const { hostname, pathname, searchParams } = new URL(href) | ||
|
|
||
| if (hostname.includes('youtube.com/watch')) { | ||
| return { | ||
| provider: 'youtube', | ||
| id: searchParams.get('v'), | ||
| meta: { | ||
| href, | ||
| start: searchParams.get('t') | ||
| } | ||
| } | ||
| } | ||
|
|
||
| if (hostname.includes('youtu.be/')) { | ||
| return { | ||
| provider: 'youtube', | ||
| id: pathname.slice(1), // remove leading slash | ||
| meta: { | ||
| href, | ||
| start: searchParams.get('t') | ||
| } | ||
| } | ||
| } | ||
|
|
||
| if (hostname.includes('rumble.com/embed')) { | ||
| return { | ||
| provider: 'rumble', | ||
| id: null, // not required | ||
| meta: { | ||
| href | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // Important to return empty object as default | ||
| return {} | ||
| } |
There was a problem hiding this comment.
Great implementation of parseEmbedUrl. Consider enhancing the default return value for better error handling or debugging.
- return {}
+ return { error: 'Unsupported video provider' }Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| export function parseEmbedUrl (href) { | |
| const { hostname, pathname, searchParams } = new URL(href) | |
| if (hostname.includes('youtube.com/watch')) { | |
| return { | |
| provider: 'youtube', | |
| id: searchParams.get('v'), | |
| meta: { | |
| href, | |
| start: searchParams.get('t') | |
| } | |
| } | |
| } | |
| if (hostname.includes('youtu.be/')) { | |
| return { | |
| provider: 'youtube', | |
| id: pathname.slice(1), // remove leading slash | |
| meta: { | |
| href, | |
| start: searchParams.get('t') | |
| } | |
| } | |
| } | |
| if (hostname.includes('rumble.com/embed')) { | |
| return { | |
| provider: 'rumble', | |
| id: null, // not required | |
| meta: { | |
| href | |
| } | |
| } | |
| } | |
| // Important to return empty object as default | |
| return {} | |
| } | |
| export function parseEmbedUrl (href) { | |
| const { hostname, pathname, searchParams } = new URL(href) | |
| if (hostname.includes('youtube.com/watch')) { | |
| return { | |
| provider: 'youtube', | |
| id: searchParams.get('v'), | |
| meta: { | |
| href, | |
| start: searchParams.get('t') | |
| } | |
| } | |
| } | |
| if (hostname.includes('youtu.be/')) { | |
| return { | |
| provider: 'youtube', | |
| id: pathname.slice(1), // remove leading slash | |
| meta: { | |
| href, | |
| start: searchParams.get('t') | |
| } | |
| } | |
| } | |
| if (hostname.includes('rumble.com/embed')) { | |
| return { | |
| provider: 'rumble', | |
| id: null, // not required | |
| meta: { | |
| href | |
| } | |
| } | |
| } | |
| // Important to return empty object as default | |
| return { error: 'Unsupported video provider' } | |
| } |
|
Code looks great. I'll QA first thing tomorrow |
Fixes #134
Description
This PR allows embedding of Rumble videos (using specific embed link). It also adds a util function that:
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.jscomponent but not thetext.jscomponent. Is this intentional?Notes
I've not tackled X/Twitter embeds as part of this PR.