# Statamic addon

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](https://statamic.com/). 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.

↳ rickrolling](https://www.youtube.com/watch?v=dQw4w9WgXcQ)

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](https://github.com/maveio/components?tab=readme-ov-file#get-started);
- And [a library](https://jwt.io/libraries) 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](https://dash.mave.io/settings/developer). 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:

subtitles

PlayPause

PlayPause

media loading

en0:00

1x

Playback rate

Captions

audio tracks

Settings

MuteUnmute

Enter fullscreen modeExit fullscreen mode

## 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](https://dash.mave.io/settings/developer), 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.

mave-statamic

maveio/mave-statamic on
[GitHub](https://github.com/maveio/mave-statamic)

## 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!