Mercurial > code > home > repos > video

annotate src/ingest/IngestDrop.ts @ 22:ff73b95fc72f

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
frontend cleanups and improvements. this commit contains some future work too
author drewp@bigasterisk.com
date Mon, 17 Apr 2023 13:33:05 -0700
parents 1b388ee5dd09
children 1a9a8af1aa19
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
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
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents:
diff changeset
2 import { customElement, property } from "lit/decorators.js";
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents:
diff changeset
3
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents:
diff changeset
4 @customElement("ingest-drop")
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents:
diff changeset
5 export class IngestDrop extends LitElement {
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents:
diff changeset
6 static styles = [
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents:
diff changeset
7 css`
15
53d99454f394 support dropping url or file
drewp@bigasterisk.com
parents: 13
diff changeset
8 #drop {
53d99454f394 support dropping url or file
drewp@bigasterisk.com
parents: 13
diff changeset
9 min-width: 10em;
53d99454f394 support dropping url or file
drewp@bigasterisk.com
parents: 13
diff changeset
10 min-height: 10em;
53d99454f394 support dropping url or file
drewp@bigasterisk.com
parents: 13
diff changeset
11 background: gray;
53d99454f394 support dropping url or file
drewp@bigasterisk.com
parents: 13
diff changeset
12 border: 5px gray dashed;
53d99454f394 support dropping url or file
drewp@bigasterisk.com
parents: 13
diff changeset
13 margin: 1% 10%;
53d99454f394 support dropping url or file
drewp@bigasterisk.com
parents: 13
diff changeset
14 }
53d99454f394 support dropping url or file
drewp@bigasterisk.com
parents: 13
diff changeset
15 #drop.dnd-hover {
53d99454f394 support dropping url or file
drewp@bigasterisk.com
parents: 13
diff changeset
16 background: yellow;
53d99454f394 support dropping url or file
drewp@bigasterisk.com
parents: 13
diff changeset
17 }
13
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents:
diff changeset
18 `,
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents:
diff changeset
19 ];
18
1b388ee5dd09 reformat
drewp@bigasterisk.com
parents: 17
diff changeset
20
13
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents:
diff changeset
21 render() {
22
ff73b95fc72f frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents: 18
diff changeset
22 return html`
ff73b95fc72f frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents: 18
diff changeset
23 <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
24 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
25 </div>
15
53d99454f394 support dropping url or file
drewp@bigasterisk.com
parents: 13
diff changeset
26 }
53d99454f394 support dropping url or file
drewp@bigasterisk.com
parents: 13
diff changeset
27 dragover(ev: DragEvent) {
53d99454f394 support dropping url or file
drewp@bigasterisk.com
parents: 13
diff changeset
28 this.shadowRoot?.querySelector("#drop")?.classList.add("dnd-hover");
53d99454f394 support dropping url or file
drewp@bigasterisk.com
parents: 13
diff changeset
29 ev.preventDefault();
53d99454f394 support dropping url or file
drewp@bigasterisk.com
parents: 13
diff changeset
30 if (ev.dataTransfer) {
53d99454f394 support dropping url or file
drewp@bigasterisk.com
parents: 13
diff changeset
31 ev.dataTransfer.dropEffect = "copy";
53d99454f394 support dropping url or file
drewp@bigasterisk.com
parents: 13
diff changeset
32 }
53d99454f394 support dropping url or file
drewp@bigasterisk.com
parents: 13
diff changeset
33 }
53d99454f394 support dropping url or file
drewp@bigasterisk.com
parents: 13
diff changeset
34 leave() {
53d99454f394 support dropping url or file
drewp@bigasterisk.com
parents: 13
diff changeset
35 this.shadowRoot?.querySelector("#drop")?.classList.remove("dnd-hover");
53d99454f394 support dropping url or file
drewp@bigasterisk.com
parents: 13
diff changeset
36 }
53d99454f394 support dropping url or file
drewp@bigasterisk.com
parents: 13
diff changeset
37 drop(ev: DragEvent) {
53d99454f394 support dropping url or file
drewp@bigasterisk.com
parents: 13
diff changeset
38 ev.preventDefault();
53d99454f394 support dropping url or file
drewp@bigasterisk.com
parents: 13
diff changeset
39 this.leave();
53d99454f394 support dropping url or file
drewp@bigasterisk.com
parents: 13
diff changeset
40
53d99454f394 support dropping url or file
drewp@bigasterisk.com
parents: 13
diff changeset
41 if (!ev.dataTransfer) {
53d99454f394 support dropping url or file
drewp@bigasterisk.com
parents: 13
diff changeset
42 return;
53d99454f394 support dropping url or file
drewp@bigasterisk.com
parents: 13
diff changeset
43 }
53d99454f394 support dropping url or file
drewp@bigasterisk.com
parents: 13
diff changeset
44
53d99454f394 support dropping url or file
drewp@bigasterisk.com
parents: 13
diff changeset
45 const url = ev.dataTransfer.getData("text/plain");
53d99454f394 support dropping url or file
drewp@bigasterisk.com
parents: 13
diff changeset
46 if (url) {
22
ff73b95fc72f frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents: 18
diff changeset
47 this.queueUrlToFetch(url);
17
071943adf000 dnd a file or a url which we'll queue and fetch
drewp@bigasterisk.com
parents: 15
diff changeset
48 } else {
071943adf000 dnd a file or a url which we'll queue and fetch
drewp@bigasterisk.com
parents: 15
diff changeset
49 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
50 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
51 }
15
53d99454f394 support dropping url or file
drewp@bigasterisk.com
parents: 13
diff changeset
52 }
13
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents:
diff changeset
53 }
22
ff73b95fc72f frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents: 18
diff changeset
54 queueUrlToFetch(url: string) {
ff73b95fc72f frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents: 18
diff changeset
55 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
56 method: "POST",
ff73b95fc72f frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents: 18
diff changeset
57 body: url,
ff73b95fc72f frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents: 18
diff changeset
58 });
ff73b95fc72f frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents: 18
diff changeset
59 }
ff73b95fc72f frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents: 18
diff changeset
60 uploadVideoFile(f: File) {
ff73b95fc72f frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents: 18
diff changeset
61 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
62 method: "POST",
ff73b95fc72f frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents: 18
diff changeset
63 body: f.stream(),
ff73b95fc72f frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents: 18
diff changeset
64 duplex: "half",
ff73b95fc72f frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents: 18
diff changeset
65 } 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
66 }
13
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents:
diff changeset
67 }