@react-youtube-jukebox/core 0.1.0 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -4
- package/dist/index.d.ts +1 -1
- package/dist/index.js +105 -71
- package/dist/index.js.map +1 -1
- package/package.json +1 -4
- package/dist/index.css +0 -1345
- package/dist/index.css.map +0 -1
package/README.md
CHANGED
|
@@ -11,7 +11,6 @@ pnpm add @react-youtube-jukebox/core
|
|
|
11
11
|
## Usage
|
|
12
12
|
|
|
13
13
|
```tsx
|
|
14
|
-
import "@react-youtube-jukebox/core/styles.css";
|
|
15
14
|
import { Jukebox } from "@react-youtube-jukebox/core";
|
|
16
15
|
|
|
17
16
|
const tracks = [
|
|
@@ -20,11 +19,11 @@ const tracks = [
|
|
|
20
19
|
];
|
|
21
20
|
|
|
22
21
|
export function Page() {
|
|
23
|
-
return <Jukebox tracks={tracks} />;
|
|
22
|
+
return <Jukebox tracks={tracks} position="bottom-center" offset={20} />;
|
|
24
23
|
}
|
|
25
24
|
```
|
|
26
25
|
|
|
27
|
-
|
|
26
|
+
기본 스타일은 컴포넌트 import 시 자동으로 주입됩니다.
|
|
28
27
|
기본 테마는 `glass`이며, 필요하면 `theme="simple"`, `theme="sunset"`, `theme="ride"`를 전달할 수 있습니다.
|
|
29
28
|
쉘 형태는 `chrome` prop으로 제어하며 기본값은 `classic`입니다. `wallet`과 `ride` 프리셋으로 같은 로직 위에 다른 UI chrome을 적용할 수 있습니다.
|
|
30
29
|
|
|
@@ -94,7 +93,13 @@ type JukeboxExpandedRenderProps = {
|
|
|
94
93
|
type JukeboxProps = {
|
|
95
94
|
tracks: JukeboxTrack[];
|
|
96
95
|
autoplay?: boolean;
|
|
97
|
-
position?:
|
|
96
|
+
position?:
|
|
97
|
+
| "bottom-right"
|
|
98
|
+
| "bottom-left"
|
|
99
|
+
| "bottom-center"
|
|
100
|
+
| "top-right"
|
|
101
|
+
| "top-left"
|
|
102
|
+
| "top-center";
|
|
98
103
|
theme?: JukeboxTheme;
|
|
99
104
|
chrome?: JukeboxChrome;
|
|
100
105
|
offset?: number | { x: number; y: number };
|
|
@@ -107,4 +112,5 @@ type JukeboxProps = {
|
|
|
107
112
|
```
|
|
108
113
|
|
|
109
114
|
기본 사용은 viewport 기준 포털 렌더링입니다. 레이아웃 안에서 직접 배치가 필요할 때만 `portal={false}`를 사용합니다.
|
|
115
|
+
`position="bottom-center"`와 `position="top-center"`를 사용하면 x축은 가운데 정렬되고, `offset`은 top/bottom 여백에 그대로 적용됩니다.
|
|
110
116
|
`autoplay`는 기본값이 `true`이며, 첫 진입 시 무음 상태로 자동 재생합니다. 자동 재생을 끄려면 `autoplay={false}`를 전달합니다.
|
package/dist/index.d.ts
CHANGED
|
@@ -6,7 +6,7 @@ type JukeboxTrack = {
|
|
|
6
6
|
title: string;
|
|
7
7
|
artist?: string;
|
|
8
8
|
};
|
|
9
|
-
type JukeboxPosition = "bottom-right" | "bottom-left" | "top-right" | "top-left";
|
|
9
|
+
type JukeboxPosition = "bottom-right" | "bottom-left" | "bottom-center" | "top-right" | "top-left" | "top-center";
|
|
10
10
|
type JukeboxTheme = "glass" | "simple" | "sunset" | "ride";
|
|
11
11
|
type JukeboxChrome = "classic" | "wallet" | "ride";
|
|
12
12
|
type JukeboxOffset = number | {
|
package/dist/index.js
CHANGED
|
@@ -14,6 +14,13 @@ var DEFAULT_VOLUME = 100;
|
|
|
14
14
|
var LEVEL_BAR_HEIGHTS = [12, 18, 14];
|
|
15
15
|
var LEVEL_BAR_REST_HEIGHT = 8;
|
|
16
16
|
var LEVEL_BAR_ANIMATION_DELAY_MS = 120;
|
|
17
|
+
function getEffectiveChrome(chrome) {
|
|
18
|
+
const isTemporarilyDisabledChrome = chrome === "wallet" || chrome === "ride";
|
|
19
|
+
if (isTemporarilyDisabledChrome) {
|
|
20
|
+
return DEFAULT_CHROME;
|
|
21
|
+
}
|
|
22
|
+
return chrome;
|
|
23
|
+
}
|
|
17
24
|
function getNextTrackIndex(index, step, totalTracks) {
|
|
18
25
|
if (totalTracks <= 0) {
|
|
19
26
|
return 0;
|
|
@@ -34,15 +41,23 @@ function normalizeOffset(offset) {
|
|
|
34
41
|
}
|
|
35
42
|
function getPositionStyle(position, offset, isPortal) {
|
|
36
43
|
const normalizedOffset = normalizeOffset(offset);
|
|
44
|
+
const isTopPosition = position.startsWith("top");
|
|
45
|
+
const isCenterPosition = position.endsWith("center");
|
|
46
|
+
const isLeftPosition = position.endsWith("left");
|
|
37
47
|
const style = {
|
|
38
48
|
position: isPortal ? "fixed" : "absolute"
|
|
39
49
|
};
|
|
40
|
-
if (
|
|
50
|
+
if (isTopPosition) {
|
|
41
51
|
style.top = normalizedOffset.y;
|
|
42
52
|
} else {
|
|
43
53
|
style.bottom = normalizedOffset.y;
|
|
44
54
|
}
|
|
45
|
-
if (
|
|
55
|
+
if (isCenterPosition) {
|
|
56
|
+
style.left = "50%";
|
|
57
|
+
style.transform = "translateX(-50%)";
|
|
58
|
+
return style;
|
|
59
|
+
}
|
|
60
|
+
if (isLeftPosition) {
|
|
46
61
|
style.left = normalizedOffset.x;
|
|
47
62
|
} else {
|
|
48
63
|
style.right = normalizedOffset.x;
|
|
@@ -325,7 +340,6 @@ function SpeakerIcon({ isMuted }) {
|
|
|
325
340
|
}
|
|
326
341
|
function JukeboxExpandedPlayer({
|
|
327
342
|
currentIndex,
|
|
328
|
-
currentTrack,
|
|
329
343
|
isMuted,
|
|
330
344
|
isPlaying,
|
|
331
345
|
nextTrack,
|
|
@@ -346,75 +360,69 @@ function JukeboxExpandedPlayer({
|
|
|
346
360
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
347
361
|
/* @__PURE__ */ jsxs("div", { className: "rj-expanded__shell", children: [
|
|
348
362
|
/* @__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" }) }) }),
|
|
349
|
-
/* @__PURE__ */
|
|
350
|
-
/* @__PURE__ */ jsxs("div", { className: "rj-
|
|
351
|
-
/* @__PURE__ */ jsx(
|
|
352
|
-
|
|
363
|
+
/* @__PURE__ */ jsx("div", { className: "rj-expanded__meta", children: /* @__PURE__ */ jsxs("div", { className: "rj-expanded__controls", children: [
|
|
364
|
+
/* @__PURE__ */ jsxs("div", { className: "rj-expanded__transport", children: [
|
|
365
|
+
/* @__PURE__ */ jsx(
|
|
366
|
+
"button",
|
|
367
|
+
{
|
|
368
|
+
type: "button",
|
|
369
|
+
onClick: playPrev,
|
|
370
|
+
disabled: !hasMultipleTracks,
|
|
371
|
+
className: "rj-chip-button",
|
|
372
|
+
children: "\u25C0"
|
|
373
|
+
}
|
|
374
|
+
),
|
|
375
|
+
/* @__PURE__ */ jsx(
|
|
376
|
+
"button",
|
|
377
|
+
{
|
|
378
|
+
type: "button",
|
|
379
|
+
onClick: togglePlay,
|
|
380
|
+
className: "rj-chip-button rj-chip-button--primary",
|
|
381
|
+
children: isPlaying ? "Pause" : "Play"
|
|
382
|
+
}
|
|
383
|
+
),
|
|
384
|
+
/* @__PURE__ */ jsx(
|
|
385
|
+
"button",
|
|
386
|
+
{
|
|
387
|
+
type: "button",
|
|
388
|
+
onClick: playNext,
|
|
389
|
+
disabled: !hasMultipleTracks,
|
|
390
|
+
className: "rj-chip-button",
|
|
391
|
+
children: "\u25B6"
|
|
392
|
+
}
|
|
393
|
+
)
|
|
353
394
|
] }),
|
|
354
|
-
/* @__PURE__ */ jsxs("div", { className: "rj-
|
|
355
|
-
/* @__PURE__ */
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
}
|
|
384
|
-
)
|
|
385
|
-
] }),
|
|
386
|
-
/* @__PURE__ */ jsxs("div", { className: "rj-expanded__utility", children: [
|
|
387
|
-
/* @__PURE__ */ jsx(
|
|
388
|
-
"button",
|
|
389
|
-
{
|
|
390
|
-
type: "button",
|
|
391
|
-
onClick: toggleMute,
|
|
392
|
-
"aria-label": isMuted ? "Unmute" : "Mute",
|
|
393
|
-
className: "rj-icon-button",
|
|
394
|
-
children: /* @__PURE__ */ jsx("span", { className: "rj-icon-button__icon", children: /* @__PURE__ */ jsx(SpeakerIcon, { isMuted }) })
|
|
395
|
-
}
|
|
396
|
-
),
|
|
397
|
-
/* @__PURE__ */ jsx(
|
|
398
|
-
"input",
|
|
399
|
-
{
|
|
400
|
-
type: "range",
|
|
401
|
-
min: 0,
|
|
402
|
-
max: 100,
|
|
403
|
-
step: 1,
|
|
404
|
-
value: volume,
|
|
405
|
-
onChange: handleVolumeInput,
|
|
406
|
-
"aria-label": "Volume",
|
|
407
|
-
className: "rj-volume"
|
|
408
|
-
}
|
|
409
|
-
),
|
|
410
|
-
hasMultipleTracks ? /* @__PURE__ */ jsxs("span", { className: "rj-expanded__counter", children: [
|
|
411
|
-
currentIndex + 1,
|
|
412
|
-
" / ",
|
|
413
|
-
totalTracks
|
|
414
|
-
] }) : null
|
|
415
|
-
] })
|
|
395
|
+
/* @__PURE__ */ jsxs("div", { className: "rj-expanded__utility", children: [
|
|
396
|
+
/* @__PURE__ */ jsx(
|
|
397
|
+
"button",
|
|
398
|
+
{
|
|
399
|
+
type: "button",
|
|
400
|
+
onClick: toggleMute,
|
|
401
|
+
"aria-label": isMuted ? "Unmute" : "Mute",
|
|
402
|
+
className: "rj-icon-button",
|
|
403
|
+
children: /* @__PURE__ */ jsx("span", { className: "rj-icon-button__icon", children: /* @__PURE__ */ jsx(SpeakerIcon, { isMuted }) })
|
|
404
|
+
}
|
|
405
|
+
),
|
|
406
|
+
/* @__PURE__ */ jsx(
|
|
407
|
+
"input",
|
|
408
|
+
{
|
|
409
|
+
type: "range",
|
|
410
|
+
min: 0,
|
|
411
|
+
max: 100,
|
|
412
|
+
step: 1,
|
|
413
|
+
value: volume,
|
|
414
|
+
onChange: handleVolumeInput,
|
|
415
|
+
"aria-label": "Volume",
|
|
416
|
+
className: "rj-volume"
|
|
417
|
+
}
|
|
418
|
+
),
|
|
419
|
+
hasMultipleTracks ? /* @__PURE__ */ jsxs("span", { className: "rj-expanded__counter", children: [
|
|
420
|
+
currentIndex + 1,
|
|
421
|
+
" / ",
|
|
422
|
+
totalTracks
|
|
423
|
+
] }) : null
|
|
416
424
|
] })
|
|
417
|
-
] })
|
|
425
|
+
] }) })
|
|
418
426
|
] }),
|
|
419
427
|
hasNextTrack ? /* @__PURE__ */ jsxs("div", { className: "rj-next-track", children: [
|
|
420
428
|
/* @__PURE__ */ jsx("span", { className: "rj-next-track__label", children: "Next" }),
|
|
@@ -431,6 +439,31 @@ function JukeboxExpandedPlayer({
|
|
|
431
439
|
] }) : null
|
|
432
440
|
] });
|
|
433
441
|
}
|
|
442
|
+
|
|
443
|
+
// #style-inject:#style-inject
|
|
444
|
+
function styleInject(css, { insertAt } = {}) {
|
|
445
|
+
if (typeof document === "undefined") return;
|
|
446
|
+
const head = document.head || document.getElementsByTagName("head")[0];
|
|
447
|
+
const style = document.createElement("style");
|
|
448
|
+
style.type = "text/css";
|
|
449
|
+
if (insertAt === "top") {
|
|
450
|
+
if (head.firstChild) {
|
|
451
|
+
head.insertBefore(style, head.firstChild);
|
|
452
|
+
} else {
|
|
453
|
+
head.appendChild(style);
|
|
454
|
+
}
|
|
455
|
+
} else {
|
|
456
|
+
head.appendChild(style);
|
|
457
|
+
}
|
|
458
|
+
if (style.styleSheet) {
|
|
459
|
+
style.styleSheet.cssText = css;
|
|
460
|
+
} else {
|
|
461
|
+
style.appendChild(document.createTextNode(css));
|
|
462
|
+
}
|
|
463
|
+
}
|
|
464
|
+
|
|
465
|
+
// src/styles/jukebox.css
|
|
466
|
+
styleInject('.rj-root {\n --rj-text: #111827;\n --rj-text-muted: #667085;\n --rj-border: rgba(255, 255, 255, 0.55);\n --rj-panel: rgba(255, 255, 255, 0.84);\n --rj-shadow: 0 18px 44px -22px rgba(15, 23, 42, 0.28);\n --rj-gradient:\n linear-gradient(\n 180deg,\n #ffffff 0%,\n #e3eaf2 100%);\n --rj-gradient-soft:\n linear-gradient(\n 180deg,\n #f8fafc 0%,\n #e7edf4 100%);\n --rj-button-text: #334155;\n --rj-dock-bg: rgba(255, 255, 255, 0.82);\n --rj-dock-shadow: 0 -8px 22px -16px rgba(15, 23, 42, 0.24), 0 10px 28px -20px rgba(15, 23, 42, 0.2);\n --rj-dock-inner-bg:\n linear-gradient(\n \n 180deg,\n rgba(255, 255, 255, 0.84) 0%,\n rgba(241, 245, 249, 0.94) 100% );\n --rj-track-hover-bg: rgba(255, 255, 255, 0.55);\n --rj-level-gradient:\n linear-gradient(\n \n 180deg,\n #f8fafc 0%,\n #cbd5e1 45%,\n #64748b 100% );\n --rj-level-shadow-color: rgba(148, 163, 184, 0.14);\n --rj-icon-hover-bg: rgba(15, 23, 42, 0.04);\n --rj-shell-border: rgba(0, 0, 0, 0.06);\n --rj-shell-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);\n --rj-screen-frame-border: #c7d0da;\n --rj-screen-frame-bg:\n linear-gradient(\n 180deg,\n #fbfdff 0%,\n #e9eef4 100%);\n --rj-screen-frame-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);\n --rj-screen-border: #9aa7b8;\n --rj-screen-bg: #0f172a;\n --rj-player-bg:\n radial-gradient(\n circle at top,\n rgba(45, 212, 191, 0.15),\n transparent 45%),\n linear-gradient(\n 180deg,\n rgba(15, 23, 42, 0.96) 0%,\n rgba(2, 6, 23, 1) 100%);\n --rj-chip-border: #b4bfcc;\n --rj-chip-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);\n --rj-chip-primary-border: #a7b3c2;\n --rj-chip-primary-text: #1e293b;\n --rj-volume-track: #cbd5e1;\n --rj-volume-thumb: #334155;\n --rj-volume-thumb-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);\n --rj-expanded-icon: #475569;\n --rj-expanded-icon-hover: #1e293b;\n --rj-next-border: #c3cad5;\n --rj-next-bg:\n linear-gradient(\n 180deg,\n #f8fafc 0%,\n #e8edf3 100%);\n --rj-next-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);\n --rj-font-family:\n Inter,\n "Segoe UI",\n ui-sans-serif,\n system-ui,\n -apple-system,\n BlinkMacSystemFont,\n sans-serif;\n --rj-root-width: min(296px, calc(100vw - 16px));\n --rj-root-expanded-width: min(296px, calc(100vw - 16px));\n --rj-dock-radius: 22px;\n --rj-dock-padding: 6px;\n --rj-dock-backdrop: blur(18px) saturate(1.5);\n --rj-dock-inner-radius: 18px;\n --rj-dock-inner-gap: 6px;\n --rj-dock-inner-padding-right: 6px;\n --rj-track-summary-radius: 18px;\n --rj-track-summary-padding: 10px 12px;\n --rj-expanded-radius: 22px;\n --rj-expanded-padding: 8px;\n --rj-expanded-backdrop: blur(18px) saturate(1.5);\n --rj-shell-radius: 18px;\n --rj-shell-padding: 12px;\n --rj-screen-frame-radius: 15px;\n --rj-screen-frame-padding: 8px;\n --rj-screen-radius: 12px;\n --rj-screen-padding: 8px;\n --rj-player-radius: 10px;\n --rj-chip-radius: 9999px;\n --rj-chip-padding: 7px 10px;\n --rj-volume-width: 72px;\n --rj-expanded-control-gap: 8px;\n --rj-next-radius: 16px;\n --rj-next-padding: 10px 12px;\n color: var(--rj-text);\n z-index: 50;\n width: var(--rj-root-width);\n overflow: visible;\n font-family: var(--rj-font-family);\n}\n.rj-root[data-theme=simple] {\n --rj-text: #171717;\n --rj-text-muted: #737373;\n --rj-border: rgba(23, 23, 23, 0.1);\n --rj-panel: #ffffff;\n --rj-shadow: 0 16px 40px -28px rgba(23, 23, 23, 0.24);\n --rj-gradient:\n linear-gradient(\n 180deg,\n #ffffff 0%,\n #f5f5f5 100%);\n --rj-gradient-soft:\n linear-gradient(\n 180deg,\n #fafafa 0%,\n #f4f4f5 100%);\n --rj-button-text: #262626;\n --rj-dock-bg: #ffffff;\n --rj-dock-shadow: 0 14px 32px -28px rgba(23, 23, 23, 0.2);\n --rj-dock-inner-bg: #ffffff;\n --rj-track-hover-bg: #f5f5f5;\n --rj-level-gradient:\n linear-gradient(\n \n 180deg,\n #fafafa 0%,\n #d4d4d8 52%,\n #52525b 100% );\n --rj-level-shadow-color: rgba(82, 82, 91, 0.12);\n --rj-icon-hover-bg: rgba(23, 23, 23, 0.05);\n --rj-shell-border: rgba(23, 23, 23, 0.08);\n --rj-shell-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);\n --rj-screen-frame-border: #d4d4d8;\n --rj-screen-frame-bg:\n linear-gradient(\n 180deg,\n #ffffff 0%,\n #f4f4f5 100%);\n --rj-screen-frame-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);\n --rj-screen-border: #a1a1aa;\n --rj-screen-bg: #18181b;\n --rj-player-bg:\n radial-gradient(\n circle at top,\n rgba(255, 255, 255, 0.08),\n transparent 40%),\n linear-gradient(\n 180deg,\n #27272a 0%,\n #09090b 100%);\n --rj-chip-border: #d4d4d8;\n --rj-chip-shadow: none;\n --rj-chip-primary-border: #171717;\n --rj-chip-primary-text: #171717;\n --rj-volume-track: #d4d4d8;\n --rj-volume-thumb: #171717;\n --rj-volume-thumb-shadow: none;\n --rj-expanded-icon: #52525b;\n --rj-expanded-icon-hover: #171717;\n --rj-next-border: #e4e4e7;\n --rj-next-bg:\n linear-gradient(\n 180deg,\n #fafafa 0%,\n #f4f4f5 100%);\n --rj-next-shadow: none;\n}\n.rj-root[data-theme=simple][data-chrome=ride] .rj-expanded .rj-icon-button {\n width: 24px;\n height: 24px;\n border-radius: 9999px;\n background: transparent;\n}\n.rj-root[data-theme=simple][data-chrome=ride] .rj-expanded .rj-icon-button__icon {\n width: 12px;\n height: 12px;\n}\n.rj-root[data-theme=simple][data-chrome=wallet] .rj-expanded__utility {\n gap: 8px;\n}\n.rj-root[data-theme=simple][data-chrome=wallet] .rj-expanded .rj-icon-button {\n margin-left: 6px;\n}\n.rj-root[data-theme=sunset] {\n --rj-text: #4a1635;\n --rj-text-muted: #8b5b6d;\n --rj-border: rgba(255, 255, 255, 0.3);\n --rj-panel: rgba(255, 244, 237, 0.86);\n --rj-shadow: 0 22px 48px -24px rgba(159, 18, 57, 0.28);\n --rj-gradient:\n linear-gradient(\n 135deg,\n #fff0d8 0%,\n #ffc7a1 48%,\n #ff9bb2 100%);\n --rj-gradient-soft:\n linear-gradient(\n \n 180deg,\n rgba(255, 248, 240, 0.96) 0%,\n rgba(255, 225, 213, 0.96) 100% );\n --rj-button-text: #7a284f;\n --rj-dock-bg: rgba(255, 241, 232, 0.82);\n --rj-dock-shadow: 0 -8px 22px -16px rgba(190, 24, 93, 0.22), 0 12px 30px -18px rgba(249, 115, 22, 0.24);\n --rj-dock-inner-bg:\n linear-gradient(\n \n 135deg,\n rgba(255, 249, 240, 0.96) 0%,\n rgba(255, 228, 212, 0.96) 100% );\n --rj-track-hover-bg: rgba(255, 255, 255, 0.45);\n --rj-level-gradient:\n linear-gradient(\n \n 180deg,\n #fff7ed 0%,\n #fb7185 48%,\n #7c3aed 100% );\n --rj-level-shadow-color: rgba(251, 113, 133, 0.2);\n --rj-icon-hover-bg: rgba(190, 24, 93, 0.08);\n --rj-shell-border: rgba(244, 114, 182, 0.15);\n --rj-shell-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);\n --rj-screen-frame-border: #f9a8d4;\n --rj-screen-frame-bg:\n linear-gradient(\n 180deg,\n #fff1f2 0%,\n #ffe4e6 100%);\n --rj-screen-frame-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);\n --rj-screen-border: #be185d;\n --rj-screen-bg: #431407;\n --rj-player-bg:\n radial-gradient(\n circle at top,\n rgba(253, 224, 71, 0.18),\n transparent 40%),\n radial-gradient(\n \n circle at 70% 30%,\n rgba(244, 114, 182, 0.18),\n transparent 35% ),\n linear-gradient(\n 180deg,\n #7c2d12 0%,\n #4c0519 100%);\n --rj-chip-border: rgba(244, 114, 182, 0.28);\n --rj-chip-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);\n --rj-chip-primary-border: rgba(190, 24, 93, 0.16);\n --rj-chip-primary-text: #5b1032;\n --rj-volume-track: #fda4af;\n --rj-volume-thumb: #9f1239;\n --rj-volume-thumb-shadow: 0 1px 6px rgba(159, 18, 57, 0.24);\n --rj-expanded-icon: #9f1239;\n --rj-expanded-icon-hover: #831843;\n --rj-next-border: rgba(244, 114, 182, 0.2);\n --rj-next-bg:\n linear-gradient(\n 180deg,\n #fff1f2 0%,\n #ffe4e6 100%);\n --rj-next-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);\n}\n.rj-root[data-theme=ride] {\n --rj-text: #f8fafc;\n --rj-text-muted: rgba(226, 232, 240, 0.7);\n --rj-border: rgba(255, 255, 255, 0.1);\n --rj-panel: rgba(3, 7, 18, 0.96);\n --rj-shadow: 0 24px 54px -34px rgba(2, 6, 23, 0.72);\n --rj-gradient:\n linear-gradient(\n 180deg,\n #f1f5f9 0%,\n #d8e1ea 100%);\n --rj-gradient-soft:\n linear-gradient(\n \n 180deg,\n rgba(15, 23, 42, 0.96) 0%,\n rgba(2, 6, 23, 0.98) 100% );\n --rj-button-text: #f8fafc;\n --rj-dock-bg: #050816;\n --rj-dock-shadow: 0 24px 54px -34px rgba(2, 6, 23, 0.72);\n --rj-dock-inner-bg:\n linear-gradient(\n \n 180deg,\n rgba(255, 255, 255, 0.03) 0%,\n rgba(255, 255, 255, 0) 100% );\n --rj-track-hover-bg: rgba(255, 255, 255, 0.06);\n --rj-level-gradient:\n linear-gradient(\n \n 180deg,\n #f8fafc 0%,\n #cbd5e1 45%,\n #64748b 100% );\n --rj-level-shadow-color: rgba(148, 163, 184, 0.14);\n --rj-icon-hover-bg: rgba(255, 255, 255, 0.08);\n --rj-shell-border: rgba(255, 255, 255, 0.08);\n --rj-shell-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);\n --rj-screen-frame-border: rgba(148, 163, 184, 0.24);\n --rj-screen-frame-bg:\n linear-gradient(\n \n 180deg,\n rgba(30, 41, 59, 0.92) 0%,\n rgba(15, 23, 42, 0.98) 100% );\n --rj-screen-frame-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);\n --rj-screen-border: rgba(100, 116, 139, 0.4);\n --rj-screen-bg: #050816;\n --rj-player-bg:\n radial-gradient(\n circle at top,\n rgba(255, 255, 255, 0.08),\n transparent 40%),\n linear-gradient(\n 180deg,\n rgba(15, 23, 42, 0.96) 0%,\n rgba(2, 6, 23, 1) 100%);\n --rj-chip-border: rgba(191, 219, 254, 0.58);\n --rj-chip-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);\n --rj-chip-primary-border: rgba(255, 255, 255, 0.38);\n --rj-chip-primary-text: #0f172a;\n --rj-volume-track: rgba(148, 163, 184, 0.38);\n --rj-volume-thumb: #ffffff;\n --rj-volume-thumb-shadow: none;\n --rj-expanded-icon: rgba(226, 232, 240, 0.82);\n --rj-expanded-icon-hover: #ffffff;\n --rj-next-border: rgba(255, 255, 255, 0.1);\n --rj-next-bg:\n linear-gradient(\n \n 180deg,\n rgba(15, 23, 42, 0.96) 0%,\n rgba(2, 6, 23, 0.98) 100% );\n --rj-next-shadow: none;\n}\n.rj-root[data-chrome=wallet] {\n --rj-dock-radius: 26px;\n --rj-dock-padding: 6px;\n --rj-dock-inner-radius: 20px;\n --rj-dock-inner-gap: 8px;\n --rj-dock-inner-padding-right: 0;\n --rj-track-summary-radius: 20px;\n --rj-track-summary-padding: 12px;\n --rj-expanded-radius: 26px;\n --rj-expanded-padding: 8px;\n --rj-shell-radius: 20px;\n --rj-shell-padding: 12px;\n --rj-screen-frame-radius: 18px;\n --rj-screen-frame-padding: 7px;\n --rj-screen-radius: 14px;\n --rj-screen-padding: 7px;\n --rj-player-radius: 12px;\n --rj-chip-radius: 14px;\n --rj-chip-padding: 7px 10px;\n --rj-volume-width: 68px;\n --rj-expanded-control-gap: 8px;\n --rj-next-radius: 16px;\n --rj-next-padding: 9px 12px;\n}\n.rj-root[data-chrome=ride] {\n --rj-font-family:\n "IBM Plex Sans",\n "Segoe UI",\n ui-sans-serif,\n system-ui,\n -apple-system,\n BlinkMacSystemFont,\n sans-serif;\n --rj-dock-radius: 18px;\n --rj-dock-padding: 4px;\n --rj-dock-backdrop: none;\n --rj-dock-inner-radius: 14px;\n --rj-dock-inner-gap: 4px;\n --rj-dock-inner-padding-right: 4px;\n --rj-track-summary-radius: 12px;\n --rj-track-summary-padding: 12px;\n --rj-expanded-radius: 18px;\n --rj-expanded-padding: 6px;\n --rj-expanded-backdrop: none;\n --rj-shell-radius: 14px;\n --rj-shell-padding: 12px;\n --rj-screen-frame-radius: 12px;\n --rj-screen-frame-padding: 6px;\n --rj-screen-radius: 10px;\n --rj-screen-padding: 6px;\n --rj-player-radius: 8px;\n --rj-chip-radius: 12px;\n --rj-chip-padding: 10px 12px;\n --rj-volume-width: 88px;\n --rj-expanded-control-gap: 6px;\n --rj-next-radius: 14px;\n --rj-next-padding: 10px 12px;\n}\n.rj-root[data-theme=glass][data-chrome=wallet] {\n --rj-text: #0f172a;\n --rj-text-muted: #64748b;\n --rj-border: rgba(191, 219, 254, 0.72);\n --rj-panel: rgba(245, 249, 255, 0.96);\n --rj-shadow: 0 22px 46px -28px rgba(37, 99, 235, 0.22);\n --rj-gradient:\n linear-gradient(\n 135deg,\n #eff6ff 0%,\n #dbeafe 100%);\n --rj-gradient-soft:\n linear-gradient(\n 180deg,\n #ffffff 0%,\n #eef4ff 100%);\n --rj-button-text: #1e3a8a;\n --rj-dock-bg: rgba(231, 240, 255, 0.86);\n --rj-dock-shadow: 0 16px 36px -28px rgba(59, 130, 246, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.92);\n --rj-dock-inner-bg: transparent;\n --rj-track-hover-bg: rgba(219, 234, 254, 0.58);\n --rj-level-gradient:\n linear-gradient(\n \n 180deg,\n #60a5fa 0%,\n #2563eb 60%,\n #1d4ed8 100% );\n --rj-level-shadow-color: rgba(96, 165, 250, 0.2);\n --rj-icon-hover-bg: rgba(59, 130, 246, 0.1);\n --rj-shell-border: rgba(191, 219, 254, 0.88);\n --rj-shell-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96);\n --rj-screen-frame-border: #bfdbfe;\n --rj-screen-frame-bg:\n linear-gradient(\n 180deg,\n #ffffff 0%,\n #eff6ff 100%);\n --rj-screen-frame-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96);\n --rj-screen-border: #93c5fd;\n --rj-screen-bg: #dbeafe;\n --rj-player-bg:\n radial-gradient(\n circle at top,\n rgba(255, 255, 255, 0.48),\n transparent 48%),\n linear-gradient(\n 180deg,\n #bfdbfe 0%,\n #60a5fa 100%);\n --rj-chip-border: rgba(147, 197, 253, 0.9);\n --rj-chip-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);\n --rj-chip-primary-border: rgba(59, 130, 246, 0.28);\n --rj-chip-primary-text: #1e3a8a;\n --rj-volume-track: #bfdbfe;\n --rj-volume-thumb: #2563eb;\n --rj-volume-thumb-shadow: 0 2px 8px rgba(37, 99, 235, 0.18);\n --rj-expanded-icon: #2563eb;\n --rj-expanded-icon-hover: #1d4ed8;\n --rj-next-border: rgba(147, 197, 253, 0.72);\n --rj-next-bg:\n linear-gradient(\n 180deg,\n #ffffff 0%,\n #eff6ff 100%);\n --rj-next-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96);\n}\n.rj-root--inline {\n z-index: 20;\n width: min(100%, var(--rj-root-width));\n max-width: 100%;\n}\n.rj-dock {\n border: 1px solid var(--rj-border);\n border-radius: var(--rj-dock-radius);\n background: var(--rj-dock-bg);\n padding: var(--rj-dock-padding);\n box-shadow: var(--rj-dock-shadow);\n backdrop-filter: var(--rj-dock-backdrop);\n}\n.rj-root--expanded .rj-dock {\n width: var(--rj-root-expanded-width);\n max-width: calc(100vw - 16px);\n}\n.rj-root--inline.rj-root--expanded .rj-dock {\n width: min(100%, var(--rj-root-expanded-width));\n max-width: 100%;\n}\n.rj-root[data-position$=right].rj-root--expanded .rj-dock {\n margin-left: calc(var(--rj-root-width) - var(--rj-root-expanded-width));\n}\n.rj-dock__inner {\n display: flex;\n align-items: center;\n gap: var(--rj-dock-inner-gap);\n border-radius: var(--rj-dock-inner-radius);\n background: var(--rj-dock-inner-bg);\n padding-right: var(--rj-dock-inner-padding-right);\n}\n.rj-track-summary {\n display: flex;\n min-width: 0;\n flex: 1;\n align-items: center;\n gap: 10px;\n border: 0;\n background: transparent;\n border-radius: var(--rj-track-summary-radius);\n padding: var(--rj-track-summary-padding);\n text-align: left;\n color: inherit;\n cursor: pointer;\n transition: background-color 0.2s ease;\n}\n.rj-track-summary:hover {\n background: var(--rj-track-hover-bg);\n}\n.rj-track-summary--empty {\n cursor: default;\n}\n.rj-track-summary--empty:hover {\n background: transparent;\n}\n.rj-level-meter {\n display: flex;\n width: 28px;\n height: 28px;\n flex-shrink: 0;\n align-items: flex-end;\n justify-content: center;\n gap: 4px;\n}\n.rj-level-bar {\n width: 4px;\n border-radius: 9999px;\n background: var(--rj-level-gradient);\n box-shadow: 0 0 0 1px var(--rj-level-shadow-color);\n opacity: 0.55;\n transform-origin: bottom center;\n}\n.rj-level-bar--playing {\n opacity: 1;\n animation: rj-jukebox-bounce 0.9s ease-in-out infinite;\n}\n.rj-track-summary__copy {\n min-width: 0;\n flex: 1;\n}\n.rj-track-summary__title {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: 12px;\n font-weight: 700;\n letter-spacing: -0.01em;\n}\n.rj-track-summary__artist {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: 11px;\n color: var(--rj-text-muted);\n}\n.rj-chevron {\n display: inline-flex;\n height: 16px;\n width: 16px;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n color: var(--rj-text-muted);\n}\n.rj-chevron__icon {\n display: block;\n height: 100%;\n width: 100%;\n transform: rotate(0deg);\n transition: transform 0.2s ease;\n}\n.rj-chevron__icon--expanded {\n transform: rotate(180deg);\n}\n.rj-icon-button {\n display: inline-flex;\n height: 32px;\n width: 32px;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border: 0;\n border-radius: 9999px;\n background: transparent;\n color: var(--rj-text-muted);\n cursor: pointer;\n transition:\n background-color 0.2s ease,\n color 0.2s ease,\n opacity 0.2s ease;\n}\n.rj-icon-button:hover {\n background: var(--rj-icon-hover-bg);\n color: var(--rj-text);\n}\n.rj-icon-button:disabled {\n cursor: not-allowed;\n opacity: 0.45;\n}\n.rj-icon-button__icon {\n display: inline-flex;\n height: 16px;\n width: 16px;\n}\n.rj-icon-button__icon svg {\n display: block;\n height: 100%;\n width: 100%;\n}\n.rj-expanded {\n position: absolute;\n width: var(--rj-root-expanded-width);\n max-width: calc(100vw - 16px);\n right: 0;\n bottom: calc(100% + 10px);\n left: auto;\n z-index: 2;\n border: 1px solid var(--rj-border);\n border-radius: var(--rj-expanded-radius);\n background: var(--rj-panel);\n padding: var(--rj-expanded-padding);\n box-shadow: var(--rj-shadow);\n backdrop-filter: var(--rj-expanded-backdrop);\n}\n.rj-root--inline .rj-expanded {\n width: min(100%, var(--rj-root-expanded-width));\n max-width: 100%;\n}\n.rj-root[data-position$=left] .rj-expanded {\n right: auto;\n left: 0;\n}\n.rj-expanded--hidden {\n visibility: hidden;\n pointer-events: none;\n opacity: 0;\n}\n.rj-root[data-position^=top] .rj-expanded {\n top: calc(100% + 10px);\n bottom: auto;\n}\n.rj-expanded__shell {\n border-radius: var(--rj-shell-radius);\n border: 1px solid var(--rj-shell-border);\n background: var(--rj-gradient-soft);\n padding: var(--rj-shell-padding);\n box-shadow: var(--rj-shell-inset-shadow);\n}\n.rj-expanded__screen-frame {\n border-radius: var(--rj-screen-frame-radius);\n border: 1px solid var(--rj-screen-frame-border);\n background: var(--rj-screen-frame-bg);\n padding: var(--rj-screen-frame-padding);\n box-shadow: var(--rj-screen-frame-shadow);\n}\n.rj-expanded__screen {\n border-radius: var(--rj-screen-radius);\n border: 1px solid var(--rj-screen-border);\n background: var(--rj-screen-bg);\n padding: var(--rj-screen-padding);\n}\n.rj-expanded__player {\n overflow: hidden;\n width: 100%;\n aspect-ratio: 16 / 9;\n border-radius: var(--rj-player-radius);\n background: var(--rj-player-bg);\n}\n.rj-expanded__meta {\n margin-top: 12px;\n}\n.rj-expanded__titles {\n margin-bottom: 10px;\n}\n.rj-expanded__title {\n font-size: 13px;\n font-weight: 700;\n}\n.rj-expanded__artist {\n margin-top: 2px;\n font-size: 11px;\n color: var(--rj-text-muted);\n}\n.rj-expanded__controls {\n display: flex;\n flex-wrap: nowrap;\n min-width: 0;\n align-items: center;\n gap: var(--rj-expanded-control-gap);\n}\n.rj-expanded__transport,\n.rj-expanded__utility {\n display: flex;\n min-width: 0;\n align-items: center;\n gap: var(--rj-expanded-control-gap);\n}\n.rj-expanded__transport {\n flex: 0 0 auto;\n}\n.rj-expanded__utility {\n flex: 1 1 auto;\n margin-left: auto;\n justify-content: flex-end;\n}\n.rj-chip-button {\n border: 1px solid var(--rj-chip-border);\n border-radius: var(--rj-chip-radius);\n background: var(--rj-gradient-soft);\n padding: var(--rj-chip-padding);\n color: var(--rj-button-text);\n font-size: 10px;\n font-weight: 600;\n cursor: pointer;\n box-shadow: var(--rj-chip-shadow);\n transition: transform 0.2s ease, opacity 0.2s ease;\n}\n.rj-chip-button:hover {\n transform: translateY(-1px);\n}\n.rj-chip-button:disabled {\n cursor: not-allowed;\n opacity: 0.45;\n transform: none;\n}\n.rj-chip-button--primary {\n border-color: var(--rj-chip-primary-border);\n background: var(--rj-gradient);\n color: var(--rj-chip-primary-text);\n font-weight: 700;\n}\n.rj-volume {\n min-width: 0;\n width: var(--rj-volume-width);\n flex: 1 1 var(--rj-volume-width);\n height: 4px;\n cursor: pointer;\n appearance: none;\n border-radius: 9999px;\n background: var(--rj-volume-track);\n outline: none;\n}\n.rj-volume::-webkit-slider-runnable-track {\n height: 4px;\n border-radius: 9999px;\n background: var(--rj-volume-track);\n}\n.rj-volume::-webkit-slider-thumb {\n width: 12px;\n height: 12px;\n margin-top: -4px;\n appearance: none;\n border: 0;\n border-radius: 9999px;\n background: var(--rj-volume-thumb);\n box-shadow: var(--rj-volume-thumb-shadow);\n}\n.rj-volume::-moz-range-track {\n height: 4px;\n border-radius: 9999px;\n background: var(--rj-volume-track);\n}\n.rj-volume::-moz-range-thumb {\n width: 12px;\n height: 12px;\n border: 0;\n border-radius: 9999px;\n background: var(--rj-volume-thumb);\n box-shadow: var(--rj-volume-thumb-shadow);\n}\n.rj-expanded .rj-icon-button {\n margin-left: 4px;\n height: 24px;\n width: 24px;\n color: var(--rj-expanded-icon);\n}\n.rj-expanded .rj-icon-button:hover {\n background: transparent;\n color: var(--rj-expanded-icon-hover);\n}\n.rj-expanded .rj-icon-button__icon {\n height: 12px;\n width: 12px;\n}\n.rj-expanded__counter {\n margin-left: auto;\n flex-shrink: 0;\n font-size: 10px;\n color: var(--rj-text-muted);\n white-space: nowrap;\n font-family:\n "SF Mono",\n SFMono-Regular,\n ui-monospace,\n Menlo,\n Consolas,\n monospace;\n}\n.rj-next-track {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n margin-top: 10px;\n border-radius: var(--rj-next-radius);\n border: 1px solid var(--rj-next-border);\n background: var(--rj-next-bg);\n padding: var(--rj-next-padding);\n font-size: 10px;\n color: var(--rj-text-muted);\n box-shadow: var(--rj-next-shadow);\n}\n.rj-next-track__label {\n font-weight: 700;\n}\n.rj-next-track__button {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n border: 0;\n background: transparent;\n color: var(--rj-button-text);\n cursor: pointer;\n}\n.rj-next-track__button:disabled {\n cursor: not-allowed;\n opacity: 0.45;\n}\n.rj-root[data-chrome=wallet] .rj-dock {\n border-color: var(--rj-border);\n}\n.rj-root[data-chrome=wallet] .rj-dock__inner {\n align-items: center;\n}\n.rj-root[data-chrome=wallet] .rj-track-summary {\n border: 1px solid var(--rj-border);\n background: var(--rj-gradient-soft);\n box-shadow: var(--rj-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.92);\n}\n.rj-root[data-chrome=wallet] .rj-level-meter {\n width: 32px;\n height: 32px;\n border-radius: 14px;\n background: var(--rj-gradient);\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94);\n}\n.rj-root[data-chrome=wallet] .rj-chevron {\n width: 22px;\n height: 22px;\n border-radius: 9999px;\n background: var(--rj-track-hover-bg);\n}\n.rj-root[data-chrome=wallet] .rj-track-summary__title {\n font-size: 13px;\n letter-spacing: -0.02em;\n}\n.rj-root[data-chrome=wallet] .rj-track-summary__artist {\n margin-top: 3px;\n font-size: 10px;\n}\n.rj-root[data-chrome=wallet] .rj-dock .rj-icon-button {\n width: 34px;\n height: 34px;\n border: 1px solid var(--rj-border);\n border-radius: 14px;\n background: var(--rj-gradient-soft);\n box-shadow: var(--rj-chip-shadow);\n}\n.rj-root[data-chrome=wallet] .rj-expanded__meta {\n margin-top: 10px;\n}\n.rj-root[data-chrome=wallet] .rj-expanded__controls {\n align-items: center;\n gap: 8px;\n}\n.rj-root[data-chrome=wallet] .rj-expanded__transport,\n.rj-root[data-chrome=wallet] .rj-expanded__utility {\n flex: 0 1 auto;\n margin-left: 0;\n min-width: 0;\n border: 0;\n background: transparent;\n padding: 0;\n box-shadow: none;\n}\n.rj-root[data-chrome=wallet] .rj-expanded__transport {\n display: grid;\n grid-template-columns: 30px auto 30px;\n gap: 6px;\n align-items: center;\n}\n.rj-root[data-chrome=wallet] .rj-expanded__utility {\n margin-left: auto;\n flex: 1 1 auto;\n justify-content: flex-end;\n gap: 6px;\n}\n.rj-root[data-chrome=wallet] .rj-chip-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: 11px;\n min-height: 32px;\n padding-inline: 10px;\n border-radius: 9999px;\n text-align: center;\n}\n.rj-root[data-chrome=wallet] .rj-expanded__transport .rj-chip-button:not(.rj-chip-button--primary) {\n width: 30px;\n min-width: 30px;\n padding-inline: 0;\n}\n.rj-root[data-chrome=wallet] .rj-chip-button--primary {\n justify-self: center;\n min-width: 48px;\n}\n.rj-root[data-chrome=wallet] .rj-expanded .rj-icon-button {\n margin-left: 0;\n width: 18px;\n height: 18px;\n border-radius: 9999px;\n background: transparent;\n}\n.rj-root[data-chrome=wallet] .rj-expanded .rj-icon-button__icon {\n width: 14px;\n height: 14px;\n}\n.rj-root[data-chrome=wallet] .rj-volume {\n width: auto;\n min-width: 40px;\n}\n.rj-root[data-chrome=wallet] .rj-expanded__counter {\n margin-left: 0;\n flex: 0 0 auto;\n padding: 0;\n border: 0;\n background: transparent;\n}\n.rj-root[data-chrome=wallet] .rj-next-track {\n gap: 10px;\n}\n.rj-root[data-chrome=wallet] .rj-next-track__label {\n border-radius: 10px;\n background: var(--rj-track-hover-bg);\n padding: 4px 8px;\n}\n.rj-root[data-chrome=ride] .rj-dock {\n border-color: var(--rj-border);\n}\n.rj-root[data-chrome=ride] .rj-track-summary__title,\n.rj-root[data-chrome=ride] .rj-expanded__title,\n.rj-root[data-chrome=ride] .rj-next-track__label {\n letter-spacing: 0.06em;\n text-transform: uppercase;\n}\n.rj-root[data-chrome=ride] .rj-track-summary__title {\n font-size: 11px;\n}\n.rj-root[data-chrome=ride] .rj-track-summary__artist {\n font-size: 10px;\n}\n.rj-root[data-chrome=ride] .rj-dock .rj-icon-button {\n border-radius: 12px;\n background: var(--rj-track-hover-bg);\n}\n.rj-root[data-chrome=ride] .rj-expanded {\n overflow: hidden;\n border-color: var(--rj-border);\n background:\n radial-gradient(\n circle at top left,\n var(--rj-track-hover-bg),\n transparent 32%),\n var(--rj-next-bg);\n box-shadow: var(--rj-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.04);\n}\n.rj-root[data-chrome=ride] .rj-expanded__shell {\n position: relative;\n background:\n linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0.04),\n rgba(255, 255, 255, 0)),\n var(--rj-panel);\n}\n.rj-root[data-chrome=ride] .rj-expanded__shell::before {\n content: "";\n position: absolute;\n top: 12px;\n right: 12px;\n width: 58px;\n height: 58px;\n border-radius: 50%;\n background:\n radial-gradient(\n circle,\n rgba(255, 255, 255, 0.12),\n transparent 62%);\n opacity: 0.75;\n pointer-events: none;\n}\n.rj-root[data-chrome=ride] .rj-expanded__screen-frame {\n border-color: var(--rj-screen-frame-border);\n background: var(--rj-screen-frame-bg);\n box-shadow: var(--rj-screen-frame-shadow), 0 16px 24px -24px rgba(0, 0, 0, 0.28);\n}\n.rj-root[data-chrome=ride] .rj-expanded__screen {\n border-color: var(--rj-screen-border);\n}\n.rj-root[data-chrome=ride] .rj-expanded__meta {\n margin-top: 14px;\n}\n.rj-root[data-chrome=ride] .rj-expanded__titles {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 12px;\n margin-bottom: 12px;\n}\n.rj-root[data-chrome=ride] .rj-expanded__artist {\n max-width: 96px;\n margin-top: 0;\n text-align: right;\n}\n.rj-root[data-chrome=ride] .rj-expanded__controls {\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n gap: 8px;\n}\n.rj-root[data-chrome=ride] .rj-expanded__transport,\n.rj-root[data-chrome=ride] .rj-expanded__utility {\n margin-left: 0;\n min-width: 0;\n}\n.rj-root[data-chrome=ride] .rj-expanded__transport {\n display: grid;\n grid-template-columns: 30px auto 30px;\n gap: 4px;\n align-items: center;\n justify-content: flex-start;\n width: auto;\n max-width: none;\n border: 1px solid var(--rj-border);\n border-radius: 14px;\n background: var(--rj-panel);\n padding: 6px;\n}\n.rj-root[data-chrome=ride] .rj-expanded__utility {\n display: flex;\n flex: 1 1 auto;\n margin-left: auto;\n justify-content: flex-end;\n gap: 8px;\n align-items: center;\n}\n.rj-root[data-chrome=ride] .rj-chip-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 0;\n min-height: 30px;\n padding-inline: 0;\n box-shadow: none;\n text-align: center;\n}\n.rj-root[data-chrome=ride] .rj-chip-button--primary {\n justify-self: center;\n width: auto;\n min-width: 46px;\n padding-inline: 8px;\n border-color: var(--rj-chip-primary-border);\n border-radius: 13px;\n background: var(--rj-gradient-soft);\n color: var(--rj-chip-primary-text);\n font-size: 9px;\n line-height: 1;\n letter-spacing: 0;\n text-transform: none;\n}\n.rj-root[data-chrome=ride] .rj-expanded__transport .rj-chip-button:not(.rj-chip-button--primary) {\n width: 30px;\n min-width: 30px;\n padding-inline: 0;\n border-color: var(--rj-chip-border);\n border-radius: 12px;\n background: var(--rj-gradient-soft);\n color: var(--rj-button-text);\n text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 8px 16px -14px rgba(15, 23, 42, 0.22);\n}\n.rj-root[data-chrome=ride] .rj-expanded__transport .rj-chip-button:not(.rj-chip-button--primary):hover {\n transform: translateY(0);\n filter: brightness(1.02);\n}\n.rj-root[data-chrome=ride] .rj-expanded .rj-icon-button {\n margin-left: 0;\n width: 36px;\n height: 36px;\n border-radius: 12px;\n background: var(--rj-track-hover-bg);\n}\n.rj-root[data-chrome=ride] .rj-volume {\n width: auto;\n min-width: 44px;\n}\n.rj-root[data-chrome=ride] .rj-expanded__counter {\n margin-left: 0;\n padding: 0;\n border-top: 0;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n}\n.rj-root[data-chrome=ride] .rj-next-track {\n align-items: flex-start;\n gap: 12px;\n background: var(--rj-next-bg);\n}\n.rj-root[data-chrome=ride] .rj-next-track__button {\n text-align: right;\n}\n@media (prefers-color-scheme: dark) {\n .rj-root[data-theme=glass] {\n --rj-text: #f8fafc;\n --rj-text-muted: #b8c2cf;\n --rj-border: rgba(255, 255, 255, 0.1);\n --rj-panel: rgba(0, 0, 0, 0.48);\n --rj-shadow: 0 22px 60px -30px rgba(15, 23, 42, 0.42);\n --rj-gradient:\n linear-gradient(\n 180deg,\n #f1f5f9 0%,\n #d8e1ea 100%);\n --rj-gradient-soft:\n linear-gradient(\n 180deg,\n #2b3440 0%,\n #1c232d 100%);\n --rj-button-text: #e2e8f0;\n --rj-dock-bg: rgba(0, 0, 0, 0.52);\n --rj-dock-inner-bg:\n linear-gradient(\n \n 180deg,\n rgba(37, 42, 49, 0.94) 0%,\n rgba(22, 27, 34, 0.98) 100% );\n --rj-icon-hover-bg: rgba(255, 255, 255, 0.08);\n --rj-shell-border: rgba(255, 255, 255, 0.06);\n --rj-next-border: rgba(255, 255, 255, 0.08);\n --rj-screen-frame-border: rgba(255, 255, 255, 0.08);\n --rj-expanded-icon: #94a3b8;\n --rj-expanded-icon-hover: #ffffff;\n --rj-volume-track: #475569;\n --rj-volume-thumb: #e2e8f0;\n }\n .rj-root[data-theme=simple] {\n --rj-text: #fafafa;\n --rj-text-muted: #a1a1aa;\n --rj-border: rgba(255, 255, 255, 0.08);\n --rj-panel: rgba(10, 10, 11, 0.94);\n --rj-shadow: 0 24px 54px -30px rgba(0, 0, 0, 0.58);\n --rj-gradient:\n linear-gradient(\n 180deg,\n #fafafa 0%,\n #d4d4d8 100%);\n --rj-gradient-soft:\n linear-gradient(\n 180deg,\n #27272a 0%,\n #18181b 100%);\n --rj-button-text: #f4f4f5;\n --rj-dock-bg: rgba(10, 10, 11, 0.92);\n --rj-dock-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.5);\n --rj-dock-inner-bg: #111113;\n --rj-track-hover-bg: rgba(255, 255, 255, 0.04);\n --rj-level-gradient:\n linear-gradient(\n \n 180deg,\n #fafafa 0%,\n #a1a1aa 52%,\n #3f3f46 100% );\n --rj-level-shadow-color: rgba(255, 255, 255, 0.08);\n --rj-icon-hover-bg: rgba(255, 255, 255, 0.07);\n --rj-shell-border: rgba(255, 255, 255, 0.08);\n --rj-shell-inset-shadow: none;\n --rj-screen-frame-border: #3f3f46;\n --rj-screen-frame-bg:\n linear-gradient(\n 180deg,\n #27272a 0%,\n #18181b 100%);\n --rj-screen-frame-shadow: none;\n --rj-screen-border: #52525b;\n --rj-screen-bg: #09090b;\n --rj-player-bg:\n radial-gradient(\n \n circle at top,\n rgba(255, 255, 255, 0.06),\n transparent 38% ),\n linear-gradient(\n 180deg,\n #18181b 0%,\n #020617 100%);\n --rj-chip-border: #3f3f46;\n --rj-chip-primary-border: #fafafa;\n --rj-chip-primary-text: #171717;\n --rj-volume-track: #3f3f46;\n --rj-volume-thumb: #fafafa;\n --rj-expanded-icon: #d4d4d8;\n --rj-expanded-icon-hover: #ffffff;\n --rj-next-border: #3f3f46;\n --rj-next-bg:\n linear-gradient(\n 180deg,\n #27272a 0%,\n #18181b 100%);\n }\n .rj-root[data-theme=sunset] {\n --rj-text: #fff1f2;\n --rj-text-muted: #fecdd3;\n --rj-border: rgba(255, 255, 255, 0.1);\n --rj-panel: rgba(76, 5, 25, 0.78);\n --rj-shadow: 0 24px 56px -28px rgba(76, 5, 25, 0.5);\n --rj-gradient:\n linear-gradient(\n \n 135deg,\n #fde68a 0%,\n #fb7185 54%,\n #7c3aed 100% );\n --rj-gradient-soft:\n linear-gradient(\n \n 180deg,\n rgba(136, 19, 55, 0.92) 0%,\n rgba(76, 5, 25, 0.96) 100% );\n --rj-button-text: #fff7ed;\n --rj-dock-bg: rgba(76, 5, 25, 0.74);\n --rj-dock-shadow: 0 -8px 24px -18px rgba(244, 114, 182, 0.24), 0 14px 34px -18px rgba(126, 34, 206, 0.3);\n --rj-dock-inner-bg:\n linear-gradient(\n \n 135deg,\n rgba(136, 19, 55, 0.92) 0%,\n rgba(76, 5, 25, 0.96) 100% );\n --rj-track-hover-bg: rgba(255, 255, 255, 0.06);\n --rj-level-gradient:\n linear-gradient(\n \n 180deg,\n #fde68a 0%,\n #fb7185 52%,\n #7c3aed 100% );\n --rj-level-shadow-color: rgba(253, 224, 71, 0.16);\n --rj-icon-hover-bg: rgba(255, 255, 255, 0.08);\n --rj-shell-border: rgba(255, 255, 255, 0.08);\n --rj-shell-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);\n --rj-screen-frame-border: rgba(251, 113, 133, 0.4);\n --rj-screen-frame-bg:\n linear-gradient(\n 180deg,\n #881337 0%,\n #4c0519 100%);\n --rj-screen-frame-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);\n --rj-screen-border: rgba(253, 186, 116, 0.48);\n --rj-screen-bg: #19030d;\n --rj-player-bg:\n radial-gradient(\n circle at top,\n rgba(253, 224, 71, 0.2),\n transparent 40%),\n radial-gradient(\n \n circle at 70% 30%,\n rgba(192, 132, 252, 0.18),\n transparent 36% ),\n linear-gradient(\n 180deg,\n #4c0519 0%,\n #1e1b4b 100%);\n --rj-chip-border: rgba(253, 186, 116, 0.2);\n --rj-chip-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);\n --rj-chip-primary-border: rgba(253, 224, 71, 0.18);\n --rj-chip-primary-text: #4c0519;\n --rj-volume-track: rgba(251, 113, 133, 0.48);\n --rj-volume-thumb: #fde68a;\n --rj-volume-thumb-shadow: 0 1px 8px rgba(253, 224, 71, 0.18);\n --rj-expanded-icon: #fda4af;\n --rj-expanded-icon-hover: #fff1f2;\n --rj-next-border: rgba(251, 113, 133, 0.22);\n --rj-next-bg:\n linear-gradient(\n \n 180deg,\n rgba(136, 19, 55, 0.96) 0%,\n rgba(76, 5, 25, 0.96) 100% );\n --rj-next-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);\n }\n .rj-root[data-chrome=ride] {\n --rj-volume-thumb-shadow: none;\n }\n}\n@media (max-width: 640px) {\n .rj-root {\n --rj-root-width: min(100vw - 16px, 320px);\n --rj-root-expanded-width: min(100vw - 16px, 320px);\n }\n .rj-root--inline {\n --rj-root-width: 100%;\n --rj-root-expanded-width: 100%;\n }\n .rj-root--inline .rj-expanded {\n padding: 6px;\n }\n .rj-root--inline .rj-expanded__shell {\n padding: 10px;\n }\n .rj-root--inline .rj-next-track {\n flex-wrap: wrap;\n align-items: flex-start;\n }\n .rj-root--inline .rj-next-track__button {\n width: 100%;\n text-align: left;\n }\n .rj-root--inline[data-chrome=wallet] .rj-expanded__utility {\n gap: 8px;\n }\n .rj-root--inline[data-chrome=wallet] .rj-expanded__counter {\n margin-left: auto;\n }\n .rj-root--inline[data-chrome=ride] .rj-expanded__titles {\n flex-direction: column;\n gap: 4px;\n }\n .rj-root--inline[data-chrome=ride] .rj-expanded__artist {\n max-width: none;\n text-align: left;\n }\n .rj-root--inline[data-chrome=ride] .rj-expanded__transport {\n width: auto;\n }\n .rj-root--inline[data-chrome=ride] .rj-expanded__counter {\n justify-self: auto;\n }\n}\n@keyframes rj-jukebox-bounce {\n 0%, 100% {\n transform: scaleY(0.35);\n }\n 50% {\n transform: scaleY(1);\n }\n}\n');
|
|
434
467
|
function subscribeToClientRender() {
|
|
435
468
|
return () => void 0;
|
|
436
469
|
}
|
|
@@ -567,6 +600,7 @@ function Jukebox({
|
|
|
567
600
|
playNext,
|
|
568
601
|
playPrev
|
|
569
602
|
} = useJukeboxPlayer({ autoplay, tracks });
|
|
603
|
+
const effectiveChrome = getEffectiveChrome(chrome);
|
|
570
604
|
const currentTrack = tracks[currentIndex];
|
|
571
605
|
const nextTrack = tracks.length > 1 ? tracks[getNextTrackIndex(currentIndex, 1, tracks.length)] : void 0;
|
|
572
606
|
const effectiveIsExpanded = currentTrack ? isExpanded : false;
|
|
@@ -606,7 +640,7 @@ function Jukebox({
|
|
|
606
640
|
),
|
|
607
641
|
"data-position": position,
|
|
608
642
|
"data-theme": theme,
|
|
609
|
-
"data-chrome":
|
|
643
|
+
"data-chrome": effectiveChrome,
|
|
610
644
|
style: getPositionStyle(position, offset, portal),
|
|
611
645
|
children: [
|
|
612
646
|
expandedRenderProps ? /* @__PURE__ */ jsx(ExpandedPanel, { isExpanded: effectiveIsExpanded, children: renderExpandedContent ? renderExpandedContent(expandedRenderProps) : /* @__PURE__ */ jsx(JukeboxExpandedPlayer, { ...expandedRenderProps }) }) : null,
|