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);