react-ambilight
Version:
🌈 A lightweight React component for creating an Ambilight effect with YouTube videos.
551 lines (550 loc) • 19 kB
JavaScript
"use client";
import { jsx as Y, jsxs as fe } from "react/jsx-runtime";
import * as x from "react";
import { useState as te, useCallback as I, useEffect as q, useRef as re } from "react";
function de(t) {
return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
}
var G = { exports: {} }, ie;
/**
* @link https://github.com/gajus/sister for the canonical source repository
* @license https://github.com/gajus/sister/blob/master/LICENSE BSD 3-Clause
*/
ie = function() {
var t = {}, e = {};
return t.on = function(r, n) {
var l = { name: r, handler: n };
return e[r] = e[r] || [], e[r].unshift(l), l;
}, t.off = function(r) {
var n = e[r.name].indexOf(r);
n !== -1 && e[r.name].splice(n, 1);
}, t.trigger = function(r, n) {
var l = e[r], a;
if (l)
for (a = l.length; a--; )
l[a].handler(n);
}, t;
};
var ge = ie, B = { exports: {} }, ve = function(e, r, n) {
var l = document.head || document.getElementsByTagName("head")[0], a = document.createElement("script");
typeof r == "function" && (n = r, r = {}), r = r || {}, n = n || function() {
}, a.type = r.type || "text/javascript", a.charset = r.charset || "utf8", a.async = "async" in r ? !!r.async : !0, a.src = e, r.attrs && pe(a, r.attrs), r.text && (a.text = "" + r.text);
var m = "onload" in a ? ne : me;
m(a, n), a.onload || ne(a, n), l.appendChild(a);
};
function pe(t, e) {
for (var r in e)
t.setAttribute(r, e[r]);
}
function ne(t, e) {
t.onload = function() {
this.onerror = this.onload = null, e(null, t);
}, t.onerror = function() {
this.onerror = this.onload = null, e(new Error("Failed to load " + this.src), t);
};
}
function me(t, e) {
t.onreadystatechange = function() {
this.readyState != "complete" && this.readyState != "loaded" || (this.onreadystatechange = null, e(null, t));
};
}
(function(t, e) {
Object.defineProperty(e, "__esModule", {
value: !0
});
var r = ve, n = l(r);
function l(a) {
return a && a.__esModule ? a : { default: a };
}
e.default = function(a) {
var m = new Promise(function(h) {
if (window.YT && window.YT.Player && window.YT.Player instanceof Function) {
h(window.YT);
return;
} else {
var c = window.location.protocol === "http:" ? "http:" : "https:";
(0, n.default)(c + "//www.youtube.com/iframe_api", function(i) {
i && a.trigger("error", i);
});
}
var u = window.onYouTubeIframeAPIReady;
window.onYouTubeIframeAPIReady = function() {
u && u(), h(window.YT);
};
});
return m;
}, t.exports = e.default;
})(B, B.exports);
var he = B.exports, W = { exports: {} }, z = { exports: {} }, Q = { exports: {} }, V = 1e3, M = V * 60, U = M * 60, F = U * 24, ye = F * 365.25, be = function(t, e) {
e = e || {};
var r = typeof t;
if (r === "string" && t.length > 0)
return we(t);
if (r === "number" && isNaN(t) === !1)
return e.long ? _e(t) : Ee(t);
throw new Error(
"val is not a non-empty string or a valid number. val=" + JSON.stringify(t)
);
};
function we(t) {
if (t = String(t), !(t.length > 100)) {
var e = /^((?:\d+)?\.?\d+) *(milliseconds?|msecs?|ms|seconds?|secs?|s|minutes?|mins?|m|hours?|hrs?|h|days?|d|years?|yrs?|y)?$/i.exec(
t
);
if (e) {
var r = parseFloat(e[1]), n = (e[2] || "ms").toLowerCase();
switch (n) {
case "years":
case "year":
case "yrs":
case "yr":
case "y":
return r * ye;
case "days":
case "day":
case "d":
return r * F;
case "hours":
case "hour":
case "hrs":
case "hr":
case "h":
return r * U;
case "minutes":
case "minute":
case "mins":
case "min":
case "m":
return r * M;
case "seconds":
case "second":
case "secs":
case "sec":
case "s":
return r * V;
case "milliseconds":
case "millisecond":
case "msecs":
case "msec":
case "ms":
return r;
default:
return;
}
}
}
}
function Ee(t) {
return t >= F ? Math.round(t / F) + "d" : t >= U ? Math.round(t / U) + "h" : t >= M ? Math.round(t / M) + "m" : t >= V ? Math.round(t / V) + "s" : t + "ms";
}
function _e(t) {
return L(t, F, "day") || L(t, U, "hour") || L(t, M, "minute") || L(t, V, "second") || t + " ms";
}
function L(t, e, r) {
if (!(t < e))
return t < e * 1.5 ? Math.floor(t / e) + " " + r : Math.ceil(t / e) + " " + r + "s";
}
(function(t, e) {
e = t.exports = l.debug = l.default = l, e.coerce = c, e.disable = m, e.enable = a, e.enabled = h, e.humanize = be, e.names = [], e.skips = [], e.formatters = {};
var r;
function n(u) {
var i = 0, o;
for (o in u)
i = (i << 5) - i + u.charCodeAt(o), i |= 0;
return e.colors[Math.abs(i) % e.colors.length];
}
function l(u) {
function i() {
if (i.enabled) {
var o = i, d = +/* @__PURE__ */ new Date(), v = d - (r || d);
o.diff = v, o.prev = r, o.curr = d, r = d;
for (var f = new Array(arguments.length), s = 0; s < f.length; s++)
f[s] = arguments[s];
f[0] = e.coerce(f[0]), typeof f[0] != "string" && f.unshift("%O");
var g = 0;
f[0] = f[0].replace(/%([a-zA-Z%])/g, function(p, w) {
if (p === "%%")
return p;
g++;
var b = e.formatters[w];
if (typeof b == "function") {
var T = f[g];
p = b.call(o, T), f.splice(g, 1), g--;
}
return p;
}), e.formatArgs.call(o, f);
var y = i.log || e.log || console.log.bind(console);
y.apply(o, f);
}
}
return i.namespace = u, i.enabled = e.enabled(u), i.useColors = e.useColors(), i.color = n(u), typeof e.init == "function" && e.init(i), i;
}
function a(u) {
e.save(u), e.names = [], e.skips = [];
for (var i = (typeof u == "string" ? u : "").split(/[\s,]+/), o = i.length, d = 0; d < o; d++)
i[d] && (u = i[d].replace(/\*/g, ".*?"), u[0] === "-" ? e.skips.push(new RegExp("^" + u.substr(1) + "$")) : e.names.push(new RegExp("^" + u + "$")));
}
function m() {
e.enable("");
}
function h(u) {
var i, o;
for (i = 0, o = e.skips.length; i < o; i++)
if (e.skips[i].test(u))
return !1;
for (i = 0, o = e.names.length; i < o; i++)
if (e.names[i].test(u))
return !0;
return !1;
}
function c(u) {
return u instanceof Error ? u.stack || u.message : u;
}
})(Q, Q.exports);
var Ae = Q.exports;
(function(t, e) {
e = t.exports = Ae, e.log = l, e.formatArgs = n, e.save = a, e.load = m, e.useColors = r, e.storage = typeof chrome < "u" && typeof chrome.storage < "u" ? chrome.storage.local : h(), e.colors = [
"lightseagreen",
"forestgreen",
"goldenrod",
"dodgerblue",
"darkorchid",
"crimson"
];
function r() {
return typeof window < "u" && window.process && window.process.type === "renderer" ? !0 : typeof document < "u" && document.documentElement && document.documentElement.style && document.documentElement.style.WebkitAppearance || // is firebug? http://stackoverflow.com/a/398120/376773
typeof window < "u" && window.console && (window.console.firebug || window.console.exception && window.console.table) || // is firefox >= v31?
// https://developer.mozilla.org/en-US/docs/Tools/Web_Console#Styling_messages
typeof navigator < "u" && navigator.userAgent && navigator.userAgent.toLowerCase().match(/firefox\/(\d+)/) && parseInt(RegExp.$1, 10) >= 31 || // double check webkit in userAgent just in case we are in a worker
typeof navigator < "u" && navigator.userAgent && navigator.userAgent.toLowerCase().match(/applewebkit\/(\d+)/);
}
e.formatters.j = function(c) {
try {
return JSON.stringify(c);
} catch (u) {
return "[UnexpectedJSONParseError]: " + u.message;
}
};
function n(c) {
var u = this.useColors;
if (c[0] = (u ? "%c" : "") + this.namespace + (u ? " %c" : " ") + c[0] + (u ? "%c " : " ") + "+" + e.humanize(this.diff), !!u) {
var i = "color: " + this.color;
c.splice(1, 0, i, "color: inherit");
var o = 0, d = 0;
c[0].replace(/%[a-zA-Z%]/g, function(v) {
v !== "%%" && (o++, v === "%c" && (d = o));
}), c.splice(d, 0, i);
}
}
function l() {
return typeof console == "object" && console.log && Function.prototype.apply.call(console.log, console, arguments);
}
function a(c) {
try {
c == null ? e.storage.removeItem("debug") : e.storage.debug = c;
} catch {
}
}
function m() {
var c;
try {
c = e.storage.debug;
} catch {
}
return !c && typeof process < "u" && "env" in process && (c = process.env.DEBUG), c;
}
e.enable(m());
function h() {
try {
return window.localStorage;
} catch {
}
}
})(z, z.exports);
var Se = z.exports, $ = { exports: {} };
(function(t, e) {
Object.defineProperty(e, "__esModule", {
value: !0
}), e.default = ["cueVideoById", "loadVideoById", "cueVideoByUrl", "loadVideoByUrl", "playVideo", "pauseVideo", "stopVideo", "getVideoLoadedFraction", "cuePlaylist", "loadPlaylist", "nextVideo", "previousVideo", "playVideoAt", "setShuffle", "setLoop", "getPlaylist", "getPlaylistIndex", "setOption", "mute", "unMute", "isMuted", "setVolume", "getVolume", "seekTo", "getPlayerState", "getPlaybackRate", "setPlaybackRate", "getAvailablePlaybackRates", "getPlaybackQuality", "setPlaybackQuality", "getAvailableQualityLevels", "getCurrentTime", "getDuration", "removeEventListener", "getVideoUrl", "getVideoEmbedCode", "getOptions", "getOption", "addEventListener", "destroy", "setSize", "getIframe"], t.exports = e.default;
})($, $.exports);
var Ce = $.exports, J = { exports: {} };
(function(t, e) {
Object.defineProperty(e, "__esModule", {
value: !0
}), e.default = ["ready", "stateChange", "playbackQualityChange", "playbackRateChange", "error", "apiChange", "volumeChange"], t.exports = e.default;
})(J, J.exports);
var Te = J.exports, Z = { exports: {} }, j = { exports: {} };
(function(t, e) {
Object.defineProperty(e, "__esModule", {
value: !0
}), e.default = {
BUFFERING: 3,
ENDED: 0,
PAUSED: 2,
PLAYING: 1,
UNSTARTED: -1,
VIDEO_CUED: 5
}, t.exports = e.default;
})(j, j.exports);
var De = j.exports;
(function(t, e) {
Object.defineProperty(e, "__esModule", {
value: !0
});
var r = De, n = l(r);
function l(a) {
return a && a.__esModule ? a : { default: a };
}
e.default = {
pauseVideo: {
acceptableStates: [n.default.ENDED, n.default.PAUSED],
stateChangeRequired: !1
},
playVideo: {
acceptableStates: [n.default.ENDED, n.default.PLAYING],
stateChangeRequired: !1
},
seekTo: {
acceptableStates: [n.default.ENDED, n.default.PLAYING, n.default.PAUSED],
stateChangeRequired: !0,
// TRICKY: `seekTo` may not cause a state change if no buffering is
// required.
timeout: 3e3
}
}, t.exports = e.default;
})(Z, Z.exports);
var Ie = Z.exports;
(function(t, e) {
Object.defineProperty(e, "__esModule", {
value: !0
});
var r = Se, n = i(r), l = Ce, a = i(l), m = Te, h = i(m), c = Ie, u = i(c);
function i(v) {
return v && v.__esModule ? v : { default: v };
}
var o = (0, n.default)("youtube-player"), d = {};
d.proxyEvents = function(v) {
var f = {}, s = function(D) {
var _ = "on" + D.slice(0, 1).toUpperCase() + D.slice(1);
f[_] = function(S) {
o('event "%s"', _, S), v.trigger(D, S);
};
}, g = !0, y = !1, p = void 0;
try {
for (var w = h.default[Symbol.iterator](), b; !(g = (b = w.next()).done); g = !0) {
var T = b.value;
s(T);
}
} catch (O) {
y = !0, p = O;
} finally {
try {
!g && w.return && w.return();
} finally {
if (y)
throw p;
}
}
return f;
}, d.promisifyPlayer = function(v) {
var f = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !1, s = {}, g = function(_) {
f && u.default[_] ? s[_] = function() {
for (var S = arguments.length, R = Array(S), A = 0; A < S; A++)
R[A] = arguments[A];
return v.then(function(E) {
var C = u.default[_], se = E.getPlayerState(), H = E[_].apply(E, R);
return C.stateChangeRequired || // eslint-disable-next-line no-extra-parens
Array.isArray(C.acceptableStates) && C.acceptableStates.indexOf(se) === -1 ? new Promise(function(K) {
var le = function X() {
var ce = E.getPlayerState(), ee = void 0;
typeof C.timeout == "number" && (ee = setTimeout(function() {
E.removeEventListener("onStateChange", X), K();
}, C.timeout)), Array.isArray(C.acceptableStates) && C.acceptableStates.indexOf(ce) !== -1 && (E.removeEventListener("onStateChange", X), clearTimeout(ee), K());
};
E.addEventListener("onStateChange", le);
}).then(function() {
return H;
}) : H;
});
} : s[_] = function() {
for (var S = arguments.length, R = Array(S), A = 0; A < S; A++)
R[A] = arguments[A];
return v.then(function(E) {
return E[_].apply(E, R);
});
};
}, y = !0, p = !1, w = void 0;
try {
for (var b = a.default[Symbol.iterator](), T; !(y = (T = b.next()).done); y = !0) {
var O = T.value;
g(O);
}
} catch (D) {
p = !0, w = D;
} finally {
try {
!y && b.return && b.return();
} finally {
if (p)
throw w;
}
}
return s;
}, e.default = d, t.exports = e.default;
})(W, W.exports);
var Re = W.exports;
(function(t, e) {
Object.defineProperty(e, "__esModule", {
value: !0
});
var r = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(o) {
return typeof o;
} : function(o) {
return o && typeof Symbol == "function" && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, n = ge, l = u(n), a = he, m = u(a), h = Re, c = u(h);
function u(o) {
return o && o.__esModule ? o : { default: o };
}
var i = void 0;
e.default = function(o) {
var d = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, v = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : !1, f = (0, l.default)();
if (i || (i = (0, m.default)(f)), d.events)
throw new Error("Event handlers cannot be overwritten.");
if (typeof o == "string" && !document.getElementById(o))
throw new Error('Element "' + o + '" does not exist.');
d.events = c.default.proxyEvents(f);
var s = new Promise(function(y) {
if ((typeof o > "u" ? "undefined" : r(o)) === "object" && o.playVideo instanceof Function) {
var p = o;
y(p);
} else
i.then(function(w) {
var b = new w.Player(o, d);
return f.on("ready", function() {
y(b);
}), null;
});
}), g = c.default.promisifyPlayer(s, v);
return g.on = f.on, g.off = f.off, g;
}, t.exports = e.default;
})(G, G.exports);
var Ne = G.exports;
const ae = /* @__PURE__ */ de(Ne);
function ue(t) {
var e, r, n = "";
if (typeof t == "string" || typeof t == "number")
n += t;
else if (typeof t == "object")
if (Array.isArray(t)) {
var l = t.length;
for (e = 0; e < l; e++)
t[e] && (r = ue(t[e])) && (n && (n += " "), n += r);
} else
for (r in t)
t[r] && (n && (n += " "), n += r);
return n;
}
function k() {
for (var t, e, r = 0, n = "", l = arguments.length; r < l; r++)
(t = arguments[r]) && (e = ue(t)) && (n && (n += " "), n += e);
return n;
}
const Pe = typeof x.useId == "function" ? x.useId : () => null;
let Ve = 0;
function oe(t = null) {
const e = Pe(), r = x.useRef(t || e || null);
return r.current === null && (r.current = "" + Ve++), t ?? r.current;
}
var P = /* @__PURE__ */ ((t) => (t[t.BUFFERING = 3] = "BUFFERING", t[t.ENDED = 0] = "ENDED", t[t.PAUSED = 2] = "PAUSED", t[t.PLAYING = 1] = "PLAYING", t[t.UNSTARTED = -1] = "UNSTARTED", t[t.VIDEO_CUED = 5] = "VIDEO_CUED", t))(P || {});
const Me = "_videoWrapper_55t0l_1", Ue = "_ambilightWrapper_55t0l_9", Fe = "_ambilightVideo_55t0l_15", Oe = "_ambilight_55t0l_9", N = {
videoWrapper: Me,
ambilightWrapper: Ue,
ambilightVideo: Fe,
ambilight: Oe
}, Ye = (t) => {
const e = re(), r = re(), n = (l) => {
if (r.current != null) {
const a = l - r.current;
t(a);
}
r.current = l, e.current = requestAnimationFrame(n);
};
q(() => (e.current = requestAnimationFrame(n), () => cancelAnimationFrame(e.current)), []);
};
function xe({ videoId: t, className: e, classNames: r = {} }) {
const [n, l] = te(), [a, m] = te(), h = oe(), c = oe(), u = I((s) => {
}, []), i = I(
(s) => {
switch (s.data) {
case P.PLAYING:
a == null || a.seekTo(s.target.getCurrentTime(), !0), a == null || a.playVideo();
break;
case P.PAUSED:
a == null || a.seekTo(s.target.getCurrentTime(), !0), a == null || a.pauseVideo();
break;
}
},
[a]
), o = I((s) => {
var y, p;
const g = [...(y = s == null ? void 0 : s.target) == null ? void 0 : y.getAvailableQualityLevels()];
if ((p = s == null ? void 0 : s.target) == null || p.mute(), g && g.length && g.length > 0) {
g.reverse();
const w = g[g.findIndex((b) => b !== "auto")];
s.target.setPlaybackQuality(w);
}
}, []), d = I(
(s) => {
switch (s.data) {
case P.BUFFERING:
case P.PLAYING:
o(s);
break;
}
},
[o]
), v = I(
(s) => {
o(s);
},
[o]
), f = I(() => {
a == null || a.seekTo((n == null ? void 0 : n.getCurrentTime()) || 0, !0);
}, [a, n]);
return Ye(f), q(() => {
const s = ae(c, {
videoId: t
}), g = ae(h, {
videoId: t
});
l(s), m(g);
}, [h, c]), q(() => {
console.log(n), n == null || n.on("ready", u), n == null || n.on("stateChange", i), a == null || a.on("ready", v), a == null || a.on("stateChange", d);
}, [
n,
a,
u,
v,
i,
d
]), /* @__PURE__ */ Y("div", { className: k(N.videoWrapper, e, r.videoWrapper), children: /* @__PURE__ */ Y("div", { className: k(N.ambilightWrapper, r.ambilightWrapper), children: /* @__PURE__ */ fe("div", { className: N.aspectRatio, children: [
/* @__PURE__ */ Y(
"div",
{
className: k(N.ambilight, r.ambilight),
id: h
}
),
/* @__PURE__ */ Y(
"div",
{
className: k(N.ambilightVideo, r.ambilightVideo),
id: c
}
)
] }) }) });
}
export {
P,
xe as V
};