feat: configure mime/type option

[isaac-martin]

Improve Audio File Handling and MIME Type Validation

Currently, the plugin's handling of audio files isn't optimal despite Mux supporting audio uploads. This was also reported in issue #382.

You could always upload audio types in this plugin (mainly due to a bug that was allowing it via drag and drop) but this makes it more configurable. It appears that this maybe used to be supported due to some history i found, but appears to be removed at some point.
There is still work to be done to make audio a first class citizen, but this is a good start.

Heres a screen recording of the states working.

Attached is the code for the schema including the various options, and a screenshot of how it would look

import { defineField, defineType } from "sanity";

export default defineType({
  name: "muxTest",
  title: "Mux Files",
  type: "document",
  fields: [
    defineField({
      name: "audioFile",
      title: "Audio File",
      type: "mux.video",
      options: {
        acceptedMimeTypes: ["audio/*"],
      },
    }),
    defineField({
      name: "videoFile",
      title: "Video File",
      type: "mux.video",
      options: {
        acceptedMimeTypes: ["video/*"],
      },
    }),
    defineField({
      name: "either",
      title: "Either File",
      type: "mux.video",
    }),
  ],
});

Key Changes

• Allow acceptedMimeTypes to be configurable at a field and a config level
• Block files from being uploaded if there is an error in the mime type
• Fix bug in drag and drop that would allow any file type to be uploaded
• Do not attempt to upload to Mux if the file type is invalid.
• Updated documentation, to show examples of overwriting config on a per field level.

Was unsure if we should set the default to audio / video or just video. Technically right now you can do both, due to the broken drag and drop input, so i set both as the default for backwards compatibility.

Note: some browsers when using the audio/* will allow an mp4 to be uploaded as mimeType is just a hint, so we block in the upload and show a toast.

[vercel]

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

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
sanity-plugin-mux-input-codesandbox	⬜️ Ignored (Inspect)	Visit Preview		Jan 22, 2025 0:39am

[vercel]

@isaac-martin is attempting to deploy a commit to the Sanity Sandbox Team on Vercel.

A member of the Team first needs to authorize it.

[isaac-martin]

@stipsan or @hdoro i think you'd be best to review this considering your contributions to this plugin in the past

[decepulis]

encoding_tier has been renamed to video_quality (and smart -> plus and baseline -> basic)

I don't think the Sanity plugin supports video_quality yet, so this isn't an actionable comment. Just making a note that, at some point, we'll need to update the Sanity plugin to reflect this.

[R-Delfino95]

I got some errors when trying to build the plugin locally but by making these changes it worked as in the recording

[R-Delfino95]

After running the linter, I noticed that the config prop is not being used in the UploadPlaceholder component. It seems unnecessary, so we should remove it.
Let me know if there's any reason to keep it that I might have missed

[R-Delfino95]

Suggested change

config={props.config}

[R-Delfino95]

Suggested change

config: PluginConfig