# HG changeset patch
# User drewp@bigasterisk.com
# Date 1681763585 25200
# Node ID ff73b95fc72f95fc05d53f6a00ae232776d81728
# Parent 111a418179686c7b784fe72f7058a2f8a0bf4ef1
frontend cleanups and improvements. this commit contains some future work too
diff -r 111a41817968 -r ff73b95fc72f src/VideoPage.ts
--- a/src/VideoPage.ts Mon Apr 17 00:43:37 2023 -0700
+++ b/src/VideoPage.ts Mon Apr 17 13:33:05 2023 -0700
@@ -1,11 +1,9 @@
-import { LitElement, html, css, CSSResult, unsafeCSS } from "lit";
+import { LitElement, css, html, unsafeCSS } from "lit";
import { customElement, property } from "lit/decorators.js";
-import { PagePlayer } from "./PagePlayer";
+import { PagePlayer, ShakaVideoElement } from "./PagePlayer";
+import maincss from "./main.css?inline";
+export { PagePlayer } from "./PagePlayer";
export { VideoSection } from "./VideoSection";
-export { PagePlayer } from "./PagePlayer";
-import { ShakaVideoElement } from "./PagePlayer";
-
-import maincss from "./main.css?inline";
interface VideoFile {
@@ -76,7 +74,7 @@
border-bottom-right-radius: 29px;
}
#scrim {
- position: absolute;
+ position: fixed;
background: #000000b5;
inset: 0;
display: none;
diff -r 111a41817968 -r ff73b95fc72f src/VideoSection.ts
--- a/src/VideoSection.ts Mon Apr 17 00:43:37 2023 -0700
+++ b/src/VideoSection.ts Mon Apr 17 13:33:05 2023 -0700
@@ -18,12 +18,15 @@
color: white;
width: 300px;
}
+ .video-title {
+ font-size: 120%;
+ }
`,
];
render() {
return html`
- ${this.title}
+ ${this.title}
`;
diff -r 111a41817968 -r ff73b95fc72f src/index.html
--- a/src/index.html Mon Apr 17 00:43:37 2023 -0700
+++ b/src/index.html Mon Apr 17 13:33:05 2023 -0700
@@ -2,6 +2,7 @@
video on bigasterisk
+
diff -r 111a41817968 -r ff73b95fc72f src/ingest/IngestDrop.ts
--- a/src/ingest/IngestDrop.ts Mon Apr 17 00:43:37 2023 -0700
+++ b/src/ingest/IngestDrop.ts Mon Apr 17 13:33:05 2023 -0700
@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, css, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators.js";
@customElement("ingest-drop")
@@ -19,7 +19,10 @@
];
render() {
- return html` Drop video url here
`;
+ return html`
+
+ Drop video file or url here to upload to TOP${this.folder}
+
}
dragover(ev: DragEvent) {
this.shadowRoot?.querySelector("#drop")?.classList.add("dnd-hover");
@@ -41,21 +44,24 @@
const url = ev.dataTransfer.getData("text/plain");
if (url) {
- fetch("../api/ingest/videoUrl", {
- method: "POST",
- body: url,
- });
+ this.queueUrlToFetch(url);
} else {
for (let i = 0; i < ev.dataTransfer.files.length; i++) {
- const f = ev.dataTransfer.files[i];
- const name = f.name;
- const stream = f.stream();
- fetch("../api/ingest/videoUpload?name=" + encodeURIComponent(f.name), {
- method: "POST",
- body: stream,
- duplex: "half",
- } as any);
+ this.uploadVideoFile(ev.dataTransfer.files[i]);
}
}
}
+ queueUrlToFetch(url: string) {
+ fetch("../api/ingest/videoUrl?folder=" + encodeURIComponent(this.folder), {
+ method: "POST",
+ body: url,
+ });
+ }
+ uploadVideoFile(f: File) {
+ fetch("../api/ingest/videoUpload?name=" + encodeURIComponent(this.folder + "/" + f.name), {
+ method: "POST",
+ body: f.stream(),
+ duplex: "half",
+ } as any /* types don't include 'duplex' */ );
+ }
}
diff -r 111a41817968 -r ff73b95fc72f src/ingest/IngestStatus.ts
--- a/src/ingest/IngestStatus.ts Mon Apr 17 00:43:37 2023 -0700
+++ b/src/ingest/IngestStatus.ts Mon Apr 17 13:33:05 2023 -0700
@@ -1,7 +1,6 @@
import { LitElement, html, css } from "lit";
import { customElement, property } from "lit/decorators.js";
-export {SlProgressBar} from "@shoelace-style/shoelace";
-
+export { SlProgressBar } from "@shoelace-style/shoelace";
interface Row {
url: string;
diff -r 111a41817968 -r ff73b95fc72f src/main.css
--- a/src/main.css Mon Apr 17 00:43:37 2023 -0700
+++ b/src/main.css Mon Apr 17 13:33:05 2023 -0700
@@ -1,22 +1,33 @@
+* {
+ font-family: sans-serif;
+}
+
body {
- margin: 0;
- height: 100vh;
- background: radial-gradient(ellipse at center, #162c4a 0%, #0c2236 36%, #020f16 100%);
- }
- h1,h2,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;
- }
+ margin: 0;
+ height: 100vh;
+ background: radial-gradient(ellipse at center, #162c4a 0%, #0c2236 36%, #020f16 100%) !important;
+}
+
+h1,
+h2,
+h3,
+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;
+}