Statamic-add-on

Statamic is een fantastisch CMS met een geweldige community. Het is bijzonder developer-friendly en eenvoudig uit te breiden met add-ons. Als je dit leest, weet je Statamic waarschijnlijk al te waarderen. Voor video-integratie zijn de mogelijkheden echter beperkt tot YouTube of een rechtstreekse link naar een MP4-bestand. Zelfs de eigen site van Statamic bevat opvallend genoeg een rickroll bij de demonstratie van de videomogelijkheden.

Wat doe je als je als contentmaker video serieus neemt en een geweldige video-ervaring wilt bieden zonder zelf een add-on te bouwen? Daarvoor is er de Statamic-add-on van mave.io. Hiermee koppel je je mave-account naadloos aan Statamic, upload je video’s rechtstreeks vanuit het control panel en gebruik je de mave-player op je site.

De oplossing

Wil je vooral het eindresultaat zien, spring dan gerust naar de conclusie. Ben je benieuwd hoe de add-on is gebouwd? Dan duiken we erin.

De add-on zelf is niet bijzonder ingewikkeld. Er zijn maar twee vereisten:

• Onze componentbibliotheek;
• Een bibliotheek om een JWT te genereren.

Ken je JWT nog niet, geen zorgen. JWT (JSON Web Token) is een eenvoudige webstandaard om informatie als JSON-object veilig tussen twee partijen uit te wisselen. Een ondertekening met een geheime sleutel waarborgt de integriteit van de gegevens en maakt manipulatie zichtbaar.

Wij ondertekenen het token met de API-sleutel uit je mave-account, die je hier vindt. Je hoeft alleen een JWT te genereren voor uploads, om onbevoegde uploads te voorkomen, en voor het renderen van een lijst, om de toegang tot je mave-account te beveiligen. De Statamic-add-on gebruikt daarvoor de componenten <mave-upload> en <mave-list>.

We beginnen met de integratie van het element <mave-upload> en het genereren van het attribuut token, de JWT. In het JSON-object stel je met het attribuut sub in waar de gebruiker mag uploaden. Dat kan de root van je space zijn, met de space-ID als sub, binnen een collectie, met de collectie-ID als sub, of naar een specifieke video-embed, met de embed-ID als sub. In dat laatste geval kan een nieuwe upload de bestaande video ook vervangen. Stel daarnaast een attribuut exp in: een Unix-timestamp die aangeeft wanneer het token verloopt. Als een kwaadwillende het token bemachtigt, wordt het na die tijd dus ongeldig.

Met de bibliotheek van je voorkeur genereer je een JWT met deze payload:

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

Onderteken deze payload vervolgens met je API-sleutel. Geef het token door aan de frontend — in ons geval Statamic — en gebruik het als attribuut token op het uploadelement of de lijstcomponent:

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

Het resultaat

Met wat JavaScript-magie maak je een modal waarmee je wisselt tussen een collectie met eerder geüploade items en de uploadcomponent. Dit is het resultaat:

Installatie

Voer voor de installatie de volgende opdracht uit in de root van je project:

composer require maveio/statamic-mave

Voeg vervolgens het volgende toe aan je .env-bestand: de mave-API-sleutel, de space-, collectie- of embed-ID als MAVE_SUB en eventueel een thema:

MAVE_KEY=
MAVE_SUB=
MAVE_THEME=
MAVE_UPLOAD=true

Voeg als laatste dit toe aan je Antlers-template:

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

De add-on is open source en staat op GitHub.

Conclusie

Gefeliciteerd dat je zover bent gekomen! Om de integratie van mave in je Statamic-website te vieren, bieden we je 50% korting op de eerste drie maanden. Gebruik na je registratie de code STATAMIC50 wanneer je een abonnement kiest. De kortingscode is geldig tot eind juli. We hopen dat je veel plezier hebt van de add-on. Heb je vragen, neem dan gerust contact met ons op.

Veel programmeerplezier!