Statamic is a fantastic CMS with a wonderful community. It’s super developer-friendly and easily extendable with addons. If you’re reading this, you probably already appreciate Statamic. However, when it comes to integrating video, the options are limited to either using YouTube or linking directly to an MP4 file. Interestingly, even Statamic’s own site includes a rick-roll when showcasing their video capabilities.

So, what do you do if you’re a content creator who takes video seriously and wants to offer a great video experience without creating your own addon? We’ve got you covered with the mave.io Statamic addon. This addon allows you to seamlessly integrate your mave account with Statamic, upload videos directly within the control panel, and use mave player on your site.

The solution

If you’re more interested in the end result, feel free to skip to the conclusion of this article. But if you’re curious about how it’s built, let’s dive in.

The addon itself isn’t particularly complex, there are just two requirements:

• Our component library;
• And a library to generate a JWT.

If you’re not familiar with JWT, don’t worry. JWT (JSON Web Token) is a simple web standard for securely transmitting information between two parties as a JSON object. It ensures data integrity by signing it with a secret key, making sure the information hasn’t been tampered with.

In our case, we sign it with the API key generated in your mave account, which you can find here. The only time you need to generate a JWT is for uploading, to prevent unauthorized uploads, and for rendering a list, to secure access to your mave account. Both <mave-upload> and <mave-list> are components used in the Statamic addon.

Let’s start with integrating the <mave-upload> element and generating the token attribute (the JWT). Depending on where you want the user to upload, you set the sub attribute within the JSON object. It could be the root of your space (using the space ID as sub), inside a collection (using the collection ID as sub), or for a specific video embed (using the embed ID as sub, which will also allow replacement on re-upload). You should also set an exp attribute, which specifies the token’s expiration time as a Unix timestamp. This ensures that if someone malicious obtains the token, it will become invalid after the set time.

Using your preferred library, you can generate a JWT with the payload:

{
  "sub": "XD9HPRtkDDmENLeVy9ripU", // space, collection or embed can be specified
  "exp": 1704112620 // until when the user can upload
}

Then sign this payload with your API key. Provide this token to the frontend (in our case, Statamic) and apply it as the token attribute on the upload element (or list component):

<mave-upload token="eyJxxx"></mave-upload>

The result

With some JavaScript magic, you can create a modal that switches between a collection (already uploaded items) and the upload component. The result is:

Installation

To install, you simply run the following command in your project root:

composer require maveio/statamic-mave

Add the following to your .env file: the mave API key, the space, collection, or embed ID as MAVE_SUB, and optionally a theme:

MAVE_KEY=
MAVE_SUB=
MAVE_THEME=
MAVE_UPLOAD=true

As as the final step add this to your Antlers template:

<script
  type="module"
  src="https://cdn.video-dns.com/npm/@maveio/components/+esm"
></script>
<mave-player embed="{{ mave_field }}"></mave-player>

The addon we’ve created is open-source and can be found on Github.

Conclusion

Congratulations on getting this far! To celebrate your integration of mave into your Statamic website, we’d like to offer you a 50% discount on your first three months. Just use the code STATAMIC50 when choosing a plan once you’ve signed up (coupon valid until the end of July). We hope you enjoy the addon, and if you have any questions, please don’t hesitate to reach out to us.

Happy coding!