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