@react-youtube-jukebox/core 0.1.0

package/dist/index.js

@@ -0,0 +1,649 @@
+import { useState, useSyncExternalStore, useRef, useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import clsx from 'clsx';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/components/Jukebox.tsx
+
+// src/lib/shared.ts
+var DEFAULT_POSITION = "bottom-right";
+var DEFAULT_THEME = "glass";
+var DEFAULT_CHROME = "classic";
+var DEFAULT_OFFSET_PX = 20;
+var DEFAULT_VOLUME = 100;
+var LEVEL_BAR_HEIGHTS = [12, 18, 14];
+var LEVEL_BAR_REST_HEIGHT = 8;
+var LEVEL_BAR_ANIMATION_DELAY_MS = 120;
+function getNextTrackIndex(index, step, totalTracks) {
+  if (totalTracks <= 0) {
+    return 0;
+  }
+  return (index + step + totalTracks) % totalTracks;
+}
+function clampVolume(value) {
+  return Math.min(Math.max(Math.round(value), 0), 100);
+}
+function normalizeOffset(offset) {
+  if (typeof offset === "number") {
+    return { x: offset, y: offset };
+  }
+  if (offset) {
+    return { x: offset.x, y: offset.y };
+  }
+  return { x: DEFAULT_OFFSET_PX, y: DEFAULT_OFFSET_PX };
+}
+function getPositionStyle(position, offset, isPortal) {
+  const normalizedOffset = normalizeOffset(offset);
+  const style = {
+    position: isPortal ? "fixed" : "absolute"
+  };
+  if (position.includes("top")) {
+    style.top = normalizedOffset.y;
+  } else {
+    style.bottom = normalizedOffset.y;
+  }
+  if (position.includes("left")) {
+    style.left = normalizedOffset.x;
+  } else {
+    style.right = normalizedOffset.x;
+  }
+  return style;
+}
+
+// src/lib/youtube.ts
+var PLAYER_STATE_ENDED = 0;
+var PLAYER_STATE_PLAYING = 1;
+var PLAYER_STATE_PAUSED = 2;
+var youtubeIframeApiPromise = null;
+function canControlPlayer(player) {
+  return player !== null && typeof player.pauseVideo === "function" && typeof player.playVideo === "function";
+}
+function loadYouTubeIframeApi() {
+  if (typeof window === "undefined") {
+    return Promise.reject(new Error("YouTube iframe API requires a browser."));
+  }
+  if (window.YT?.Player) {
+    return Promise.resolve(window.YT);
+  }
+  if (youtubeIframeApiPromise) {
+    return youtubeIframeApiPromise;
+  }
+  youtubeIframeApiPromise = new Promise((resolve, reject) => {
+    const resetPromise = () => {
+      youtubeIframeApiPromise = null;
+    };
+    const existingScript = document.querySelector(
+      'script[src="https://www.youtube.com/iframe_api"]'
+    );
+    const script = existingScript ?? document.createElement("script");
+    if (!existingScript) {
+      script.src = "https://www.youtube.com/iframe_api";
+      script.async = true;
+      document.head.append(script);
+    }
+    const handleError = () => {
+      resetPromise();
+      reject(new Error("Failed to load the YouTube iframe API."));
+    };
+    script.addEventListener("error", handleError, { once: true });
+    const previousReadyHandler = window.onYouTubeIframeAPIReady;
+    window.onYouTubeIframeAPIReady = () => {
+      previousReadyHandler?.();
+      script.removeEventListener("error", handleError);
+      if (!window.YT?.Player) {
+        resetPromise();
+        reject(new Error("YouTube iframe API loaded without a player."));
+        return;
+      }
+      resolve(window.YT);
+    };
+  });
+  return youtubeIframeApiPromise;
+}
+
+// src/hooks/useJukeboxPlayer.ts
+function useJukeboxPlayer({
+  autoplay,
+  tracks
+}) {
+  const playerRef = useRef(null);
+  const currentIndexRef = useRef(0);
+  const isPlayingRef = useRef(false);
+  const mutedPreferenceRef = useRef(true);
+  const shouldResumePlaybackRef = useRef(autoplay);
+  const tracksRef = useRef(tracks);
+  const volumeRef = useRef(DEFAULT_VOLUME);
+  const [playerMountNode, setPlayerMountNode] = useState(
+    null
+  );
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isReady, setIsReady] = useState(false);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isMuted, setIsMuted] = useState(true);
+  const [volume, setVolumeState] = useState(DEFAULT_VOLUME);
+  const trackCount = tracks.length;
+  const hasTracks = trackCount > 0;
+  const hasMultipleTracks = trackCount > 1;
+  const safeCurrentIndex = hasTracks ? Math.min(currentIndex, trackCount - 1) : 0;
+  const currentTrack = tracks[safeCurrentIndex];
+  const currentVideoId = currentTrack?.videoId;
+  const moveTrack = useCallback(
+    (step) => {
+      if (!hasMultipleTracks) {
+        return;
+      }
+      shouldResumePlaybackRef.current = isPlayingRef.current;
+      setCurrentIndex((index) => getNextTrackIndex(index, step, trackCount));
+    },
+    [hasMultipleTracks, trackCount]
+  );
+  const pausePlayback = useCallback(() => {
+    const player = playerRef.current;
+    shouldResumePlaybackRef.current = false;
+    if (!canControlPlayer(player)) {
+      setIsPlaying(false);
+      return;
+    }
+    player.pauseVideo();
+    setIsPlaying(false);
+  }, []);
+  useEffect(() => {
+    currentIndexRef.current = safeCurrentIndex;
+  }, [safeCurrentIndex]);
+  useEffect(() => {
+    tracksRef.current = tracks;
+  }, [tracks]);
+  useEffect(() => {
+    isPlayingRef.current = isPlaying;
+  }, [isPlaying]);
+  useEffect(() => {
+    volumeRef.current = volume;
+  }, [volume]);
+  useEffect(() => {
+    if (!isReady && !isPlayingRef.current) {
+      shouldResumePlaybackRef.current = autoplay;
+    }
+  }, [autoplay, isReady]);
+  useEffect(() => {
+    if (!playerMountNode || !hasTracks) {
+      return;
+    }
+    let isCancelled = false;
+    void loadYouTubeIframeApi().then((YT) => {
+      if (isCancelled) {
+        return;
+      }
+      playerRef.current = new YT.Player(playerMountNode, {
+        width: "100%",
+        height: "100%",
+        videoId: tracksRef.current[currentIndexRef.current]?.videoId ?? "",
+        playerVars: {
+          controls: 1,
+          origin: window.location.origin,
+          playsinline: 1,
+          rel: 0
+        },
+        events: {
+          onReady: () => {
+            const player = playerRef.current;
+            if (!player) {
+              return;
+            }
+            player.setVolume(volumeRef.current);
+            if (mutedPreferenceRef.current) {
+              player.mute();
+            } else {
+              player.unMute();
+            }
+            setIsMuted(mutedPreferenceRef.current);
+            setIsReady(true);
+          },
+          onStateChange: (event) => {
+            if (event.data === PLAYER_STATE_ENDED) {
+              const nextTrackCount = tracksRef.current.length;
+              if (nextTrackCount <= 1) {
+                shouldResumePlaybackRef.current = false;
+                setIsPlaying(false);
+                return;
+              }
+              shouldResumePlaybackRef.current = true;
+              setCurrentIndex(
+                (index) => getNextTrackIndex(index, 1, nextTrackCount)
+              );
+              return;
+            }
+            if (event.data === PLAYER_STATE_PLAYING) {
+              setIsPlaying(true);
+              return;
+            }
+            if (event.data === PLAYER_STATE_PAUSED) {
+              setIsPlaying(false);
+            }
+          },
+          onError: () => {
+            shouldResumePlaybackRef.current = false;
+            setIsPlaying(false);
+          }
+        }
+      });
+    }).catch(() => {
+      setIsReady(false);
+      setIsPlaying(false);
+    });
+    return () => {
+      isCancelled = true;
+      setIsReady(false);
+      setIsPlaying(false);
+      playerRef.current?.destroy();
+      playerRef.current = null;
+    };
+  }, [hasTracks, playerMountNode]);
+  useEffect(() => {
+    const player = playerRef.current;
+    if (!isReady || !player || !currentVideoId) {
+      return;
+    }
+    if (shouldResumePlaybackRef.current) {
+      player.loadVideoById(currentVideoId);
+      return;
+    }
+    player.cueVideoById(currentVideoId);
+  }, [currentVideoId, isReady]);
+  return {
+    playerMountRef: setPlayerMountNode,
+    currentIndex: safeCurrentIndex,
+    isMuted,
+    isPlaying,
+    volume,
+    setVolume: useCallback((nextVolume) => {
+      const clampedVolume = clampVolume(nextVolume);
+      const player = playerRef.current;
+      setVolumeState(clampedVolume);
+      volumeRef.current = clampedVolume;
+      if (clampedVolume === 0) {
+        mutedPreferenceRef.current = true;
+        setIsMuted(true);
+      } else {
+        mutedPreferenceRef.current = false;
+        setIsMuted(false);
+      }
+      if (!player) {
+        return;
+      }
+      player.setVolume(clampedVolume);
+      if (clampedVolume === 0) {
+        player.mute();
+        return;
+      }
+      player.unMute();
+    }, []),
+    toggleMute: useCallback(() => {
+      const player = playerRef.current;
+      const nextMuted = !mutedPreferenceRef.current;
+      mutedPreferenceRef.current = nextMuted;
+      setIsMuted(nextMuted);
+      if (!player) {
+        return;
+      }
+      if (nextMuted) {
+        player.mute();
+        return;
+      }
+      player.unMute();
+    }, []),
+    togglePlay: useCallback(() => {
+      const player = playerRef.current;
+      if (!canControlPlayer(player) || !isReady || !hasTracks) {
+        return;
+      }
+      if (isPlayingRef.current) {
+        pausePlayback();
+        return;
+      }
+      shouldResumePlaybackRef.current = true;
+      player.playVideo();
+    }, [hasTracks, isReady, pausePlayback]),
+    playNext: useCallback(() => {
+      moveTrack(1);
+    }, [moveTrack]),
+    playPrev: useCallback(() => {
+      moveTrack(-1);
+    }, [moveTrack])
+  };
+}
+function SpeakerIcon({ isMuted }) {
+  if (isMuted) {
+    return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx("path", { d: "M7.06 3.22a.75.75 0 0 1 1.19.61v8.34a.75.75 0 0 1-1.19.61L4.26 10.5H2.75A.75.75 0 0 1 2 9.75v-3.5c0-.41.34-.75.75-.75h1.51l2.8-2.28Z" }),
+      /* @__PURE__ */ jsx("path", { d: "M10.28 5.22a.75.75 0 0 1 1.06 0L12 5.88l.66-.66a.75.75 0 1 1 1.06 1.06l-.66.66.66.66a.75.75 0 1 1-1.06 1.06L12 7.94l-.66.66a.75.75 0 0 1-1.06-1.06l.66-.66-.66-.66a.75.75 0 0 1 0-1.06Z" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("path", { d: "M7.06 3.22a.75.75 0 0 1 1.19.61v8.34a.75.75 0 0 1-1.19.61L4.26 10.5H2.75A.75.75 0 0 1 2 9.75v-3.5c0-.41.34-.75.75-.75h1.51l2.8-2.28Z" }),
+    /* @__PURE__ */ jsx("path", { d: "M10.5 5.02a.75.75 0 0 1 1.06 0 3.86 3.86 0 0 1 0 5.46.75.75 0 1 1-1.06-1.06 2.36 2.36 0 0 0 0-3.34.75.75 0 0 1 0-1.06Z" })
+  ] });
+}
+function JukeboxExpandedPlayer({
+  currentIndex,
+  currentTrack,
+  isMuted,
+  isPlaying,
+  nextTrack,
+  playerMountRef,
+  totalTracks,
+  volume,
+  playNext,
+  playPrev,
+  togglePlay,
+  toggleMute,
+  setVolume
+}) {
+  const hasMultipleTracks = totalTracks > 1;
+  const hasNextTrack = nextTrack !== void 0;
+  const handleVolumeInput = (event) => {
+    setVolume(Number(event.target.value));
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "rj-expanded__shell", children: [
+      /* @__PURE__ */ jsx("div", { className: "rj-expanded__screen-frame", children: /* @__PURE__ */ jsx("div", { className: "rj-expanded__screen", children: /* @__PURE__ */ jsx("div", { ref: playerMountRef, className: "rj-expanded__player" }) }) }),
+      /* @__PURE__ */ jsxs("div", { className: "rj-expanded__meta", children: [
+        /* @__PURE__ */ jsxs("div", { className: "rj-expanded__titles", children: [
+          /* @__PURE__ */ jsx("div", { className: "rj-expanded__title", children: currentTrack.title }),
+          /* @__PURE__ */ jsx("div", { className: "rj-expanded__artist", children: currentTrack.artist ?? "Unknown artist" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "rj-expanded__controls", children: [
+          /* @__PURE__ */ jsxs("div", { className: "rj-expanded__transport", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: playPrev,
+                disabled: !hasMultipleTracks,
+                className: "rj-chip-button",
+                children: "\u25C0"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: togglePlay,
+                className: "rj-chip-button rj-chip-button--primary",
+                children: isPlaying ? "Pause" : "Play"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: playNext,
+                disabled: !hasMultipleTracks,
+                className: "rj-chip-button",
+                children: "\u25B6"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "rj-expanded__utility", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: toggleMute,
+                "aria-label": isMuted ? "Unmute" : "Mute",
+                className: "rj-icon-button",
+                children: /* @__PURE__ */ jsx("span", { className: "rj-icon-button__icon", children: /* @__PURE__ */ jsx(SpeakerIcon, { isMuted }) })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "range",
+                min: 0,
+                max: 100,
+                step: 1,
+                value: volume,
+                onChange: handleVolumeInput,
+                "aria-label": "Volume",
+                className: "rj-volume"
+              }
+            ),
+            hasMultipleTracks ? /* @__PURE__ */ jsxs("span", { className: "rj-expanded__counter", children: [
+              currentIndex + 1,
+              " / ",
+              totalTracks
+            ] }) : null
+          ] })
+        ] })
+      ] })
+    ] }),
+    hasNextTrack ? /* @__PURE__ */ jsxs("div", { className: "rj-next-track", children: [
+      /* @__PURE__ */ jsx("span", { className: "rj-next-track__label", children: "Next" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: playNext,
+          disabled: !hasMultipleTracks,
+          className: "rj-next-track__button",
+          children: nextTrack.title
+        }
+      )
+    ] }) : null
+  ] });
+}
+function subscribeToClientRender() {
+  return () => void 0;
+}
+function getClientRenderSnapshot() {
+  return true;
+}
+function getServerRenderSnapshot() {
+  return false;
+}
+function VolumeIcon({ isMuted }) {
+  if (isMuted) {
+    return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx("path", { d: "M7.06 3.22a.75.75 0 0 1 1.19.61v8.34a.75.75 0 0 1-1.19.61L4.26 10.5H2.75A.75.75 0 0 1 2 9.75v-3.5c0-.41.34-.75.75-.75h1.51l2.8-2.28Z" }),
+      /* @__PURE__ */ jsx("path", { d: "M10.28 5.22a.75.75 0 0 1 1.06 0L12 5.88l.66-.66a.75.75 0 1 1 1.06 1.06l-.66.66.66.66a.75.75 0 1 1-1.06 1.06L12 7.94l-.66.66a.75.75 0 0 1-1.06-1.06l.66-.66-.66-.66a.75.75 0 0 1 0-1.06Z" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("path", { d: "M7.06 3.22a.75.75 0 0 1 1.19.61v8.34a.75.75 0 0 1-1.19.61L4.26 10.5H2.75A.75.75 0 0 1 2 9.75v-3.5c0-.41.34-.75.75-.75h1.51l2.8-2.28Z" }),
+    /* @__PURE__ */ jsx("path", { d: "M10.5 5.02a.75.75 0 0 1 1.06 0 3.86 3.86 0 0 1 0 5.46.75.75 0 1 1-1.06-1.06 2.36 2.36 0 0 0 0-3.34.75.75 0 0 1 0-1.06Z" }),
+    /* @__PURE__ */ jsx("path", { d: "M11.9 3.62a.75.75 0 0 1 1.06 0 5.84 5.84 0 0 1 0 8.76.75.75 0 1 1-1.06-1.06 4.34 4.34 0 0 0 0-6.64.75.75 0 0 1 0-1.06Z" })
+  ] });
+}
+function ChevronIcon({ isExpanded }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 16 16",
+      fill: "none",
+      "aria-hidden": "true",
+      className: clsx("rj-chevron__icon", {
+        "rj-chevron__icon--expanded": isExpanded
+      }),
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M4 6.5 8 10l4-3.5",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function TrackSummary({
+  currentTrack,
+  isExpanded,
+  isPlaying,
+  onToggleExpanded
+}) {
+  if (!currentTrack) {
+    return /* @__PURE__ */ jsx("div", { className: "rj-track-summary rj-track-summary--empty", children: /* @__PURE__ */ jsxs("div", { className: "rj-track-summary__copy", children: [
+      /* @__PURE__ */ jsx("div", { className: "rj-track-summary__title", children: "No tracks" }),
+      /* @__PURE__ */ jsx("div", { className: "rj-track-summary__artist", children: "Pass at least one YouTube video to start playback." })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: onToggleExpanded,
+      "aria-expanded": isExpanded,
+      className: "rj-track-summary",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "rj-level-meter", children: LEVEL_BAR_HEIGHTS.map((height, index) => {
+          const animationDelayMs = index * LEVEL_BAR_ANIMATION_DELAY_MS;
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: clsx("rj-level-bar", {
+                "rj-level-bar--playing": isPlaying
+              }),
+              style: {
+                minHeight: `${LEVEL_BAR_REST_HEIGHT}px`,
+                height: `${isPlaying ? height : LEVEL_BAR_REST_HEIGHT}px`,
+                animationDelay: `${animationDelayMs}ms`
+              }
+            },
+            `${height}-${index}`
+          );
+        }) }),
+        /* @__PURE__ */ jsxs("div", { className: "rj-track-summary__copy", children: [
+          /* @__PURE__ */ jsx("div", { className: "rj-track-summary__title", children: currentTrack.title }),
+          /* @__PURE__ */ jsx("div", { className: "rj-track-summary__artist", children: currentTrack.artist ?? "Unknown artist" })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "rj-chevron", children: /* @__PURE__ */ jsx(ChevronIcon, { isExpanded }) })
+      ]
+    }
+  );
+}
+function ExpandedPanel({
+  children,
+  isExpanded
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": !isExpanded,
+      className: clsx("rj-expanded", {
+        "rj-expanded--hidden": !isExpanded
+      }),
+      children
+    }
+  );
+}
+function Jukebox({
+  tracks,
+  autoplay = true,
+  position = DEFAULT_POSITION,
+  theme = DEFAULT_THEME,
+  chrome = DEFAULT_CHROME,
+  offset,
+  portal = true,
+  className,
+  renderExpandedContent
+}) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const isMounted = useSyncExternalStore(
+    subscribeToClientRender,
+    getClientRenderSnapshot,
+    getServerRenderSnapshot
+  );
+  const {
+    playerMountRef,
+    currentIndex,
+    isMuted,
+    isPlaying,
+    volume,
+    setVolume,
+    toggleMute,
+    togglePlay,
+    playNext,
+    playPrev
+  } = useJukeboxPlayer({ autoplay, tracks });
+  const currentTrack = tracks[currentIndex];
+  const nextTrack = tracks.length > 1 ? tracks[getNextTrackIndex(currentIndex, 1, tracks.length)] : void 0;
+  const effectiveIsExpanded = currentTrack ? isExpanded : false;
+  const expandedRenderProps = currentTrack ? {
+    currentIndex,
+    currentTrack,
+    isExpanded: effectiveIsExpanded,
+    isMuted,
+    isPlaying,
+    nextTrack,
+    playerMountRef,
+    totalTracks: tracks.length,
+    volume,
+    setVolume,
+    toggleMute,
+    togglePlay,
+    playNext,
+    playPrev
+  } : void 0;
+  const handleToggleExpanded = () => {
+    if (!currentTrack) {
+      return;
+    }
+    setIsExpanded((expanded) => !expanded);
+  };
+  const content = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        "rj-root",
+        {
+          "rj-root--expanded": effectiveIsExpanded,
+          "rj-root--portal": portal,
+          "rj-root--inline": !portal
+        },
+        className
+      ),
+      "data-position": position,
+      "data-theme": theme,
+      "data-chrome": chrome,
+      style: getPositionStyle(position, offset, portal),
+      children: [
+        expandedRenderProps ? /* @__PURE__ */ jsx(ExpandedPanel, { isExpanded: effectiveIsExpanded, children: renderExpandedContent ? renderExpandedContent(expandedRenderProps) : /* @__PURE__ */ jsx(JukeboxExpandedPlayer, { ...expandedRenderProps }) }) : null,
+        /* @__PURE__ */ jsx("div", { className: "rj-dock", children: /* @__PURE__ */ jsxs("div", { className: "rj-dock__inner", children: [
+          /* @__PURE__ */ jsx(
+            TrackSummary,
+            {
+              currentTrack,
+              isExpanded: effectiveIsExpanded,
+              isPlaying,
+              onToggleExpanded: handleToggleExpanded
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: toggleMute,
+              disabled: !currentTrack,
+              "aria-label": isMuted ? "Unmute" : "Mute",
+              className: "rj-icon-button",
+              children: /* @__PURE__ */ jsx("span", { className: "rj-icon-button__icon", children: /* @__PURE__ */ jsx(VolumeIcon, { isMuted }) })
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
+  if (!portal) {
+    return content;
+  }
+  if (!isMounted) {
+    return null;
+  }
+  return createPortal(content, document.body);
+}
+
+export { Jukebox };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map