Sanity schema and component for media props

[alexanderflink]

As @adamsoderstrom said, it is a problem that projects each have their own implementation of media props and media input components in Sanity studio. We should create a package with a Sanity schema for media props which all projects use. It would be great to have an accompanying Sanity input component that we can re-use.

Specification

Sanity schemas

(These are pseudo typescript interfaces for illustration purposes only) These schemas should be exported as factory functions which take options (with sensible defaults) as input.

media

Is a wrapper for the different media types available.

interface Media {
  mediaType: 'image' | 'video' // this can be any of the available media types, e.g 'vimeo' etc
  ...MediaType<MediaOptions>
}

image

interface ImageMediaType<MediaOptions> extends MediaType {
  auto?: boolean // controls wether to show input for source (true) or breakpoints (false)
  alt?: string
  breakpoints?: Breakpoints<MediaOptions['breakpointKeys'], SanityImage> // breakpoint keys should be overridable using options, is used when auto == false
  source?: SanityImage // is used when auto == true
}

video

interface VideoMediaType extends MediaType {
  auto?: boolean // controls wether to show input for source (true) or breakpoints (false)
  breakpoints?: Breakpoints<Options['breakpointKeys'], SanityFile> // breakpoint keys should be overridable using options, is used when auto == false
  source?: SanityFile // is used when auto == true
}

vimeo

This is an example of an additional media type, no need to build this right away

interface VimeoMediaType extends MediaType {
  auto?: boolean // controls wether to show input for source (true) or breakpoints (false)
  breakpoints?: Breakpoints<Options['breakpointKeys'], VimeoVideo> // breakpoint keys should be overridable using options
  source?: VimeoVideo // is used when auto == true
}

options

This doesn't necessarily need to be an actual schema, but rather a configuration object that is passed when creating the schemas

interface MediaOptions {
  breakpointKeys: string[] // this controls which breakpoint keys are available and used. Should default to MUI breakpoints (xs, sm, md, lg, xl)
}

Sanity GROQ queries

There should be three queries included in the package: imageQuery, videoQuery and mediaQuery, where imageQuery and videoQuery are responsible for returning component, alt, source and breakpoints. mediaQuery is the wrapper which simply returns the data of whatever mediaType query is used.

Transformer functions

There should be three corresponding transformer functions for the two queries: transformSanityImage, transformSanityVideo and transformSanityMedia.

transformSanityImage and transformSanityVideo are responsible for transforming the results from imageQuery and videoQuery into a useable mediaProps object that can be sent to the oui Media component.

transformSanityMedia is responsible for transforming the result of mediaQuery into a useable mediaProps object that can be sent to the oui Media component. This transformer uses transformSanityImage internally for transforming the individual images.

[maeertin]

Might now even be a difficult thing to accomplish as I see it. As stated we already have a few examples of a working Sanity media module, now we only need to pick the best parts and make it into a first module within a new accelerator package. Suggestions to what name the package should have? is @noaignite/sanity enough or should it have a longer and more detailed name?

[alexanderflink]

I thought about this and I think @noaignite/sanity is a good name. We can then package the schemas and components together.

[alexanderflink]

Some of the media components that are currently "in the wild":

https://github.com/noaignite/create-ignite-cms/tree/main/src/objects/ResponsiveMedia https://github.com/noaignite/fidelio/blob/main/sanity/src/schemas/objects/media.js https://github.com/noaignite/cake/blob/main/sanity/src/schemas/objects/media.js

[alexanderflink]

@janmysiak Could you create a draft PR with the implementation in A days march?

[adamsoderstrom]

Some tasks for the Sanity component.

A developer should be able to:

• Specify if the field is required.
• Specify if a subfield is required.
• Which media types that an editor should be able to select from (img, picture, video, etc.)
• Extend media types(?) - Such as Vimeo.