--- a/src/VideoPage.ts	Mon Mar 20 20:50:33 2023 -0700
+++ b/src/VideoPage.ts	Sat Mar 25 16:01:56 2023 -0700
@@ -1,14 +1,35 @@
-import { LitElement, html } from "lit";
+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="/vids/henry-sugar/manifest.mpd"></video-section>
-      <video-section title="Henry Sugar bloopers" manifest="/vids/henry-sugar-bloopers/manifest.mpd"></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>`)}
     `;
   }
 }