import { LitElement, html, css } from "lit";
import { customElement } from "lit/decorators.js";
export { VideoSection } from "./VideoSection";

interface VideoFile {
  webRelPath: string;
  label: string;
}

@customElement("video-page")
export class VideoPage extends LitElement {
  videos: VideoFile[];
  constructor() {
    super();
    this.videos = [];
    this.loadVideos();
  }
  async loadVideos() {
    const resp = await (await fetch("api/videos")).json();
    this.videos = resp.videos as VideoFile[];
    this.requestUpdate()
  }
  static styles=[css`

  `]
  // allow only 1 to play. embiggen like pbskids does.
  render() {
    return html`
      <video-section title="tl1" manifest="/tl1.webm"></video-section>
      <video-section title="Henry Sugar" manifest="files/henry-sugar/manifest.mpd"></video-section>
      <video-section title="Henry Sugar bloopers" manifest="files/henry-sugar-bloopers/manifest.mpd"></video-section>
      ${this.videos.map((v)=>html`<video-section title="${v.label}" manifest=${v.webRelPath}></video-section>`)}
    `;
  }
}