Mercurial > code > home > repos > video

annotate src/VideoPage.ts @ 36:ed16fdbb3996

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
rewrite WIP. scan fs separately; store in db. thumbs are broken for now
author drewp@bigasterisk.com
date Tue, 03 Dec 2024 00:08:22 -0800
parents 9edb3df3cdb3
children 7cacfae58430
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
31
f7236339097e esc key to close video
drewp@bigasterisk.com
parents: 24
diff changeset
1 import { LitElement, PropertyValues, css, html, unsafeCSS } from "lit";
5
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
2 import { customElement, property } from "lit/decorators.js";
22
ff73b95fc72f frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents: 13
diff changeset
3 import { PagePlayer, ShakaVideoElement } from "./PagePlayer";
ff73b95fc72f frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents: 13
diff changeset
4 import maincss from "./main.css?inline";
24
1a9a8af1aa19 breadcrumbs and tree view UI
drewp@bigasterisk.com
parents: 22
diff changeset
5 export { SlProgressBar } from "@shoelace-style/shoelace";
22
ff73b95fc72f frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents: 13
diff changeset
6 export { PagePlayer } from "./PagePlayer";
2
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
7 export { VideoSection } from "./VideoSection";
13
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents: 12
diff changeset
8
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents: 12
diff changeset
9
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
10 interface VideoFile {
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
11 webRelPath: string;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
12 label: string;
6
ccfea3625cf6 render thumbs and display them (no video player at all atm)
drewp@bigasterisk.com
parents: 5
diff changeset
13 thumbRelPath: string;
36
ed16fdbb3996 rewrite WIP. scan fs separately; store in db. thumbs are broken for now
drewp@bigasterisk.com
parents: 34
diff changeset
14 webDataPath: string;
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
15 }
5
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
16 interface Subdir {
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
17 label: string;
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
18 path: string;
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
19 }
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
20
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
21 function subdirQuery(subdir: string): string {
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
22 return "subdir=" + encodeURIComponent(subdir);
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
23 }
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
24
2
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
25 @customElement("video-page")
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
26 export class VideoPage extends LitElement {
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
27 videos: VideoFile[];
5
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
28 subdirs: Subdir[];
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
29 @property() pathSegs: { label: string; subdir: string }[];
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
30 constructor() {
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
31 super();
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
32 this.videos = [];
5
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
33 this.subdirs = [];
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
34 this.pathSegs = [];
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
35 this.loadVideos();
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
36 }
31
f7236339097e esc key to close video
drewp@bigasterisk.com
parents: 24
diff changeset
37 protected firstUpdated(_changedProperties: PropertyValues): void {
f7236339097e esc key to close video
drewp@bigasterisk.com
parents: 24
diff changeset
38 document.addEventListener("keydown", (e) => {
f7236339097e esc key to close video
drewp@bigasterisk.com
parents: 24
diff changeset
39 if (e.key == "Escape") {
f7236339097e esc key to close video
drewp@bigasterisk.com
parents: 24
diff changeset
40 this.closePlayer();
f7236339097e esc key to close video
drewp@bigasterisk.com
parents: 24
diff changeset
41 }
f7236339097e esc key to close video
drewp@bigasterisk.com
parents: 24
diff changeset
42 });
f7236339097e esc key to close video
drewp@bigasterisk.com
parents: 24
diff changeset
43 }
5
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
44 updatePathSegs(subdir: string) {
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
45 this.pathSegs = [{ label: "TOP", subdir: "/" }];
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
46 if (subdir != "/") {
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
47 let acc = "";
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
48 const segs = subdir.split("/");
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
49 segs.splice(0, 1); // the root
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
50 for (let seg of segs) {
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
51 acc += "/" + seg;
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
52 this.pathSegs.push({ label: seg, subdir: acc });
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
53 }
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
54 }
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
55 }
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
56 async loadVideos() {
5
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
57 const u = new URL(location.href);
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
58 const subdir = u.searchParams.get("subdir") || "/";
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
59 this.updatePathSegs(subdir);
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
60 const resp = await (await fetch("api/videos?" + subdirQuery(subdir))).json();
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
61 this.videos = resp.videos as VideoFile[];
5
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
62 this.subdirs = resp.subdirs as Subdir[];
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
63 this.requestUpdate();
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
64 }
5
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
65 static styles = [
13
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents: 12
diff changeset
66 unsafeCSS(maincss),
5
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
67 css`
13
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents: 12
diff changeset
68
12
e60be5d74c07 css edits and ingest link
drewp@bigasterisk.com
parents: 8
diff changeset
69 .listing a {
5
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
70 font-size: 20px;
6
ccfea3625cf6 render thumbs and display them (no video player at all atm)
drewp@bigasterisk.com
parents: 5
diff changeset
71 text-transform: uppercase;
ccfea3625cf6 render thumbs and display them (no video player at all atm)
drewp@bigasterisk.com
parents: 5
diff changeset
72 text-underline-offset: 10px;
5
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
73 }
13
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents: 12
diff changeset
74
5
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
75 .subdir {
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
76 vertical-align: top;
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
77 color: white;
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
78 padding: 11px;
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
79 display: inline-block;
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
80 width: 300px;
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
81 background: #4ea1bd21;
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
82 margin: 5px;
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
83 border-bottom-right-radius: 29px;
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
84 }
8
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
85 #scrim {
22
ff73b95fc72f frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents: 13
diff changeset
86 position: fixed;
8
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
87 background: #000000b5;
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
88 inset: 0;
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
89 display: none;
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
90 }
5
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
91 `,
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
92 ];
2
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
93 render() {
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
94 return html`
24
1a9a8af1aa19 breadcrumbs and tree view UI
drewp@bigasterisk.com
parents: 22
diff changeset
95 <sl-breadcrumb>
1a9a8af1aa19 breadcrumbs and tree view UI
drewp@bigasterisk.com
parents: 22
diff changeset
96 ${this.pathSegs.map(
1a9a8af1aa19 breadcrumbs and tree view UI
drewp@bigasterisk.com
parents: 22
diff changeset
97 (seg, i) =>
1a9a8af1aa19 breadcrumbs and tree view UI
drewp@bigasterisk.com
parents: 22
diff changeset
98 html`<sl-breadcrumb-item>
1a9a8af1aa19 breadcrumbs and tree view UI
drewp@bigasterisk.com
parents: 22
diff changeset
99 <a href="./?${subdirQuery(seg.subdir)}">
1a9a8af1aa19 breadcrumbs and tree view UI
drewp@bigasterisk.com
parents: 22
diff changeset
100 ${i == 0 ? html`<sl-icon name="house"></sl-icon>`:''}
1a9a8af1aa19 breadcrumbs and tree view UI
drewp@bigasterisk.com
parents: 22
diff changeset
101 ${seg.label}
1a9a8af1aa19 breadcrumbs and tree view UI
drewp@bigasterisk.com
parents: 22
diff changeset
102 </a></sl-breadcrumb-item>`)}
1a9a8af1aa19 breadcrumbs and tree view UI
drewp@bigasterisk.com
parents: 22
diff changeset
103 </sl-breadcrumb>
5
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
104
12
e60be5d74c07 css edits and ingest link
drewp@bigasterisk.com
parents: 8
diff changeset
105 <div class="listing">
5
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
106 ${this.subdirs.map((s) => html`<div class="subdir"><a href="${"./?" + subdirQuery(s.path)}">${s.label}</a></div>`)}
8
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
107 ${this.videos.map(
36
ed16fdbb3996 rewrite WIP. scan fs separately; store in db. thumbs are broken for now
drewp@bigasterisk.com
parents: 34
diff changeset
108 (v) => html`<video-section @playVideo=${this.playVideo} thumbRelPath="${v.thumbRelPath}" title="${v.label}" manifest="/video/files/${v.webDataPath}"></video-section>`
8
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
109 )}
12
e60be5d74c07 css edits and ingest link
drewp@bigasterisk.com
parents: 8
diff changeset
110 </div>
e60be5d74c07 css edits and ingest link
drewp@bigasterisk.com
parents: 8
diff changeset
111 <p><a href="ingest/">Add new videos...</a></p>
e60be5d74c07 css edits and ingest link
drewp@bigasterisk.com
parents: 8
diff changeset
112
e60be5d74c07 css edits and ingest link
drewp@bigasterisk.com
parents: 8
diff changeset
113
8
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
114 <div id="scrim" @click=${this.closePlayer}></div>
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
115 <page-player manifest=""></page-player>
2
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
116 `;
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
117 }
33
6ee4c73decf4 fix playability of vids with # in their titles
drewp@bigasterisk.com
parents: 31
diff changeset
118 escapeALittle(fileUri: string) : string {
6ee4c73decf4 fix playability of vids with # in their titles
drewp@bigasterisk.com
parents: 31
diff changeset
119 return fileUri.replace('#', encodeURIComponent('#'));
6ee4c73decf4 fix playability of vids with # in their titles
drewp@bigasterisk.com
parents: 31
diff changeset
120 }
8
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
121 playVideo(ev: CustomEvent) {
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
122 const player = this.shadowRoot!.querySelector("page-player")! as PagePlayer;
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
123
33
6ee4c73decf4 fix playability of vids with # in their titles
drewp@bigasterisk.com
parents: 31
diff changeset
124 player.manifest = this.escapeALittle(ev.detail.manifest);
8
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
125 const sv = player.shadowRoot!.querySelector("shaka-video")! as ShakaVideoElement;
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
126
33
6ee4c73decf4 fix playability of vids with # in their titles
drewp@bigasterisk.com
parents: 31
diff changeset
127 sv.src = player.manifest;
34
9edb3df3cdb3 fix autoplay
drewp@bigasterisk.com
parents: 33
diff changeset
128 sv.autoplay = true;
8
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
129 player.size = "big";
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
130 this.shadowRoot!.querySelector("#scrim")!.style.display = "block";
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
131 }
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
132 closePlayer() {
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
133 const player = this.shadowRoot!.querySelector("page-player")! as PagePlayer;
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
134 player.size = "hidden";
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
135
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
136 this.shadowRoot!.querySelector("#scrim")!.style.display = "none";
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
137 }
2
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
138 }