Mercurial > code > home > repos > video
diff src/VideoSection.ts @ 8:f80f8c22752d
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 |
line wrap: on
line diff
--- a/src/VideoSection.ts Sun Apr 09 19:36:07 2023 -0700 +++ b/src/VideoSection.ts Sun Apr 09 19:37:05 2023 -0700 @@ -18,34 +18,26 @@ color: white; width: 300px; } - #video.big { - z-index: 2; - position: fixed; - left: 0px; - top: 0px; - } `, ]; render() { - const vidCls = this.big ? "big" : ""; - const inx = 20, - iny = 50; - const inw = 300, - inh = 150; - const outw = 720, - outh = 480; - const scl = outh / inh; - const tx = (document.body.clientWidth - inw * scl) / 2, - ty = (document.body.clientHeight - inh * scl) / 2; - const style = this.big ? `transform: translate(${-inx - inw / 2}px,${-iny - inh / 2}px) scale(${outh / inh}) translate(${tx}px,${ty}px);` : ""; return html` - <section> + <section @click=${this.click}> <h1>${this.title}</h1> - <!-- <shaka-video class="${vidCls}" style="${style}" id="video" width="720" height="480" src="${this.manifest}" controls></video>--> <img src="${this.thumbRelPath}" /> </section> `; } + click() { + this.dispatchEvent( + new CustomEvent("playVideo", { + detail: { + manifest: this.manifest, + zoomFrom: "my location", + }, + }) + ); + } updated() { // const el=this.querySelector("#video") // console.log(el.clientWidth);