import { r as registerInstance, h, e as getElement } from './index-5568e3fa.js';

const sparkleYoutubeCss = ":host(.loaded) div.youtube-container{opacity:var(--sparkle-youtube-opacity-loaded, 1)}div.youtube-container{opacity:var(--sparkle-youtube-opacity-not-loaded, 0);transition:var(--sparkle-youtube-transition, opacity 0.15s linear)}.embed-container{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%}.embed-container iframe,.embed-container object,.embed-container embed{position:absolute;top:0;left:0;width:100%;height:100%}";

const SparkleYoutube = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.video_thumbnail = '';
  }
  componentDidLoad() {
    this.classMode = this.initialClassMode;
    this.classModeChanged();
  }
  classModeChanged() {
    if (this.classMode) {
      var youtube_video_id = this.src.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop();
      if (youtube_video_id.length == 11) {
        this.video_thumbnail = '//img.youtube.com/vi/' + youtube_video_id + '/0.jpg';
      }
    }
  }
  async classRoomModeChanged(val) {
    this.classMode = val;
  }
  render() {
    return (h("div", null, !this.classMode ? (h("div", { class: "embed-container" }, h("iframe", { src: this.src.replace("watch?v=", "embed/"), frameborder: "0", allowFullScreen: true }))) : (h("div", null, h("img", { src: this.video_thumbnail })))));
  }
  get el() { return getElement(this); }
  static get watchers() { return {
    "classMode": ["classModeChanged"]
  }; }
};
SparkleYoutube.style = sparkleYoutubeCss;

export { SparkleYoutube as sparkle_youtube };
