Mercurial > code > home > repos > video

comparison src/VideoPage.ts @ 42:1d2c65d260d1

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
factor out breadcrumbs
author drewp@bigasterisk.com
date Thu, 05 Dec 2024 21:34:00 -0800
parents 44bd161e4779
children df51269bcef4
comparison
equal deleted inserted replaced
41:44bd161e4779 42:1d2c65d260d1
4 import maincss from "./main.css?inline"; 4 import maincss from "./main.css?inline";
5 export { SlProgressBar } from "@shoelace-style/shoelace"; 5 export { SlProgressBar } from "@shoelace-style/shoelace";
6 export { PagePlayer } from "./PagePlayer"; 6 export { PagePlayer } from "./PagePlayer";
7 export { VideoSection } from "./VideoSection"; 7 export { VideoSection } from "./VideoSection";
8 import { Routes, Router } from "@lit-labs/router"; 8 import { Routes, Router } from "@lit-labs/router";
9 9 export { VBreadcrumbs } from "./VBreadcrumbs";
10 interface VideoFile { 10 interface VideoFile {
11 webRelPath: string; 11 webRelPath: string;
12 webDataPath: string; 12 webDataPath: string;
13 label: string; 13 label: string;
14 } 14 }
69 export class VideoPage extends LitElement { 69 export class VideoPage extends LitElement {
70 static styles = [unsafeCSS(maincss)]; 70 static styles = [unsafeCSS(maincss)];
71 private _router = new Router(this, [new route()], {}); 71 private _router = new Router(this, [new route()], {});
72 72
73 render() { 73 render() {
74 const requestedPath = this._router.params[0]; 74 const requestedPath = "/" + this._router.params[0];
75 const segs = ["."].concat(requestedPath || "".split("/")); 75
76 const crumbs = [];
77 // todo: goal is to have '🏠 TOP' and every level not including current dir
78 for (let i = 0; i < segs.length; i++) {
79 const seg = segs[i];
80 const href = "../".repeat(segs.length - i - 1);
81 const label = i == 0 ? html`<sl-icon name="house"></sl-icon>` : seg;
82 console.log(href, label);
83 crumbs.push(html`<sl-breadcrumb-item><a href=${href}>${label}</a></sl-breadcrumb-item>`);
84 }
85 return html` 76 return html`
86 <header> 77 <header>
87 <img src="${this._router.link("/video/logo1.png")}" title="JelloBello" /> 78 <img src=${this._router.link("/video/logo1.png")} title="JelloBello" />
88 <sl-breadcrumb>${crumbs}</sl-breadcrumb> 79 <v-breadcrumbs .link=${this._router.link} dirPath=${requestedPath}></v-breadcrumbs>
89 </header> 80 </header>
90 <main>${this._router.outlet()}</main> 81 <main>${this._router.outlet()}</main>
91 <footer> 82 <footer>
92 <bigast-loginbar></bigast-loginbar> 83 <bigast-loginbar></bigast-loginbar>
93 <span><a href="ingest/">Add new videos...</a></span> 84 <span><a href="ingest/">Add new videos...</a></span>
178 thumbSrc(v: VideoFile) { 169 thumbSrc(v: VideoFile) {
179 return "/video/api/thumbnail?webRelPath=" + encodeURIComponent(v.webRelPath); 170 return "/video/api/thumbnail?webRelPath=" + encodeURIComponent(v.webRelPath);
180 } 171 }
181 172
182 renderSubdir(subdir: Subdir): TemplateResult { 173 renderSubdir(subdir: Subdir): TemplateResult {
183 return html`<div class="subdir"><a href="${this.link(subdir.path) + "/"}">${subdir.label}</a></div>`; 174 return html`<a href="${this.link(subdir.path) + "/"}"><div class="subdir">${subdir.label}</div></a>`;
184 } 175 }
185 176
186 renderVideoListing(video: VideoFile) { 177 renderVideoListing(video: VideoFile) {
187 return html`<video-section 178 return html`<video-section
188 @playVideo=${this.playVideo} 179 @playVideo=${this.playVideo}
198 } 189 }
199 const listings = [ 190 const listings = [
200 html`${this.videoListings.subdirs.map((s) => this.renderSubdir(s))}`, // 191 html`${this.videoListings.subdirs.map((s) => this.renderSubdir(s))}`, //
201 html`${this.videoListings.videos.map((v) => this.renderVideoListing(v))}`, 192 html`${this.videoListings.videos.map((v) => this.renderVideoListing(v))}`,
202 ]; 193 ];
194 const dirTitle = this.dirName ? html`<h2>${this.dirName.slice(0, -1)}</h2>` : html``;
203 return html` 195 return html`
204 <h2>${this.dirName}</h2> 196 ${dirTitle}
205 <div class="listing">${listings}</div> 197 <div class="listing">${listings}</div>
206 198
207 <div id="scrim" @click=${this.closePlayer}></div> 199 <div id="scrim" @click=${this.closePlayer}></div>
208 <page-player manifest=""></page-player> 200 <page-player manifest=""></page-player>
209 `; 201 `;