--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/PagePlayer.ts	Sun Apr 09 19:37:05 2023 -0700
@@ -0,0 +1,53 @@
+import { LitElement, html, css, PropertyValues } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import "shaka-video-element";
+
+interface CustomVideoElement extends HTMLVideoElement {}
+
+export interface ShakaVideoElement extends CustomVideoElement {}
+
+@customElement("page-player")
+export class PagePlayer extends LitElement {
+  @property({ type: String }) manifest: string | undefined;
+  @property({ type: String }) size: "hidden" | "big" | "full" = "hidden";
+  player!: Element;
+  static styles = [
+    css`
+      div {
+        z-index: 2;
+        position: fixed;
+      }
+      div.full {
+        inset: 0;
+      }
+      div.big {
+        inset: 5em;
+      }
+      div.hidden {
+        display: none;
+      }
+      shaka-video {
+        width: 100%;
+        height: 100%;
+      }
+    `,
+  ];
+
+  updated(oldVals: PropertyValues<this>) {
+    if (oldVals.get("size")) {
+      if (this.size == "hidden") {
+        const player = this.shadowRoot!.querySelector("shaka-video")! as ShakaVideoElement;
+        player.pause();
+      } else if (this.size == "big") {
+      } else if (this.size == "full") {
+      }
+    }
+  }
+  render() {
+    return html`
+      <div class="${this.size}">
+        <shaka-video src="${this.manifest}" controls></video>
+      </div>
+    `;
+  }
+}