Add support for video previews in rich text editor

[SudharakaP]

Resolve https://github.com/opencollective/opencollective/issues/4220

Screen-cast

[vercel[bot]]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

opencollective-styleguide – ./

🔍 Inspect: https://vercel.com/opencollective/opencollective-styleguide/ACHXsDw6XWcgAw7DQiVWWhh2JKw5
✅ Preview: https://opencollective-styleguide-git-feat-add-im-2aa62b-opencollective.vercel.app

opencollective-frontend – ./

🔍 Inspect: https://vercel.com/opencollective/opencollective-frontend/4ZpxEURBSMkptf5A7UfxhEUmVNiX
✅ Preview: https://opencollective-frontend-git-feat-add-imag-76b6b6-opencollective.vercel.app

[SudharakaP]

@Betree : This is almost done, but I am struggling to find some event that is fired when we click on the save button so that I can replace the preview images with the iframe again. Currently this PR replaces the iframes with image previews for both youtube and vimeo but the lacking part is this event where I could make the switch when the user clicks on save. Do you by any chance have any ideas? I'll get back to this again tomorrow.... 🤔 🤔

[SudharakaP]

@Betree : This is almost done, but I am struggling to find some event that is fired when we click on the save button so that I can replace the preview images with the iframe again. Currently this PR replaces the iframes with image previews for both youtube and vimeo but the lacking part is this event where I could make the switch when the user clicks on save. Do you by any chance have any ideas? I'll get back to this again tomorrow.... thinking thinking

@Betree : Ah, Thinking further I think I came across a potential solution, we could make a small function to pipe the longDescription before saving at,

https://github.com/opencollective/opencollective-frontend/blob/b115e556b62413f9425fbcf08ac4759b5aac87c6/components/InlineEditField.js#L238-L248

and convert to iframes. That should do it I think. Let me try it out. 😉

[SudharakaP]

@Betree : This is done for YouTube and the screencast is attached above. I also added some code for Vimeo support, but the problem with Vimeo is that the video ID is different from the preview ID. So handling this is a bit complicated I think, but I'll open a new issue for that one to investigate more. 🤔

[znarf]

@SudharakaP what's blocking there?

[Betree]

@znarf I am, I want to properly audit the security of this before merging but haven't found the time to prioritize it yet.

[Betree]

Rebased

[SudharakaP]

@Betree : There's a CodeQL error here, but I feel this is a false positive as the url here is inserted by our code not the user. We first check if it's a valid youtube url then if so converts into the appropriate image preview url based on that. Let me know if you think otherwise. 🤔

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
opencollective-frontend	✅ Ready (Inspect)	Visit Preview	Jun 21, 2022 at 2:24AM (UTC)
opencollective-styleguide	✅ Ready (Inspect)	Visit Preview	Jun 21, 2022 at 2:24AM (UTC)