componenten

Lijstcomponent

De List-component is ontworpen om een reeks geüploade video’s weer te geven. Voor authenticatie is een token vereist. Als je een collection-ID opgeeft, wordt de content gefilterd en worden alleen video’s uit die collectie getoond. Zonder een specifieke collectie-ID toont de component alle video’s in de space, met uitzondering van video’s in collecties of mappen.

Authenticatie verloopt via een JWT (JSON Web Token), die je genereert met de API key van Mave. De parameter sub in de JWT komt overeen met de collectie-ID. Je vindt deze ID in de beheeromgeving van Mave of via de API.

// Server-side token generation example
const jwt = require("jsonwebtoken");

const token = jwt.sign(
  {
    sub: "", // Collection ID
    exp: 1680795697, // Token expiration timestamp
  },
  "" // Your API key
);

We raden aan een vervaltijd (exp) voor het token in te stellen om misbruik te voorkomen. De content blijft anders onbeperkt toegankelijk totdat de API-sleutel wordt ingetrokken.

Structuur van de lijstcomponent

De mave-list-component biedt een gestructureerde manier om video’s weer te geven. Je gebruikt specifieke name-attributen en slots om de component aan te passen. Je kunt hiervoor ook <template> gebruiken, maar die aanpak werkt niet met VueJS. Hieronder zie je een vereenvoudigd voorbeeld van de structuur, zonder CSS-klassen voor de opmaak:

<mave-list order="newest" token="token">
  <!-- Root container -->
  <div name="mave-list-root">
    <div slot="root-link">
      <!-- Placeholder or content for the root element -->
    </div>
  </div>

  <!-- Folder element within the list -->
  <div name="mave-list-folder">
    <div slot="folder-link">
      <!-- Visual indicator for the folder, such as a title or icon -->
      <div slot="folder-title">
        <!-- Folder title content goes here -->
      </div>
      <div slot="folder-count">
        <!-- Display for the number of items within the folder -->
      </div>
    </div>
  </div>

  <!-- Individual list item -->
  <div name="mave-list-item">
    <div slot="item-title">
      <!-- Title content for the item -->
    </div>
    <div slot="item-position">
      <!-- Get the number position of the item -->
    </div>
    <div slot="item-duration">
      <!-- Duration of the item -->
    </div>
    <mave-img></mave-img>
  </div>
</mave-list>

Deze structuur geeft je flexibiliteit en controle over de opmaak en functionaliteit van de lijstcomponent. Met de name-attributen en toegewezen slots kun je het uiterlijk en gedrag van elk onderdeel van de lijst precies afstemmen op je ontwerp- en interactievereisten.

De lijstcomponent activeert ook aangepaste events voor bepaalde acties. Je kunt deze events opvangen en afhandelen om extra functionaliteit of interacties te implementeren. De beschikbare events zijn:

Wanneer iemand bijvoorbeeld op een embedafbeelding klikt, zoals hieronder, kun je het event als volgt opvangen:

const list = document.querySelector("mave-list");
list.addEventListener("mave:user_click", (e) => {
  console.log("user_click", e.detail);
  // {
  //   "action": "show_embed",
  //   "embedId": "ubg88tWBmDfMrEn",
  //   "position": 1,
  //   "eventType": "user_click"
  // }
});

Voorbeeld

Deze voorbeeldcode gebruikt Tailwind CSS-klassen:

<mave-list
  token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ1Ymc1MDVkdTUzY2dvSkEifQ.4ckEUBuvz_Wpf92KKng824oEaPPfUl-TctdCGy5HBL0"
  class="my-8 w-full grid grid-cols-2 gap-8"
>
  <template>
    <div class="aspect-video rounded-2xl bg-cover overflow-hidden">
      <mave-img></mave-img>
    </div>
  </template>
</mave-list>

Dit resulteert in: