Mercurial > code > home > repos > video

changeset 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 9e56e86a6814
children bf860a23d0c1
files src/VideoPage.ts src/index.html src/ingest/IngestDrop.ts src/ingest/index.html src/ingest/main.ts src/main.css src/main.ts
diffstat 7 files changed, 81 insertions(+), 24 deletions(-) [+]
line wrap: on
line diff
--- a/src/VideoPage.ts	Mon Apr 17 13:33:59 2023 -0700
+++ b/src/VideoPage.ts	Mon Apr 17 13:35:18 2023 -0700
@@ -2,6 +2,7 @@
 import { customElement, property } from "lit/decorators.js";
 import { PagePlayer, ShakaVideoElement } from "./PagePlayer";
 import maincss from "./main.css?inline";
+export { SlProgressBar } from "@shoelace-style/shoelace";
 export { PagePlayer } from "./PagePlayer";
 export { VideoSection } from "./VideoSection";
 
@@ -83,7 +84,15 @@
   ];
   render() {
     return html`
-      <div id="path-segs">${this.pathSegs.map((seg) => html`<span><a href="./?${subdirQuery(seg.subdir)}">${seg.label}</a></span>`)}</div>
+      <sl-breadcrumb>
+        ${this.pathSegs.map(
+          (seg, i) => 
+          html`<sl-breadcrumb-item>
+                 <a href="./?${subdirQuery(seg.subdir)}">
+                 ${i == 0 ? html`<sl-icon name="house"></sl-icon>`:''}
+                 ${seg.label}
+                 </a></sl-breadcrumb-item>`)}
+      </sl-breadcrumb>
 
       <div class="listing">
       ${this.subdirs.map((s) => html`<div class="subdir"><a href="${"./?" + subdirQuery(s.path)}">${s.label}</a></div>`)}
--- a/src/index.html	Mon Apr 17 13:33:59 2023 -0700
+++ b/src/index.html	Mon Apr 17 13:35:18 2023 -0700
@@ -6,7 +6,7 @@
     <link rel="stylesheet" type="text/css" media="screen" href="./main.css" />
     <script type="module" src="./main.ts"></script>
   </head>
-  <body>
+  <body style="background: #020f16" class="sl-theme-dark">
     <video-page></video-page>
   </body>
 </html>
--- a/src/ingest/IngestDrop.ts	Mon Apr 17 13:33:59 2023 -0700
+++ b/src/ingest/IngestDrop.ts	Mon Apr 17 13:35:18 2023 -0700
@@ -1,8 +1,15 @@
 import { LitElement, html, css, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
+interface SubTree {
+  name: string;
+  children?: SubTree[];
+}
+
 @customElement("ingest-drop")
 export class IngestDrop extends LitElement {
+  @property() folder: string = "/";
+  @property() tree: SubTree = { name: "TOP" };
   static styles = [
     css`
       #drop {
@@ -15,15 +22,63 @@
       #drop.dnd-hover {
         background: yellow;
       }
+      .twocol {
+        display: flex;
+      }
+      .twocol > div {
+        background: #262626;
+      }
     `,
   ];
 
   render() {
+    const self = this;
+    function renderTree(node: SubTree, pathToHere?: string): TemplateResult {
+      const isTop = pathToHere === undefined;
+      const toplessPath = isTop ? "" : pathToHere + "/" + node.name;
+      const internalPath = toplessPath || "/";
+      return html`<sl-tree-item expanded ?selected=${isTop} data-path="${internalPath}" @click=${self.setFolder}>
+        ${node.name} ${(node.children || []).map((n: SubTree) => renderTree(n, toplessPath))}
+      </sl-tree-item>`;
+    }
+
     return html`
+      <div class="twocol">
+        <div>
+          <h3>Select folder</h3>
+          <sl-tree>${renderTree(this.tree)}</sl-tree>
+        </div>
+        <div>
           <div id="drop" @dragover=${this.dragover} @dragleave=${this.leave} @drop=${this.drop}>
             Drop video file or url here to upload to <em>TOP${this.folder}</em>
           </div>
