Mercurial > code > home > repos > video

annotate src/VideoPage.ts @ 42:1d2c65d260d1

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
factor out breadcrumbs
author drewp@bigasterisk.com
date Thu, 05 Dec 2024 21:34:00 -0800
parents 44bd161e4779
children df51269bcef4
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
39
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
1 import { LitElement, PropertyValues, TemplateResult, 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";
38
0aea9e55899b hack in path router - dirs kind of work; putting a video in the path doesn't
drewp@bigasterisk.com
parents: 37
diff changeset
8 import { Routes, Router } from "@lit-labs/router";
42
1d2c65d260d1 factor out breadcrumbs
drewp@bigasterisk.com
parents: 41
diff changeset
9 export { VBreadcrumbs } from "./VBreadcrumbs";
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;
39
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
12 webDataPath: string;
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
13 label: string;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
14 }
39
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
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
39
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
21 interface VideoListings {
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
22 videos: VideoFile[];
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
23 subdirs: Subdir[];
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
24 }
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
25
5
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
26 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
27 return "subdir=" + encodeURIComponent(subdir);
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
28 }
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
29
39
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
30 class route {
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
31 path = "/video/*";
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
32 videoListings: VideoListings | null = null;
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
33 showVid: string | null = null;
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
34 dirName?: string;
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
35
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
36 link(wrp: string): string {
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
37 return "/video/" + wrp;
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
38 }
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
39
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
40 async enter(params: { [key: string]: string | undefined }): Promise<boolean> {
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
41 const webRelPath = "/" + params[0]!;
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
42 this.dirName = webRelPath.replace(/.*\/([^/]+)/, "$1");
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
43 const resp = await fetch("/video/api/videos?" + subdirQuery(webRelPath));
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
44 if (resp.status == 404) {
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
45 return false;
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
46 }
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
47 this.videoListings = await resp.json();
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
48
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
49 if (webRelPath.endsWith("/")) {
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
50 this.showVid = null;
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
51 } else {
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
52 this.showVid = webRelPath;
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
53 }
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
54
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
55 return true;
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
56 }
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
57
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
58 render(p: { [key: string]: string | undefined }) {
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
59 return html`<video-page2
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
60 .link=${this.link.bind(this)}
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
61 .showVid=${this.showVid}
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
62 .videoListings=${this.videoListings}
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
63 .dirName=${this.dirName}
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
64 ></video-page2>`;
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
65 }
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
66 }
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
67
2
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
68 @customElement("video-page")
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
69 export class VideoPage extends LitElement {
38
0aea9e55899b hack in path router - dirs kind of work; putting a video in the path doesn't
drewp@bigasterisk.com
parents: 37
diff changeset
70 static styles = [unsafeCSS(maincss)];
39
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
71 private _router = new Router(this, [new route()], {});
38
0aea9e55899b hack in path router - dirs kind of work; putting a video in the path doesn't
drewp@bigasterisk.com
parents: 37
diff changeset
72
0aea9e55899b hack in path router - dirs kind of work; putting a video in the path doesn't
drewp@bigasterisk.com
parents: 37
diff changeset
73 render() {
42
1d2c65d260d1 factor out breadcrumbs
drewp@bigasterisk.com
parents: 41
diff changeset
74 const requestedPath = "/" + this._router.params[0];
1d2c65d260d1 factor out breadcrumbs
drewp@bigasterisk.com
parents: 41
diff changeset
75
38
0aea9e55899b hack in path router - dirs kind of work; putting a video in the path doesn't
drewp@bigasterisk.com
parents: 37
diff changeset
76 return html`
39
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
77 <header>
42
1d2c65d260d1 factor out breadcrumbs
drewp@bigasterisk.com
parents: 41
diff changeset
78 <img src=${this._router.link("/video/logo1.png")} title="JelloBello" />
1d2c65d260d1 factor out breadcrumbs
drewp@bigasterisk.com
parents: 41
diff changeset
79 <v-breadcrumbs .link=${this._router.link} dirPath=${requestedPath}></v-breadcrumbs>
39
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
80 </header>
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
81 <main>${this._router.outlet()}</main>
41
drewp@bigasterisk.com
parents: 39
diff changeset
82 <footer>
drewp@bigasterisk.com
parents: 39
diff changeset
83 <bigast-loginbar></bigast-loginbar>
drewp@bigasterisk.com
parents: 39
diff changeset
84 <span><a href="ingest/">Add new videos...</a></span>
drewp@bigasterisk.com
parents: 39
diff changeset
85 </footer>
38
0aea9e55899b hack in path router - dirs kind of work; putting a video in the path doesn't
drewp@bigasterisk.com
parents: 37
diff changeset
86 `;
0aea9e55899b hack in path router - dirs kind of work; putting a video in the path doesn't
drewp@bigasterisk.com
parents: 37
diff changeset
87 }
0aea9e55899b hack in path router - dirs kind of work; putting a video in the path doesn't
drewp@bigasterisk.com
parents: 37
diff changeset
88 }
0aea9e55899b hack in path router - dirs kind of work; putting a video in the path doesn't
drewp@bigasterisk.com
parents: 37
diff changeset
89
0aea9e55899b hack in path router - dirs kind of work; putting a video in the path doesn't
drewp@bigasterisk.com
parents: 37
diff changeset
90 @customElement("video-page2")
0aea9e55899b hack in path router - dirs kind of work; putting a video in the path doesn't
drewp@bigasterisk.com
parents: 37
diff changeset
91 export class VideoPage2 extends LitElement {
0aea9e55899b hack in path router - dirs kind of work; putting a video in the path doesn't
drewp@bigasterisk.com
parents: 37
diff changeset
92 @property() showVid?: string;
39
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
93 @property() videoListings?: VideoListings;
38
0aea9e55899b hack in path router - dirs kind of work; putting a video in the path doesn't
drewp@bigasterisk.com
parents: 37
diff changeset
94 @property() link!: (s: string) => string;
39
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
95 @property() dirName?: string;
38
0aea9e55899b hack in path router - dirs kind of work; putting a video in the path doesn't
drewp@bigasterisk.com
parents: 37
diff changeset
96
31
f7236339097e esc key to close video
drewp@bigasterisk.com
parents: 24
diff changeset
97 protected firstUpdated(_changedProperties: PropertyValues): void {
f7236339097e esc key to close video
drewp@bigasterisk.com
parents: 24
diff changeset
98 document.addEventListener("keydown", (e) => {
f7236339097e esc key to close video
drewp@bigasterisk.com
parents: 24
diff changeset
99 if (e.key == "Escape") {
f7236339097e esc key to close video
drewp@bigasterisk.com
parents: 24
diff changeset
100 this.closePlayer();
f7236339097e esc key to close video
drewp@bigasterisk.com
parents: 24
diff changeset
101 }
f7236339097e esc key to close video
drewp@bigasterisk.com
parents: 24
diff changeset
102 });
f7236339097e esc key to close video
drewp@bigasterisk.com
parents: 24
diff changeset
103 }
39
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
104
38
0aea9e55899b hack in path router - dirs kind of work; putting a video in the path doesn't
drewp@bigasterisk.com
parents: 37
diff changeset
105 protected update(changedProperties: PropertyValues<this>): void {
39
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
106 const resp = changedProperties.has("videoListings");
38
0aea9e55899b hack in path router - dirs kind of work; putting a video in the path doesn't
drewp@bigasterisk.com
parents: 37
diff changeset
107 if (resp) {
0aea9e55899b hack in path router - dirs kind of work; putting a video in the path doesn't
drewp@bigasterisk.com
parents: 37
diff changeset
108 // if (this.showVid) {
0aea9e55899b hack in path router - dirs kind of work; putting a video in the path doesn't
drewp@bigasterisk.com
parents: 37
diff changeset
109 // this.openPlayer();
0aea9e55899b hack in path router - dirs kind of work; putting a video in the path doesn't
drewp@bigasterisk.com
parents: 37
diff changeset
110 // } else {
0aea9e55899b hack in path router - dirs kind of work; putting a video in the path doesn't
drewp@bigasterisk.com
parents: 37
diff changeset
111 // this.closePlayer();
0aea9e55899b hack in path router - dirs kind of work; putting a video in the path doesn't
drewp@bigasterisk.com
parents: 37
diff changeset
112 // }
0aea9e55899b hack in path router - dirs kind of work; putting a video in the path doesn't
drewp@bigasterisk.com
parents: 37
diff changeset
113 }
0aea9e55899b hack in path router - dirs kind of work; putting a video in the path doesn't
drewp@bigasterisk.com
parents: 37
diff changeset
114 super.update(changedProperties);
0aea9e55899b hack in path router - dirs kind of work; putting a video in the path doesn't
drewp@bigasterisk.com
parents: 37
diff changeset
115 }
0aea9e55899b hack in path router - dirs kind of work; putting a video in the path doesn't
drewp@bigasterisk.com
parents: 37
diff changeset
116
5
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
117 static styles = [
13
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents: 12
diff changeset
118 unsafeCSS(maincss),
5
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
119 css`
38
0aea9e55899b hack in path router - dirs kind of work; putting a video in the path doesn't
drewp@bigasterisk.com
parents: 37
diff changeset
120 :host {
0aea9e55899b hack in path router - dirs kind of work; putting a video in the path doesn't
drewp@bigasterisk.com
parents: 37
diff changeset
121 display: block;
0aea9e55899b hack in path router - dirs kind of work; putting a video in the path doesn't
drewp@bigasterisk.com
parents: 37
diff changeset
122 }
41
drewp@bigasterisk.com
parents: 39
diff changeset
123
drewp@bigasterisk.com
parents: 39
diff changeset
124 video-section {
drewp@bigasterisk.com
parents: 39
diff changeset
125 margin: 8px;
drewp@bigasterisk.com
parents: 39
diff changeset
126 }
drewp@bigasterisk.com
parents: 39
diff changeset
127
12
e60be5d74c07 css edits and ingest link
drewp@bigasterisk.com
parents: 8
diff changeset
128 .listing a {
5
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
129 font-size: 20px;
6
ccfea3625cf6 render thumbs and display them (no video player at all atm)
drewp@bigasterisk.com
parents: 5
diff changeset
130 text-transform: uppercase;
ccfea3625cf6 render thumbs and display them (no video player at all atm)
drewp@bigasterisk.com
parents: 5
diff changeset
131 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
132 }
38
0aea9e55899b hack in path router - dirs kind of work; putting a video in the path doesn't
drewp@bigasterisk.com
parents: 37
diff changeset
133
41
drewp@bigasterisk.com
parents: 39
diff changeset
134 .listing a .subdir {
drewp@bigasterisk.com
parents: 39
diff changeset
135 transition: background 0.5s;
drewp@bigasterisk.com
parents: 39
diff changeset
136 transition-delay: 0.1s;
drewp@bigasterisk.com
parents: 39
diff changeset
137 background: #4ea1bd21;
drewp@bigasterisk.com
parents: 39
diff changeset
138 }
drewp@bigasterisk.com
parents: 39
diff changeset
139
drewp@bigasterisk.com
parents: 39
diff changeset
140 .listing a:hover .subdir {
drewp@bigasterisk.com
parents: 39
diff changeset
141 transition: background 0.5s;
drewp@bigasterisk.com
parents: 39
diff changeset
142 background: #4ea1bd66;
drewp@bigasterisk.com
parents: 39
diff changeset
143 }
drewp@bigasterisk.com
parents: 39
diff changeset
144
5
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
145 .subdir {
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
146 vertical-align: top;
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
147 color: white;
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
148 padding: 11px;
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
149 display: inline-block;
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
150 width: 300px;
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
151 margin: 5px;
41
drewp@bigasterisk.com
parents: 39
diff changeset
152 border-radius: 2px;
5
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
153 }
41
drewp@bigasterisk.com
parents: 39
diff changeset
154
drewp@bigasterisk.com
parents: 39
diff changeset
155 .subdir:after {
drewp@bigasterisk.com
parents: 39
diff changeset
156 content: " › ";
drewp@bigasterisk.com
parents: 39
diff changeset
157 color: #979797;
drewp@bigasterisk.com
parents: 39
diff changeset
158 }
drewp@bigasterisk.com
parents: 39
diff changeset
159
8
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
160 #scrim {
22
ff73b95fc72f frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents: 13
diff changeset
161 position: fixed;
8
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
162 background: #000000b5;
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
163 inset: 0;
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
164 display: none;
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
165 }
5
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
166 `,
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
167 ];
39
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
168
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
169 thumbSrc(v: VideoFile) {
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
170 return "/video/api/thumbnail?webRelPath=" + encodeURIComponent(v.webRelPath);
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
171 }
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
172
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
173 renderSubdir(subdir: Subdir): TemplateResult {
42
1d2c65d260d1 factor out breadcrumbs
drewp@bigasterisk.com
parents: 41
diff changeset
174 return html`<a href="${this.link(subdir.path) + "/"}"><div class="subdir">${subdir.label}</div></a>`;
39
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
175 }
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
176
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
177 renderVideoListing(video: VideoFile) {
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
178 return html`<video-section
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
179 @playVideo=${this.playVideo}
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
180 thumbRelPath=${this.thumbSrc(video)}
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
181 title="${video.label}"
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
182 manifest="/video/files/${video.webDataPath}"
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
183 ></video-section>`;
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
184 }
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
185
2
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
186 render() {
39
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
187 if (this.videoListings == null) {
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
188 return html`<div>Loading...</div>`;
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
189 }
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
190 const listings = [
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
191 html`${this.videoListings.subdirs.map((s) => this.renderSubdir(s))}`, //
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
192 html`${this.videoListings.videos.map((v) => this.renderVideoListing(v))}`,
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
193 ];
42
1d2c65d260d1 factor out breadcrumbs
drewp@bigasterisk.com
parents: 41
diff changeset
194 const dirTitle = this.dirName ? html`<h2>${this.dirName.slice(0, -1)}</h2>` : html``;
2
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
195 return html`
42
1d2c65d260d1 factor out breadcrumbs
drewp@bigasterisk.com
parents: 41
diff changeset
196 ${dirTitle}
39
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
197 <div class="listing">${listings}</div>
5
75b54be050bc show one subdir of archive at once, with folders and parents-breadcrumbs
drewp@bigasterisk.com
parents: 4
diff changeset
198
8
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
199 <div id="scrim" @click=${this.closePlayer}></div>
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
200 <page-player manifest=""></page-player>
2
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
201 `;
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
202 }
39
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
203
38
0aea9e55899b hack in path router - dirs kind of work; putting a video in the path doesn't
drewp@bigasterisk.com
parents: 37
diff changeset
204 escapeALittle(fileUri: string): string {
0aea9e55899b hack in path router - dirs kind of work; putting a video in the path doesn't
drewp@bigasterisk.com
parents: 37
diff changeset
205 return fileUri.replace("#", encodeURIComponent("#"));
33
6ee4c73decf4 fix playability of vids with # in their titles
drewp@bigasterisk.com
parents: 31
diff changeset
206 }
39
b5b29f6ef5cb cleanup and refactor
drewp@bigasterisk.com
parents: 38
diff changeset
207
8
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
208 playVideo(ev: CustomEvent) {
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
209 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
210
33
6ee4c73decf4 fix playability of vids with # in their titles
drewp@bigasterisk.com
parents: 31
diff changeset
211 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
212 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
213
33
6ee4c73decf4 fix playability of vids with # in their titles
drewp@bigasterisk.com
parents: 31
diff changeset
214 sv.src = player.manifest;
34
9edb3df3cdb3 fix autoplay
drewp@bigasterisk.com
parents: 33
diff changeset
215 sv.autoplay = true;
8
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
216 player.size = "big";
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
217 this.shadowRoot!.querySelector("#scrim")!.style.display = "block";
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
218 }
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
219 closePlayer() {
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
220 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
221 player.size = "hidden";
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
222
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
223 this.shadowRoot!.querySelector("#scrim")!.style.display = "none";
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
224 }
2
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
225 }