import { Component, h, Prop, State } from '@stencil/core';
export class AkordVideoStreamViewer {
  constructor() {
    this.loading = false;
  }
  componentDidLoad() {
    this.initVideo();
    this.stream();
  }
  initVideo() {
    this.mediaSource = new MediaSource();
    this.mediaSource.addEventListener('sourceopen', () => {
      console.log('open', this.mediaSource);
      this.videoSourceBuffer = this.mediaSource.addSourceBuffer('video/mp4; codecs="avc1.64001e"');
      console.log('added source buffer');
      console.log(this.mediaSource);
    });
    this.mediaSourceUrl = URL.createObjectURL(this.mediaSource);
    this.videoEl.src = this.mediaSourceUrl;
    console.log(this.videoEl);
  }
  onCanPlay() {
    this.loading = false;
  }
  stream() {
    console.log("streaming");
    fetch(this.src)
      .then((response) => response.arrayBuffer())
      .then((videoData) => {
      console.log(this.videoSourceBuffer);
      console.log(videoData);
      this.videoSourceBuffer.appendBuffer(videoData);
      console.log(this.videoSourceBuffer);
    });
  }
  render() {
    if (this.loading)
      return (null);
    return (h("video", { controls: true, onCanPlay: () => this.onCanPlay(), ref: (el) => {
        this.videoEl = el;
        console.log(this.videoEl);
      } }, "Video playback is not supported by your browser."));
  }
  static get is() { return "akord-video-stream-viewer"; }
  static get originalStyleUrls() { return {
    "$": ["akord-video-stream-viewer.css"]
  }; }
  static get styleUrls() { return {
    "$": ["akord-video-stream-viewer.css"]
  }; }
  static get properties() { return {
    "src": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "src",
      "reflect": false
    }
  }; }
  static get states() { return {
    "loading": {}
  }; }
}
