components

List component

To provide an overview of uploaded videos, you can utilize the list component. Similar to the upload component, you will need a token for authentication. When you provide the component with a collection ID, it will display only the videos within that specific collection. Otherwise, it will display the videos within the space, excluding the contents of collections or folders.

The token required is a generated JWT (JSON Web Token) using the API key provided by mave. While the following example demonstrates the usage in a node.js environment, JWT is widely supported across various languages and frameworks.

The sub parameter represents your the collection id, which can be found underneath the title in manage or through the API.

// server
const jwt = require("jsonwebtoken");

const token = jwt.sign(
  {
    sub: "XD9HPRtkDDmENLeVy9ripU", // collection id
    exp: 1680795697, // until this key is valid to view contents
  },
  "SHJmNHhXNnFublZXajNCNllYUmhoTTpUVDRqZ3ZqYWJtOEtVbmNFb2h2d1RY" // API key
);

Allowing to view a list without an exp means this content will always be available (until you revoke your API key). We highly recommend using an appropriate exp to prevent abuse.

Within the list, there are several elements you can display. We utilize default web component slots, such as slot="item-title" placed within the <template> tags, which will consistently show the title of each item.

By including <mave-img>, <mave-clip>, or <mave-player> within the template, the list component will generate the list for you, incorporating the specified element accordingly.

<mave-list token="<token>">
  <template>
    <div slot="item-title"></div>
    <mave-img></mave-img>
  </template>
</mave-list>

Preview