--- a/src/VideoPage.ts	Thu Dec 05 21:33:25 2024 -0800
+++ b/src/VideoPage.ts	Thu Dec 05 21:34:00 2024 -0800
@@ -6,7 +6,7 @@
 export { PagePlayer } from "./PagePlayer";
 export { VideoSection } from "./VideoSection";
 import { Routes, Router } from "@lit-labs/router";
-
+export { VBreadcrumbs } from "./VBreadcrumbs";
 interface VideoFile {
   webRelPath: string;
   webDataPath: string;
@@ -71,21 +71,12 @@
   private _router = new Router(this, [new route()], {});
 
   render() {
-    const requestedPath = this._router.params[0];
-    const segs = ["."].concat(requestedPath || "".split("/"));
-    const crumbs = [];
-    // todo: goal is to have '🏠 TOP' and every level not including current dir
-    for (let i = 0; i < segs.length; i++) {
-      const seg = segs[i];
-      const href = "../".repeat(segs.length - i - 1);
-      const label = i == 0 ? html`<sl-icon name="house"></sl-icon>` : seg;
-      console.log(href, label);
-      crumbs.push(html`<sl-breadcrumb-item><a href=${href}>${label}</a></sl-breadcrumb-item>`);
-    }
+    const requestedPath = "/" + this._router.params[0];
+
     return html`
       <header>
-        <img src="${this._router.link("/video/logo1.png")}" title="JelloBello" />
-        <sl-breadcrumb>${crumbs}</sl-breadcrumb>
+        <img src=${this._router.link("/video/logo1.png")} title="JelloBello" />
+        <v-breadcrumbs .link=${this._router.link} dirPath=${requestedPath}></v-breadcrumbs>
       </header>
       <main>${this._router.outlet()}</main>
       <footer>
@@ -180,7 +171,7 @@
   }
 
   renderSubdir(subdir: Subdir): TemplateResult {
-    return html`<div class="subdir"><a href="${this.link(subdir.path) + "/"}">${subdir.label}</a></div>`;
+    return html`<a href="${this.link(subdir.path) + "/"}"><div class="subdir">${subdir.label}</div></a>`;
   }
 
   renderVideoListing(video: VideoFile) {
@@ -200,8 +191,9 @@
       html`${this.videoListings.subdirs.map((s) => this.renderSubdir(s))}`, //
       html`${this.videoListings.videos.map((v) => this.renderVideoListing(v))}`,
     ];
+    const dirTitle = this.dirName ? html`<h2>${this.dirName.slice(0, -1)}</h2>` : html``;
     return html`
-      <h2>${this.dirName}</h2>
+      ${dirTitle}
       <div class="listing">${listings}</div>
 
       <div id="scrim" @click=${this.closePlayer}></div>