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. Below is a simplified example highlighting the structure without CSS classes for styling:

<mave-list 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>
        <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 (root-link, folder-link, folder-title, folder-count, and item-title), developers can precisely define the look and behavior of each part of the list to meet specific design and interaction requirements.

Preview