Mux Uploader Server Component #913
Conversation
## How it works
### Defaults
If no `endpoint` is specified, will use `@mux/mux-node` to create a direct upload with the following configuration:
```ts
{
cors_origin: '*',
new_asset_settings: {
playback_policy: ['public'],
encoding_tier: 'baseline',
}
```
### How to configure
Accepts all the same params as Mux Uploader, as well as
```ts
interface MuxUploaderServerProps extends MuxUploaderProps {
clientOptions?: ClientOptions;
uploadCreateParams?: Partial<Mux.Video.Uploads.UploadCreateParams>;
uploadRequestOptions?: Partial<Mux.RequestOptions>;
}
```
`uploadCreateParams` will be deep-merged with the default options described above
## TODO items:
- [ ] get some feedback
- [ ] answer some questions 👇
- [ ] documentation
## Outstanding questions:
for those of you who know esbuild and bundlers better than I do:
- [ ] why is @mux/mux-uploader-react/rsc giving me a red squiggle in the nextjs example? why can't typescript find it?
- [ ] is it correct to external:server-only even though it's not a peer dependency?
|
@decepulis is attempting to deploy a commit to the Mux Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
What could it look like for this component (or set of them) to be able to return things like an asset ID / playback ID? |
|
Running into a huge blocker with this. Consider the following: import MuxUploader from '@mux/mux-uploader-react/rsc';
function MuxUploaderPage() {
return (
<MuxUploader onSuccess={console.log} />
);
}
export default MuxUploaderPage;However, you can't pass client functionality (in our example, Gotta think of another interface if we want this to happen... |
@mmcc btw just to answer this. Server Actions would make this really slick. Under the hood, we could implement something like this: // packages/mux-uploader-react
import 'server-only'
import MuxUploaderClient from './index'
const MuxUploaderServer = (props) => {
const upload = await mux.video.uploads.create(...);
return (
<MuxUploaderClient
endpoint={upload.url}
onSuccess={
"use server"
const assetId = await getAssetIdForUpload(upload.id)
props.onAssetId(assetId)
}
/>
)
}And it gets more exciting. I've actually got this implemented in another branch. Just gotta think through... my previous comment... |
Let's take another shot at #712...
How to use it
Defaults
If no
endpointis specified, will use@mux/mux-nodeto create a direct upload with the following configuration:How to configure
Accepts all the same params as Mux Uploader, as well as
uploadCreateParamswill be deep-merged with the default options described aboveHow it gets bundled
lemme point out some interesting flags, here:
--platform=node: in order to avoid bundling dependencies likecrypto, esbuild requires this of us. Luckily, Server Components run on the server, so, this is correct--external:server-only: the contents of this package is literally justthrow new Error('This is a server component and can't be imported in a client component')(paraphrased). If we were to bundle it, our bundle would immediately throw an error. I suspect that, in practice, server-component-compliant bundlers will know to ignore this import. Even so, shouldserver-onlybe marked as a peer dependency? 🤔--external:./index: In order for server component bundlers to leave the server stuff on the server and the client stuff on the client, we have to ship the server bundle and the client bundle separately. By markingindexas external, we're telling esbuild "don't include the client bundle in the server bundle". Instead, consumer bundlers will see this indist/rsc.mjsand resolvedist/index.mjs(ordist/rsc.cjs.jsanddist/index.cjs.jsrespectively).TODO items:
--external:server-onlyand--external:./index? This seems to work in our test Next app, so that's a good sign...@mux/mux-uploader-react/rscgiving me a red squiggle in the nextjs example? why can't typescript find it? or is that just something in my environment?Other passing thoughts
I don't re-export the types, so right now if you want those, you'll have to
import type { ... } from '@mux/mux-uploader-react'. TypeScript should pick up on that; I'm not worried