Mercurial > code > home > repos > video

comparison src/VideoPage.ts @ 5:75b54be050bc

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
show one subdir of archive at once, with folders and parents-breadcrumbs
author drewp@bigasterisk.com
date Thu, 30 Mar 2023 20:39:40 -0700
parents c8a41359505c
children ccfea3625cf6
comparison
equal deleted inserted replaced
4:c8a41359505c 5:75b54be050bc
1 import { LitElement, html, css } from "lit"; 1 import { LitElement, html, css } from "lit";
2 import { customElement } from "lit/decorators.js"; 2 import { customElement, property } from "lit/decorators.js";
3 export { VideoSection } from "./VideoSection"; 3 export { VideoSection } from "./VideoSection";
4 4
5 interface VideoFile { 5 interface VideoFile {
6 webRelPath: string; 6 webRelPath: string;
7 label: string; 7 label: string;
8 } 8 }
9 interface Subdir {
10 label: string;
11 path: string;
12 }
13
14 function subdirQuery(subdir: string): string {
15 return "subdir=" + encodeURIComponent(subdir);
16 }
9 17
10 @customElement("video-page") 18 @customElement("video-page")
11 export class VideoPage extends LitElement { 19 export class VideoPage extends LitElement {
12 videos: VideoFile[]; 20 videos: VideoFile[];
21 subdirs: Subdir[];
22 @property() pathSegs: { label: string; subdir: string }[];
13 constructor() { 23 constructor() {
14 super(); 24 super();
15 this.videos = []; 25 this.videos = [];
26 this.subdirs = [];
27 this.pathSegs = [];
16 this.loadVideos(); 28 this.loadVideos();
17 } 29 }
30 updatePathSegs(subdir: string) {
31 this.pathSegs = [{ label: "TOP", subdir: "/" }];
32 if (subdir != "/") {
33 let acc = "";
34 const segs = subdir.split("/");
35 segs.splice(0, 1); // the root
36 for (let seg of segs) {
37 acc += "/" + seg;
38 this.pathSegs.push({ label: seg, subdir: acc });
39 }
40 }
41 }
18 async loadVideos() { 42 async loadVideos() {
19 const resp = await (await fetch("api/videos")).json(); 43 const u = new URL(location.href);
44 const subdir = u.searchParams.get("subdir") || "/";
45 this.updatePathSegs(subdir);
46 const resp = await (await fetch("api/videos?" + subdirQuery(subdir))).json();
20 this.videos = resp.videos as VideoFile[]; 47 this.videos = resp.videos as VideoFile[];
21 this.requestUpdate() 48 this.subdirs = resp.subdirs as Subdir[];
49 this.requestUpdate();
22 } 50 }
23 static styles=[css` 51 static styles = [
24 52 css`
25 `] 53 a {
54 color: white;
55 font-size: 20px;
56 }
57 #path-segs > span {
58 color: white;
59 padding: 11px;
60 display: inline-block;
61 background: #4ea1bd21;
62 margin: 5px;
63 border-top-left-radius: 29px;
64 }
65 #path-segs > span:after {
66 content: " >";
67 font-size: 33px;
68 vertical-align: middle;
69 color: gray;
70 }
71 .subdir {
72 vertical-align: top;
73 color: white;
74 padding: 11px;
75 display: inline-block;
76 width: 300px;
77 background: #4ea1bd21;
78 margin: 5px;
79 border-bottom-right-radius: 29px;
80 }
81 `,
82 ];
26 // allow only 1 to play. embiggen like pbskids does. 83 // allow only 1 to play. embiggen like pbskids does.
27 render() { 84 render() {
28 return html` 85 return html`
29 <video-section title="tl1" manifest="/tl1.webm"></video-section> 86 <div id="path-segs">${this.pathSegs.map((seg) => html`<span><a href="./?${subdirQuery(seg.subdir)}">${seg.label}</a></span>`)}</div>
30 <video-section title="Henry Sugar" manifest="files/henry-sugar/manifest.mpd"></video-section> 87
31 <video-section title="Henry Sugar bloopers" manifest="files/henry-sugar-bloopers/manifest.mpd"></video-section> 88 ${this.subdirs.map((s) => html`<div class="subdir"><a href="${"./?" + subdirQuery(s.path)}">${s.label}</a></div>`)}
32 ${this.videos.map((v)=>html`<video-section title="${v.label}" manifest=${v.webRelPath}></video-section>`)} 89 ${this.videos.map((v) => html`<video-section title="${v.label}" manifest=${v.webRelPath}></video-section>`)}
33 `; 90 `;
34 } 91 }
35 } 92 }