Mercurial > code > home > repos > video

annotate src/VideoPage.ts @ 46:882d0bb0f801

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