--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/index.ts	Tue Jul 21 23:28:04 2020 -0700
@@ -0,0 +1,69 @@
+import {
+  LitElement,
+  html,
+  customElement,
+  property,
+  unsafeCSS,
+  PropertyValues,
+} from "lit-element";
+
+const shaka = (window as any).shaka! as any;
+
+@customElement("video-page")
+export class VideoPage extends LitElement {
+  render() {
+    return html`
+      <video-section
+        title="Henry Sugar"
+        manifest="/vids/henry-sugar/manifest.mpd"
+      ></video-section>
+      <video-section
+        title="Henry Sugar bloopers"
+        manifest="/vids/henry-sugar-bloopers/manifest.mpd"
+      ></video-section>
+    `;
+  }
+}
+
+@customElement("video-section")
+export class VideoSection extends LitElement {
+  @property({ type: String }) manifest: string | undefined;
+  @property({ type: String }) title: string = "(unknown)";
+  render() {
+    return html`
+      <style>
+        section {
+          background: #ffffff14;
+          display: inline-block;
+          padding: 10px;
+          color: white;
+        }
+      </style>
+      <section>
+        <h1>${this.title}</h1>
+        <video id="video" width="720" height="480" controls></video>
+      </section>
+    `;
+  }
+
+  updated(changedProperties: Map<string, any>) {
+    if (!this.manifest) {
+      return;
+    }
+    var video = this.shadowRoot!.querySelector("#video");
+    var player = new shaka.Player(video);
+
+    player.addEventListener("error", onErrorEvent);
+    player.load(this.manifest).catch(onError);
+    function onErrorEvent(event: any) {
+      const error = event.detail;
+      onError(event.detail);
+    }
+
+    function onError(error: any) {
+      console.error("Error code", error.code, "object", error);
+    }
+  }
+}
+
+document.addEventListener("DOMContentLoaded", shaka.polyfill.installAll);