Mercurial > code > home > repos > video

annotate src/VideoSection.ts @ 4:c8a41359505c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
server provides video listing from disk
author drewp@bigasterisk.com
date Sat, 25 Mar 2023 16:01:56 -0700
parents 78c1a2983010
children ccfea3625cf6
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;
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
8 @property({ type: String }) title: string = "(unknown)";
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
9 @property({ type: String }) big: boolean = false;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
10
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
11 static styles = [
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
12 css`
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
13 section {
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
14 background: #ffffff14;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
15 display: inline-block;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
16 padding: 10px;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
17 color: white;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
18 width: 300px;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
19 }
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
20 #video.big {
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
21 z-index: 2;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
22 position: fixed;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
23 left: 0px;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
24 top: 0px;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
25 }
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
26 `,
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
27 ];
2
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
28 render() {
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
29 const vidCls = this.big ? "big" : "";
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
30 const inx = 20,
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
31 iny = 50;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
32 const inw = 300,
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
33 inh = 150;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
34 const outw = 720,
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
35 outh = 480;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
36 const scl = outh / inh;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
37 const tx = (document.body.clientWidth - inw * scl) / 2,
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
38 ty = (document.body.clientHeight - inh * scl) / 2;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
39 const style = this.big ? `transform: translate(${-inx - inw / 2}px,${-iny - inh / 2}px) scale(${outh / inh}) translate(${tx}px,${ty}px);` : "";
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
40 console.log(document.body.clientWidth);
2
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
41 return html`
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
42 <section>
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
43 <h1>${this.title}</h1>
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
44 <shaka-video class="${vidCls}" style="${style}" id="video" width="720" height="480" src="${this.manifest}" controls></video>
2
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
45 </section>
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
46 `;
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
47 }
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
48 updated() {
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
49 // const el=this.querySelector("#video")
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
50 // console.log(el.clientWidth);
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
51 }
2
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
52 }