ps-tcplayer/dist/index.js

Tencent Cloud Player component with Vue2/Vue3 compatibility

import { h, isVue2 as y, isVue3 as d, createApp as u } from "vue-demi";
import { version as T } from "vue-demi";
function a(e, i) {
  let t = [...e];
  if (!t.length)
    return i && i(), console.log("resouce loaded"), !1;
  let s = t.shift();
  if (!s)
    return a(t, i), !1;
  s.endsWith(".js") ? c(s, () => {
    a(t, i);
  }) : s.endsWith(".css") ? f(s, () => {
    a(t, i);
  }) : (console.warn("no suport resource:", s), a(t, i));
}
function c(e, i) {
  if (document.querySelector(`script[src="${e}"]`))
    return console.log(e, ":has youle"), i && i(), !1;
  var t = document.createElement("script"), s = i || function() {
  };
  t.type = "text/javascript", t.readyState ? t.onreadystatechange = function() {
    t.readyState == "loaded" || t.readyState == "complete", t.onreadystatechange = null, s(), console.log(t.readyState);
  } : (t.onload = function() {
    s();
  }, t.onerror = function(n) {
    s(), console.log(n);
  }), t.src = e, document.querySelector("body").appendChild(t);
}
function f(e, i) {
  if (document.querySelector(`link[href="${e}"]`))
    return console.log(e, ":has youle"), i && i(), !1;
  var t = document.createElement("link"), s = i || function() {
  };
  t.rel = "stylesheet", t.readyState ? t.onreadystatechange = function() {
    t.readyState == "loaded" || t.readyState == "complete", t.onreadystatechange = null, s(), console.log(t.readyState);
  } : (t.onload = function() {
    s();
  }, t.onerror = function(n) {
    s(), console.log(n);
  }), t.href = e, document.querySelector("head").appendChild(t);
}
window._pursuer = window._pursuer || {};
const l = window._pursuer, r = {
  name: "PsTcPlayer",
  props: {
    config: {
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      id: "",
      duration: 0,
      currentTime: 0,
      hearttime: 2e4,
      timers: []
    };
  },
  render() {
    return h("div", {
      class: "ps-player",
      style: {
        width: "100%",
        height: "100%",
        position: "relative"
      }
    }, [
      h("video", {
        class: "ps-player-container",
        style: {
          overflow: "hidden",
          position: "relative",
          width: "100%",
          height: "100%"
        },
        attrs: {
          preload: "auto",
          playsinline: "",
          "webkit-playsinline": "",
          tabindex: "1",
          id: this.id
        },
        preload: "auto",
        playsinline: "",
        "webkit-playsinline": "",
        tabindex: "1",
        id: this.id,
        ref: "playerBox"
      })
    ]);
  },
  watch: {
    config: {
      handler(e) {
        e && this._source_loded;
      },
      deep: !0
    }
  },
  mounted() {
    if (!window)
      return !1;
    this.id = this.getCfPlayerId();
    let e = [];
    const i = "//web.sdk.qcloud.com/player/tcplayer/release/v4.5.2/tcplayer.v4.5.2.min.js", t = "//web.sdk.qcloud.com/player/tcplayer/release/v4.5.2/tcplayer.min.css", s = "//web.sdk.qcloud.com/player/tcplayer/release/v4.5.2/libs/hls.min.0.13.2m.js";
    window.TCPlayer || (e = [t, s, i]), a(e, () => {
      this._source_loded = !0, this.$nextTick(() => {
        this.init();
      });
    }), this.$playerBox = document, this.$playerBox.addEventListener("keydown", this.onkeydown, !0), this.$playerBox.addEventListener("keyup", this.onkeyup, !0);
  },
  beforeDestroy() {
    this.destroy();
  },
  beforeUnmount() {
    this.destroy();
  },
  methods: {
    getCfPlayerId() {
      return l.playerCount = l.playerCount ? l.playerCount + 1 : 1, this.config && this.config.id || "player-container-id";
    },
    init() {
      if (!document.querySelector(`#${this.id}`))
        return console.log(`#${this.id} dom is not found`);
      const e = {
        width: "686px",
        height: "450px",
        reportable: !0
      };
      this.initPlayer({
        ...e,
        ...this.config.tconfig || {}
      });
    },
    initPlayer(e) {
      if (this.$player && this.destroy(), !window.TCPlayer)
        return !1;
      this.hearttime = this.config.hearttime || this.hearttime, this.runs(e);
    },
    runs(e) {
      this.$player = new TCPlayer(this.id, e), this.$player.on("ready", this.onready), this.$player.on("error", this.onerror), this.$player.on("timeupdate", this.ontimeupdate), this.$player.on("pause", this.onpause), this.$player.on("play", this.onplay), this.$player.on("ended", this.onended), this.$player.on("waiting", this.onwaiting), this.$player.on("snapshoted", this.onsnapshoted), this.$player.on("sourceloaded", this.onsourceloaded), this.$player.getDuration = this.$player.duration, this.$player.getCurrentTime = this.$player.currentTime, this.$player._el = this.$player.el_, this.$player.seek = this.$player.currentTime, this.$player.getStatus = this.$player.getStatus || function() {
        return this.$player.paused() ? "pause" : "playing";
      }.bind(this), this.$player.destroy = this.$player.dispose, this.$player._originalPlaybackRate = this.$player.playbackRate, this.$player.getVolume = this.$player.volume, this.$player.setVolume = this.$player.volume;
    },
    onsourceloaded(e) {
      const i = e.paramData, t = i.desc, s = i.definition;
      this.$player.getComponent("QualityComponent").setCurrentQuality(t, s);
    },
    onready() {
      this.onheart(!0), this.$emit("onready", this.$player), this.config.onready && this.config.onready(this.$player);
    },
    onerror(e) {
      this.$emit("onerror", this.$player), this.config.onerror && this.config.onerror(this.$player);
    },
    ontimeupdate() {
      this.onheart(), this.duration = this.$player.getDuration(), this.currentTime = this.$player.getCurrentTime(), this.$emit("ontimeupdate", this.duration, this.currentTime, this.$player), this.config.ontimeupdate && this.config.ontimeupdate(this.duration, this.currentTime, this.$player);
    },
    onpause() {
      this.$emit("onpause", this.$player), this.config.onpause && this.config.onpause(this.$player);
    },
    onplay() {
      this.$emit("onplay", this.$player), this.config.onplay && this.config.onplay(this.$player);
    },
    onended() {
      this.onheart(!0), this.$emit("onended", this.$player), this.config.onended && this.config.onended(this.$player);
    },
    onnext() {
      this.$emit("onnext", this.$player), this.config.onnext && this.config.onnext(this.$player);
    },
    onpre() {
      this.$emit("onpre", this.$player), this.config.onpre && this.config.onpre(this.$player);
    },
    onwaiting() {
      this.$emit("onwaiting", this.$player), this.config.onwaiting && this.config.onwaiting(this.$player);
    },
    onsnapshoted(e) {
      this.$emit("onsnapshoted", e, this.$player), this.config.onsnapshoted && this.config.onsnapshoted(e, this.$player);
    },
    onheart(e) {
      if (e)
        return this.$emit("onheart", this.$player), this.config.onheart && this.config.onheart(this.$player), !1;
      if (this.onheart_lock)
        return !1;
      clearTimeout(this.timers[0]), this.timers[0] = null, this.onheart_lock = !0, this.timers[0] = setTimeout(() => {
        this.onheart_lock = !1, this.$emit("onheart", this.$player), this.config.onheart && this.config.onheart(this.$player);
      }, this.hearttime);
    },
    destroy() {
      this.$player && (clearTimeout(this.timers[0] || null), this.onheart_lock = !1, this.$player.off("ready", this.onready), this.$player.off("error", this.onerror), this.$player.off("timeupdate", this.ontimeupdate), this.$player.off("pause", this.onpause), this.$player.off("play", this.onplay), this.$player.off("ended", this.onended), this.$player.off("waiting", this.onwaiting), this.$player.off("snapshoted", this.onsnapshoted), this.$player.off("sourceloaded", this.onsourceloaded), this.$player.destroy(), this.$player = null, this.$playerBox.removeEventListener("keydown", this.onkeydown, !1), this.$playerBox.removeEventListener("keyup", this.onkeyup, !1));
    },
    getCurrentTime() {
      return this.$player && this.$player.getCurrentTime() || 0;
    },
    onkeydown(e) {
      if (!this.$player)
        return !1;
      const i = e.target, t = !i.hasAttribute("contenteditable") && !/INPUT|TEXTAREA/gi.test(i.tagName);
      (e.keyCode === 13 || e.keyCode === 32) && t ? this.$player.getStatus() === "playing" ? this.$player.pause() : this.$player.play() : (e.keyCode === 37 || e.keyCode === 39) && t && (this._keySeekTime = this.getCurrentTime(), e.keyCode === 37 ? this._keySeekTime -= 5 : this._keySeekTime += 5);
    },
    seekTo(e) {
      this.$player && this.$player.seek(Number(e) || 0);
    },
    onkeyup(e) {
      if (!this.$player)
        return !1;
      const i = e.target, t = !i.hasAttribute("contenteditable") && !/INPUT|TEXTAREA/gi.test(i.tagName);
      if (!((e.keyCode === 37 || e.keyCode === 39) && !t)) {
        if (this.config.notProgress && e.keyCode === 39)
          return this._keySeekTime = null, !1;
        if (e.keyCode === 37 || e.keyCode === 39) {
          const s = this.$player.getDuration();
          this._keySeekTime <= 0 ? this._keySeekTime = 0 : this._keySeekTime >= s && (this._keySeekTime = s - 5), this.seekTo(this._keySeekTime), this._keySeekTime = null;
        }
      }
    }
  }
};
let o = null;
r.install = function(e, i = {}) {
  e.component(r.name, r), o && (document.body.removeChild(o), o = null);
  let t = null;
  if (y) {
    const n = e.extend(r);
    t = new n({
      propsData: Object.assign(i, {})
    }).$mount();
    const p = t.$el;
    document.body.appendChild(p);
  } else if (d) {
    const n = u(r, {
      ...i
    });
    o = document.createElement("div"), t = n.mount(o), document.body.appendChild(o);
  }
  const s = y ? e.prototype : e.config.globalProperties;
  s.$tcPlayer = (n) => t ? (t.initPlayer(n), t.$player) : null;
};
export {
  r as default,
  r as tcplayer,
  T as version
};