Mercurial > code > home > repos > video

annotate src/VideoPage.ts @ 31:f7236339097e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
esc key to close video
author drewp@bigasterisk.com
date Mon, 26 Aug 2024 22:33:44 -0700
parents 1a9a8af1aa19
children 6ee4c73decf4
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;
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
14 }
5
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
15 interface Subdir {
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
16 label: string;
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
17 path: string;
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
18 }
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 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
21 return "subdir=" + encodeURIComponent(subdir);
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
22 }
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
23
2
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
24 @customElement("video-page")
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
25 export class VideoPage extends LitElement {
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
26 videos: VideoFile[];
5
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
27 subdirs: Subdir[];
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
28 @property() pathSegs: { label: string; subdir: string }[];
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
29 constructor() {
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
30 super();
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
31 this.videos = [];
5
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
32 this.subdirs = [];
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
33 this.pathSegs = [];
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
34 this.loadVideos();
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
35 }
31
f7236339097e esc key to close video
drewp@bigasterisk.com
parents: 24
diff changeset
36 protected firstUpdated(_changedProperties: PropertyValues): void {
f7236339097e esc key to close video
drewp@bigasterisk.com
parents: 24
diff changeset
37 document.addEventListener("keydown", (e) => {
f7236339097e esc key to close video
drewp@bigasterisk.com
parents: 24
diff changeset
38 if (e.key == "Escape") {
f7236339097e esc key to close video
drewp@bigasterisk.com
parents: 24
diff changeset
39 this.closePlayer();
f7236339097e esc key to close video
drewp@bigasterisk.com
parents: 24
diff changeset
40 }
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 }
5
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
43 updatePathSegs(subdir: string) {
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
44 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
45 if (subdir != "/") {
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
46 let acc = "";
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
47 const segs = subdir.split("/");
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
48 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
49 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
50 acc += "/" + seg;
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
51 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
52 }
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 }
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
55 async loadVideos() {
5
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
56 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
57 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
58 this.updatePathSegs(subdir);
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
59 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
60 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
61 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
62 this.requestUpdate();
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
63 }
5
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
64 static styles = [
13
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents: 12
diff changeset
65 unsafeCSS(maincss),
5
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
66 css`
13
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents: 12
diff changeset
67
12
e60be5d74c07 css edits and ingest link
drewp@bigasterisk.com
parents: 8
diff changeset
68 .listing a {
5
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
69 font-size: 20px;
6
ccfea3625cf6 render thumbs and display them (no video player at all atm)
drewp@bigasterisk.com
parents: 5
diff changeset
70 text-transform: uppercase;
ccfea3625cf6 render thumbs and display them (no video player at all atm)
drewp@bigasterisk.com
parents: 5
diff changeset
71 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
72 }
13
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents: 12
diff changeset
73
5
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
74 .subdir {
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
75 vertical-align: top;
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
76 color: white;
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
77 padding: 11px;
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
78 display: inline-block;
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
79 width: 300px;
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
80 background: #4ea1bd21;
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
81 margin: 5px;
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
82 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
83 }
8
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
84 #scrim {
22
ff73b95fc72f frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents: 13
diff changeset
85 position: fixed;
8
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
86 background: #000000b5;
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
87 inset: 0;
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
88 display: none;
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
89 }
5
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
90 `,
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
91 ];
2
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
92 render() {
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
93 return html`
24
1a9a8af1aa19 breadcrumbs and tree view UI
drewp@bigasterisk.com
parents: 22
diff changeset
94 <sl-breadcrumb>
1a9a8af1aa19 breadcrumbs and tree view UI
drewp@bigasterisk.com
parents: 22
diff changeset
95 ${this.pathSegs.map(
1a9a8af1aa19 breadcrumbs and tree view UI
drewp@bigasterisk.com
parents: 22
diff changeset
96 (seg, i) =>
1a9a8af1aa19 breadcrumbs and tree view UI
drewp@bigasterisk.com
parents: 22
diff changeset
97 html`<sl-breadcrumb-item>
1a9a8af1aa19 breadcrumbs and tree view UI
drewp@bigasterisk.com
parents: 22
diff changeset
98 <a href="./?${subdirQuery(seg.subdir)}">
1a9a8af1aa19 breadcrumbs and tree view UI
drewp@bigasterisk.com
parents: 22
diff changeset
99 ${i == 0 ? html`<sl-icon name="house"></sl-icon>`:''}
1a9a8af1aa19 breadcrumbs and tree view UI
drewp@bigasterisk.com
parents: 22
diff changeset
100 ${seg.label}
1a9a8af1aa19 breadcrumbs and tree view UI
drewp@bigasterisk.com
parents: 22
diff changeset
101 </a></sl-breadcrumb-item>`)}
1a9a8af1aa19 breadcrumbs and tree view UI
drewp@bigasterisk.com
parents: 22
diff changeset
102 </sl-breadcrumb>
5
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
103
12
e60be5d74c07 css edits and ingest link
drewp@bigasterisk.com
parents: 8
diff changeset
104 <div class="listing">
5
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
105 ${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
106 ${this.videos.map(
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
107 (v) => html`<video-section @playVideo=${this.playVideo} thumbRelPath="${v.thumbRelPath}" title="${v.label}" manifest=${v.webRelPath}></video-section>`
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
108 )}
12
e60be5d74c07 css edits and ingest link
drewp@bigasterisk.com
parents: 8
diff changeset
109 </div>
e60be5d74c07 css edits and ingest link
drewp@bigasterisk.com
parents: 8
diff changeset
110 <p><a href="ingest/">Add new videos...</a></p>
e60be5d74c07 css edits and ingest link
drewp@bigasterisk.com
parents: 8
diff changeset
111
e60be5d74c07 css edits and ingest link
drewp@bigasterisk.com
parents: 8
diff changeset
112
8
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
113 <div id="scrim" @click=${this.closePlayer}></div>
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
114 <page-player manifest=""></page-player>
2
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
115 `;
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
116 }
8
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
117 playVideo(ev: CustomEvent) {
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
118 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
119
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
120 player.manifest = ev.detail.manifest;
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
121 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
122
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
123 sv.src = ev.detail.manifest;
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
124 sv.load().then(() => {
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
125 sv.play();
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
126 });
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
127 player.size = "big";
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
128 this.shadowRoot!.querySelector("#scrim")!.style.display = "block";
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
129 }
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
130 closePlayer() {
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
131 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
132 player.size = "hidden";
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
133
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
134 this.shadowRoot!.querySelector("#scrim")!.style.display = "none";
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
135 }
2
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
136 }