Mercurial > code > home > repos > video

annotate 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
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
1 import { LitElement, html, css } from "lit";
2
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
2 import { customElement } from "lit/decorators.js";
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
3 export { VideoSection } from "./VideoSection";
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
4
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
5 interface VideoFile {
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
6 webRelPath: string;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
7 label: string;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
8 }
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
9
2
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
10 @customElement("video-page")
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
11 export class VideoPage extends LitElement {
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
12 videos: VideoFile[];
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
13 constructor() {
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
14 super();
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
15 this.videos = [];
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
16 this.loadVideos();
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
17 }
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
18 async loadVideos() {
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
19 const resp = await (await fetch("api/videos")).json();
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
20 this.videos = resp.videos as VideoFile[];
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
21 this.requestUpdate()
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
22 }
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
23 static styles=[css`
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
24
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
25 `]
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
26 // allow only 1 to play. embiggen like pbskids does.
2
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
27 render() {
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
28 return html`
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
29 <video-section title="tl1" manifest="/tl1.webm"></video-section>
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
30 <video-section title="Henry Sugar" manifest="files/henry-sugar/manifest.mpd"></video-section>
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
31 <video-section title="Henry Sugar bloopers" manifest="files/henry-sugar-bloopers/manifest.mpd"></video-section>
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
32 ${this.videos.map((v)=>html`<video-section title="${v.label}" manifest=${v.webRelPath}></video-section>`)}
2
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
33 `;
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
34 }
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
35 }