diff src/VideoPage.ts @ 46:882d0bb0f801

clean up; quiet logs; factor out PATH_PREFIX
author drewp@bigasterisk.com
date Fri, 06 Dec 2024 01:16:54 -0800
parents df51269bcef4
children c2c51aae3e31
line wrap: on
line diff
--- a/src/VideoPage.ts	Fri Dec 06 01:02:33 2024 -0800
+++ b/src/VideoPage.ts	Fri Dec 06 01:16:54 2024 -0800
@@ -30,15 +30,16 @@
 function subdirQuery(subdir: string): string {
   return "subdir=" + encodeURIComponent(subdir);
 }
+const PATH_PREFIX = "/video";
+let routerShared: Router;
 
 class route {
-  path = "/video/*";
+  path = PATH_PREFIX + "/*";
   pageData: PageData | null = null;
 
   async enter(params: { [key: string]: string | undefined }): Promise<boolean> {
     const webRelPath = "/" + params[0]!; // could be /a/dir/ or /a/video
-    console.log("enter", webRelPath);
-    const resp = await fetch("/video/api/videos?" + subdirQuery(webRelPath));
+    const resp = await fetch(PATH_PREFIX + "/api/videos?" + subdirQuery(webRelPath));
     if (resp.status == 404) {
       return false;
     }
@@ -49,7 +50,6 @@
   }
 
   render(p: { [key: string]: string | undefined }) {
-    console.log("render", this.pageData);
     return html`<video-page2 .pageData=${this.pageData}></video-page2>`;
   }
 }
@@ -61,20 +61,18 @@
 
   constructor() {
     super();
-    window.rr = this._router;
+    routerShared = this._router;
   }
 
   render() {
     const pd = (this._router.routes[0] as route).pageData;
     if (!pd) {
-      console.log("no page data", this._router.routes);
       return html`loading...`;
       throw new Error("no page data");
     }
-    console.log("yes page data", pd);
     return html`
       <header>
-        <img src="/video/logo1.png" title="JelloBello" />
+        <img src="${PATH_PREFIX}/logo1.png" title="JelloBello" />
         <v-breadcrumbs dirPath=${pd.webDirRelPath}></v-breadcrumbs>
       </header>
       <main>${this._router.outlet()}</main>
@@ -89,6 +87,7 @@
 @customElement("video-page2")
 export class VideoPage2 extends LitElement {
   @property() pageData?: PageData;
+  @queryAsync("page-player") pagePlayer!: Promise<PagePlayer>;
 
   protected firstUpdated(_changedProperties: PropertyValues): void {
     document.addEventListener("keydown", (e) => {
@@ -101,8 +100,6 @@
   async connectedCallback() {
     super.connectedCallback();
     if (this.pageData?.autoplay) {
-      //this.playVideo({ detail: { manifest: this.pageData.autoplay.webDataPath } } as CustomEvent);
-      console.log("we're a player page now", this.pageData.autoplay);
       this.startPlayer(this.pageData.autoplay);
       // this might not autoplay
     } else {
@@ -115,10 +112,9 @@
       if (this.pageData?.autoplay) {
         this.startPlayer(this.pageData.autoplay);
       } else {
-         this.closePlayer();
+        this.closePlayer();
       }
     }
-    console.log("updated", this.pageData?.autoplay);
   }
 
   static styles = [
@@ -174,11 +170,11 @@
   ];
 
   thumbSrc(vf: VideoFile) {
-    return "/video/api/thumbnail?webRelPath=" + encodeURIComponent(vf.webRelPath);
+    return PATH_PREFIX + "/api/thumbnail?webRelPath=" + encodeURIComponent(vf.webRelPath);
   }
 
   renderSubdir(subdir: Subdir): TemplateResult {
-    return html`<a href="/video${subdir.path}"><div class="subdir">${subdir.label}</div></a>`;
+    return html`<a href="${PATH_PREFIX}${subdir.path}"><div class="subdir">${subdir.label}</div></a>`;
   }
 
   renderVideoListing(video: VideoFile) {
@@ -187,7 +183,7 @@
       webRelPath=${video.webRelPath}
       thumbRelPath=${this.thumbSrc(video)}
       title="${video.label}"
-      manifest="/video/files${video.webDataPath}"
+      manifest="${PATH_PREFIX}/files${video.webDataPath}"
     ></video-section>`;
   }
 
@@ -212,41 +208,42 @@
   escapeALittle(fileUri: string): string {
     return fileUri.replace("#", encodeURIComponent("#"));
   }
-  @queryAsync("page-player") pagePlayer: Promise<PagePlayer>;
 
   async gotoVideoPlayerPage(ev: CustomEvent) {
     const player = await this.pagePlayer;
-    console.log("playing", player, ev.detail.manifest, ev.detail.webRelPath);
-    this.goto("/video" + ev.detail.webRelPath);
+    this.goto(PATH_PREFIX + "" + ev.detail.webRelPath);
+  }
+
+  gotoDirListingPage() {
+    this.goto(PATH_PREFIX + "" + this.pageData?.webDirRelPath);
   }
-  async gotoDirListingPage() {
-    this.goto("/video" + this.pageData?.webDirRelPath);
+
+  getScrim(): HTMLElement {
+    return this.shadowRoot!.querySelector("#scrim")!;
   }
-  
+
   async startPlayer(p: VideoFile) {
     const player = await this.pagePlayer;
-    player.manifest = this.escapeALittle("/video/files" + p.webDataPath);
+    player.manifest = this.escapeALittle(PATH_PREFIX + "/files" + p.webDataPath);
     const sv = player.shadowRoot!.querySelector("shaka-video")! as ShakaVideoElement;
 
     sv.src = player.manifest;
     sv.autoplay = true;
     player.size = "big";
-    this.shadowRoot!.querySelector("#scrim")!.style.display = "block";
+    this.getScrim().style.display = "block";
   }
+
   goto(url: string) {
-    window.rr.goto(url);
+    routerShared.goto(url);
     window.history.pushState({}, "", url);
   }
+
   async closePlayer() {
     const player = await this.pagePlayer;
     if (player.size === "hidden") {
-      console.log("wasn't playing", player.size);
       return;
     }
-    // return;
-    // this.goto("/video/" + this.pageData?.webDirRelPath);
     player.size = "hidden";
-
-    this.shadowRoot!.querySelector("#scrim")!.style.display = "none";
+    this.getScrim().style.display = "none";
   }
 }