Mercurial > code > home > repos > video

annotate src/VideoSection.ts @ 22:ff73b95fc72f

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
frontend cleanups and improvements. this commit contains some future work too
author drewp@bigasterisk.com
date Mon, 17 Apr 2023 13:33:05 -0700
parents f80f8c22752d
children 44bd161e4779
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
1 import { LitElement, html, css } from "lit";
2
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
2 import { customElement, property } from "lit/decorators.js";
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
3 import "shaka-video-element";
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
4
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
5 @customElement("video-section")
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
6 export class VideoSection extends LitElement {
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
7 @property({ type: String }) manifest: string | undefined;
6
ccfea3625cf6 render thumbs and display them (no video player at all atm)
drewp@bigasterisk.com
parents: 4
diff changeset
8 @property({ type: String }) thumbRelPath: string | undefined;
2
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
9 @property({ type: String }) title: string = "(unknown)";
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
10 @property({ type: String }) big: boolean = false;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
11
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
12 static styles = [
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
13 css`
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
14 section {
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
15 background: #ffffff14;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
16 display: inline-block;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
17 padding: 10px;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
18 color: white;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
19 width: 300px;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
20 }
22
ff73b95fc72f frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents: 8
diff changeset
21 .video-title {
ff73b95fc72f frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents: 8
diff changeset
22 font-size: 120%;
ff73b95fc72f frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents: 8
diff changeset
23 }
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
24 `,
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
25 ];
2
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
26 render() {
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
27 return html`
8
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
28 <section @click=${this.click}>
22
ff73b95fc72f frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents: 8
diff changeset
29 <div class="video-title">${this.title}</div>
6
ccfea3625cf6 render thumbs and display them (no video player at all atm)
drewp@bigasterisk.com
parents: 4
diff changeset
30 <img src="${this.thumbRelPath}" />
2
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
31 </section>
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
32 `;
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
33 }
8
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
34 click() {
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
35 this.dispatchEvent(
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
36 new CustomEvent("playVideo", {
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
37 detail: {
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
38 manifest: this.manifest,
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
39 zoomFrom: "my location",
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
40 },
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
41 })
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
42 );
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
43 }
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
44 updated() {
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
45 // const el=this.querySelector("#video")
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
46 // console.log(el.clientWidth);
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
47 }
2
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
48 }