components

List Component

The List component is designed to present an array of uploaded videos. It requires a token for authentication purposes. Specifying a collection ID will filter the content to display only videos within that collection. In the absence of a specific collection ID, the component will show all videos within the space, excluding those within collections or folders.

Authentication is facilitated through a JWT (JSON Web Token), generated using the API key provided by Mave. The sub parameter in the JWT corresponds to the collection ID, which can be retrieved from the Mave management interface or through the 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
);

Setting an expiration time (exp) for the token is recommended to safeguard against misuse, although the content will remain accessible indefinitely until the API key is revoked.

List Component Structure

The mave-list component offers a structured approach to displaying videos, utilizing specific name attributes and slots for customization (or interchangeable with <template>, although using this approach would not work with VueJS). Below is a simplified example highlighting the structure without CSS classes for styling:

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

This structure ensures flexibility and control over the layout and functionality of the list component. By using the name attributes and designated slots, developers can precisely define the look and behavior of each part of the list to meet specific design and interaction requirements.

The list component also triggers custom events for certain actions. These events can be captured and handled to implement additional functionality or interactions. The available events are:

For example, when someone clicks on an embed image (like here below), you can capture the event like so:

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"
  // }
});

Preview

This example code (we use tailwind css classes):

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

results in: