Mux Plugin

[jamesvclements]

We build a decent number of video-heavy websites at Old Friends and found Mux to be a great tool for video hosting and playback. Like Payload, Mux is super focused on DX and I think there's a sweet opportunity to make it smoother to use them together. It looks like there may already be a similar plug-in for Sanity.

For a recent project, we created a simple Video collection. You copy a video's Playback ID from Mux, paste it into Payload, and a beforeChange hook calls the Mux API to fetch some additional metadata about the Video, like the aspect ratio, to be used on the front-end website.

Here's a demo of the current structure.
This isn't bad, but there is some obvious room for improvement:

• All video upload/removal still happens in the Mux dashboard, and then you need to copy things over by the Asset ID. It'd be better to upload, manage, and delete your Mux assets directly through Payload.
• Because they're separated, videos you delete in Mux are still present in Payload and clutter the collection
• When selecting Videos from a relationship field, it's impossible to tell which video the Asset ID corresponds to without clicking the 📝 icon to expand the details, at which point we use a custom field to render a thumbnail to help. I wrote about this in another discussion . It would be great if Payload allowed you to render custom components for the relationship select item so that it's easier to tell which Video (or Image) you're selecting.

We're about to launch this project and kick off another video-heavy, Payload + Mux website. I'd love to work with the Payload team to create a plugin with Mux that makes it super easy to use Mux within Payload. Any tips on how to approach a plugin like this would be appreciated. Let me know any more context I can provide about our current approach, the typical way clients use Mux, etc. Thanks!

[matthijs166]

Sounds like something you can add easily with the collection hooks: (https://payloadcms.com/docs/hooks/collections)
The API of Mux also looks easy to grasp: https://docs.mux.com/api-reference#video/operation/create-asset

Hooks overview for example on the Video collection :
afterchange -> Call the Mux API to create a new asset and store the ID in the collection
afterDeleteHook -> Call the Mux API to delete asset

I'm not sure what is needed in the frond end, think the Mux Next.js SDK will do.

The best place to start a new plugin is here: https://github.com/payloadcms/plugin-template

Would love to see a new plugin come to live!

[jmikrut]

Hey @jamesvclements — I am beyond excited to hear that you and Old Friends are finding success with Payload. Our entire team loves what you're doing. Small world.

Just watched the demo and it looks pretty slick, but I see what you're saying about room for improvement.

I don't think it would be a big lift to accomplish what you're looking to do and I agree with @matthijs166 in his description of how to implement the requirements, with a few small clarifications:

All video upload/removal still happens in the Mux dashboard

This could indeed be accomplished with a hook, where you would take a file that is uploaded from the Payload frontend, similar to how we do uploads now, and then pipe it through to Mux to create an asset directly within Mux.

Because they're separated, videos you delete in Mux are still present in Payload

For this one, we could do something similar to what we've done in our Stripe plugin—leverage Mux webhooks to listen for events and then delete / even update entries within Payload as necessary. This would be a bi-directional sync, which is a very common pattern and something that I would deem to be a must-have in order to have a proper Mux integration. Not too much work involved either to be honest.

Here's a link to the Mux webhook docs, specifically regarding the event that is emitted when an asset is deleted:
https://docs.mux.com/webhook-reference#video.asset.deleted

Rendering custom select components for relationships

This would actually be a quite simple feature to build, and we would happily accept a PR to do so or alternatively, build this ourselves after 2.0 launches.

With all of this together, we'd have something awesome on our hands! My team and I would be happy to collaborate with you. Our bandwidth will open up significantly post-2.0, which is slated for Oct. 9.

Exciting!

[jamesvclements]

@matthijs166 @jmikrut thank you both for the guidance! I'll focus on the plugin first, and then potentially the third task (custom select components for relationships) can come later from the Payload team after the 2.0 release, or I'll take a look when more of our capacity frees up.

In the meantime, for the plugin, what do you think is the best approach?

Option A

The plugin adds a Videos collection, which uses upload: { disableLocalStorage: true }. The advantage with this option is that by enabling upload, it automatically generates the File Input Component, which could be reused to select videos from your local computer to upload into Mux. However, is there a way to hook into when the file is selected? Because the field is automatically generated, I don't see an easy way to hook into it's changes. I'd like to populate a different field at the moment you pick a file (to use data based on the selected file's filename), but since the upload field is automatically generated I'm not sure where to add the hook.

### Option B
I'm realizing there's a difference between Collections with upload: true and the Upload field itself. It sounds like the best practice is to have a single Collection with upload: true and then have other collections reference it with Upload fields? Would that apply to this plugin as well? Should it create a Videos collection, and then the collections you actually want to have videos in you have to add Upload fields to? If so, it seems like I could add the hook logic into the collections that are referencing the Videos collection, rather than the Videos collection itself (this feels messy).

### Option C
Is there any easy way to reuse the File Input Component that Payload uses for the Upload fields? Just the UI of it (styles, drag and drop, select). If so, it might be simpler for this plugin to generate a normal collection (without using Paylod's native upload feature), then re-use the File Input Component to keep it stylized like Payload, but have access to any of the hooks we'd need since they're regular fields.

I'm still wrapping my head around the full Payload framework so I apologize if these questions are rough around the edges 😅

10/3 Edit:

Just dropping a note that I went with Option A. The useFormFields hook did the trick. Everything else is coming along.
Will keep this updated!

[kobeindemans]

Any updates on this?

[jamesvclements]

@kobeindemans I haven't published on NPM yet but I have the plugin working across a few projects now. I can share it with you later this week or early next!

[nicolaslair]

I am also keen to have a look at it - thanks ;)

[kobeindemans]

That would be great! Thank you!

[jamesvclements]

@kobeindemans @nicolaslair I just published a starter repo that includes the first version of the payload-mux plugin. You can checkout the docs and code here. Let me know if you have any questions—I'm hoping to flesh out the starter more over the next few weeks but hopefully there's enough there for the Mux plugin to get you started!

[willyBaller]

@jamesvclements Have you still been using this? If so, do you have an updated version with Payload 3.0? I downloaded the plugin from what's on GitHub and have started trying to update it to work with current Payload version but it seems there is quite a lot that needs to be changed. I figured I'd see if you had an updated version before going to far into the weeds!