Mercurial > code > home > repos > video

changeset 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 111a41817968
children 9e56e86a6814
files src/VideoPage.ts src/VideoSection.ts src/index.html src/ingest/IngestDrop.ts src/ingest/IngestStatus.ts src/main.css
diffstat 6 files changed, 63 insertions(+), 45 deletions(-) [+]
line wrap: on
line diff
--- 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;
--- 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`
       <section @click=${this.click}>
-        <h1>${this.title}</h1>
+        <div class="video-title">${this.title}</div>
         <img src="${this.thumbRelPath}" />
       </section>
     `;
--- 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 @@
 <html>
   <head>
     <title>video on bigasterisk</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" type="text/css" media="screen" href="./main.css" />
     <script type="module" src="./main.ts"></script>
   </head>
--- 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` <div id="drop" @dragover=${this.dragover} @dragleave=${this.leave} @drop=${this.drop}>Drop video url here</div> `;
+    return html`
+          <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>
   }
   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' */ );
+  }
 }
--- 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;
--- 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;
+}