Mercurial > code > home > repos > video

comparison src/VideoPage.ts @ 4:c8a41359505c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
server provides video listing from disk
author drewp@bigasterisk.com
date Sat, 25 Mar 2023 16:01:56 -0700
parents 78c1a2983010
children 75b54be050bc
comparison
equal deleted inserted replaced
3:ee55ed10faec 4:c8a41359505c
1 import { LitElement, html } from "lit"; 1 import { LitElement, html, css } from "lit";
2 import { customElement } from "lit/decorators.js"; 2 import { customElement } from "lit/decorators.js";
3 export { VideoSection } from "./VideoSection"; 3 export { VideoSection } from "./VideoSection";
4 4
5 interface VideoFile {
6 webRelPath: string;
7 label: string;
8 }
9
5 @customElement("video-page") 10 @customElement("video-page")
6 export class VideoPage extends LitElement { 11 export class VideoPage extends LitElement {
12 videos: VideoFile[];
13 constructor() {
14 super();
15 this.videos = [];
16 this.loadVideos();
17 }
18 async loadVideos() {
19 const resp = await (await fetch("api/videos")).json();
20 this.videos = resp.videos as VideoFile[];
21 this.requestUpdate()
22 }
23 static styles=[css`
24
25 `]
26 // allow only 1 to play. embiggen like pbskids does.
7 render() { 27 render() {
8 return html` 28 return html`
9 <video-section title="tl1" manifest="/tl1.webm"></video-section> 29 <video-section title="tl1" manifest="/tl1.webm"></video-section>
10 <video-section title="Henry Sugar" manifest="/vids/henry-sugar/manifest.mpd"></video-section> 30 <video-section title="Henry Sugar" manifest="files/henry-sugar/manifest.mpd"></video-section>
11 <video-section title="Henry Sugar bloopers" manifest="/vids/henry-sugar-bloopers/manifest.mpd"></video-section> 31 <video-section title="Henry Sugar bloopers" manifest="files/henry-sugar-bloopers/manifest.mpd"></video-section>
32 ${this.videos.map((v)=>html`<video-section title="${v.label}" manifest=${v.webRelPath}></video-section>`)}
12 `; 33 `;
13 } 34 }
14 } 35 }