import { Component, Host, h, Prop } from '@stencil/core';
export class UxplVideo {
  constructor() {
    this.visible = true;
  }
  togglePlaying(status) {
    var _a, _b, _c, _d;
    if (status) {
      (_b = (_a = this.labelElement) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add('hidden');
    }
    else {
      (_d = (_c = this.labelElement) === null || _c === void 0 ? void 0 : _c.classList) === null || _d === void 0 ? void 0 : _d.remove('hidden');
    }
  }
  render() {
    if (this.visible) {
      return (h(Host, null,
        h("div", { class: "video-title", ref: (el) => this.labelElement = el },
          h("p", null, this.label)),
        h("video", { class: "video-card", controls: true, onPlay: () => { this.togglePlaying(true); }, onPause: () => this.togglePlaying(false), onPlaying: () => { this.togglePlaying(true); } },
          h("source", { src: this.url }))));
    }
    else {
      undefined;
    }
  }
  static get is() { return "uxpl-video"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["uxpl-video.css"]
  }; }
  static get styleUrls() { return {
    "$": ["uxpl-video.css"]
  }; }
  static get properties() { return {
    "label": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "label",
      "reflect": false
    },
    "url": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "url",
      "reflect": false
    },
    "visible": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "visible",
      "reflect": false,
      "defaultValue": "true"
    }
  }; }
}
