Komponenten

Listenkomponente

Die Listenkomponente dient zur Darstellung einer Reihe hochgeladener Videos. Zur Authentifizierung ist ein Token erforderlich. Durch Angabe einer collection-ID wird der Inhalt so gefiltert, dass nur Videos innerhalb dieser Sammlung angezeigt werden. Wenn keine bestimmte Sammlungs-ID vorhanden ist, zeigt die Komponente alle Videos im Bereich an, mit Ausnahme derjenigen in Sammlungen oder Ordnern.

Die Authentifizierung wird durch ein JWT (JSON Web Token) erleichtert, das mithilfe des von Mave bereitgestellten API key generiert wird. Der Parameter sub im JWT entspricht der Sammlungs-ID, die von der Mave-Verwaltungsschnittstelle oder über die API abgerufen werden kann.

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

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

Zum Schutz vor Missbrauch wird empfohlen, eine Ablaufzeit (exp) für das Token festzulegen. Der Inhalt bleibt jedoch unbegrenzt zugänglich, bis der API-Schlüssel widerrufen wird.

Komponentenstruktur auflisten

Die mave-list-Komponente bietet einen strukturierten Ansatz zur Anzeige von Videos und nutzt spezifische name-Attribute und -Slots zur Anpassung (oder ist austauschbar mit <template>, obwohl die Verwendung dieses Ansatzes mit VueJS nicht funktionieren würde). Nachfolgend finden Sie ein vereinfachtes Beispiel, das die Struktur ohne CSS-Klassen für das Styling hervorhebt:

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

Diese Struktur gewährleistet Flexibilität und Kontrolle über das Layout und die Funktionalität der Listenkomponente. Durch die Verwendung der name-Attribute und designierten Slots können Entwickler das Aussehen und Verhalten jedes Teils der Liste präzise definieren, um spezifische Design- und Interaktionsanforderungen zu erfüllen.

Eigentum	Beschreibung
token	Dies sollte ein mit dem API-Schlüssel signiertes JWT sein und ein Sub enthalten.
order	Nicht erforderlich, aber der Standardwert ist `newest`. Sie können jedoch `oldest` oder `az` oder `za` angeben.

Die Listenkomponente löst auch benutzerdefinierte Ereignisse für bestimmte Aktionen aus. Diese Ereignisse können erfasst und verarbeitet werden, um zusätzliche Funktionen oder Interaktionen zu implementieren. Die verfügbaren Veranstaltungen sind:

Veranstaltung	Beschreibung
mave:user_click	Gibt Ihnen einen `action` im Detail (kann `show_embed`, `show_collection`, `back` sein).
mave:*	Spezielles Globbing-Ereignis zur Erfassung aller Ereignisse von Mave.

Wenn beispielsweise jemand auf ein eingebettetes Bild klickt (wie hier unten), können Sie das Ereignis wie folgt erfassen:

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

Vorschau

Dieser Beispielcode (wir verwenden 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>

ergibt: