Mercurial > code > home > repos > video

comparison 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
comparison
equal deleted inserted replaced
45:df51269bcef4 46:882d0bb0f801
28 } 28 }
29 29
30 function subdirQuery(subdir: string): string { 30 function subdirQuery(subdir: string): string {
31 return "subdir=" + encodeURIComponent(subdir); 31 return "subdir=" + encodeURIComponent(subdir);
32 } 32 }
33 const PATH_PREFIX = "/video";
34 let routerShared: Router;
33 35
34 class route { 36 class route {
35 path = "/video/*"; 37 path = PATH_PREFIX + "/*";
36 pageData: PageData | null = null; 38 pageData: PageData | null = null;
37 39
38 async enter(params: { [key: string]: string | undefined }): Promise<boolean> { 40 async enter(params: { [key: string]: string | undefined }): Promise<boolean> {
39 const webRelPath = "/" + params[0]!; // could be /a/dir/ or /a/video 41 const webRelPath = "/" + params[0]!; // could be /a/dir/ or /a/video
40 console.log("enter", webRelPath); 42 const resp = await fetch(PATH_PREFIX + "/api/videos?" + subdirQuery(webRelPath));
41 const resp = await fetch("/video/api/videos?" + subdirQuery(webRelPath));
42 if (resp.status == 404) { 43 if (resp.status == 404) {
43 return false; 44 return false;
44 } 45 }
45 this.pageData = await resp.json(); 46 this.pageData = await resp.json();
46 if (!this.pageData) return false; 47 if (!this.pageData) return false;
47 48
48 return true; 49 return true;
49 } 50 }
50 51
51 render(p: { [key: string]: string | undefined }) { 52 render(p: { [key: string]: string | undefined }) {
52 console.log("render", this.pageData);
53 return html`<video-page2 .pageData=${this.pageData}></video-page2>`; 53 return html`<video-page2 .pageData=${this.pageData}></video-page2>`;
54 } 54 }
55 } 55 }
56 56
57 @customElement("video-page") 57 @customElement("video-page")
59 static styles = [unsafeCSS(maincss)]; 59 static styles = [unsafeCSS(maincss)];
60 private _router = new Router(this, [new route()], {}); 60 private _router = new Router(this, [new route()], {});
61 61
62 constructor() { 62 constructor() {
63 super(); 63 super();
64 window.rr = this._router; 64 routerShared = this._router;
65 } 65 }
66 66
67 render() { 67 render() {
68 const pd = (this._router.routes[0] as route).pageData; 68 const pd = (this._router.routes[0] as route).pageData;
69 if (!pd) { 69 if (!pd) {
70 console.log("no page data", this._router.routes);
71 return html`loading...`; 70 return html`loading...`;
72 throw new Error("no page data"); 71 throw new Error("no page data");
73 } 72 }
74 console.log("yes page data", pd);
75 return html` 73 return html`
76 <header> 74 <header>
77 <img src="/video/logo1.png" title="JelloBello" /> 75 <img src="${PATH_PREFIX}/logo1.png" title="JelloBello" />
78 <v-breadcrumbs dirPath=${pd.webDirRelPath}></v-breadcrumbs> 76 <v-breadcrumbs dirPath=${pd.webDirRelPath}></v-breadcrumbs>
79 </header> 77 </header>
80 <main>${this._router.outlet()}</main> 78 <main>${this._router.outlet()}</main>
81 <footer> 79 <footer>
82 <bigast-loginbar></bigast-loginbar> 80 <bigast-loginbar></bigast-loginbar>
87 } 85 }
88 86
89 @customElement("video-page2") 87 @customElement("video-page2")
90 export class VideoPage2 extends LitElement { 88 export class VideoPage2 extends LitElement {
91 @property() pageData?: PageData; 89 @property() pageData?: PageData;
90 @queryAsync("page-player") pagePlayer!: Promise<PagePlayer>;
92 91
93 protected firstUpdated(_changedProperties: PropertyValues): void { 92 protected firstUpdated(_changedProperties: PropertyValues): void {
94 document.addEventListener("keydown", (e) => { 93 document.addEventListener("keydown", (e) => {
95 if (e.key == "Escape") { 94 if (e.key == "Escape") {
96 this.gotoDirListingPage(); 95 this.gotoDirListingPage();
99 } 98 }
100 99
101 async connectedCallback() { 100 async connectedCallback() {
102 super.connectedCallback(); 101 super.connectedCallback();
103 if (this.pageData?.autoplay) { 102 if (this.pageData?.autoplay) {
104 //this.playVideo({ detail: { manifest: this.pageData.autoplay.webDataPath } } as CustomEvent);
105 console.log("we're a player page now", this.pageData.autoplay);
106 this.startPlayer(this.pageData.autoplay); 103 this.startPlayer(this.pageData.autoplay);
107 // this might not autoplay 104 // this might not autoplay
108 } else { 105 } else {
109 this.closePlayer(); 106 this.closePlayer();
110 } 107 }
113 super.update(changedProperties); 110 super.update(changedProperties);
114 if (changedProperties.has("pageData")) { 111 if (changedProperties.has("pageData")) {
115 if (this.pageData?.autoplay) { 112 if (this.pageData?.autoplay) {
116 this.startPlayer(this.pageData.autoplay); 113 this.startPlayer(this.pageData.autoplay);
117 } else { 114 } else {
118 this.closePlayer(); 115 this.closePlayer();
119 } 116 }
120 } 117 }
121 console.log("updated", this.pageData?.autoplay);
122 } 118 }
123 119
124 static styles = [ 120 static styles = [
125 unsafeCSS(maincss), 121 unsafeCSS(maincss),
126 css` 122 css`
172 } 168 }
173 `, 169 `,
174 ]; 170 ];
175 171
176 thumbSrc(vf: VideoFile) { 172 thumbSrc(vf: VideoFile) {
177 return "/video/api/thumbnail?webRelPath=" + encodeURIComponent(vf.webRelPath); 173 return PATH_PREFIX + "/api/thumbnail?webRelPath=" + encodeURIComponent(vf.webRelPath);
178 } 174 }
179 175
180 renderSubdir(subdir: Subdir): TemplateResult { 176 renderSubdir(subdir: Subdir): TemplateResult {
181 return html`<a href="/video${subdir.path}"><div class="subdir">${subdir.label}</div></a>`; 177 return html`<a href="${PATH_PREFIX}${subdir.path}"><div class="subdir">${subdir.label}</div></a>`;
182 } 178 }
183 179
184 renderVideoListing(video: VideoFile) { 180 renderVideoListing(video: VideoFile) {
185 return html`<video-section 181 return html`<video-section
186 @playVideo=${this.gotoVideoPlayerPage} 182 @playVideo=${this.gotoVideoPlayerPage}
187 webRelPath=${video.webRelPath} 183 webRelPath=${video.webRelPath}
188 thumbRelPath=${this.thumbSrc(video)} 184 thumbRelPath=${this.thumbSrc(video)}
189 title="${video.label}" 185 title="${video.label}"
190 manifest="/video/files${video.webDataPath}" 186 manifest="${PATH_PREFIX}/files${video.webDataPath}"
191 ></video-section>`; 187 ></video-section>`;
192 } 188 }
193 189
194 render() { 190 render() {
195 if (this.pageData == null) { 191 if (this.pageData == null) {
210 } 206 }
211 207
212 escapeALittle(fileUri: string): string { 208 escapeALittle(fileUri: string): string {
213 return fileUri.replace("#", encodeURIComponent("#")); 209 return fileUri.replace("#", encodeURIComponent("#"));
214 } 210 }
215 @queryAsync("page-player") pagePlayer: Promise<PagePlayer>;
216 211
217 async gotoVideoPlayerPage(ev: CustomEvent) { 212 async gotoVideoPlayerPage(ev: CustomEvent) {
218 const player = await this.pagePlayer; 213 const player = await this.pagePlayer;
219 console.log("playing", player, ev.detail.manifest, ev.detail.webRelPath); 214 this.goto(PATH_PREFIX + "" + ev.detail.webRelPath);
220 this.goto("/video" + ev.detail.webRelPath); 215 }
221 } 216
222 async gotoDirListingPage() { 217 gotoDirListingPage() {
223 this.goto("/video" + this.pageData?.webDirRelPath); 218 this.goto(PATH_PREFIX + "" + this.pageData?.webDirRelPath);
224 } 219 }
225 220
221 getScrim(): HTMLElement {
222 return this.shadowRoot!.querySelector("#scrim")!;
223 }
224
226 async startPlayer(p: VideoFile) { 225 async startPlayer(p: VideoFile) {
227 const player = await this.pagePlayer; 226 const player = await this.pagePlayer;
228 player.manifest = this.escapeALittle("/video/files" + p.webDataPath); 227 player.manifest = this.escapeALittle(PATH_PREFIX + "/files" + p.webDataPath);
229 const sv = player.shadowRoot!.querySelector("shaka-video")! as ShakaVideoElement; 228 const sv = player.shadowRoot!.querySelector("shaka-video")! as ShakaVideoElement;
230 229
231 sv.src = player.manifest; 230 sv.src = player.manifest;
232 sv.autoplay = true; 231 sv.autoplay = true;
233 player.size = "big"; 232 player.size = "big";
234 this.shadowRoot!.querySelector("#scrim")!.style.display = "block"; 233 this.getScrim().style.display = "block";
235 } 234 }
235
236 goto(url: string) { 236 goto(url: string) {
237 window.rr.goto(url); 237 routerShared.goto(url);
238 window.history.pushState({}, "", url); 238 window.history.pushState({}, "", url);
239 } 239 }
240
240 async closePlayer() { 241 async closePlayer() {
241 const player = await this.pagePlayer; 242 const player = await this.pagePlayer;
242 if (player.size === "hidden") { 243 if (player.size === "hidden") {
243 console.log("wasn't playing", player.size);
244 return; 244 return;
245 } 245 }
246 // return;
247 // this.goto("/video/" + this.pageData?.webDirRelPath);
248 player.size = "hidden"; 246 player.size = "hidden";
249 247 this.getScrim().style.display = "none";
250 this.shadowRoot!.querySelector("#scrim")!.style.display = "none"; 248 }
251 } 249 }
252 }