Mercurial > code > home > repos > video

comparison src/VideoPage.ts @ 24:1a9a8af1aa19

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
breadcrumbs and tree view UI
author drewp@bigasterisk.com
date Mon, 17 Apr 2023 13:35:18 -0700
parents ff73b95fc72f
children f7236339097e
comparison
equal deleted inserted replaced
23:9e56e86a6814 24:1a9a8af1aa19
1 import { LitElement, css, html, unsafeCSS } from "lit"; 1 import { LitElement, css, html, unsafeCSS } from "lit";
2 import { customElement, property } from "lit/decorators.js"; 2 import { customElement, property } from "lit/decorators.js";
3 import { PagePlayer, ShakaVideoElement } from "./PagePlayer"; 3 import { PagePlayer, ShakaVideoElement } from "./PagePlayer";
4 import maincss from "./main.css?inline"; 4 import maincss from "./main.css?inline";
5 export { SlProgressBar } from "@shoelace-style/shoelace";
5 export { PagePlayer } from "./PagePlayer"; 6 export { PagePlayer } from "./PagePlayer";
6 export { VideoSection } from "./VideoSection"; 7 export { VideoSection } from "./VideoSection";
7 8
8 9
9 interface VideoFile { 10 interface VideoFile {
81 } 82 }
82 `, 83 `,
83 ]; 84 ];
84 render() { 85 render() {
85 return html` 86 return html`
86 <div id="path-segs">${this.pathSegs.map((seg) => html`<span><a href="./?${subdirQuery(seg.subdir)}">${seg.label}</a></span>`)}</div> 87 <sl-breadcrumb>
88 ${this.pathSegs.map(
89 (seg, i) =>
90 html`<sl-breadcrumb-item>
91 <a href="./?${subdirQuery(seg.subdir)}">
92 ${i == 0 ? html`<sl-icon name="house"></sl-icon>`:''}
93 ${seg.label}
94 </a></sl-breadcrumb-item>`)}
95 </sl-breadcrumb>
87 96
88 <div class="listing"> 97 <div class="listing">
89 ${this.subdirs.map((s) => html`<div class="subdir"><a href="${"./?" + subdirQuery(s.path)}">${s.label}</a></div>`)} 98 ${this.subdirs.map((s) => html`<div class="subdir"><a href="${"./?" + subdirQuery(s.path)}">${s.label}</a></div>`)}
90 ${this.videos.map( 99 ${this.videos.map(
91 (v) => html`<video-section @playVideo=${this.playVideo} thumbRelPath="${v.thumbRelPath}" title="${v.label}" manifest=${v.webRelPath}></video-section>` 100 (v) => html`<video-section @playVideo=${this.playVideo} thumbRelPath="${v.thumbRelPath}" title="${v.label}" manifest=${v.webRelPath}></video-section>`