UNPKG

summit-kit

Version:

A React component library for building modern web applications with an earthy and outdoorsy flair.

295 lines (294 loc) 8.72 kB
import { _ as e, t, v as n, y as r } from "./Icon-x3Vo-tM0.js"; import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime"; import { useCallback as s, useEffect as c, useRef as l, useState as u } from "react"; //#region node_modules/screenfull/index.js var d = [ [ "requestFullscreen", "exitFullscreen", "fullscreenElement", "fullscreenEnabled", "fullscreenchange", "fullscreenerror" ], [ "webkitRequestFullscreen", "webkitExitFullscreen", "webkitFullscreenElement", "webkitFullscreenEnabled", "webkitfullscreenchange", "webkitfullscreenerror" ], [ "webkitRequestFullScreen", "webkitCancelFullScreen", "webkitCurrentFullScreenElement", "webkitCancelFullScreen", "webkitfullscreenchange", "webkitfullscreenerror" ], [ "mozRequestFullScreen", "mozCancelFullScreen", "mozFullScreenElement", "mozFullScreenEnabled", "mozfullscreenchange", "mozfullscreenerror" ], [ "msRequestFullscreen", "msExitFullscreen", "msFullscreenElement", "msFullscreenEnabled", "MSFullscreenChange", "MSFullscreenError" ] ], f = (() => { if (typeof document > "u") return !1; let e = d[0], t = {}; for (let n of d) if (n?.[1] in document) { for (let [r, i] of n.entries()) t[e[r]] = i; return t; } return !1; })(), p = { change: f.fullscreenchange, error: f.fullscreenerror }, m = { request(e = document.documentElement, t) { return new Promise((n, r) => { let i = () => { m.off("change", i), n(); }; m.on("change", i); let a = e[f.requestFullscreen](t); a instanceof Promise && a.then(i).catch(r); }); }, exit() { return new Promise((e, t) => { if (!m.isFullscreen) { e(); return; } let n = () => { m.off("change", n), e(); }; m.on("change", n); let r = document[f.exitFullscreen](); r instanceof Promise && r.then(n).catch(t); }); }, toggle(e, t) { return m.isFullscreen ? m.exit() : m.request(e, t); }, onchange(e) { m.on("change", e); }, onerror(e) { m.on("error", e); }, on(e, t) { let n = p[e]; n && document.addEventListener(n, t, !1); }, off(e, t) { let n = p[e]; n && document.removeEventListener(n, t, !1); }, raw: f }; Object.defineProperties(m, { isFullscreen: { get: () => !!document[f.fullscreenElement] }, element: { enumerable: !0, get: () => document[f.fullscreenElement] ?? void 0 }, isEnabled: { enumerable: !0, get: () => !!document[f.fullscreenEnabled] } }), f || (m = { isEnabled: !1 }); var h = m, g = (e) => { let t = () => h?.isEnabled ? !0 : (console.warn("Fullscreen mode is not supported in this browser."), !1); (() => { if (!e) { console.warn("Element reference is not provided or invalid."); return; } if (t()) { let t = document.documentElement; typeof e == "object" && e && "current" in e && e.current instanceof HTMLElement && (t = e.current), h.toggle(t), h.on("change", () => { h.isFullscreen ? console.log("Entered fullscreen mode") : console.log("Exited fullscreen mode"); }); } else console.warn("Fullscreen mode is not supported in this browser."); })(); }; //#endregion //#region src/react/client/Hooks/toggleTheme.tsx function _(e) { typeof document > "u" || (e === "system" ? document.documentElement.removeAttribute("data-theme") : document.documentElement.setAttribute("data-theme", e)); } function v() { if (typeof document > "u") return "system"; let e = document.documentElement.getAttribute("data-theme"); return e === "light" || e === "dark" ? e : "system"; } function y() { if (typeof document > "u") return; let e = v(); if (e === "dark") _("light"); else if (e === "light") _("dark"); else { let e = window.matchMedia("(prefers-color-scheme: dark)").matches; _(e ? "light" : "dark"); } } //#endregion //#region src/react/client/Hooks/useAudio.tsx var b = ({ src: e, ...t }) => { let { current: n } = l(t), r = l(null), i = l(null), a = l(null), o = l(null), d = l(null), [f, p] = u(!1), [m, h] = u(0), [g, _] = u(t.volume); return c(() => { let t = new Audio(e); t.crossOrigin = "anonymous", t.loop = n.loop ?? !1, t.preload = n.preload ?? !0 ? "auto" : "none"; let s = new AudioContext(), c = s.createMediaElementSource(t), l = s.createGain(), u = s.createStereoPanner(); l.gain.value = n.volume ?? 1, u.pan.value = n.stereo ?? 0, c.connect(l).connect(u).connect(s.destination), r.current = t, i.current = s, a.current = l, o.current = u, d.current = c; let f = () => p(!0), m = () => p(!1), h = () => p(!1); return t.addEventListener("play", f), t.addEventListener("pause", m), t.addEventListener("ended", h), n.autoplay && t.play().catch(() => {}), () => { t.removeEventListener("play", f), t.removeEventListener("pause", m), t.removeEventListener("ended", h), t.pause(), t.removeAttribute("src"), t.load(), c.disconnect(), s.close(); }; }, [e]), c(() => { let e, t = () => { r.current && f && (h(r.current.currentTime), e = requestAnimationFrame(t)); }; return f && (e = requestAnimationFrame(t)), () => { cancelAnimationFrame(e); }; }, [f]), { play: s(() => { let e = r.current, t = i.current, o = a.current; if (!e || !t || !o) return; t.state === "suspended" && t.resume(); let s = n.fadeInDuration && n.fadeInDuration > 0, c = n.volume ?? 1; s && n.fadeInDuration ? (o.gain.setValueAtTime(0, t.currentTime), o.gain.linearRampToValueAtTime(c, t.currentTime + n.fadeInDuration)) : o.gain.value = c, e.play().catch(() => {}); }, []), pause: s(() => { r.current?.pause(); }, []), stop: s(() => { let e = r.current; e && (e.pause(), e.currentTime = 0, h(0)); }, []), seek: s((e) => { let t = r.current; t && (t.currentTime = e, h(e)); }, []), isPlaying: f, currentTime: m, volume: g, setVolume: s((e) => { n.volume = e, _(e), a.current && (a.current.gain.value = e); }, [n]), setStereo: s((e) => { n.stereo = e, o.current && (o.current.pan.value = e); }, [n]) }; }, x = (e) => { c(() => { let t = new AbortController(); return window.addEventListener("keydown", (t) => { for (let n of e) { let e = n.shortcutKey.includes("+"), r = n.shortcutKey.split("+"); if (e) { let e = r.includes("Shift"), i = r.includes("Control"), a = r.includes("Meta"), o = r.includes("Alt"), s = r.find((e) => e !== "Shift" && e !== "Control" && e !== "Meta" && e !== "Alt"), c = t.key === s, l = t.shiftKey === e, u = t.ctrlKey === i, d = t.metaKey === a, f = t.altKey === o; c && l && u && d && f && n.action && n.action(); } else t.key === n.shortcutKey && n.action && n.action(); } }, { signal: t.signal }), () => { t.abort(); }; }, [e]); }, S = r({ "down-arrow": "PuuVGW_down-arrow", "left-arrow": "PuuVGW_left-arrow", "page-slider": "PuuVGW_page-slider", "right-arrow": "PuuVGW_right-arrow", "up-arrow": "PuuVGW_up-arrow" }), C = ({ children: e, onNext: n, onPrev: r, onUp: s, onDown: c }) => (x([ { shortcutKey: "Control+Shift+ArrowRight", action: n }, { shortcutKey: "Control+Shift+ArrowLeft", action: r }, { shortcutKey: "Control+Shift+ArrowUp", action: s }, { shortcutKey: "Control+Shift+ArrowDown", action: c } ]), /* @__PURE__ */ o(i, { children: [ /* @__PURE__ */ a("div", { className: S["page-slider"], children: e }), n && /* @__PURE__ */ a("button", { className: S["right-arrow"], onClick: n, type: "button", "aria-label": "Go to next page", "aria-keyshortcuts": "Control+Shift+ArrowRight", children: /* @__PURE__ */ a(t, { name: "FiArrowRightCircle", size: 48, color: "white", "aria-hidden": "true" }) }), r && /* @__PURE__ */ a("button", { className: S["left-arrow"], onClick: r, type: "button", "aria-label": "Go to previous page", "aria-keyshortcuts": "Control+Shift+ArrowLeft", children: /* @__PURE__ */ a(t, { name: "FiArrowLeftCircle", size: 48, color: "white", "aria-hidden": "true" }) }), s && /* @__PURE__ */ a("button", { className: S["up-arrow"], onClick: s, type: "button", "aria-label": "Go up", "aria-keyshortcuts": "Control+Shift+ArrowUp", children: /* @__PURE__ */ a(t, { name: "FiArrowUpCircle", size: 48, color: "white", "aria-hidden": "true" }) }), c && /* @__PURE__ */ a("button", { className: S["down-arrow"], onClick: c, type: "button", "aria-label": "Go down", "aria-keyshortcuts": "Control+Shift+ArrowDown", children: /* @__PURE__ */ a(t, { name: "FiArrowDownCircle", size: 48, color: "white", "aria-hidden": "true" }) }) ] })); //#endregion export { C as PageTurner, v as getTheme, e as isHeadless, n as setHeadless, _ as setTheme, g as toggleFullScreen, y as toggleTheme, b as useAudio, x as useKeyPress }; //# sourceMappingURL=react-client.js.map