Mercurial > code > home > repos > video

comparison src/VideoSection.ts @ 8:f80f8c22752d

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
start PagePlayer, a singleton player that appears on top
author drewp@bigasterisk.com
date Sun, 09 Apr 2023 19:37:05 -0700
parents ccfea3625cf6
children ff73b95fc72f
comparison
equal deleted inserted replaced
7:de93b9133acb 8:f80f8c22752d
16 display: inline-block; 16 display: inline-block;
17 padding: 10px; 17 padding: 10px;
18 color: white; 18 color: white;
19 width: 300px; 19 width: 300px;
20 } 20 }
21 #video.big {
22 z-index: 2;
23 position: fixed;
24 left: 0px;
25 top: 0px;
26 }
27 `, 21 `,
28 ]; 22 ];
29 render() { 23 render() {
30 const vidCls = this.big ? "big" : "";
31 const inx = 20,
32 iny = 50;
33 const inw = 300,
34 inh = 150;
35 const outw = 720,
36 outh = 480;
37 const scl = outh / inh;
38 const tx = (document.body.clientWidth - inw * scl) / 2,
39 ty = (document.body.clientHeight - inh * scl) / 2;
40 const style = this.big ? `transform: translate(${-inx - inw / 2}px,${-iny - inh / 2}px) scale(${outh / inh}) translate(${tx}px,${ty}px);` : "";
41 return html` 24 return html`
42 <section> 25 <section @click=${this.click}>
43 <h1>${this.title}</h1> 26 <h1>${this.title}</h1>
44 <!-- <shaka-video class="${vidCls}" style="${style}" id="video" width="720" height="480" src="${this.manifest}" controls></video>-->
45 <img src="${this.thumbRelPath}" /> 27 <img src="${this.thumbRelPath}" />
46 </section> 28 </section>
47 `; 29 `;
30 }
31 click() {
32 this.dispatchEvent(
33 new CustomEvent("playVideo", {
34 detail: {
35 manifest: this.manifest,
36 zoomFrom: "my location",
37 },
38 })
39 );
48 } 40 }
49 updated() { 41 updated() {
50 // const el=this.querySelector("#video") 42 // const el=this.querySelector("#video")
51 // console.log(el.clientWidth); 43 // console.log(el.clientWidth);
52 } 44 }