Uploading and inserting a video into the Portable Text editor

[sebpowell]

I'd like to add video upload functionality to Sanity studio that allows me to embed a video into the Portable Text editor in the same way images can be added.

As far as I can see, Sanity itself does not support video upload (unless I'm missing something) – instead, it needs to be handled through, for example, Mux (https://www.sanity.io/plugins/sanity-plugin-mux-input).

I'm just wondering if this is the best / right way to go about implementing this feature? Any guidance would be greatly appreciated. Thank you i advance.

[rammohanpatel]

Video Upload & View(Frontend) Functionality to Sanity Studio with Mux Integration In Portable Text

If you're looking to enhance your Sanity Studio by enabling video upload functionality and seamlessly embedding videos into your Portable Text editor, you're on the right track. Sanity doesn't inherently support video uploads out of the box, but integrating with Mux can fill that gap effectively.

Schema for adding video in portable text
`const post = {
title: 'Post',
name: 'post',
type: 'document',
fields: [
{
name: 'title',
title: 'Title',
type: 'string',
validation: Rule => Rule.required(), // Mark title as required
},
{
name: 'body',
title: 'Body',
type: 'array',
of: [
{
type: 'block',
},
{
type: 'image',
},
{
type: 'file',
},
{
type: 'mux.video',
}
],
validation: Rule => Rule.required(), // Mark body as required
},
};

export default post;

`
Fetching post on frontend using sanity client & displaying the video on frontend

`import MuxPlayer from '@mux/mux-player-react';
import {client} from 'path-to-client-file'
import {useState} from 'react'

const [blog, setBlog] = useState(null);
const fetchBlog = async () => {
const query = *[_type == 'post' && slug.current == $slug][0] { title, body[]{ ..., _type == 'mux.video' => { "playbackId": asset->playbackId } }, };
const data = await client.fetch(query);
setBlog(data);
};`

  const MuxVideoComponent = ({ value }) => {
    if (!value.playbackId) {
      return <p>No video available</p>;
    }
  
    return (
      <MuxPlayer
        autoPlay
        loop
        muted
        playbackId={value.playbackId}
        metadata={{ video_title: value.title || 'Video' }}
        controls
        style={{ width: '100%', height: 'auto' }}
      />
    );
  };
  
  
  const myPortableTextComponents = {
    types: {
       'mux.video': MuxVideoComponent,
    },  
  };
         
  <PortableText value={blog.body} components={myPortableTextComponents} />

`
By following the steps outlined above, you can enhance your content management workflow with the ability to manage videos alongside other media assets. If you have any questions or need further assistance, feel free to reach out to the Mux and Sanity communities for support.

Happy video uploading! 🎥🚀