+        </div>
+      </div>
+    `;
   }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.loadFolderTree();
+  }
+
+  async loadFolderTree() {
+    this.tree = await (await fetch("../api/folderTree")).json();
+  }
+
+  setFolder(ev: MouseEvent) {
+    for (let el of ev.composedPath()) {
+      const ds = (el as HTMLElement).dataset;
+      if (ds) {
+        if (ds.path) {
+          this.folder = ds.path;
+          return;
+        }
+      }
+    }
+    console.error("didn't find data-path");
+  }
+
   dragover(ev: DragEvent) {
     this.shadowRoot?.querySelector("#drop")?.classList.add("dnd-hover");
     ev.preventDefault();
@@ -31,9 +86,11 @@
       ev.dataTransfer.dropEffect = "copy";
     }
   }
+
   leave() {
     this.shadowRoot?.querySelector("#drop")?.classList.remove("dnd-hover");
   }
+
   drop(ev: DragEvent) {
     ev.preventDefault();
     this.leave();
--- a/src/ingest/index.html	Mon Apr 17 13:33:59 2023 -0700
+++ b/src/ingest/index.html	Mon Apr 17 13:35:18 2023 -0700
@@ -3,12 +3,13 @@
   <head>
     <title>video on bigasterisk</title>
     <link rel="stylesheet" type="text/css" media="screen" href="../main.css" />
+
     <script type="module" src="./main.ts"></script>
   </head>
-  <body>
-    <div id="path-segs">
-     <span><a href="../">TOP</a></span>
-    </div>
+  <body class="sl-theme-dark">
+    <sl-breadcrumb>
+      <sl-breadcrumb-item><a href="../"><sl-icon name="house"></sl-icon>TOP</a></sl-breadcrumb-item>
+    </sl-breadcrumb>
 
     <h1>Video library ingest</h1>
     <ingest-drop></ingest-drop>
--- a/src/ingest/main.ts	Mon Apr 17 13:33:59 2023 -0700
+++ b/src/ingest/main.ts	Mon Apr 17 13:35:18 2023 -0700
@@ -1,4 +1,7 @@
-import '@shoelace-style/shoelace/dist/themes/dark.css';
+export { SlBreadcrumb, SlBreadcrumbItem } from "@shoelace-style/shoelace";
 export { IngestDrop } from "./IngestDrop";
 export { IngestStatus } from "./IngestStatus";
 
+import { setBasePath } from "@shoelace-style/shoelace";
+import '@shoelace-style/shoelace/dist/themes/dark.css';
+setBasePath("../@fs/opt/node_modules/@shoelace-style/shoelace/dist");
\ No newline at end of file
--- a/src/main.css	Mon Apr 17 13:33:59 2023 -0700
+++ b/src/main.css	Mon Apr 17 13:35:18 2023 -0700
@@ -14,20 +14,3 @@
 a {
   color: white;
 }
-
-#path-segs > span {
-  color: white;
-  padding: 11px;
-  display: inline-block;
-  background: #4ea1bd21;
-  margin: 5px;
-  border-top-left-radius: 29px;
-}
-
-
-#path-segs > span:after {
-  content: " >";
-  font-size: 33px;
-  vertical-align: middle;
-  color: gray;
-}
--- a/src/main.ts	Mon Apr 17 13:33:59 2023 -0700
+++ b/src/main.ts	Mon Apr 17 13:35:18 2023 -0700
@@ -1,1 +1,5 @@
 export { VideoPage } from "./VideoPage";
+
+import { setBasePath } from "@shoelace-style/shoelace";
+import '@shoelace-style/shoelace/dist/themes/dark.css';
+setBasePath("@fs/opt/node_modules/@shoelace-style/shoelace/dist");
\ No newline at end of file