/* This is a fake player, for when no video is available */
import placeholderPlayerStyles from "./PlaceholderPlayer.module.css";

const PlaceholderPlayer = function (ns) {
  return class extends ns.Widgets.Widget {
    constructor(player, config) {
      super(player, config);
    }

    static defaults = {
      autostart: false,
    };

    static template = '<div class="Ldt-PlaceholderPlayer">(loading)</div>';

    draw() {
      this.renderTemplate();

      var paused = true,
        timeDelta = 0,
        currentTime = new ns.Model.Time(0),
        media = this.media,
        sel = this.$.find(".Ldt-PlaceholderPlayer");

      function updateTime() {
        if (!paused) {
          currentTime = new ns.Model.Time(new Date().valueOf() - timeDelta);
          if (currentTime <= media.duration) {
            media.trigger("timeupdate", currentTime);
            setTimeout(updateTime, 100);
          } else {
            currentTime = media.duration;
            media.pause();
          }
        }
        sel.text(currentTime.toString(true));
      }

      // Binding functions to Popcorn
      media.on("setcurrenttime", function (_milliseconds) {
        timeDelta = new Date().valueOf() - _milliseconds;
        currentTime = new ns.Model.Time(_milliseconds);
        media.trigger("seeked");
        media.trigger("timeupdate", currentTime);
        sel.text(currentTime.toString(true));
      });

      media.on("setplay", function () {
        paused = false;
        timeDelta = new Date().valueOf() - currentTime;
        media.trigger("play");
        updateTime();
      });

      media.on("setpause", function () {
        paused = true;
        media.trigger("pause");
        updateTime();
      });

      media.trigger("loadedmetadata");
      media.trigger("setcurrenttime", 0);

      if (this.autostart) {
        media.trigger("setplay");
      }
    }
  };
};

export { PlaceholderPlayer, placeholderPlayerStyles };