Mercurial > code > home > repos > video
annotate src/ingest/IngestDrop.ts @ 24:1a9a8af1aa19
breadcrumbs and tree view UI
| author | drewp@bigasterisk.com |
|---|---|
| date | Mon, 17 Apr 2023 13:35:18 -0700 |
| parents | ff73b95fc72f |
| children |
| rev | line source |
|---|---|
|
22
ff73b95fc72f
frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents:
18
diff
changeset
|
1 import { LitElement, html, css, TemplateResult } from "lit"; |
| 13 | 2 import { customElement, property } from "lit/decorators.js"; |
| 3 | |
| 24 | 4 interface SubTree { |
| 5 name: string; | |
| 6 children?: SubTree[]; | |
| 7 } | |
| 8 | |
| 13 | 9 @customElement("ingest-drop") |
| 10 export class IngestDrop extends LitElement { | |
| 24 | 11 @property() folder: string = "/"; |
| 12 @property() tree: SubTree = { name: "TOP" }; | |
| 13 | 13 static styles = [ |
| 14 css` | |
| 15 | 15 #drop { |
| 16 min-width: 10em; | |
| 17 min-height: 10em; | |
| 18 background: gray; | |
| 19 border: 5px gray dashed; | |
| 20 margin: 1% 10%; | |
| 21 } | |
| 22 #drop.dnd-hover { | |
| 23 background: yellow; | |
| 24 } | |
| 24 | 25 .twocol { |
| 26 display: flex; | |
| 27 } | |
| 28 .twocol > div { | |
| 29 background: #262626; | |
| 30 } | |
| 13 | 31 `, |
| 32 ]; | |
| 18 | 33 |
| 13 | 34 render() { |
| 24 | 35 const self = this; |
| 36 function renderTree(node: SubTree, pathToHere?: string): TemplateResult { | |
| 37 const isTop = pathToHere === undefined; | |
| 38 const toplessPath = isTop ? "" : pathToHere + "/" + node.name; | |
| 39 const internalPath = toplessPath || "/"; | |
| 40 return html`<sl-tree-item expanded ?selected=${isTop} data-path="${internalPath}" @click=${self.setFolder}> | |
| 41 ${node.name} ${(node.children || []).map((n: SubTree) => renderTree(n, toplessPath))} | |
| 42 </sl-tree-item>`; | |
| 43 } | |
| 44 | |
|
22
ff73b95fc72f
frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents:
18
diff
changeset
|
45 return html` |
| 24 | 46 <div class="twocol"> |
| 47 <div> | |
| 48 <h3>Select folder</h3> | |
| 49 <sl-tree>${renderTree(this.tree)}</sl-tree> | |
| 50 </div> | |
| 51 <div> | |
|
22
ff73b95fc72f
frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents:
18
diff
changeset
|
52 <div id="drop" @dragover=${this.dragover} @dragleave=${this.leave} @drop=${this.drop}> |
|
ff73b95fc72f
frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents:
18
diff
changeset
|
53 Drop video file or url here to upload to <em>TOP${this.folder}</em> |
|
ff73b95fc72f
frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents:
18
diff
changeset
|
54 </div> |
| 24 | 55 </div> |
| 56 </div> | |
| 57 `; | |
| 15 | 58 } |
| 24 | 59 |
| 60 connectedCallback(): void { | |
| 61 super.connectedCallback(); | |
| 62 this.loadFolderTree(); | |
| 63 } | |
| 64 | |
| 65 async loadFolderTree() { | |
| 66 this.tree = await (await fetch("../api/folderTree")).json(); | |
| 67 } | |
| 68 | |
| 69 setFolder(ev: MouseEvent) { | |
| 70 for (let el of ev.composedPath()) { | |
| 71 const ds = (el as HTMLElement).dataset; | |
| 72 if (ds) { | |
| 73 if (ds.path) { | |
| 74 this.folder = ds.path; | |
| 75 return; | |
| 76 } | |
| 77 } | |
| 78 } | |
| 79 console.error("didn't find data-path"); | |
| 80 } | |
| 81 | |
| 15 | 82 dragover(ev: DragEvent) { |
| 83 this.shadowRoot?.querySelector("#drop")?.classList.add("dnd-hover"); | |
| 84 ev.preventDefault(); | |
| 85 if (ev.dataTransfer) { | |
| 86 ev.dataTransfer.dropEffect = "copy"; | |
| 87 } | |
| 88 } | |
| 24 | 89 |
| 15 | 90 leave() { |
| 91 this.shadowRoot?.querySelector("#drop")?.classList.remove("dnd-hover"); | |
| 92 } | |
| 24 | 93 |
| 15 | 94 drop(ev: DragEvent) { |
| 95 ev.preventDefault(); | |
| 96 this.leave(); | |
| 97 | |
| 98 if (!ev.dataTransfer) { | |
| 99 return; | |
| 100 } | |
| 101 | |
| 102 const url = ev.dataTransfer.getData("text/plain"); | |
| 103 if (url) { | |
|
22
ff73b95fc72f
frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents:
18
diff
changeset
|
104 this.queueUrlToFetch(url); |
|
17
071943adf000
dnd a file or a url which we'll queue and fetch
drewp@bigasterisk.com
parents:
15
diff
changeset
|
105 } else { |
|
071943adf000
dnd a file or a url which we'll queue and fetch
drewp@bigasterisk.com
parents:
15
diff
changeset
|
106 for (let i = 0; i < ev.dataTransfer.files.length; i++) { |
|
22
ff73b95fc72f
frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents:
18
diff
changeset
|
107 this.uploadVideoFile(ev.dataTransfer.files[i]); |
|
17
071943adf000
dnd a file or a url which we'll queue and fetch
drewp@bigasterisk.com
parents:
15
diff
changeset
|
108 } |
| 15 | 109 } |
| 13 | 110 } |
|
22
ff73b95fc72f
frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents:
18
diff
changeset
|
111 queueUrlToFetch(url: string) { |
|
ff73b95fc72f
frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents:
18
diff
changeset
|
112 fetch("../api/ingest/videoUrl?folder=" + encodeURIComponent(this.folder), { |
|
ff73b95fc72f
frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents:
18
diff
changeset
|
113 method: "POST", |
|
ff73b95fc72f
frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents:
18
diff
changeset
|
114 body: url, |
|
ff73b95fc72f
frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents:
18
diff
changeset
|
115 }); |
|
ff73b95fc72f
frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents:
18
diff
changeset
|
116 } |
|
ff73b95fc72f
frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents:
18
diff
changeset
|
117 uploadVideoFile(f: File) { |
|
ff73b95fc72f
frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents:
18
diff
changeset
|
118 fetch("../api/ingest/videoUpload?name=" + encodeURIComponent(this.folder + "/" + f.name), { |
|
ff73b95fc72f
frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents:
18
diff
changeset
|
119 method: "POST", |
|
ff73b95fc72f
frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents:
18
diff
changeset
|
120 body: f.stream(), |
|
ff73b95fc72f
frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents:
18
diff
changeset
|
121 duplex: "half", |
|
ff73b95fc72f
frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents:
18
diff
changeset
|
122 } as any /* types don't include 'duplex' */ ); |
|
ff73b95fc72f
frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents:
18
diff
changeset
|
123 } |
| 13 | 124 } |