react-tv-player
Version:
A React media player component for TV devices. With custom UI and arrow-key navigation, it can play a variety of URLs like file paths, HLS/DASH streams and even YouTube & Vimeo links directly. Packaged as an npm library for easy integration.
170 lines (169 loc) • 7.46 kB
JavaScript
import { a as w, g as D } from "./index-r8XrYpcu.js";
import j from "react";
function C(p, o) {
for (var l = 0; l < o.length; l++) {
const a = o[l];
if (typeof a != "string" && !Array.isArray(a)) {
for (const u in a)
if (u !== "default" && !(u in p)) {
const h = Object.getOwnPropertyDescriptor(a, u);
h && Object.defineProperty(p, u, h.get ? h : {
enumerable: !0,
get: () => a[u]
});
}
}
}
return Object.freeze(Object.defineProperty(p, Symbol.toStringTag, { value: "Module" }));
}
var y, L;
function S() {
if (L) return y;
L = 1;
var p = Object.create, o = Object.defineProperty, l = Object.getOwnPropertyDescriptor, a = Object.getOwnPropertyNames, u = Object.getPrototypeOf, h = Object.prototype.hasOwnProperty, I = (r, e, t) => e in r ? o(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, x = (r, e) => {
for (var t in e)
o(r, t, { get: e[t], enumerable: !0 });
}, m = (r, e, t, i) => {
if (e && typeof e == "object" || typeof e == "function")
for (let s of a(e))
!h.call(r, s) && s !== t && o(r, s, { get: () => e[s], enumerable: !(i = l(e, s)) || i.enumerable });
return r;
}, M = (r, e, t) => (t = r != null ? p(u(r)) : {}, m(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
!r || !r.__esModule ? o(t, "default", { value: r, enumerable: !0 }) : t,
r
)), O = (r) => m(o({}, "__esModule", { value: !0 }), r), n = (r, e, t) => (I(r, typeof e != "symbol" ? e + "" : e, t), t), P = {};
x(P, {
default: () => f
}), y = O(P);
var g = M(j), d = /* @__PURE__ */ w();
const R = "https://cdn.jsdelivr.net/npm/@mux/mux-player@VERSION/dist/mux-player.mjs";
class f extends g.Component {
constructor() {
super(...arguments), n(this, "onReady", (...e) => this.props.onReady(...e)), n(this, "onPlay", (...e) => this.props.onPlay(...e)), n(this, "onBuffer", (...e) => this.props.onBuffer(...e)), n(this, "onBufferEnd", (...e) => this.props.onBufferEnd(...e)), n(this, "onPause", (...e) => this.props.onPause(...e)), n(this, "onEnded", (...e) => this.props.onEnded(...e)), n(this, "onError", (...e) => this.props.onError(...e)), n(this, "onPlayBackRateChange", (e) => this.props.onPlaybackRateChange(e.target.playbackRate)), n(this, "onEnablePIP", (...e) => this.props.onEnablePIP(...e)), n(this, "onSeek", (e) => {
this.props.onSeek(e.target.currentTime);
}), n(this, "onDurationChange", () => {
const e = this.getDuration();
this.props.onDuration(e);
}), n(this, "mute", () => {
this.player.muted = !0;
}), n(this, "unmute", () => {
this.player.muted = !1;
}), n(this, "ref", (e) => {
this.player = e;
});
}
componentDidMount() {
this.props.onMount && this.props.onMount(this), this.addListeners(this.player);
const e = this.getPlaybackId(this.props.url);
e && (this.player.playbackId = e);
}
componentWillUnmount() {
this.player.playbackId = null, this.removeListeners(this.player);
}
addListeners(e) {
const { playsinline: t } = this.props;
e.addEventListener("play", this.onPlay), e.addEventListener("waiting", this.onBuffer), e.addEventListener("playing", this.onBufferEnd), e.addEventListener("pause", this.onPause), e.addEventListener("seeked", this.onSeek), e.addEventListener("ended", this.onEnded), e.addEventListener("error", this.onError), e.addEventListener("ratechange", this.onPlayBackRateChange), e.addEventListener("enterpictureinpicture", this.onEnablePIP), e.addEventListener("leavepictureinpicture", this.onDisablePIP), e.addEventListener("webkitpresentationmodechanged", this.onPresentationModeChange), e.addEventListener("canplay", this.onReady), t && e.setAttribute("playsinline", "");
}
removeListeners(e) {
e.removeEventListener("canplay", this.onReady), e.removeEventListener("play", this.onPlay), e.removeEventListener("waiting", this.onBuffer), e.removeEventListener("playing", this.onBufferEnd), e.removeEventListener("pause", this.onPause), e.removeEventListener("seeked", this.onSeek), e.removeEventListener("ended", this.onEnded), e.removeEventListener("error", this.onError), e.removeEventListener("ratechange", this.onPlayBackRateChange), e.removeEventListener("enterpictureinpicture", this.onEnablePIP), e.removeEventListener("leavepictureinpicture", this.onDisablePIP), e.removeEventListener("canplay", this.onReady);
}
async load(e) {
var t;
const { onError: i, config: s } = this.props;
if (!((t = globalThis.customElements) != null && t.get("mux-player")))
try {
await import(
/* webpackIgnore: true */
`${R.replace("VERSION", s.version)}`
), this.props.onLoaded();
} catch (c) {
i(c);
}
const [, v] = e.match(d.MATCH_URL_MUX);
this.player.playbackId = v;
}
play() {
const e = this.player.play();
e && e.catch(this.props.onError);
}
pause() {
this.player.pause();
}
stop() {
this.player.playbackId = null;
}
seekTo(e, t = !0) {
this.player.currentTime = e, t || this.pause();
}
setVolume(e) {
this.player.volume = e;
}
enablePIP() {
this.player.requestPictureInPicture && document.pictureInPictureElement !== this.player && this.player.requestPictureInPicture();
}
disablePIP() {
document.exitPictureInPicture && document.pictureInPictureElement === this.player && document.exitPictureInPicture();
}
setPlaybackRate(e) {
try {
this.player.playbackRate = e;
} catch (t) {
this.props.onError(t);
}
}
getDuration() {
if (!this.player)
return null;
const { duration: e, seekable: t } = this.player;
return e === 1 / 0 && t.length > 0 ? t.end(t.length - 1) : e;
}
getCurrentTime() {
return this.player ? this.player.currentTime : null;
}
getSecondsLoaded() {
if (!this.player)
return null;
const { buffered: e } = this.player;
if (e.length === 0)
return 0;
const t = e.end(e.length - 1), i = this.getDuration();
return t > i ? i : t;
}
getPlaybackId(e) {
const [, t] = e.match(d.MATCH_URL_MUX);
return t;
}
render() {
const { url: e, playing: t, loop: i, controls: s, muted: v, config: c, width: E, height: b } = this.props, _ = {
width: E === "auto" ? E : "100%",
height: b === "auto" ? b : "100%"
};
return s === !1 && (_["--controls"] = "none"), /* @__PURE__ */ g.default.createElement(
"mux-player",
{
ref: this.ref,
"playback-id": this.getPlaybackId(e),
style: _,
preload: "auto",
autoPlay: t || void 0,
muted: v ? "" : void 0,
loop: i ? "" : void 0,
...c.attributes
}
);
}
}
return n(f, "displayName", "Mux"), n(f, "canPlay", d.canPlay.mux), y;
}
var k = /* @__PURE__ */ S();
const B = /* @__PURE__ */ D(k), U = /* @__PURE__ */ C({
__proto__: null,
default: B
}, [k]);
export {
U as M
};