react-udux-player
Version:
A customizable music player for React applications
3,993 lines • 133 kB
JavaScript
// src/context/udux-player-context.tsx
import React2 from "react";
import { createContext, useReducer } from "react";
// src/types/index.ts
var defaultTheme = {
colors: {
primary: "#FFCC00",
// Yellow accent color from your screenshot
background: "linear-gradient(180deg, #1a1a1a 0%, #000 100%)",
// Default gradient
text: "#FFFFFF",
textSecondary: "#B3B3B3",
progressBar: "#535353",
progressBarFilled: "#FFCC00",
// Yellow progress bar
controlBackground: "#282828",
playerBorder: "transparent"
// No visible border
},
sizes: {
playerHeight: "72px",
// Slim player height
progressBarHeight: "4px",
controlButtonSize: "32px",
volumeSliderWidth: "100px",
coverArtSize: "45px"
},
borderRadius: "4px",
fontFamily: '"Bw Modelica", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
};
// src/components/player-style-provider.tsx
import { useEffect } from "react";
// src/hooks/use-udux-player.ts
import { useContext } from "react";
var useUduxPlayer = () => {
const context = useContext(PlayerContext);
if (context === void 0) {
throw new Error("useUduxPlayer must be used within a UduxPlayerProvider");
}
return context;
};
// src/styles/generate-styles.ts
function generatePlayerStyles(theme) {
return `
/* Reset styles */
.udux-player-container, .udux-player-container * {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: ${theme.fontFamily};
line-height: normal;
}
.ant-tooltip {
z-index: 99999999999;
}
/* Container styles */
.udux-player-container {
background: ${theme.colors.background};
color: ${theme.colors.text};
border-top: 1px solid ${theme.colors.playerBorder};
height: ${theme.sizes.playerHeight};
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 99999999;
}
.udux-player-inner-wrap{
display: flex;
flex-direction: column;
width: 100%;
padding: 5px 16px;
}
/* Inner container */
.udux-player-inner {
width: 100%;
max-width: 100%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
/* Left section */
.udux-player-left-section {
display: flex;
align-items: center;
gap: 16px;
width: 250px;
}
/* View controls */
.udux-player-view-controls {
display: flex;
justify-content:center;
align-items: center;
gap: 15px;
@media screen and (max-width: 765px){
display: none;
}
}
.hide-on-mobile {
display: block;
@media screen and (max-width: 765px){
display: none;
}
}
/* Controls container */
.udux-player-controls-container {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
max-width: 580px;
@media screen and (max-width: 765px){
justify-content: flex-end;
align-items: flex-end;
}
}
.desktop-progress-bar{
width: 100%;
@media screen and (max-width: 765px){
display: none;
}
}
.mobile-progress-bar{
width: 100%;
display: none;
height: 100px;
@media screen and (max-width: 765px){
display: block;
}
}
/* Right section */
.udux-player-right-section {
display: flex;
align-items: center;
gap: 16px;
justify-content: flex-end;
width: 250px;
@media screen and (max-width: 765px){
display: none;
}
}
/* Controls */
.udux-player-controls {
display: flex;
align-items: center;
gap: 16px;
}
.udux-minimized-player-controls{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
/* Button styles */
.udux-player-button {
background: transparent;
border: none;
cursor: pointer;
color: ${theme.colors.textSecondary};
display: flex;
align-items: center;
justify-content: center;
padding: 0;
width: ${theme.sizes.controlButtonSize};
height: ${theme.sizes.controlButtonSize};
transition: color 0.2s ease, transform 0.2s ease;
}
.udux-player-button:hover {
color: ${theme.colors.text};
transform: scale(1.1);
}
.udux-player-button:disabled {
opacity: 0.5;
cursor: default;
transform: none;
}
.udux-player-button-active {
color: ${theme.colors.primary};
}
.udux-player-play-button {
background-color: ${theme.colors.text};
color: ${theme.colors.background};
border-radius: 50%;
width: calc(${theme.sizes.controlButtonSize} * 1.2);
height: calc(${theme.sizes.controlButtonSize} * 1.2);
}
/* Progress bar */
.udux-player-progress {
width: 100%;
display: flex;
align-items: center;
gap: 8px;
margin-top: 4px;
}
.udux-player-progress-time {
color: #B3B3B3;
font-size: 0.75rem;
min-width: 40px;
@media screen and (max-width: 765px){
min-width: fit-content;
font-size: 0.4rem;
}
}
.udux-player-progress-container {
height: 4px;
background-color: #535353;
border-radius: 4px;
width: 100%;
position: relative;
overflow: hidden;
}
.udux-player-progress-fill {
height: 100%;
background-color: #FFCC00;
transition: width 0.1s linear;
}
.udux-player-progress-slider {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
margin: 0;
padding: 0;
}
.udux-player-loading {
position: absolute;
right: 50%;
top: 50%;
transform: translate(50%, -50%);
color: #FFFFFF;
}
.udux-player-spin {
animation: udux-player-spin 1s linear infinite;
}
@keyframes udux-player-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Track info */
.udux-player-track-info {
display: flex;
align-items: center;
gap: 16px;
}
.udux-player-cover {
width: ${theme.sizes.coverArtSize};
height: ${theme.sizes.coverArtSize};
flex-shrink: 0;
border-radius: ${theme.borderRadius};
background-color: ${theme.colors.controlBackground};
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.udux-player-track-details {
display: flex;
flex-direction: column;
overflow: hidden;
gap: 1.5px;
}
.udux-player-track-title {
color: ${theme.colors.textSecondary};
font-size: 0.6rem;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.udux-player-track-album {
color: ${theme.colors.text};
font-size: 0.7rem;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.udux-player-track-artist {
color: ${theme.colors.textSecondary};
font-size: 0.6rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Volume control */
.udux-player-volume {
display: flex;
align-items: center;
gap: 8px;
}
.udux-player-volume-slider-container {
width: ${theme.sizes.volumeSliderWidth};
height: ${theme.sizes.progressBarHeight};
background-color: ${theme.colors.progressBar};
border-radius: ${theme.borderRadius};
position: relative;
overflow: hidden;
}
.udux-player-volume-slider-fill {
height: 100%;
background-color: ${theme.colors.progressBarFilled};
}
.udux-player-volume-slider {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
margin: 0;
padding: 0;
}
/* Loading indicator */
.udux-player-loading {
position: absolute;
right: 50%;
top: 50%;
transform: translate(50%, -50%);
color: ${theme.colors.text};
}
.udux-player-spin {
animation: udux-player-spin 1s linear infinite;
}
@keyframes udux-player-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
`;
}
// src/components/player-style-provider.tsx
import { Fragment, jsx } from "react/jsx-runtime";
var PlayerStyleProvider = ({ children }) => {
const { theme } = useUduxPlayer();
useEffect(() => {
const styleId = "udux-player-styles";
let styleElement = document.getElementById(styleId);
if (!styleElement) {
styleElement = document.createElement("style");
styleElement.id = styleId;
document.head.appendChild(styleElement);
}
styleElement.innerHTML = generatePlayerStyles(theme);
return () => {
if (styleElement && styleElement.parentNode) {
styleElement.parentNode.removeChild(styleElement);
}
};
}, [theme]);
return /* @__PURE__ */ jsx(Fragment, { children });
};
// src/context/udux-player-reducer.ts
function playerReducer(state, action) {
const MAX_HISTORY = 50;
switch (action.type) {
case "SET_QUEUE":
return {
...state,
queue: action.payload,
currentTrackIndex: state.currentTrackIndex === null ? 0 : state.currentTrackIndex
};
case "TOGGLE_PLAY": {
return {
...state,
isPlaying: !state.isPlaying
};
}
case "PLAY":
return {
...state,
isPlaying: true
};
case "PAUSE":
return {
...state,
isPlaying: false
};
case "NEXT_TRACK":
{
if (state.queue.length === 0 || state.currentTrackIndex === null) {
return {
...state,
isPlaying: false,
currentTrackIndex: null,
currentTime: 0,
context: null
};
}
if (state.shuffle) {
const availableTracks = state.queue.map((_, index) => index).filter((index) => index !== state.currentTrackIndex);
if (availableTracks.length === 0) {
return {
...state,
isPlaying: false,
currentTrackIndex: null,
currentTime: 0,
context: null
};
}
const randomIndex = Math.floor(Math.random() * availableTracks.length);
const newIndex = availableTracks[randomIndex];
return {
...state,
currentTrackIndex: newIndex,
playbackHistory: [...state.playbackHistory, state.currentTrackIndex].slice(-MAX_HISTORY),
currentTime: 0,
isPlaying: true,
context: state.context
};
}
if ((state.repeat === "all" || state.repeat === "one") && state.currentTrackIndex === state.queue.length - 1) {
return {
...state,
currentTrackIndex: 0,
playbackHistory: [...state.playbackHistory, state.currentTrackIndex].slice(-MAX_HISTORY),
currentTime: 0,
isPlaying: true,
context: state.context
};
}
if (state.currentTrackIndex < state.queue.length - 1) {
return {
...state,
currentTrackIndex: state.currentTrackIndex + 1,
playbackHistory: [...state.playbackHistory, state.currentTrackIndex].slice(-MAX_HISTORY),
currentTime: 0,
isPlaying: true,
context: state.context
};
} else {
return {
...state,
currentTrackIndex: null,
isPlaying: false,
currentTime: 0,
context: null
};
}
}
;
case "PREVIOUS_TRACK":
{
if (state.queue.length === 0 || state.currentTrackIndex === null) {
return {
...state,
isPlaying: false,
currentTrackIndex: null,
currentTime: 0,
context: null
};
}
if (state.shuffle && state.playbackHistory.length > 0) {
const previousTrackIndex = state.playbackHistory[state.playbackHistory.length - 1];
const newHistory = state.playbackHistory.slice(0, -1);
return {
...state,
currentTrackIndex: previousTrackIndex,
playbackHistory: newHistory.slice(-MAX_HISTORY),
currentTime: 0,
isPlaying: true,
context: state.context
};
}
if ((state.repeat === "all" || state.repeat === "one") && state.currentTrackIndex === 0) {
return {
...state,
currentTrackIndex: state.queue.length - 1,
currentTime: 0,
isPlaying: true,
context: state.context
};
}
if (state.currentTrackIndex > 0) {
return {
...state,
currentTrackIndex: state.currentTrackIndex - 1,
currentTime: 0,
isPlaying: true,
context: state.context
};
} else {
return {
...state,
currentTrackIndex: 0,
currentTime: 0,
isPlaying: true,
context: state.context
};
}
}
;
case "SEEK":
return {
...state,
currentTime: action.payload
};
case "SET_PREVIOUS_TRACK_INDEX":
return {
...state,
previousTrackIndex: action.payload
};
case "SEEK_START":
return {
...state,
isBuffering: true
};
case "SEEK_END":
return {
...state,
isBuffering: false
};
case "SET_VOLUME":
const newVolume = Math.max(0, Math.min(100, action.payload));
return {
...state,
volume: newVolume,
isMuted: newVolume === 0,
previousVolume: newVolume > 0 ? newVolume : state.previousVolume
};
case "TOGGLE_MUTE":
return {
...state,
isMuted: !state.isMuted,
volume: !state.isMuted ? 0 : state.previousVolume
};
case "TOGGLE_SHUFFLE":
return {
...state,
shuffle: !state.shuffle
};
case "TOGGLE_REPEAT":
const repeatModes = ["off", "all", "one"];
const currentIndex = repeatModes.indexOf(state.repeat);
const nextIndex = (currentIndex + 1) % repeatModes.length;
return {
...state,
repeat: repeatModes[nextIndex]
};
case "SET_DURATION":
return {
...state,
duration: action.payload
};
case "UPDATE_TIME":
return {
...state,
currentTime: action.payload
};
case "TRACK_ENDED":
{
if (state.repeat === "one") {
return {
...state,
currentTime: 0,
isPlaying: true,
context: state.context
};
}
if (state.shuffle) {
const availableTracks = state.queue.map((_, index) => index).filter((index) => index !== state.currentTrackIndex);
if (availableTracks.length === 0) {
return {
...state,
isPlaying: false,
currentTrackIndex: null,
currentTime: 0,
context: null
};
}
const randomIndex = Math.floor(Math.random() * availableTracks.length);
const newIndex = availableTracks[randomIndex];
return {
...state,
currentTrackIndex: newIndex,
playbackHistory: [...state.playbackHistory, state.currentTrackIndex].slice(-MAX_HISTORY),
currentTime: 0,
isPlaying: true,
context: state.context
};
}
if (state.repeat === "all" && state.currentTrackIndex === state.queue.length - 1) {
return {
...state,
currentTrackIndex: 0,
playbackHistory: [...state.playbackHistory, state.currentTrackIndex].slice(-MAX_HISTORY),
currentTime: 0,
isPlaying: true,
context: state.context
};
}
if (state.currentTrackIndex < state.queue.length - 1) {
return {
...state,
currentTrackIndex: state.currentTrackIndex + 1,
playbackHistory: [...state.playbackHistory, state.currentTrackIndex].slice(-MAX_HISTORY),
currentTime: 0,
isPlaying: true,
context: state.context
};
} else {
return {
...state,
isPlaying: false,
currentTrackIndex: null,
currentTime: 0,
context: null
};
}
}
;
case "SET_CURRENT_TRACK":
{
const { track, index, context } = action.payload;
if (index !== void 0) {
return {
...state,
currentTrackIndex: index,
isPlaying: true,
currentTime: 0,
context: context ?? state.context
};
}
const existingIndex = state.queue.findIndex((t) => t.id === track.id);
if (existingIndex >= 0) {
return {
...state,
currentTrackIndex: existingIndex,
isPlaying: true,
currentTime: 0,
context: context ?? state.context
};
} else {
return {
...state,
queue: [...state.queue, track],
currentTrackIndex: state.queue.length,
isPlaying: true,
currentTime: 0,
context: context ?? state.context
};
}
}
;
case "ADD_TO_QUEUE":
{
if (state.queue.some((t) => t.id === action.payload.id)) {
return state;
}
return {
...state,
queue: [...state.queue, action.payload]
};
}
;
case "UPDATE_TRACK_IN_QUEUE":
{
const { id, track } = action.payload;
return {
...state,
queue: state.queue.map((t) => t.id === id ? track : t)
};
}
;
case "MINIMIZE_PLAYER":
return {
...state,
isMinimized: !state.isMinimized
};
case "TOGGLE_FULL_SCREEN":
return {
...state,
isFullScreen: !state.isFullScreen
};
case "SET_NOW_PLAYING_VIEW":
return {
...state,
isNowPlayingView: action.payload
};
case "TOGGLE_NOW_PLAYING_VIEW":
return {
...state,
isNowPlayingView: !state.isNowPlayingView
};
case "TOGGLE_HIDE_PLAYER":
return {
...state,
isHidePlayer: !state.isHidePlayer
};
default:
return state;
}
}
// src/context/player-state.ts
var initialState = {
queue: [],
currentTrackIndex: null,
isPlaying: false,
volume: 80,
isMuted: false,
previousVolume: 80,
shuffle: false,
repeat: "all",
playbackHistory: [],
duration: 0,
currentTime: 0,
isBuffering: false,
previousTrackIndex: null,
isMinimized: false,
isFullScreen: false,
isNowPlayingView: false,
context: null,
// Initialize as null
isHidePlayer: false
};
// src/context/player-utils.ts
var mergeTheme = (customTheme, defaultTheme2) => {
if (!customTheme) return defaultTheme2;
return {
colors: {
...defaultTheme2.colors,
...customTheme.colors
},
sizes: {
...defaultTheme2.sizes,
...customTheme.sizes
},
borderRadius: customTheme.borderRadius ?? defaultTheme2.borderRadius,
fontFamily: customTheme.fontFamily ?? defaultTheme2.fontFamily
};
};
// src/context/player-effects.ts
import { useEffect as useEffect2, useState } from "react";
var usePlayerEffects = (state, dispatch, playerRef) => {
const [tracksToPreload, setTracksToPreload] = useState([]);
useEffect2(() => {
if (!playerRef.current) return;
playerRef.current.volume = state.volume / 100;
playerRef.current.muted = state.isMuted;
}, [state.volume, state.isMuted]);
useEffect2(() => {
if (state.queue.length === 0 || state.currentTrackIndex === null) {
setTracksToPreload([]);
return;
}
const tracksToPreloadArray = [];
const PRELOAD_COUNT = 3;
const addTrackToPreload = (index) => {
if (index >= 0 && index < state.queue.length && index !== state.currentTrackIndex && !tracksToPreloadArray.includes(index)) {
tracksToPreloadArray.push(index);
}
};
if (state.shuffle) {
if (state.playbackHistory.length > 0) {
const previousTrackIndex = state.playbackHistory[state.playbackHistory.length - 1];
addTrackToPreload(previousTrackIndex);
}
const availableTracks = state.queue.map((_, index) => index).filter((index) => index !== state.currentTrackIndex && index !== (state.playbackHistory[state.playbackHistory.length - 1] ?? -1));
for (let i = availableTracks.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[availableTracks[i], availableTracks[j]] = [availableTracks[j], availableTracks[i]];
}
const tracksToAdd = PRELOAD_COUNT - (state.playbackHistory.length > 0 ? 1 : 0);
availableTracks.slice(0, tracksToAdd).forEach(addTrackToPreload);
} else {
for (let i = 1; i <= PRELOAD_COUNT; i++) {
let nextIndex = state.currentTrackIndex + i;
if (nextIndex >= state.queue.length && state.repeat === "all") {
nextIndex = nextIndex % state.queue.length;
}
addTrackToPreload(nextIndex);
}
}
setTracksToPreload(tracksToPreloadArray);
}, [state.queue, state.currentTrackIndex, state.shuffle, state.repeat, state.playbackHistory]);
return { tracksToPreload };
};
// src/context/player-actions.ts
function debounce(func, wait) {
let timeout = null;
return (...args) => {
if (timeout) clearTimeout(timeout);
timeout = setTimeout(() => func(...args), wait);
};
}
var createPlayerActions = (dispatch, playerRef, state) => {
const debouncedPreviousTrack = debounce(() => {
console.log("Dispatching PREVIOUS_TRACK");
if (playerRef.current && playerRef.current.readyState < 2) {
console.warn("Player not ready, delaying PREVIOUS_TRACK");
playerRef.current.addEventListener(
"canplay",
() => {
dispatch({ type: "PREVIOUS_TRACK" });
},
{ once: true }
);
return;
}
dispatch({ type: "PREVIOUS_TRACK" });
}, 100);
return {
setCurrentTrack: (track, context) => {
console.log(`Setting current track: ${track.title}`);
dispatch({ type: "SET_CURRENT_TRACK", payload: { track, context } });
},
playTrack: (track, context) => {
console.log(`Playing track: ${track.title}`);
dispatch({ type: "SET_CURRENT_TRACK", payload: { track, context } });
dispatch({ type: "PLAY" });
},
addToQueue: (track) => {
console.log(`Adding to queue: ${track.title}`);
dispatch({ type: "ADD_TO_QUEUE", payload: track });
},
togglePlay: () => {
console.log("Toggling play");
dispatch({ type: "TOGGLE_PLAY" });
},
nextTrack: () => {
console.log("Dispatching NEXT_TRACK");
dispatch({ type: "NEXT_TRACK" });
},
previousTrack: () => {
debouncedPreviousTrack();
},
seek: (time) => {
console.log(`Seeking to ${time}s`);
dispatch({ type: "SEEK_START" });
dispatch({ type: "SEEK", payload: time });
if (playerRef.current) {
const wasPlaying = !playerRef.current.paused;
try {
playerRef.current.currentTime = time;
if (wasPlaying) {
queueMicrotask(() => {
if (playerRef.current && playerRef.current.paused) {
playerRef.current.play().catch((error) => {
console.error("Fast seek play error:", error);
if (error.name !== "AbortError") {
dispatch({ type: "PAUSE" });
}
});
}
});
}
setTimeout(() => {
dispatch({ type: "SEEK_END" });
}, 200);
} catch (error) {
console.error("Error during fast seek:", error);
setTimeout(() => {
dispatch({ type: "SEEK_END" });
}, 500);
}
} else {
setTimeout(() => {
dispatch({ type: "SEEK_END" });
}, 200);
}
},
setVolume: (volume) => {
console.log(`Setting volume to ${volume}`);
dispatch({ type: "SET_VOLUME", payload: volume });
},
toggleMute: () => {
console.log("Toggling mute");
dispatch({ type: "TOGGLE_MUTE" });
},
toggleShuffle: () => {
console.log("Toggling shuffle");
dispatch({ type: "TOGGLE_SHUFFLE" });
},
toggleRepeat: () => {
console.log("Toggling repeat");
dispatch({ type: "TOGGLE_REPEAT" });
},
setQueue: (tracks) => {
console.log(`Setting queue with ${tracks.length} tracks`);
dispatch({ type: "SET_QUEUE", payload: tracks });
},
togglePlayNowPlayingView: () => {
console.log("Toggling repeat");
dispatch({ type: "TOGGLE_NOW_PLAYING_VIEW" });
},
setNowPlayNowPlayingView: (payload) => {
dispatch({ type: "SET_NOW_PLAYING_VIEW", payload });
},
toggleHidePlayer: (payload) => {
dispatch({ type: "TOGGLE_HIDE_PLAYER", payload });
}
};
};
// src/context/udux-player-context.tsx
import { jsx as jsx2 } from "react/jsx-runtime";
var PlayerContext = createContext(
void 0
);
var UduxPlayerProvider = ({
children,
theme: customTheme,
components = {},
initialVolume,
initialShuffle,
initialRepeat,
callbacks
}) => {
const initialPlayerState = {
...initialState,
volume: initialVolume ?? initialState.volume,
previousVolume: initialVolume ?? initialState.previousVolume,
shuffle: initialShuffle ?? initialState.shuffle,
repeat: initialRepeat ?? initialState.repeat
};
const [state, dispatch] = useReducer(playerReducer, initialPlayerState);
const playerRef = React2.useRef(null);
const theme = mergeTheme(customTheme, defaultTheme);
const { tracksToPreload } = usePlayerEffects(state, dispatch, playerRef);
const actions = createPlayerActions(dispatch, playerRef, state);
const contextValue = {
...state,
dispatch,
playerRef,
tracksToPreload,
theme,
components,
callbacks,
...actions,
currentTrack: state.currentTrackIndex !== null ? state.queue[state.currentTrackIndex] : null
};
return /* @__PURE__ */ jsx2(PlayerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx2(PlayerStyleProvider, { children }) });
};
// src/components/audio-player.tsx
import { useEffect as useEffect4, useMemo, useRef as useRef2, useState as useState2 } from "react";
import Hls from "hls.js";
// src/components/track-preloader.tsx
import React3, { useEffect as useEffect3, useRef } from "react";
import ReactHlsPlayer from "react-hls-player";
import { jsx as jsx3 } from "react/jsx-runtime";
var TrackPreloader = () => {
const {
queue,
tracksToPreload,
volume,
isMuted,
isPlaying,
playerRef,
dispatch
} = useUduxPlayer();
const preloadRefs = useRef(
{}
);
const handleCanPlay = (trackIndex) => {
console.log(`Track ${trackIndex} can play`);
if (isPlaying && playerRef.current) {
playerRef.current.play().catch((error) => {
console.error(`Error playing track ${trackIndex}:`, error);
dispatch({ type: "PAUSE" });
});
}
};
useEffect3(() => {
tracksToPreload.forEach((trackIndex) => {
const trackId = `track-${trackIndex}`;
if (!preloadRefs.current[trackId]) {
preloadRefs.current[trackId] = React3.createRef();
}
});
Object.keys(preloadRefs.current).forEach((trackId) => {
const index = parseInt(trackId.replace("track-", ""), 10);
if (!tracksToPreload.includes(index)) {
delete preloadRefs.current[trackId];
}
});
tracksToPreload.forEach((trackIndex) => {
const track = queue[trackIndex];
console.log(
`Preloading track at index ${trackIndex}: ${track?.title || "Unknown"}, URL: ${track?.streamUrl || "None"}, ReadyState: ${preloadRefs.current[`track-${trackIndex}`]?.current?.readyState || "N/A"}`
);
});
}, [tracksToPreload, queue]);
useEffect3(() => {
Object.values(preloadRefs.current).forEach((ref) => {
if (ref.current) {
ref.current.volume = volume / 100;
ref.current.muted = isMuted;
}
});
}, [volume, isMuted]);
return /* @__PURE__ */ jsx3("div", { style: { display: "none" }, children: tracksToPreload.map((trackIndex) => {
const track = queue[trackIndex];
if (!track) return null;
const trackId = `track-${trackIndex}`;
return /* @__PURE__ */ jsx3(
ReactHlsPlayer,
{
src: track.streamUrl || "",
autoPlay: false,
controls: false,
width: "0",
height: "0",
playerRef: preloadRefs.current[trackId],
preload: "auto",
onCanPlay: () => handleCanPlay(trackIndex),
playsInline: true
},
`preload-${track.id}`
);
}) });
};
// src/components/audio-player.tsx
import { Fragment as Fragment2, jsx as jsx4, jsxs } from "react/jsx-runtime";
var AudioPlayer = () => {
const {
currentTrack,
isPlaying,
playerRef,
repeat,
dispatch,
currentTime
} = useUduxPlayer();
const [isMediaReady, setIsMediaReady] = useState2(false);
const hlsRef = useRef2(null);
const handleEnded = () => {
dispatch({ type: "TRACK_ENDED" });
};
const trackUrl = useMemo(() => {
return currentTrack?.streamUrl || "";
}, [currentTrack]);
const handleTimeUpdate = () => {
if (playerRef.current) {
const newTime = playerRef.current.currentTime;
if (newTime > 0 || currentTime === 0) {
dispatch({ type: "UPDATE_TIME", payload: newTime });
}
if (playerRef.current.readyState < 3 && !playerRef.current.paused) {
dispatch({ type: "SEEK_START" });
} else if (playerRef.current.readyState >= 3) {
dispatch({ type: "SEEK_END" });
}
}
};
const handleSeeking = () => {
if (playerRef.current) {
dispatch({ type: "SEEK_START" });
}
};
const handleSeeked = () => {
if (playerRef.current) {
dispatch({ type: "SEEK_END" });
if (isPlaying && playerRef.current.paused) {
const playPromise = playerRef.current.play();
if (playPromise !== void 0) {
playPromise.catch((error) => {
console.error("Error resuming after seek:", error);
if (error.name !== "AbortError") {
dispatch({ type: "PAUSE" });
}
});
}
}
}
};
const handleDurationChange = () => {
if (playerRef.current) {
dispatch({ type: "SET_DURATION", payload: playerRef.current.duration });
}
};
useEffect4(() => {
if (!playerRef.current || !currentTrack || !trackUrl) return;
const audio = playerRef.current;
if (Hls.isSupported()) {
const hls = new Hls();
hlsRef.current = hls;
hls.loadSource(trackUrl);
hls.attachMedia(audio);
hls.on(Hls.Events.ERROR, (event, data) => {
console.error("HLS error:", data);
if (data.fatal) {
setIsMediaReady(false);
dispatch({ type: "PAUSE" });
}
});
} else if (audio.canPlayType("application/vnd.apple.mpegurl")) {
audio.src = trackUrl;
} else {
console.error("HLS not supported and no native playback available");
setIsMediaReady(false);
dispatch({ type: "PAUSE" });
}
return () => {
if (hlsRef.current) {
hlsRef.current.destroy();
hlsRef.current = null;
}
};
}, [currentTrack, trackUrl, playerRef, dispatch]);
useEffect4(() => {
if (!playerRef.current || !currentTrack) return;
const handleCanPlay = () => {
setIsMediaReady(true);
};
const handleError = (error) => {
console.error("Media error:", error);
setIsMediaReady(false);
dispatch({ type: "PAUSE" });
};
playerRef.current.addEventListener("canplay", handleCanPlay);
playerRef.current.addEventListener("error", handleError);
return () => {
if (playerRef.current) {
playerRef.current.removeEventListener("canplay", handleCanPlay);
playerRef.current.removeEventListener("error", handleError);
}
};
}, [currentTrack, playerRef, dispatch]);
useEffect4(() => {
if (!playerRef.current || !isMediaReady || !isPlaying) return;
const playPromise = playerRef.current.play();
if (playPromise !== void 0) {
playPromise.catch((error) => {
console.error("Play error:", error);
if (error.name !== "AbortError") {
dispatch({ type: "PAUSE" });
}
});
}
}, [isMediaReady, isPlaying, playerRef, dispatch]);
useEffect4(() => {
if (!playerRef.current || isPlaying) return;
if (!playerRef.current.paused) {
playerRef.current.pause();
}
}, [isPlaying, playerRef]);
const preBufferSegments = () => {
if (!playerRef.current || !currentTrack) return;
try {
if (playerRef.current.buffered.length > 0) {
const bufferedEnd = playerRef.current.buffered.end(
playerRef.current.buffered.length - 1
);
const currentTime2 = playerRef.current.currentTime;
if (bufferedEnd - currentTime2 < 30 && !playerRef.current.seeking) {
}
}
} catch (error) {
console.error("Error in pre-buffering:", error);
}
};
useEffect4(() => {
if (!playerRef.current || !currentTrack) return;
const bufferInterval = setInterval(preBufferSegments, 5e3);
return () => clearInterval(bufferInterval);
}, [currentTrack]);
return /* @__PURE__ */ jsxs(Fragment2, { children: [
/* @__PURE__ */ jsx4("div", { style: { display: "none" }, children: currentTrack && /* @__PURE__ */ jsx4(
"audio",
{
ref: playerRef,
loop: repeat === "one",
onEnded: handleEnded,
onTimeUpdate: handleTimeUpdate,
onDurationChange: handleDurationChange,
onSeeking: handleSeeking,
onSeeked: handleSeeked,
playsInline: true
},
currentTrack.id
) }),
/* @__PURE__ */ jsx4(TrackPreloader, {})
] });
};
// src/components/full-screen-player.tsx
import { useEffect as useEffect7, useState as useState5 } from "react";
import { motion as motion2, AnimatePresence as AnimatePresence2 } from "framer-motion";
// src/components/player.tsx
import { useEffect as useEffect6, useState as useState4 } from "react";
// src/assets/icons/ShuffleOutlineIcon.tsx
import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
var ShuffleOutlineIcon = ({ color = "#D9D9D9", width, height, ...props }) => /* @__PURE__ */ jsxs2(
"svg",
{
width: width || "34",
height: height || "25",
viewBox: "0 0 34 25",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: [
/* @__PURE__ */ jsx5(
"path",
{
d: "M28.478 16.1055L32.3337 19.7102L28.478 23.3149",
stroke: color,
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round"
}
),
/* @__PURE__ */ jsx5(
"path",
{
d: "M28.478 1.6875L32.3337 5.29221L28.478 8.89693",
stroke: color,
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round"
}
),
/* @__PURE__ */ jsx5(
"path",
{
d: "M1.48779 19.7133H8.3308C9.38864 19.7133 10.4301 19.4692 11.3628 19.0025C12.2955 18.5359 13.0905 17.8612 13.6773 17.0383L16.9105 12.5039",
stroke: color,
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round"
}
),
/* @__PURE__ */ jsx5(
"path",
{
d: "M1.48779 5.29297H8.3308C9.38864 5.29299 10.4301 5.53715 11.3628 6.00379C12.2955 6.47043 13.0905 7.14512 13.6773 7.96797L20.1436 17.0368C20.7304 17.8597 21.5255 18.5344 22.4582 19.001C23.3908 19.4676 24.4323 19.7118 25.4901 19.7118H29.7627",
stroke: color,
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round"
}
),
/* @__PURE__ */ jsx5(
"path",
{
d: "M29.7618 5.29297H25.4892C24.4314 5.29299 23.3899 5.53715 22.4572 6.00379C21.5245 6.47043 20.7295 7.14512 20.1427 7.96797L19.48 8.89768",
stroke: color,
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round"
}
)
]
}
);
// src/assets/icons/FsePausePlayIcon.tsx
import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
var FsePausePlayIcon = ({
color = "white",
width,
height,
...props
}) => /* @__PURE__ */ jsxs3(
"svg",
{
width: width || "29",
height: height || "42",
viewBox: "0 0 29 42",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: [
/* @__PURE__ */ jsx6(
"path",
{
d: "M1.42339 12.1383C1.72295 11.222 1.70533 10.4291 1.37053 10.0414C1.15908 9.79469 0.841896 9.70658 0.401367 9.74183V14.8872L1.07097 15.3982C0.982863 14.711 0.94762 13.5832 1.42339 12.1383Z",
fill: color
}
),
/* @__PURE__ */ jsx6(
"path",
{
d: "M0.806651 26.3917H0.930002L7.52031 20.9115L0.401367 15.5547V26.8322L0.789029 26.4974C0.789029 26.4445 0.806651 26.3917 0.806651 26.3917Z",
fill: color
}
),
/* @__PURE__ */ jsx6(
"path",
{
d: "M3.27304 7.5917C5.44044 9.19522 4.18934 13.1247 4.13648 13.2833C4.11885 13.3186 3.18494 16.1379 4.47128 17.16C5.61666 18.0939 8.75322 17.0719 9.86335 16.5961C9.9867 16.5432 12.3303 15.5917 14.4801 15.8736L11.7488 13.812V13.8648C11.0616 13.812 10.1805 14.2349 9.3171 14.6578C8.54177 15.0278 7.8193 15.3802 7.2378 15.3802C7.22018 15.3802 7.20256 15.3802 7.18494 15.3802C6.63868 15.3626 6.21578 15.1688 5.96908 14.8164C5.45807 14.0939 5.74 12.8957 6.00432 12.0498C6.30388 11.0807 6.30388 10.1115 6.30388 9.67099L0.436035 5.23047V6.78113C1.26423 6.76351 2.33912 6.90447 3.27304 7.5917Z",
fill: color
}
),
/* @__PURE__ */ jsx6(
"path",
{
d: "M1.77581 9.6877C2.23396 10.234 2.30445 11.1855 1.9344 12.2956C1.24718 14.4102 1.68771 15.7846 1.70533 15.8551L7.39696 20.137L7.36172 20.0489C7.37934 20.0313 9.96965 19.1503 12.6304 18.6216C13.582 18.4278 14.3749 18.7097 14.8331 19.3617C15.3089 20.0666 15.3265 21.0886 14.8331 21.8639C14.4102 22.5511 13.6877 22.9212 12.8067 22.9212C12.6481 22.9212 12.4895 22.9036 12.3309 22.8859C10.0401 22.5511 7.87273 21.6525 7.53793 21.5115L4.80665 23.7846C6.79784 22.8507 8.89476 23.9961 8.93 24.0137C11.6965 25.5644 13.9873 24.8419 14.0049 24.8243C16.9124 23.8903 17.4058 22.6216 17.3881 20.3133C17.3881 18.9917 17.071 18.0049 16.4542 17.3353L15.6613 16.7362C13.5115 15.6436 10.093 17.0357 10.0578 17.0357C9.88154 17.1062 5.7582 18.8507 4.11943 17.5291C2.55115 16.278 3.57317 13.1943 3.62603 13.071C3.64366 13.0357 4.82427 9.3529 2.95643 7.96083C2.14586 7.36171 1.1767 7.25598 0.401367 7.30885V9.15907C1.14146 9.14145 1.54674 9.42338 1.77581 9.6877Z",
fill: color
}
),
/* @__PURE__ */ jsx6(
"path",
{
d: "M14.3925 21.6155C14.7626 21.0163 14.7626 20.2234 14.3925 19.6948C14.0577 19.219 13.4762 19.0251 12.7361 19.1661C10.604 19.589 8.54229 20.2234 7.81982 20.4701L8.36608 20.8754L8.03127 21.1573C8.7185 21.4392 10.5687 22.1088 12.4366 22.3908C13.6172 22.567 14.1634 21.9855 14.3925 21.6155Z",
fill: color
}
),
/* @__PURE__ */ jsx6(
"path",
{
d: "M8.15474 26.7801C7.16796 26.2691 6.79792 26.1281 6.21642 26.6039C5.77589 26.9739 6.41025 28.225 6.67457 28.7713C6.76268 28.9475 6.83316 29.0885 6.8684 29.1942C7.32655 30.4981 7.4499 31.3087 7.36179 32.0136L12.1724 28.0136C11.5732 27.9783 10.6746 27.855 9.59968 27.4497C9.01818 27.2206 8.56003 26.9915 8.15474 26.7801Z",
fill: color
}
),
/* @__PURE__ */ jsx6(
"path",
{
d: "M6.35777 29.3514C6.34015 29.2809 6.26966 29.14 6.19918 28.999C5.79389 28.1884 5.10667 26.8316 5.86438 26.1972C6.74543 25.4748 7.4679 25.8448 8.3842 26.303C8.77186 26.4968 9.23001 26.7259 9.77627 26.9373C11.2741 27.5012 12.4371 27.4836 12.7895 27.4659L20.8776 20.717L17.5648 18.2148C17.7939 18.814 17.9172 19.5364 17.9172 20.347C17.9349 22.8668 17.3534 24.3294 14.1639 25.3514C14.0582 25.3866 11.6441 26.162 8.66614 24.488C8.56041 24.4351 5.98772 23.0254 4.0494 24.9814C3.27407 25.7567 3.45028 28.1003 4.45469 30.3382C5.3005 32.2413 4.87759 33.5452 4.01416 34.7435L6.71019 32.5056C6.92164 31.836 6.95689 31.0607 6.35777 29.3514Z",
fill: color
}
),
/* @__PURE__ */ jsx6(
"path",
{
d: "M6.37546 14.5343C6.53405 14.7457 6.79837 14.8691 7.18603 14.8867C7.64418 14.9043 8.3314 14.5695 9.07149 14.2171C9.77634 13.8647 10.4988 13.5122 11.1684 13.4065L6.79836 10.0938C6.78074 10.6224 6.72788 11.4153 6.48119 12.2259C6.12876 13.3889 6.09352 14.1466 6.37546 14.5343Z",
fill: color
}
),
/* @__PURE__ */ jsx6(
"path",
{
d: "M6.79784 9.42372L15.9608 16.3312C16.0666 16.3841 16.1723 16.4369 16.2604 16.5074C16.4719 16.6484 16.6657 16.807 16.8419 17.0008L21.7582 20.7189L7.20313 32.8422C7.20313 32.8775 7.18551 32.8951 7.18551 32.9303L7.13264 32.9127L0.401367 38.5162V40.3841C0.401367 40.8775 0.789029 41.318 1.22956 41.5471C1.40577 41.6352 1.5996 41.688 1.79344 41.688C2.07537 41.688 2.33969 41.5999 2.58639 41.4237L27.8904 22.1109C28.2075 21.8642 28.4014 21.4942 28.4014 21.0889C28.4014 20.6836 28.2075 20.3136 27.8904 20.0669L2.48066 0.5779C2.093 0.27834 1.67009 0.225475 1.22956 0.454549C0.789029 0.666003 0.401367 1.12416 0.401367 1.61755V4.61315L6.79784 9.42372Z",
fill: color
}
),
/* @__PURE__ */ jsx6(
"path",
{
d: "M1.54674 33.1767C1.96965 32.1194 1.40577 30.8859 1.40577 30.8859C0.877135 29.8639 0.789029 28.2075 0.789029 27.2031L0.401367 27.5203V34.3397C0.965244 34.0578 1.35291 33.6701 1.54674 33.1767Z",
fill: color
}
),
/* @__PURE__ */ jsx6(
"path",
{
d: "M2.92119 35.3612C4.10181 33.9515 4.94762 32.7004 3.99608 30.5859C3.13264 28.6476 2.70973 26.2511 3.4322 25L1.31766 26.7621C1.30004 27.5551 1.31767 29.5639 1.88154 30.6564C1.91678 30.7269 2.55114 32.1013 2.04013 33.37C1.75819 34.0573 1.21194 34.5859 0.401367 34.9207V36.6828C1.21194 36.489 2.26921 36.1189 2.92119 35.3612Z",
fill: color
}
),
/* @__PURE__ */ jsx6(
"path",
{
d: "M0.401367 37.2312V37.8127L1.47626 36.9141C1.08859 37.055 0.718548 37.1608 0.401367 37.2312Z",
fill: color
}
)
]
}
);
// src/assets/icons/FsePlayingIcon.tsx
import { jsx as jsx7 } from "react/jsx-runtime";
var FsePlayingIcon = ({ color = "#D9D9D9", width, height, ...props }) => /* @__PURE__ */ jsx7(
"svg",
{
width: width || "17",
height: height || "25",
viewBox: "0 0 17 25",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: /* @__PURE__ */ jsx7("path", { d: "M0 0H3.64286V25H0V0ZM17 0V25H13.3571V0H17Z", fill: color })
}
);
// src/assets/icons/NextOutlineIcon.tsx
import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
var NextOutlineIcon = ({
color = "white",
width,
height
}) => /* @__PURE__ */ jsxs4(
"svg",
{
width: width || "29",
height: height || "34",
viewBox: "0 0 29 34",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: [
/* @__PURE__ */ jsx8(
"path",
{
d: "M5.02455 11.9043C5.14802 12.069 5.35379 12.165 5.6556 12.1787C6.01229 12.1924 6.54733 11.9318 7.12351 11.6574C7.67226 11.383 8.23471 11.1086 8.75602 11.0263L5.36751 8.46094C5.3538 8.8725 5.31263 9.48984 5.12057 10.1209C4.83248 11.0126 4.80505 11.6025 5.02455 11.9043Z",
fill: color
}
),
/* @__PURE__ */ jsx8(
"path",
{
d: "M1.44394 8.13087C1.80063 8.55615 1.8555 9.29696 1.56741 10.1612C1.03238 11.8075 1.37534 12.8775 1.38906 12.9324L5.8202 16.2661L5.79276 16.1975C5.80648 16.1837 7.82312 15.4978 9.90836 15.0862C10.6492 14.9353 11.2665 15.1548 11.6232 15.6624C11.9936 16.2112 12.0073 17.0069 11.6232 17.6105C11.2939 18.1455 10.7315 18.4336 10.0455 18.4336C9.92208 18.4336 9.79862 18.4199 9.67515 18.4062C7.89172 18.1455 6.20431 17.4459 5.94366 17.3361L3.81726 19.1058C5.36747 18.3787 7 19.2704 7.02744 19.2842C9.18127 20.4914 10.9647 19.9289 10.9784 19.9152C13.242 19.1881 13.6261 18.2004 13.6124 16.4032C13.6124 15.3743 13.3655 14.6061 12.8853 14.0848L12.268 13.6183C10.5943 12.7678 7.93287 13.8516 7.90544 13.8516C7.76825 13.9064 4.55808 15.2646 3.28225 14.2357C2.06128 13.2617 2.85696 10.8609 2.89812 10.7649C2.91184 10.7374 3.83098 7.87022 2.3768 6.78644C1.74574 6.32001 1.00494 6.2377 0.415039 6.27885V7.71931C0.963786 7.71931 1.27932 7.93881 1.44394 8.13087Z",
fill: color
}
),
/* @__PURE__ */ jsx8(
"path",
{
d: "M2.60998 6.49837C4.29738 7.74677 3.32336 10.806 3.2822 10.9295C3.26848 10.9569 2.54138 13.1519 3.54285 13.9476C4.43456 14.6747 6.8765 13.879 7.74078 13.5086C7.83681 13.4675 9.66138 12.7266 11.3351 12.9461L9.20867 11.3411V11.3822C8.67364 11.3411 7.9877 11.6703 7.31548 11.9996C6.71186 12.2877 6.14941 12.562 5.69669 12.562C5.68297 12.562 5.66924 12.562 5.65553 12.562C5.23025 12.5483 4.90099 12.3974 4.70893 12.123C4.31109 11.5606 4.5306 10.6277 4.73638 9.96919C4.9696 9.21466 4.96959 8.46014 4.96959 8.11717L0.428711 4.6875V5.88103C1.07349 5.86731 1.89661 5.96334 2.60998 6.49837Z",
fill: color
}
),
/* @__PURE__ */ jsx8(
"path",
{
d: "M6.4097 21.4422C5.64145 21.0443 5.35336 20.9346 4.90065 21.305C4.55768 21.5931 5.05155 22.5671 5.25733 22.9924C5.32592 23.1296 5.38081 23.2393 5.40825 23.3216C5.76493 24.3368 5.86095 24.9679 5.79236 25.5166L9.53757 22.4025C9.07113 22.375 8.37148 22.279 7.53464 21.9772C7.08193 21.7851 6.72523 21.6068 6.4097 21.4422Z",
fill: color
}
),
/* @__PURE__ */ jsx8(
"path",
{
d: "M11.267 17.4185C11.5551 16.9521 11.5551 16.3347 11.267 15.9232C11.0063 15.5528 10.5536 15.4019 9.97742 15.5116C8.31746 15.8409 6.71237 16.3347 6.1499 16.5268L6.57519 16.8423L6.36941 17.007L6.30082 17.0618C6.83585 17.2813 8.27631 17.8026 9.73049 18.0221C10.6634 18.1593 11.0886 17.7066 11.267 17.4185Z",
fill: color
}
),
/* @__PURE__ */ jsx8(
"path",
{
d: "M0.675741 21.2204C0.675741 21.1793 0.675741 21.1381 0.675741 21.1381H0.771765L5.90256 16.8716L0.401367 12.7148V21.4536L0.675741 21.2204Z",
fill: color
}
),
/* @__PURE__ */ jsx8(
"path",
{
d: "M1.26563 26.4202C1.59488 25.597 1.15589 24.6367 1.15589 24.6367C0.744334 23.8411 0.675741 22.5515 0.675741 21.7695L0.401367 21.989V27.3119C0.826646 27.0924 1.11473 26.7906 1.26563 26.4202Z",
fill: color
}
),
/* @__PURE__ */ jsx8(
"path",
{
d: "M5.01113 23.4436C4.99741 23.3888 4.94253 23.279 4.88766 23.1693C4.57213 22.5382 4.03709 21.4819 4.64071 20.988C5.32665 20.4255 5.88912 20.7136 6.60249 21.0703C6.9043 21.2212 7.26099 21.3996 7.68627 21.5642C8.85236 22.0032 9.75779 21.9895 10.0322 21.9757L16.329 16.7215L13.7499 14.7734C13.9283 15.2399 14.0243 15.8023 14.0243 16.4334C14.038 18.3952 13.5853 19.5338 11.1022 20.3295C11.0199 20.3569 9.14045 20.9606 6.82199 19.6573C6.73968 19.6161 4.73676 18.5186 3.2277 20.0414C2.62408 20.645 2.76125 22.4696 3.54322 24.2119C4.20172 25.6935 3.87247 26.7087 3.20025 27.6416L5.29922 25.8993C5.45012 25.378 5.47756 24.7744 5.01113 23.4436Z",
fill: color
}
),
/* @__PURE__ */ jsx8(
"path",
{
d: "M2.3357 28.1213C3.25485 27.0238 3.91334 26.0498 3.17253 24.4035C2.50032 22.8945 2.17108 21.0287 2.73354 20.0547L1.0873 21.4266C1.07358 22.0439 1.08729 23.6078 1.52629 24.4584C1.55373 24.5133 2.04761 25.5833 1.64976 26.5711C1.44398 27.1061 1.01871 27.5039 0.401367 27.7783V29.1502C1.03243 28.9993 1.84183 28.6975 2.3357 28.1213Z",
fill: color
}
),
/* @__PURE__ */ jsx8(
"path",
{
d: "M0.401367 29.5613V30.0003L1.21076 29.3281C0.922664 29.4379 0.648303 29.5065 0.401367 29.5613Z",
fill: color
}
),
/* @__PURE__ */ jsx8(
"path",
{
d: "M5.35381 7.92715L12.4875 13.3049C12.5698 13.346 12.6521 13.3872 12.7207 13.4421C12.8854 13.5518 13.0363 13.6753 13.1735 13.8262L17.001 16.7208L16.7952 16.8855L5.66933 26.1593C5.66933 26.1867 5.65561 26.2004 5.65561 26.2279L5.61447 26.2142L0.415083 30.5493V32.0858C0.415083 32.4699 0.716887 32.8128 1.05985 32.9912C1.19704 33.0598 1.34796 33.1009 1.49886 33.1009C1.71836 33.1009 1.92414 33.0323 2.1162 32.8952L21.8162 17.8595C22.0632 17.6674 22.2141 17.3793 22.2141 17.0638C22.2141 16.7483 22.0632 16.4602 21.8162 16.2681L2.02016 1.10897C1.71835 0.875749 1.38911 0.834591 1.04614 1.01293C0.703171 1.17756 0.401367 1.53425 0.401367 1.91837V4.19567L5.35381 7.92715Z",
fill: color
}
),
/* @__PURE__ */ jsx8(
"path",
{
d: "M1.16961 10.0389C1.40283 9.32551 1.3891 8.70817 1.12845 8.40636C0.977542 8.22802 0.730616 8.1457 0.401367 8.17314V12.2064L0.895236 12.5768C0.826643 12.0418 0.799206 11.1638 1.16961 10.0389Z",
fill: color
}
),
/* @__PURE__ */ jsx8(
"path",
{
d: "M27.0437 31.934C27.7982 31.934 28.4019 31.4813 28.4019 30.9325V3.05615C28.4019 2.49368 27.7982 2.05469 27.0437 2.05469C26.2892 2.05469 25.6855 2.5074 25.6855 3.05615V30.9325C25.6855 31.4813 26.2892 31.934 27.0437 31.934Z",
fill: color
}
)
]
}
);
// src/assets/icons/RepeatOutlineIcon.tsx
import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
var RepeatOutlineIcon = ({
color = "#D9D9D9",
width,
height
}) => /* @__PURE__ */ jsxs5(
"svg",
{
width: width || "35",
height: height || "25",
viewBox: "0 0 35 25",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: [
/* @__PURE__ */ jsx9(
"path",
{
d: "M22.8652 1.67578L26.9515 5.4961L22.8652 9.31642",
stroke: color,
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round"
}
),
/* @__PURE__ */ jsx9(
"path",
{
d: "M25.59 5.49609H7.88274C6.07815 5.50113 4.34901 6.17358 3.07296 7.36657C1.79692 8.55956 1.07766 10.1762 1.07227 11.8633V13.1367",
stroke: color,
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round"
}
),
/* @__PURE__ */ jsx9(
"path",
{
d: "M11.9691 23.3242L7.88281 19.5039L11.9691 15.6836",
stroke: color,
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round"
}
),
/* @__PURE__ */ jsx9(
"path",
{
d: "M9.24414 19.5078H26.9514C28.756 19.5028 30.4851 18.8303 31.7611 17.6373C33.0372 16.4444 33.7565 14.8278 33.7618 13.1406V11.8672",
stroke: color,
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round"
}
)
]
}
);
// src/assets/icons/PrevOutlineIcon.tsx
import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
var PrevOutlineIcon = ({
color = "white",
width,
height
}) => /* @__PURE__ */ jsxs6(
"svg",
{
width: width || "29",
height: height || "34",
viewBox: "0 0 29 34",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: [
/* @__PURE__ */ jsx10(
"path",
{
d: "M23.7927 11.6212L21.6125 10.4008L21.6948 10.25L20.543 11.0864L23.8338 12.8964L23.7927 11.6212Z",
fill: color
}
),
/* @__PURE__ */ jsx10(
"path",
{
d: "M21.8877 16.996L28.4008 22.0146V12.3203L21.8877 16.996Z",
fill: color
}
),
/* @__PURE__ */ jsx10(
"path",
{
d: "M23.8479 13.2812L23.8068 13.3497L20.2006 11.3615L20.2417 11.293L19.2271 12.0197L23.8891 14.7346L23.8479 13.2812Z",
fill: color
}
),
/* @__PURE__ */ jsx10(
"path",
{
d: "M26.3701 6.89062L25.3555 7.61735L28.3995 8.48119V7.45281L26.3564 6.95918L26.3701 6.89062Z",
fill: color
}
),
/* @__PURE__ */ jsx10(
"path",
{
d: "M28.4005 28.9542V27.8984C27.9618 28.0081 27.6053 28.0904 27.3447 28.1452L28.4005 28.9542Z",
fill: color
}
),
/* @__PURE__ */ jsx10(
"path",
{
d: "M23.9585 8.61918L26.9477 9.51045L27.263 9.49674V9.60643L28.4011 9.94923V8.90714L24.932 7.93359L23.9585 8.61918Z",
fill: color
}
),
/* @__PURE__ */ jsx10(
"path",
{
d: "M23.6976 8.8125L21.9014 10.1014L23.7799 11.1435L23.6976 8.8125Z",
fill: color
}
),
/* @__PURE__ */ jsx10(
"path",
{
d: "M24.1226 9.09766L24.1911 11.3738L24.2048 11.3875L24.1911 11.415L24.3008 14.7469L25.384 13.9791L25.2743 9.44045L24.1226 9.09766Z",
fill: color
}
),
/* @__PURE__ */ jsx10(
"path",
{
d: "M27.386 12.5385L28.4007 11.8118V10.3721L27.29 10.043L27.386 12.5385Z",
fill: color
}
),
/* @__PURE__ */ jsx10(
"path",
{
d: "M25.3022 26.5793C25.7547 26.4833 27.0573 26.1543 28.3873 25.8252V24.8242C26.7968 25.2219 25.1102 25.6469 24.3149 25.8389L25.3022 26.5793Z",
fill: color
}
),
/* @__PURE__ */ jsx10(
"path",
{
d: "M26.1649 23.9195L22.8467 24.7011L23.8888 25.51C24.2864 25.4278 26.6174 24.8519 28.3862 24.3994V23.3984L26.1649 23.9195Z",
fill: color
}
),
/* @__PURE__ */ jsx10(
"path",
{
d: "M25.1771 27.02V26.9926L11.8767 16.791L28.3994 4.91657V1.9274C28.3994 1.54347 28.0977 1.20068 27.7549 1.02243C27.4121 0.857887 27.0967 0.899024 26.7814 1.11841L7.00897 16.2562C6.76216 16.4482 6.61133 16.7361 6.61133 17.0515C6.61133 17.3669 6.76216 17.6548 7.00897 17.8468L26.6991 32.8749C26.8774 33.012 27.0967 33.0806 27.3161 33.0806C27.467 33.0806 27.6178 33.0395 27.7549 32.9709C28.0977 32.8064 28.3994 32.4499 28.3994 32.0659V29.447L25.2045 27.0063C25.1908 27.02 25.1771 27.02 25.1771 27.02Z",
fill: color
}
),
/* @__PURE__ */ jsx10(
"path",
{
d: "M26.2891 23.4711L28.4007 22.9637V22.5387L26.8375 21.332L26.2891 23.4711Z",
fill: color
}
),
/* @__PURE__ */ jsx10(
"path",
{
d: "M26.9332 27.8289V27.8014C27.0155 27.7877 27.6051 27.6506 28.3867 27.4586V26.2383C27.3035 26.5125 26.3162 26.7593 25.7129 26.8965L26.9332 27.8289Z",
fill: color
}
),
/* @__PURE__ */ jsx10(
"path",
{
d: "M25.6982 9.56641L25.7805 13.6937L26.9871 12.8298L26.8637 9.92291L25.6982 9.56641Z",
fill: color
}
),
/* @__PURE__ */ jsx10(
"path",
{
d: "M16.4582 14.1452L16.5953 13.9258L15.4023 14.7896C16.1291 15.2421 18.1996 16.5447 18.9126 16.9972L19.1594 17.1618L16.0331 19.4928L16.8695 20.1372L21.1613 17.0247L16.4582 14.1452Z",
fill: color
}
),
/* @__PURE__ */ jsx10(
"path",
{
d: "M28.4013 7.02806V5.4375L26.7422 6.63042L28.4013 7.02806Z",
fill: color
}
),
/* @__PURE__ */ jsx10(
"path",
{
d: "M23.2305 22.0969L19.0896 19.0117L18.3491 19.5602L23.0111 23.043L23.2305 22.0969Z",
fill: color
}
),
/* @__PURE__ */ jsx10(
"path",
{
d: "M17.9935 19.8047L17.2119 20.3806L22.6555 24.549L22.9023 23.4794L17.9935 19.8047Z",
fill: color
}
),
/* @__PURE__ */ jsx10(
"path",
{
d: "M15.0444 15.0352L14.0435 15.7482L16.3607 17.1879L14.6605 18.422L15.7026 19.2173L18.4449 17.1742C17.156 16.3515 15.4558 15.282 15.0444 15.0352Z",
fill: color
}
),
/* @__PURE__ */ jsx10(
"path",
{
d: "M13.6878 16.0078L12.5635 16.8168L14.3049 18.1606L15.6212 17.2144L13.6878 16.0078Z",
fill: color
}
),
/* @__PURE__ */ jsx10(
"path",
{
d: "M25.8371 23.5777L26.4816 21.0548L25.5766 20.3555L24.7676 23.8246L25.8371 23.5777Z",
fill: color
}
),
/* @__PURE__ */ jsx10(
"path",
{
d: "M23.5741 20.6595L20.2284 18.1914L19.4331 18.7673L23.341 21.6605L23.5741 20.6595Z",
fill: color
}
),
/* @__PURE__ */ jsx10(
"path",
{
d: "M17.9795 12.9257L22.8746 15.7778L23.7659 15.147L18.8708 12.2812L17.9795 12.9257Z",
fill: color
}
),
/* @__PURE__ */ jsx10(
"path",
{
d: "M16.7324 13.8143L21.5315 16.7487L22.5051 16.0494L17.61 13.1836L16.7324 13.8143Z",
fill: color
}
),
/* @__PURE__ */ jsx10(
"path",
{
d: "M24.3144 23.9351L25.2194 20.0821L24.3007 19.3828L23.1489 24.2094L24.3144 23.9351Z",
fill: color
}
),
/* @__PURE__ */ jsx10(
"path",
{
d: "M23.6838 20.2176L23.9032 19.2578L24.2597 19.3401L21.5311 17.2422L20.585 17.9415L23.6838 20.2176Z",
fill: color
}
),
/* @__PURE__ */ jsx10(
"path",
{
d: "M1.75834 31.9424C2.51249 31.9424 3.11581 31.4899 3.11581 30.9415V3.07908C3.11581 2.5169 2.51249 2.07812 1.75834 2.07812C1.00419 2.07812 0.400879 2.53061 0.400879 3.07908V30.9415C0.400879 31.4899 1.0179 31.9424 1.75834 31.9424Z",
fill: color
}
)
]
}
);
// src/assets/icons/RepeatOneIcon.tsx
import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
var RepeatOneIcon = ({
color = "#FBBA12",
width,
height
}) => /* @__PURE__ */ jsxs7(
"svg",
{
width: width || "35",
height: height || "24",
viewBox: "0 0 35 24",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: [
/* @__PURE__ */ jsx11(
"path",
{
d: "M22.793 1L26.8793 4.82032L22.793 8.64064",
stroke: color,
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round"
}
),
/* @__PURE__ */ jsx11(
"path",
{
d: "M25.5177 4.82031H7.81047C6.00588 4.82535 4.27674 5.4978 3.0007 6.69079C1.72465 7.88378 1.00539 9.50037 1 11.1875V12.461",
stroke: color,
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round"
}
),
/* @__PURE__ */ jsx11(
"path",
{
d: "M11.8968 22.6485L7.81055 18.8281L11.8968 15.0078",
stroke: color,
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round"
}
),
/* @__PURE__ */ jsx11(
"path",
{
d: "M9.17188 18.8301H26.8791C28.6837 18.8251 30.4128 18.1526 31.6889 16.9596C32.9649 15.7666 33.6842 14.15 33.6896 12.4629V11.1895",
stroke: color,
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round"
}
),
/* @__PURE__ */ jsx11(
"path",
{
d: "M16.99 15C16.99 15.1381 17.1019 15.25 17.24 15.25H18C18.1381 15.25 18.25 15.1381 18.25 15V8C18.25 7.86193 18.1381 7.75 18 7.75H17.41C17.3588 7.75 17.3088 7.76573 17.2668 7.79506L14.8568 9.47885C14.8016 9.51744 14.7643 9.57669 14.7533 9.64317C14.7424 9.70966 14.7587 9.77774 14.7987 9.832L15.1887 10.3617C15.2686 10.4703 15.4201 10.4959 15.5313 10.4197L16.99 9.42029V15Z",
fill: color,
stroke: color,
strokeWidth: "0.5",
strokeLinejoin: "round"
}
)
]
}
);
// src/components/player-controls.tsx
import { Tooltip } from "antd";
import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
var DefaultPlayerControls = () => {
const {
isPlaying,
togglePlay,
nextTrack,
previousTrack,
shuffle,
toggleShuffle,
repeat,
toggleRepeat,
currentTrack,
queue,
isBuffering,
theme,
components
} = useUduxPlayer();
const isDisabled = queue.length === 0;
const PlayButton = components?.PlayButton;
const NextButton = components?.NextButton;
const PreviousButton = components?.PreviousButton;
const ShuffleButton = components?.ShuffleButton;
const RepeatButton = components?.RepeatButton;
const computeButtonSize = (size) => {
const numericValue = parseFloat(size);
if (isNaN(numericValue)) {
console.warn(`Invalid theme.sizes.controlButtonSize: ${size}`);
return size;
}
const scaledSize = numericValue * 1.2;
return `${scaledSize}px`;
};
const buttonStyle = {
color: theme?.colors.textSecondary,
width: theme?.sizes.controlButtonSize,
height: theme?.sizes.controlButtonSize,
textAlign: "center",
background: "transparent",
border: "none",
cursor: "pointer",
padding: 0
};
const activeButtonStyle = {
...buttonStyle,
color: theme?.colors.primary
};
return /* @__PURE__ */ jsxs8("div", { className: "udux-player-controls", children: [
ShuffleButton ? /* @__PURE__ */ jsx12(
ShuffleButton,
{
active: shuffle,
onClick: () => {
toggleShuffle();
},
disabled: isDisabled
}
) : /* @__PURE__ */ jsx12(
Tooltip,
{
arrow: false,
color: "rgba(0, 0, 0, 0.75)",
title: shuffle ? "Unshuffle" : "Shuffle",
placement: "top",
className: "hide-on-mobile",
children: /* @__PURE__ */ jsx12(
"button",
{
onClick: (e) => {
e.stopPropagation();
toggleShuffle();
},
disabled: isDisabled,
style: buttonStyle,
className: "shuffle-button",
"aria-label": "Toggle shuffle",
children: /* @__PURE__ */ jsx12(
ShuffleOutlineIcon,
{
color: shuffle ? "#FBBA12" : "#D9D9D9",
width: 22,
height: 22
}
)
}
)
}
),
PreviousButton ? /* @__PURE__ */ jsx12(
PreviousButton,
{
onClick: () => {
previousTrack();
},
disabled: isDisabled
}
) : /* @__PURE__ */ jsx12(
Tooltip,
{
arrow: false,
color: "rgba(0, 0, 0, 0.75)",
title: "Previous",
placement: "top",
children: /* @__PURE__ */ jsx12(
"button",
{
onClick: (e) => {
e.stopPropagation();
previousTrack();
},
disabled: isDisabled,
style: buttonStyle,
"aria-label": "Previous track",
children: /* @__PURE__ */ jsx12(PrevOutlineIcon, { width: 22, height: 22 })
}
)
}
),
PlayButton ? /* @__PURE__ */ jsx12(
PlayButton,
{
isPlaying,
onClick: () => {
togglePlay();
},
isBuffering
}
) : /* @__PURE__ */ jsx12(
Tooltip,
{
arrow: false,
color: "rgba(0, 0, 0, 0.75)",
title: isPlaying ? "Pause" : "Play",
placement: "top",
children: /* @__PURE__ */ jsx12(
"button",
{
onClick: (e) => {
e.stopPropagation();
togglePlay();
},
disabled: isDisabled,
style: buttonStyle,
"aria-label": isPlaying ? "Pause" : "Play",
type: "button",
children: isPlaying ? /* @__PURE__ */ jsx12(FsePlayingIcon, { width: 25, height: 25 }) : /* @__PURE__ */ jsx12(FsePausePlayIcon, { width: 22, height: 22, "aria-hidden": "true" })
}
)
}
),
NextButton ? /* @__PURE__ */ jsx12(
NextButton,
{
onClick: () => {
nextTrack();
},
disabled: isDisabled
}
) : /* @__PURE__ */ jsx12(
Tooltip,
{
arrow: false,
color: "rgba(0, 0, 0, 0.75)",
title: "Next",
placement: "top",
children: /* @__PURE__ */ jsx12(
"button",
{
onClick: (e) => {
e.stopPropagation();
nextTrack();
},
disabled: isDisabled,
style: buttonStyle,
"aria-label": "Next track",
children: /* @__PURE__ */ jsx12(NextOutlineIcon, { width: 22, height: 22 })
}
)
}
),
RepeatButton ? /* @__PURE__ */ jsx12(
RepeatButton,
{
mode: repeat,
onClick: () => {
toggleRepeat();
},
disabled: isDisabled
}
) : /* @__PURE__ */ jsx12(
Tooltip,
{
arrow: false,
color: "rgba(0, 0, 0, 0.75)",
className: "hide-on-mobile",
title: repeat === "one" ? "Repeat One" : repeat === "all" ? "Repeat All" : "Repeat",
placement: "top",
children: /* @__PURE__ */ jsx12(
"button",
{
onClick: (e) => {
e.stopPropagation();
toggleRepeat();
},
disabled: isDisabled,
className: "repeat-button",
style: repeat !== "off" ? activeButtonStyle : buttonStyle,
"aria-label": "Toggle repeat",
children: repeat === "all" ? /* @__PURE__ */ jsx12(RepeatOutlineIcon, { width: 22, height: 22, color: "#FBBA12" }) : repeat === "one" ? /* @__PURE__ */ jsx12(RepeatOneIcon, { width: 22, height: 22 }) : /* @__PURE__ */ jsx12(RepeatOutlineIcon, { width: 22, height: 22, color: "#D9D9D9" })
}
)
}
)
] });
};
// src/components/progress-bar.tsx
import { useState as useState3, useEffect as useEffect5 } from "react";
import { Loader2 } from "lucide-react";
import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
var DefaultProgressBar = ({ showDisplayTime = true }) => {
const { currentTime, duration, seek, currentTrack, isPlaying, playerRef } = useUduxPlayer();
const [isDragging, setIsDragging] = useState3(false);
const [dragValue, setDragValue] = useState3(null);
const [isBuffering, setIsBuffering] = useState3(false);
const [bufferTimeout, setBufferTimeout] = useState3(
null
);
const [seekError, setSeekError] = useState3(false);
const formatTime = (time) => {
if (!time || isNaN(time)) return "0:00";
const minutes = Math.floor(time / 60);
const seconds = Math.floor(time % 60);
return `${minutes}:${seconds.toString().padStart(2, "0")}`;
};
const handleDrag = (event) => {
setIsDragging(true);
setDragValue(Number(event.target.value));
};
const handleChangeCommitted = (event) => {
setIsBuffering(true);
setSeekError(false);
const targetTime = Number(event.target.value);
if (bufferTimeout) {
clearTimeout(bufferTimeout);
}
const timeout = setTimeout(() => {
setIsBuffering(false);
}, 200);
const seekTimeout = setTimeout(() => {
setIsBuffering(false);
setSeekError(true);
}, 1500);
setBufferTimeout(timeout);
seek(targetTime);
setIsDragging(false);
setDragValue(null);
};
useEffect5(() => {
return () => {
if (bufferTimeout) {
clearTimeout(bufferTimeout);
}
};
}, [bufferTimeout]);
const isDisabled = !currentTrack || duration === 0;
const displayTime = playerRef.current && !isDragging ? playerRef.current.currentTime : currentTime;
const progressPercentage = (displayTime / (duration || 1) * 100).toFixed(2);
return /* @__PURE__ */ jsxs9("div", { className: "udux-player-progress", children: [
showDisplayTime && /* @__PURE__ */ jsx13("span", { className: "udux-player-progress-time", children: formatTime(displayTime) }),
/* @__PURE__ */ jsxs9("div", { className: "udux-player-progress-container", children: [
/* @__PURE__ */ jsx13(
"div",
{
className: "udux-player-progress-fill",
style: { width: `${progressPercentage}%` }
}
),
/* @__PURE__ */ jsx13(
"input",
{
type: "range",
value: isDragging && dragValue !== null ? dragValue : currentTime,
min: 0,
max: duration || 100,
step: 0.1,
onInput: handleDrag,
onChange: handleChangeCommitted,
disabled: isDisabled,
className: "udux-player-progress-slider",
"aria-label": "Seek time"
}
),
isBuffering && /* @__PURE__ */ jsx13("div", { className: "udux-player-loading", children: /* @__PURE__ */ jsx13(Loader2, { className: "h-3 w-3 udux-player-spin text-white" }) })
] }),
showDisplayTime && /* @__PURE__ */ jsx13("span", { className: "udux-player-progress-time", children: formatTime(duration) })
] });
};
// src/assets/icons/AddSongIcon.tsx
import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
var AddSongIcon = ({ color, width, height }) => /* @__PURE__ */ jsx14(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: width || "18",
height: height || "18",
viewBox: "0 0 35 30",
fill: "none",
children: /* @__PURE__ */ jsxs10(
"g",
{
id: "add-song-icon",
"data-name": "Add Song Icon",
transform: "translate(2.5 3)",
children: [
/* @__PURE__ */ jsx14(
"path",
{
id: "Path_1526",
"data-name": "path 1526",
d: "M21.387,11.557a.867.867,0,0,0-.739-.977,3.432,3.432,0,0,1-.995-.294,3.578,3.578,0,0,1-1.638-1.591.866.866,0,0,0-1.635.4v6.841a3.973,3.973,0,1,0,1.733,3.278V11.38a5.094,5.094,0,0,0,.805.471,5.176,5.176,0,0,0,1.493.443.865.865,0,0,0,.976-.738Zm-7.251,9.9A2.243,2.243,0,1,1,16.38,19.21a2.246,2.246,0,0,1-2.243,2.243Z",
transform: "translate(-1.444 -1.37)",
fill: color || "#eaeaea"
}
),
/* @__PURE__ */ jsx14(
"path",
{
id: "Path_1527",
"data-name": "Path 1527",
d: "M22.948,1.1H7.921A6.828,6.828,0,0,0,1.1,7.921V22.948a6.828,6.828,0,0,0,6.821,6.821H19.1a.866.866,0,1,0,0-1.732H7.921a5.1,5.1,0,0,1-5.089-5.089V7.921A5.1,5.1,0,0,1,7.921,2.832H22.948a5.1,5.1,0,0,1,5.089,5.089V19.1a.866.866,0,1,0,1.732,0V7.921A6.828,6.828,0,0,0,22.948,1.1Z",
transform: "translate(-1.1 -1.1)",
fill: color || "#eaeaea"
}
),
/* @__PURE__ */ jsx14(
"path",
{
id: "Path_1528",
"data-name": "Path 1528",
d: "M28.39,24.332H26.065V22.007a.866.866,0,1,0-1.732,0v2.325H22.008a.866.866,0,0,0,0,1.732h2.325v2.325a.866.866,0,0,0,1.732,0V26.064H28.39a.866.866,0,0,0,0-1.732Z",
transform: "translate(-1.861 -1.861)",
fill: color || "#eaeaea"
}
)
]
}
)
}
);
// src/assets/icons/ExpandOutlineIcon.tsx
import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
var ExpandOutlineIcon = ({ width, height, ...props }) => /* @__PURE__ */ jsx15(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: width || "22",
height: height || "22",
viewBox: "0 0 40 40",
...props,
children: /* @__PURE__ */ jsxs11("g", { id: "expand", transform: "translate(5 5)", children: [
/* @__PURE__ */ jsx15(
"path",
{
id: "Path_1578",
"data-name": "Path 1578",
d: "M16.165,314.078,10.651,319.6v-4.954H7.561v10.229H17.79v-3.09H12.836l5.514-5.519Z",
transform: "translate(-7.092 -296.274)",
fill: "#fff"
}
),
/* @__PURE__ */ jsx15(
"path",
{
id: "Path_1579",
"data-name": "Path 1579",
d: "M91.112,317.95l3.868-3.872h0l-3.867,3.871Z",
transform: "translate(-85.907 -296.274)",
fill: "#acd9e5"
}
),
/* @__PURE__ */ jsx15(
"path",
{
id: "Path_1580",
"data-name": "Path 1580",
d: "M9.207,332.622V324.04H7.561v10.229H17.79v-1.646Z",
transform: "translate(-7.092 -305.671)",
fill: "#fff"
}
),
/* @__PURE__ */ jsx15(
"rect",
{
id: "Rectangle_3981",
"data-name": "Rectangle 3981",
width: "5.54",
height: "3.09",
transform: "translate(11.27 19.983) rotate(135)",
fill: "#fff"
}
),
/* @__PURE__ */ jsx15(
"rect",
{
id: "Rectangle_3982",
"data-name": "Rectangle 3982",
width: "1.918",
height: "3.09",
transform: "translate(11.27 19.983) rotate(135)",
fill: "#f5cea4"
}
),
/* @__PURE__ */ jsx15(
"path",
{
id: "Path_1581",
"data-name": "Path 1581",
d: "M11.124,315.267H.043V304.185H3.985v4.351l5.087-5.092,2.788,2.788-5.088,5.093h4.352v3.942ZM.9,314.414h9.376v-2.237H4.716l5.939-5.945L9.073,304.65,3.133,310.6v-5.557H.9Z",
transform: "translate(0 -286.242)"
}
),
/* @__PURE__ */ jsxs11(
"g",
{
id: "Group_9979",
"data-name": "Group 9979",
transform: "translate(4.401 19.462)",
children: [
/* @__PURE__ */ jsx15(
"rect",
{
id: "Rectangle_3983",
"data-name": "Rectangle 3983",
width: "0.852",
height: "2.557",
transform: "translate(3.316 2.411) rotate(-135)",
fill: "#fff"
}
),
/* @__PURE__ */ jsx15(
"rect",
{
id: "Rectangle_3984",
"data-name": "Rectangle 3984",
width: "0.852",
height: "1.279",
transform: "translate(1.808 3.918) rotate(-135)",
fill: "#f5cea4"
}
),
/* @__PURE__ */ jsx15(
"rect",
{
id: "Rectangle_3985",
"data-name": "Rectangle 3985",
width: "0.852",
height: "0.852",
transform: "translate(0.603 5.123) rotate(-135)",
fill: "#fff"
}
)
]
}
),
/* @__PURE__ */ jsx15(
"path",
{
id: "Path_1582",
"data-name": "Path 1582",
d: "M16.165,18.312l-5.514-5.519v4.954H7.561V7.518H17.79v3.09H12.836l5.514,5.519Z",
transform: "translate(-7.092 -7.092)",
fill: "#f5cea4"
}
),
/* @__PURE__ */ jsx15(
"path",
{
id: "Path_1583",
"data-name": "Path 1583",
d: "M91.112,129.611l3.868,3.872h0l-3.867-3.871Z",
transform: "translate(-85.907 -122.264)",
fill: "#acd9e5"
}
),
/* @__PURE__ */ jsx15(
"path",
{
id: "Path_1584",
"data-name": "Path 1584",
d: "M9.207,9.164v8.582H7.561V7.518H17.79V9.164Z",
transform: "translate(-7.092 -7.092)",
fill: "#fff"
}
),
/* @__PURE__ */ jsx15(
"rect",
{
id: "Rectangle_3986",
"data-name": "Rectangle 3986",
width: "5.54",
height: "3.09",
transform: "translate(9.086 11.225) rotate(-135)",
fill: "#fff"
}
),
/* @__PURE__ */ jsx15(
"rect",
{
id: "Rectangle_3987",
"data-name": "Rectangle 3987",
width: "1.918",
height: "3.09",
transform: "translate(9.086 11.226) rotate(-135)",
fill: "#f5cea4"
}
),
/* @__PURE__ */ jsx15(
"path",
{
id: "Path_1585",
"data-name": "Path 1585",
d: "M9.073,11.823,3.985,6.731v4.35H.043V0H11.124V3.942H6.772L11.86,9.035ZM3.133,4.671l5.94,5.945,1.582-1.582L4.716,3.09h5.556V.852H.9v9.376H3.133S3.133,4.671,3.133,4.671Z"
}
),
/* @__PURE__ */ jsxs11(
"g",
{
id: "Group_9980",
"data-name": "Group 9980",
transform: "translate(4.402 4.439)",
children: [
/* @__PURE__ */ jsx15(
"rect",
{
id: "Rectangle_3988",
"data-name": "Rectangle 3988",
width: "2.557",
height: "0.852",
transform: "translate(4.521 5.124) rotate(-135)",
fill: "#fff"
}
),
/* @__PURE__ */ jsx15(
"rect",
{
id: "Rectangle_3989",
"data-name": "Rectangle 3989",
width: "1.279",
height: "0.852",
transform: "translate(2.109 2.712) rotate(-135)",
fill: "#fff"
}
),
/* @__PURE__ */ jsx15(
"rect",
{
id: "Rectangle_3990",
"data-name": "Rectangle 3990",
width: "0.852",
height: "0.852",
transform: "translate(0.603 1.205) rotate(-135)",
fill: "#fff"
}
)
]
}
),
/* @__PURE__ */ jsx15(
"path",
{
id: "Path_1586",
"data-name": "Path 1586",
d: "M316.31,314.078l5.514,5.519v-4.954h3.09v10.229H314.685v-3.09h4.954l-5.514-5.519Z",
transform: "translate(-296.277 -296.274)",
fill: "#fff"
}
),
/* @__PURE__ */ jsx15(
"path",
{
id: "Path_1587",
"data-name": "Path 1587",
d: "M356.523,317.95l-3.868-3.872h0l3.867,3.871Z",
transform: "translate(-332.623 -296.274)",
fill: "#acd9e5"
}
),
/* @__PURE__ */ jsx15(
"path",
{
id: "Path_1588",
"data-name": "Path 1588",
d: "M332.581,332.622V324.04h1.646v10.229H324v-1.646Z",
transform: "translate(-305.592 -305.671)",
fill: "#f5cea4"
}
),
/* @__PURE__ */ jsx15(
"rect",
{
id: "Rectangle_3991",
"data-name": "Rectangle 3991",
width: "5.54",
height: "3.09",
transform: "translate(20.02 17.798) rotate(45)",
fill: "#fff"
}
),
/* @__PURE__ */ jsx15(
"rect",
{
id: "Rectangle_3992",
"data-name": "Rectangle 3992",
width: "1.918",
height: "3.09",
transform: "translate(20.02 17.799) rotate(45)",
fill: "#f5cea4"
}
),
/* @__PURE__ */ jsx15(
"path",
{
id: "Path_1589",
"data-name": "Path 1589",
d: "M304.656,315.266h-.426v-3.942h4.352l-5.088-5.093,2.788-2.788,5.087,5.092v-4.351h3.942v11.081Zm.426-3.09v2.238h9.376v-9.376h-2.238v5.557l-5.94-5.945-1.582,1.582,5.939,5.945Z",
transform: "translate(-286.249 -286.242)"
}
),
/* @__PURE__ */ jsxs11(
"g",
{
id: "Group_9981",
"data-name": "Group 9981",
transform: "translate(19.58 19.461)",
children: [
/* @__PURE__ */ jsx15(
"rect",
{
id: "Rectangle_3993",
"data-name": "Rectangle 3993",
width: "2.557",
height: "0.852",
transform: "translate(1.808 2.411) rotate(-135)",
fill: "#fff"
}
),
/* @__PURE__ */ jsx15(
"rect",
{
id: "Rectangle_3994",
"data-name": "Rectangle 3994",
width: "1.279",
height: "0.852",
transform: "translate(3.316 3.918) rotate(-135)",
fill: "#fff"
}
),
/* @__PURE__ */ jsx15(
"rect",
{
id: "Rectangle_3995",
"data-name": "Rectangle 3995",
width: "0.852",
height: "0.852",
transform: "translate(4.521 5.124) rotate(-135)",
fill: "#fff"
}
)
]
}
),
/* @__PURE__ */ jsx15(
"path",
{
id: "Path_1590",
"data-name": "Path 1590",
d: "M316.31,18.312l5.514-5.519v4.954h3.09V7.518H314.685v3.09h4.954l-5.514,5.519Z",
transform: "translate(-296.277 -7.092)",
fill: "#f5cea4"
}
),
/* @__PURE__ */ jsx15(
"path",
{
id: "Path_1591",
"data-name": "Path 1591",
d: "M356.523,129.611l-3.868,3.872h0l3.867-3.871Z",
transform: "translate(-332.623 -122.264)",
fill: "#acd9e5"
}
),
/* @__PURE__ */ jsx15(
"path",
{
id: "Path_1592",
"data-name": "Path 1592",
d: "M332.581,9.164v8.582h1.646V7.518H324V9.164Z",
transform: "translate(-305.592 -7.092)",
fill: "#fff"
}
),
/* @__PURE__ */ jsx15(
"rect",
{
id: "Rectangle_3996",
"data-name": "Rectangle 3996",
width: "5.54",
height: "3.09",
transform: "translate(17.835 9.041) rotate(-45)",
fill: "#fff"
}
),
/* @__PURE__ */ jsx15(
"path",
{
id: "Path_1594",
"data-name": "Path 1594",
d: "M0,0H1.918V3.09H0Z",
transform: "translate(17.835 9.041) rotate(-45)",
fill: "#f5cea4"
}
),
/* @__PURE__ */ jsx15(
"path",
{
id: "Path_1593",
"data-name": "Path 1593",
d: "M306.282,11.823l-2.788-2.788,5.088-5.093H304.23V0h11.081V11.081h-3.942V6.731ZM304.7,9.035l1.582,1.582,5.94-5.945v5.557h2.238V.852h-9.376V3.09h5.556Z",
transform: "translate(-286.249)"
}
),
/* @__PURE__ */ jsxs11(
"g",
{
id: "Group_9982",
"data-name": "Group 9982",
transform: "translate(19.58 4.438)",
children: [
/* @__PURE__ */ jsx15(
"rect",
{
id: "Rectangle_3998",
"data-name": "Rectangle 3998",
width: "0.852",
height: "2.557",
transform: "translate(0.603 5.123) rotate(-135)",
fill: "#fff"
}
),
/* @__PURE__ */ jsx15(
"rect",
{
id: "Rectangle_3999",
"data-name": "Rectangle 3999",
width: "0.852",
height: "1.279",
transform: "translate(3.014 2.713) rotate(-135)",
fill: "#fff"
}
),
/* @__PURE__ */ jsx15(
"rect",
{
id: "Rectangle_4000",
"data-name": "Rectangle 4000",
width: "0.852",
height: "0.852",
transform: "translate(4.522 1.205) rotate(-135)",
fill: "#fff"
}
)
]
}
)
] })
}
);
// src/assets/icons/FavoriteFilledIcon.tsx
import { jsx as jsx16 } from "react/jsx-runtime";
var FavoriteFilledIcon = ({
color = "#FBBA12",
width,
height,
...props
}) => /* @__PURE__ */ jsx16(
"svg",
{
width: width || "35",
height: height || "29",
viewBox: "0 0 35 29",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: /* @__PURE__ */ jsx16(
"path",
{
d: "M16.7248 4.89925L17.1631 5.69766L17.6014 4.89925C19.0365 2.28506 21.8663 0.5 25.1318 0.5C29.8552 0.5 33.6631 4.23003 33.6631 8.80357C33.6631 14.5239 29.5689 19.4441 25.342 22.985C23.242 24.7442 21.1395 26.1375 19.5608 27.0913C18.772 27.5679 18.1153 27.9339 17.6569 28.1803C17.4496 28.2917 17.283 28.3785 17.1631 28.4401C17.0432 28.3785 16.8765 28.2917 16.6693 28.1803C16.2109 27.9339 15.5542 27.5679 14.7654 27.0913C13.1867 26.1375 11.0841 24.7442 8.98417 22.985C4.75729 19.4441 0.663086 14.5239 0.663086 8.80357C0.663086 4.23003 4.47099 0.5 9.19434 0.5C12.4599 0.5 15.2897 2.28506 16.7248 4.89925Z",
fill: color,
stroke: color
}
)
}
);
// src/assets/icons/GotoNowPlayingIcon.tsx
import { jsx as jsx17 } from "react/jsx-runtime";
var GotoNowPlayingIcon = ({
color = "#fff",
width = "11",
height = "8",
...props
}) => /* @__PURE__ */ jsx17(
"svg",
{
width,
height,
viewBox: "0 0 11 8",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: /* @__PURE__ */ jsx17(
"path",
{
d: "M1 1.5L5.5 6.5L10 1.5",
stroke: color,
strokeWidth: "2",
strokeLinecap: "round"
}
)
}
);
// src/assets/icons/LikeIcon.tsx
import { jsx as jsx18 } from "react/jsx-runtime";
var LikeIcon = ({
color = "#D9D9D9",
width,
height,
...props
}) => /* @__PURE__ */ jsx18(
"svg",
{
width: width || "25",
height: height || "23",
viewBox: "0 0 25 23",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: /* @__PURE__ */ jsx18(
"path",
{
d: "M12.0602 4.31276L12.501 5.13658L12.9419 4.31276C13.9773 2.37781 16.0151 1.0625 18.3609 1.0625C21.7522 1.0625 24.5021 3.81233 24.5021 7.20368C24.5021 11.4666 21.5259 15.1475 18.4257 17.8117C16.8879 19.1332 15.3478 20.1803 14.1909 20.8973C13.613 21.2555 13.1321 21.5304 12.7968 21.7153C12.6797 21.7799 12.5805 21.8334 12.501 21.8756C12.4216 21.8334 12.3223 21.7799 12.2053 21.7153C11.87 21.5304 11.3891 21.2555 10.8112 20.8973C9.65431 20.1803 8.11413 19.1332 6.5764 17.8117C3.47622 15.1475 0.5 11.4666 0.5 7.20368C0.5 3.81233 3.24983 1.0625 6.64118 1.0625C8.98695 1.0625 11.0247 2.37781 12.0602 4.31276Z",
stroke: color
}
)
}
);
// src/assets/icons/LoadingIcon.tsx
import { jsx as jsx19 } from "react/jsx-runtime";
var LoadingIcon = () => /* @__PURE__ */ jsx19(
"svg",
{
width: "16",
height: "16",
viewBox: "0 0 24 24",
fill: "currentColor",
className: "animate-spin",
children: /* @__PURE__ */ jsx19("path", { d: "M12 4V2A10 10 0 0 0 2 12h2a8 8 0 0 1 8-8Z" })
}
);
// src/assets/icons/MinimizePlayerIcon.tsx
import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
var MinimizePlayerIcon = ({
color = "white",
width = 25,
height = 25,
...props
}) => /* @__PURE__ */ jsxs12(
"svg",
{
width: width || "27",
height: height || "22",
viewBox: "0 0 27 22",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: [
/* @__PURE__ */ jsx20(
"path",
{
d: "M4.042 6.04324C4.042 4.08062 5.42875 3.41076 6.06337 3.19922L6.09863 8.28791C4.06551 8.14688 4.042 6.1255 4.042 6.04324Z",
fill: color
}
),
/* @__PURE__ */ jsx20(
"path",
{
d: "M0.986784 5.46612V0.894531H4.26562C2.90237 1.43513 1.29234 2.66911 0.986784 5.46612Z",
fill: color
}
),
/* @__PURE__ */ jsx20(
"path",
{
d: "M3.51407 8.60141C2.58565 7.60248 2.63266 6.25098 2.63266 6.22748V6.21572V6.20397C2.47988 2.97212 5.12412 2.0202 6.05254 1.78516L6.06429 2.80759C5.41792 3.00738 3.7021 3.74777 3.7021 6.01593C3.7021 6.03944 3.73736 8.47213 6.1113 8.61316L6.12305 9.63561C4.98309 9.60035 4.11343 9.24778 3.51407 8.60141Z",
fill: color
}
),
/* @__PURE__ */ jsx20(
"path",
{
d: "M4.28906 11.1517C3.18436 11.5277 1.26876 12.5619 0.986708 15.2649V13.2318C1.43329 11.751 2.39696 11.3397 2.44396 11.3279L2.84354 11.1634L2.44396 10.9989C1.50379 10.6111 1.10423 9.64738 0.986708 9.29482V7.27344C1.16299 8.61318 1.86812 10.5053 4.28906 11.1517Z",
fill: color
}
),
/* @__PURE__ */ jsx20(
"path",
{
d: "M25.9189 20.4053V1.63281H7.89253L8.034 20.4053H25.9189Z",
stroke: color,
strokeWidth: "1.5"
}
),
/* @__PURE__ */ jsx20(
"path",
{
d: "M14.3864 11.7422H23.4355V18.2059H14.4572L14.3864 11.7422Z",
fill: color
}
),
/* @__PURE__ */ jsx20(
"path",
{
d: "M6.05254 1.45863C5.13587 1.68192 2.11557 2.70436 2.2801 6.24176C2.2801 6.38279 2.25658 7.79304 3.25552 8.86249C3.92539 9.57937 4.87732 9.9672 6.1113 10.0142L6.12305 11.1072L5.11236 10.9661C0.764064 10.3668 1.28116 6.10073 1.30466 5.9127V5.90095C1.52795 2.09325 4.14869 1.12957 5.46493 0.894531H6.04079L6.05254 1.45863Z",
fill: color
}
),
/* @__PURE__ */ jsx20(
"path",
{
d: "M4.87695 21.1536H0.986991V16.5938C1.28079 19.2967 3.40793 20.5895 4.87695 21.1536Z",
fill: color
}
),
/* @__PURE__ */ jsx20(
"path",
{
d: "M4.12501 15.8575V15.834C4.14852 15.1994 4.3483 14.694 4.73612 14.3415C5.19445 13.9184 5.80557 13.8008 6.14638 13.7773L6.18164 18.6545C3.86646 17.7261 4.11326 15.881 4.12501 15.8575Z",
fill: color
}
),
/* @__PURE__ */ jsx20(
"path",
{
d: "M2.59717 15.575C2.89097 12.9895 5.30016 12.6134 6.13457 12.5664L6.14632 13.4243C5.7585 13.4596 5.04161 13.5771 4.50101 14.0824C4.05443 14.4938 3.80764 15.0814 3.78414 15.81C3.76063 15.998 3.5961 18.0547 6.19333 19.0419L6.20508 19.9115C5.37067 19.653 2.26811 18.4543 2.59717 15.575Z",
fill: color
}
),
/* @__PURE__ */ jsx20(
"path",
{
d: "M1.99805 11.1787C1.72775 11.3668 1.31642 11.7193 0.987364 12.3304V10.1445C1.1989 10.5088 1.52796 10.9084 1.99805 11.1787Z",
fill: color
}
),
/* @__PURE__ */ jsx20(
"path",
{
d: "M3.79584 20.2524C2.13879 19.2417 1.30439 17.7962 1.30439 15.9511C1.30439 11.8496 4.94756 11.3325 5.11209 11.309L6.13452 11.1797L6.14627 12.2256C5.25311 12.2844 2.57362 12.7075 2.25631 15.5397C1.89199 18.8303 5.54691 20.0878 6.20503 20.2876L6.2168 21.169H6.05226C5.58218 21.0515 4.689 20.7929 3.79584 20.2524Z",
fill: color
}
)
]
}
);
// src/assets/icons/VolumeControlIcon.tsx
import { forwardRef } from "react";
import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
var VolumeControlIcon = forwardRef(
({ color = "#D9D9D9", width, height }, ref) => /* @__PURE__ */ jsxs13(
"svg",
{
width: width || "30",
height: height || "24",
viewBox: "0 0 30 24",
fill: "none",
ref,
xmlns: "http://www.w3.org/2000/svg",
children: [
/* @__PURE__ */ jsx21(
"path",
{
d: "M20.75 7.1875C22.5833 9.63197 22.5833 14.368 20.75 16.8125",
stroke: color,
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round"
}
),
/* @__PURE__ */ jsx21(
"path",
{
d: "M24.875 2.375C30.3584 7.61148 30.3916 16.4235 24.875 21.625",
stroke: color,
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round"
}
),
/* @__PURE__ */ jsx21(
"path",
{
d: "M1.5 16.0683V7.93168C1.5 7.14098 2.11561 6.49999 2.875 6.49999H7.80546C8.17012 6.49999 8.51986 6.34916 8.77772 6.08066L12.9027 1.4222C13.769 0.520288 15.25 1.15906 15.25 2.43456V21.5654C15.25 22.8498 13.7512 23.4845 12.8904 22.5647L8.77975 17.9324C8.52095 17.6559 8.16587 17.5 7.79507 17.5H2.875C2.11561 17.5 1.5 16.859 1.5 16.0683V16.0683Z",
stroke: color,
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round"
}
),
/* @__PURE__ */ jsx21(
"path",
{
d: "M20.75 7.1875C22.5833 9.63197 22.5833 14.368 20.75 16.8125",
stroke: color,
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round"
}
),
/* @__PURE__ */ jsx21(
"path",
{
d: "M24.875 2.375C30.3584 7.61148 30.3916 16.4235 24.875 21.625",
stroke: color,
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round"
}
),
/* @__PURE__ */ jsx21(
"path",
{
d: "M1.5 16.0683V7.93168C1.5 7.14098 2.11561 6.49999 2.875 6.49999H7.80546C8.17012 6.49999 8.51986 6.34916 8.77772 6.08066L12.9027 1.4222C13.769 0.520288 15.25 1.15906 15.25 2.43456V21.5654C15.25 22.8498 13.7512 23.4845 12.8904 22.5647L8.77975 17.9324C8.52095 17.6559 8.16587 17.5 7.79507 17.5H2.875C2.11561 17.5 1.5 16.859 1.5 16.0683V16.0683Z",
stroke: color,
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round"
}
)
]
}
)
);
VolumeControlIcon.displayName = "VolumeControlIcon";
// src/assets/icons/VolumeMuteIcon.tsx
import { forwardRef as forwardRef2 } from "react";
import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
var VolumeMuteIcon = forwardRef2(
({ color, width, height, ...props }, ref) => /* @__PURE__ */ jsx22(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: width || "34",
height: height || "34",
viewBox: "0 0 35 35",
ref,
...props,
children: /* @__PURE__ */ jsxs14("g", { id: "high-volume", transform: "translate(6 -10)", children: [
/* @__PURE__ */ jsx22(
"g",
{
id: "Group_9972",
"data-name": "Group 9972",
transform: "translate(5.36 16.78)",
children: /* @__PURE__ */ jsx22(
"path",
{
id: "Path_1573",
"data-name": "Path 1573",
d: "M111.4,36.451l8.241-5.159c.9-.564,1.638-.156,1.638.907V51.527c0,1.063-.737,1.471-1.638.907L111.4,47.275",
transform: "translate(-111.399 -31.038)",
fill: "none"
}
)
}
),
/* @__PURE__ */ jsxs14(
"g",
{
id: "Group_9975",
"data-name": "Group 9975",
transform: "translate(0 16.059)",
children: [
/* @__PURE__ */ jsx22(
"g",
{
id: "Group_9973",
"data-name": "Group 9973",
transform: "translate(0.722 6.134)",
children: /* @__PURE__ */ jsx22(
"path",
{
id: "Path_1574",
"data-name": "Path 1574",
d: "M16.933,143.532A1.938,1.938,0,0,0,15,145.465v6.958a1.938,1.938,0,0,0,1.933,1.933h2.706V143.532Z",
transform: "translate(-15 -143.532)",
fill: "#f5cea4"
}
)
}
),
/* @__PURE__ */ jsx22("g", { id: "Group_9974", "data-name": "Group 9974", transform: "translate(0 0)", children: /* @__PURE__ */ jsx22(
"path",
{
id: "Path_1577",
"data-name": "Path 1577",
d: "M15.108,16.245a1.842,1.842,0,0,0-1.89.176L5.153,21.471h-2.5A2.657,2.657,0,0,0,0,24.125v6.958a2.657,2.657,0,0,0,2.654,2.654h2.5l8.065,5.049a2.187,2.187,0,0,0,1.15.363,1.513,1.513,0,0,0,.74-.187,1.842,1.842,0,0,0,.853-1.7V17.941A1.841,1.841,0,0,0,15.108,16.245ZM4.639,32.294H2.654a1.212,1.212,0,0,1-1.211-1.211V24.125a1.212,1.212,0,0,1,1.211-1.211H4.639Zm9.879,4.974c0,.306-.087.42-.109.432s-.165.025-.424-.137l-7.9-4.947V22.592l7.9-4.947c.259-.162.4-.149.424-.137s.109.127.109.432Z",
transform: "translate(0 -16.059)",
fill: color || "#eaeaea"
}
) })
]
}
)
] })
}
)
);
VolumeMuteIcon.displayName = "VolumeMuteIcon";
// src/components/volume-control.tsx
import { Tooltip as Tooltip2 } from "antd";
import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
var DefaultVolumeControl = ({ volume, isMuted, onVolumeChange, onMuteToggle }) => {
const handleVolumeChange = (e) => {
onVolumeChange(Number.parseFloat(e.target.value));
};
const VolumeIcon = () => {
if (isMuted || volume === 0) return /* @__PURE__ */ jsx23(VolumeMuteIcon, { height: 25 });
if (volume < 30) return /* @__PURE__ */ jsx23(VolumeControlIcon, {});
if (volume < 70) return /* @__PURE__ */ jsx23(VolumeControlIcon, {});
return /* @__PURE__ */ jsx23(VolumeControlIcon, { height: 20 });
};
return /* @__PURE__ */ jsxs15("div", { className: "udux-player-volume", children: [
/* @__PURE__ */ jsx23(
Tooltip2,
{
arrow: false,
color: "rgba(0, 0, 0, 0.75)",
title: isMuted ? "Unmute" : "Mute",
placement: "top",
children: /* @__PURE__ */ jsx23(
"button",
{
onClick: onMuteToggle,
className: "udux-player-button",
"aria-label": isMuted ? "Unmute" : "Mute",
children: /* @__PURE__ */ jsx23(VolumeIcon, {})
}
)
}
),
/* @__PURE__ */ jsxs15("div", { className: "udux-player-volume-slider-container", children: [
/* @__PURE__ */ jsx23(
"div",
{
className: "udux-player-volume-slider-fill",
style: { width: `${isMuted ? 0 : volume}%` }
}
),
/* @__PURE__ */ jsx23(
"input",
{
type: "range",
min: 0,
max: 100,
step: 1,
value: isMuted ? 0 : volume,
onChange: handleVolumeChange,
className: "udux-player-volume-slider",
"aria-label": "Volume"
}
)
] })
] });
};
// src/components/track-info.tsx
import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
var DefaultTrackInfo = ({ track }) => {
if (!track) {
return /* @__PURE__ */ jsxs16("div", { className: "udux-player-track-info", children: [
/* @__PURE__ */ jsx24("div", { className: "udux-player-cover", children: /* @__PURE__ */ jsx24(MusicNoteIcon, {}) }),
/* @__PURE__ */ jsx24("div", { className: "udux-player-track-details", children: /* @__PURE__ */ jsx24("span", { className: "udux-player-track-title", children: "No track playing" }) })
] });
}
return /* @__PURE__ */ jsxs16("div", { className: "udux-player-track-info", children: [
/* @__PURE__ */ jsx24("div", { className: "udux-player-cover", children: track.coverUrl ? /* @__PURE__ */ jsx24(
"img",
{
src: track.coverUrl || "/placeholder.svg",
alt: track.title,
style: { width: "100%", height: "100%", objectFit: "cover" }
}
) : /* @__PURE__ */ jsx24(MusicNoteIcon, {}) }),
/* @__PURE__ */ jsxs16("div", { className: "udux-player-track-details", children: [
/* @__PURE__ */ jsx24("span", { className: "udux-player-track-title", children: track.title }),
/* @__PURE__ */ jsx24("span", { className: "udux-player-track-album", children: track.album }),
/* @__PURE__ */ jsx24("span", { className: "udux-player-track-artist", children: track.artist })
] })
] });
};
var MusicNoteIcon = () => /* @__PURE__ */ jsx24("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", style: { opacity: 0.5 }, children: /* @__PURE__ */ jsx24("path", { d: "M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z" }) });
// src/components/player.tsx
import { Tooltip as Tooltip3 } from "antd";
import { motion, AnimatePresence } from "framer-motion";
import { useMediaQuery } from "react-responsive";
import { jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
var Player = () => {
const {
currentTrack,
playerRef,
dispatch,
theme,
components,
isBuffering,
isMinimized,
callbacks,
isNowPlayingView
} = useUduxPlayer();
const [dominantColors, setDominantColors] = useState4(
null
);
const isMobile = useMediaQuery({ maxWidth: 1200 });
useEffect6(() => {
if (currentTrack?.coverArtDominantColors) {
setDominantColors(currentTrack.coverArtDominantColors);
} else {
setDominantColors(null);
}
}, [currentTrack]);
const toggleLike = (e) => {
e.stopPropagation();
if (!currentTrack) return;
const newIsLiked = !currentTrack.isLiked;
dispatch({
type: "UPDATE_TRACK_IN_QUEUE",
payload: {
id: currentTrack.id,
track: { ...currentTrack, isLiked: newIsLiked }
}
});
callbacks?.onLike?.(currentTrack, newIsLiked);
};
const toggleFullscreen = (e) => {
e.stopPropagation();
dispatch({ type: "TOGGLE_FULL_SCREEN" });
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen().catch((err) => {
console.error("Failed to enter fullscreen:", err);
});
} else {
document.exitFullscreen().catch((err) => {
console.error("Failed to exit fullscreen:", err);
});
}
};
const handleNowPlayingViewToggle = (e) => {
e.stopPropagation();
if (!currentTrack) return;
dispatch({ type: "TOGGLE_NOW_PLAYING_VIEW" });
callbacks?.onViewChange?.(currentTrack, !isNowPlayingView);
};
const addToPlaylist = (e) => {
e.stopPropagation();
if (currentTrack) {
callbacks?.onAddToPlaylist?.(currentTrack);
}
};
const minimizePlayer = (e) => {
e.stopPropagation();
dispatch({ type: "MINIMIZE_PLAYER" });
callbacks?.onMinimize?.();
};
const handleContainerClick = () => {
if (isMobile && !isNowPlayingView && currentTrack) {
dispatch({ type: "TOGGLE_NOW_PLAYING_VIEW" });
callbacks?.onViewChange?.(currentTrack, true);
}
};
const TrackInfoComponent = components?.TrackInfo || DefaultTrackInfo;
const ProgressBarComponent = components?.ProgressBar || DefaultProgressBar;
const PlayerControlsComponent = components?.PlayButton ? null : DefaultPlayerControls;
const VolumeControlComponent = components?.VolumeControl || DefaultVolumeControl;
const containerStyle = {
background: dominantColors?.[0] ? `linear-gradient(180deg, ${dominantColors[0]} 0%, #000 100%)` : theme?.colors.background,
color: theme?.colors.text,
borderTop: `1px solid ${theme?.colors.playerBorder}`,
height: isMinimized ? "60px" : theme?.sizes.playerHeight,
fontFamily: theme?.fontFamily,
visibility: isMobile && isNowPlayingView ? "hidden" : "visible"
// Assert the specific literal type
};
return /* @__PURE__ */ jsx25(AnimatePresence, { children: /* @__PURE__ */ jsx25(
motion.div,
{
initial: { opacity: 0 },
animate: { opacity: 1 },
exit: { opacity: 0 },
transition: { duration: 0.3 },
children: /* @__PURE__ */ jsx25(
"div",
{
className: "udux-player-container",
style: containerStyle,
onClick: handleContainerClick,
children: /* @__PURE__ */ jsxs17("div", { className: "udux-player-inner-wrap", children: [
/* @__PURE__ */ jsxs17("div", { className: "udux-player-inner", children: [
/* @__PURE__ */ jsxs17("div", { className: "udux-player-left-section", children: [
/* @__PURE__ */ jsx25(TrackInfoComponent, { track: currentTrack }),
/* @__PURE__ */ jsxs17("div", { className: "udux-player-view-controls", children: [
/* @__PURE__ */ jsx25(
Tooltip3,
{
arrow: false,
color: "rgba(0, 0, 0, 0.75)",
title: "Now playing view",
placement: "top",
children: /* @__PURE__ */ jsx25(
"button",
{
onClick: handleNowPlayingViewToggle,
style: {
backgroundColor: "#fbba121f",
borderRadius: "3px",
padding: "2px",
cursor: "pointer",
width: "25pxpx",
minWidth: "25px",
height: "25px",
minHeight: "25px",
display: "flex",
alignItems: "center",
justifyContent: "center",
transform: `rotate(${!isNowPlayingView ? "360deg" : "180deg"})`
},
"aria-label": "Now playing view",
children: /* @__PURE__ */ jsx25(GotoNowPlayingIcon, { width: 15, height: 15 })
}
)
}
),
/* @__PURE__ */ jsx25(
Tooltip3,
{
arrow: false,
color: "rgba(0, 0, 0, 0.75)",
title: "Collapse",
placement: "top",
children: /* @__PURE__ */ jsx25(
"button",
{
onClick: minimizePlayer,
className: "udux-player-button",
"aria-label": "Minimize player",
children: /* @__PURE__ */ jsx25(MinimizePlayerIcon, { width: 25, height: 25 })
}
)
}
)
] })
] }),
/* @__PURE__ */ jsxs17("div", { className: "udux-player-controls-container", children: [
PlayerControlsComponent && /* @__PURE__ */ jsx25(PlayerControlsComponent, {}),
/* @__PURE__ */ jsx25("div", { className: "desktop-progress-bar", children: /* @__PURE__ */ jsx25(
ProgressBarComponent,
{
currentTime: currentTrack ? playerRef.current?.currentTime || 0 : 0,
duration: currentTrack ? playerRef.current?.duration || 0 : 0,
onSeek: (time) => {
dispatch({ type: "SEEK_START" });
dispatch({ type: "SEEK", payload: time });
setTimeout(() => dispatch({ type: "SEEK_END" }), 300);
},
isBuffering
}
) })
] }),
/* @__PURE__ */ jsxs17("div", { className: "udux-player-right-section", children: [
/* @__PURE__ */ jsx25(
Tooltip3,
{
arrow: false,
color: "rgba(0, 0, 0, 0.75)",
title: currentTrack?.isLiked ? "Unlike" : "Like",
placement: "top",
children: /* @__PURE__ */ jsx25(
"button",
{
onClick: toggleLike,
className: `udux-player-button ${currentTrack?.isLiked ? "udux-player-button-active" : ""}`,
"aria-label": currentTrack?.isLiked ? "Unlike" : "Like",
disabled: !currentTrack,
children: currentTrack?.isLiked ? /* @__PURE__ */ jsx25(FavoriteFilledIcon, { width: 22, height: 22 }) : /* @__PURE__ */ jsx25(LikeIcon, { width: 22, height: 22 })
}
)
}
),
/* @__PURE__ */ jsx25(
Tooltip3,
{
arrow: false,
color: "rgba(0, 0, 0, 0.75)",
title: "Full Screen",
placement: "top",
children: /* @__PURE__ */ jsx25(
"button",
{
onClick: toggleFullscreen,
className: "udux-player-button",
"aria-label": "Fullscreen",
children: /* @__PURE__ */ jsx25(ExpandOutlineIcon, { width: 22, height: 22 })
}
)
}
),
/* @__PURE__ */ jsx25(
Tooltip3,
{
arrow: false,
color: "rgba(0, 0, 0, 0.75)",
title: "Add to Playlist",
placement: "top",
children: /* @__PURE__ */ jsx25(
"button",
{
onClick: addToPlaylist,
className: "udux-player-button",
"aria-label": "Add to playlist",
disabled: !currentTrack,
children: /* @__PURE__ */ jsx25(AddSongIcon, { width: 22, height: 22 })
}
)
}
),
/* @__PURE__ */ jsx25(
VolumeControlComponent,
{
volume: playerRef.current?.volume ? playerRef.current.volume * 100 : 0,
isMuted: playerRef.current?.muted || false,
onVolumeChange: (vol) => dispatch({ type: "SET_VOLUME", payload: vol }),
onMuteToggle: () => dispatch({ type: "TOGGLE_MUTE" })
}
)
] })
] }),
/* @__PURE__ */ jsx25("div", { className: "mobile-progress-bar", children: /* @__PURE__ */ jsx25(
ProgressBarComponent,
{
currentTime: currentTrack ? playerRef.current?.currentTime || 0 : 0,
duration: currentTrack ? playerRef.current?.duration || 0 : 0,
onSeek: (time) => {
dispatch({ type: "SEEK_START" });
dispatch({ type: "SEEK", payload: time });
setTimeout(() => dispatch({ type: "SEEK_END" }), 300);
},
isBuffering
}
) })
] })
}
)
}
) });
};
// src/components/full-screen-player.tsx
import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
var FullScreenPlayer = () => {
const { currentTrack, dispatch } = useUduxPlayer();
const [dominantColors, setDominantColors] = useState5(null);
useEffect7(() => {
if (currentTrack?.coverArtDominantColors) {
setDominantColors(currentTrack?.coverArtDominantColors);
} else {
setDominantColors(null);
}
}, [currentTrack]);
const toggleFullscreen = () => {
dispatch({ type: "TOGGLE_FULL_SCREEN" });
if (document.fullscreenElement) {
document.exitFullscreen();
}
};
if (!currentTrack) return null;
return /* @__PURE__ */ jsx26(AnimatePresence2, { children: /* @__PURE__ */ jsx26(
motion2.div,
{
initial: { opacity: 0 },
animate: { opacity: 1 },
exit: { opacity: 0 },
transition: { duration: 0.3 },
children: /* @__PURE__ */ jsxs18(
"div",
{
style: {
position: "fixed",
width: "100vw",
height: "100vh",
backgroundColor: dominantColors?.[0] || "#000000",
top: 0,
left: 0,
display: "flex",
// Use Flexbox to center content
flexDirection: "column",
// Stack image and player vertically
alignItems: "center",
// Center horizontally
justifyContent: "center",
// Center vertically
zIndex: 9999
},
children: [
/* @__PURE__ */ jsx26(
"img",
{
src: currentTrack.coverUrl || "/placeholder.svg",
alt: currentTrack.title,
style: {
width: "40%",
// Adjust size as needed
height: "50%",
// Adjust size as needed
objectFit: "cover",
marginBottom: "20px",
// Space between image and Player
borderRadius: "8px",
boxShadow: "0 4px 8px rgba(0, 0, 0, 0.5)"
// Dark box shadow
}
}
),
/* @__PURE__ */ jsx26(
"div",
{
style: {
width: "100%",
// Ensure Player takes full width or as needed
textAlign: "center"
// Center Player content if needed
},
children: /* @__PURE__ */ jsx26(Player, {})
}
)
]
}
)
}
) });
};
// src/components/minimized-player.tsx
import { useEffect as useEffect8, useState as useState6 } from "react";
import { Tooltip as Tooltip4 } from "antd";
import { motion as motion3, AnimatePresence as AnimatePresence3 } from "framer-motion";
import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
var MinimizedPlayer = () => {
const [dominantColors, setDominantColors] = useState6(
null
);
const [isLiked, setIsLiked] = useState6(false);
const {
isPlaying,
togglePlay,
nextTrack,
previousTrack,
currentTrack: track,
queue,
theme,
dispatch
} = useUduxPlayer();
useEffect8(() => {
if (track?.coverArtDominantColors) {
setDominantColors(track.coverArtDominantColors);
} else {
setDominantColors(null);
}
}, [track]);
const isDisabled = queue.length === 0 || !track;
const minimizedPlayerStyle = {
position: "fixed",
bottom: 0,
left: "40px",
display: "flex",
flexDirection: "column",
alignItems: "center",
// Center horizontally
padding: "15px",
gap: "16px",
background: dominantColors?.[0] ? `linear-gradient(180deg, ${dominantColors[0]} 0%, #000 100%)` : theme?.colors.background,
color: "#fff",
width: "262px",
// Adjust width to fit screen
zIndex: 99999999999,
borderRadius: "5px"
};
const buttonStyle = {
color: theme?.colors.textSecondary,
width: theme?.sizes.controlButtonSize,
height: theme?.sizes.controlButtonSize,
display: "flex",
alignItems: "center",
justifyContent: "center",
background: "transparent",
border: "none",
cursor: "pointer",
padding: 0
};
const toggleLike = () => {
setIsLiked(!isLiked);
};
const expandPlayer = () => {
dispatch({ type: "MINIMIZE_PLAYER" });
};
return /* @__PURE__ */ jsx27(AnimatePresence3, { children: /* @__PURE__ */ jsx27(
motion3.div,
{
initial: { opacity: 0 },
animate: { opacity: 1 },
exit: { opacity: 0 },
transition: { duration: 0.3 },
children: /* @__PURE__ */ jsxs19("div", { className: "minimized-player", style: minimizedPlayerStyle, children: [
/* @__PURE__ */ jsx27(
"div",
{
className: "covert-wrap",
style: { marginBottom: "5px", borderRadius: "5px" },
children: /* @__PURE__ */ jsx27(
"img",
{
src: track?.coverUrl,
alt: "Album Art",
style: {
width: "100%",
// Larger size to match the screenshot
height: "200px",
// Larger size
borderRadius: "5px"
}
}
)
}
),
/* @__PURE__ */ jsxs19(
"div",
{
style: {
display: "flex",
flexDirection: "column",
gap: "4px",
justifyContent: "center",
alignItems: "center",
// Center track info
marginBottom: "10px"
},
children: [
/* @__PURE__ */ jsx27("p", { style: { margin: 0, fontSize: "14px", fontWeight: "bold" }, children: track?.title }),
/* @__PURE__ */ jsx27("p", { style: { margin: 0, fontSize: "12px", color: "#888" }, children: track?.artist })
]
}
),
/* @__PURE__ */ jsx27("div", { style: { width: "95%", margin: "0 auto" }, children: /* @__PURE__ */ jsx27(DefaultProgressBar, { showDisplayTime: false }) }),
/* @__PURE__ */ jsxs19("div", { className: "udux-minimized-player-controls", children: [
/* @__PURE__ */ jsx27(
"button",
{
onClick: toggleLike,
className: `udux-player-button ${isLiked ? "udux-player-button-active" : ""}`,
"aria-label": isLiked ? "Unlike" : "Like",
style: buttonStyle,
children: isLiked ? /* @__PURE__ */ jsx27(FavoriteFilledIcon, { width: 22, height: 22 }) : /* @__PURE__ */ jsx27(LikeIcon, { width: 22, height: 22 })
}
),
/* @__PURE__ */ jsx27(
Tooltip4,
{
arrow: false,
color: "rgba(0, 0, 0, 0.75)",
title: "Previous",
placement: "top",
children: /* @__PURE__ */ jsx27(
"button",
{
onClick: previousTrack,
disabled: isDisabled,
style: buttonStyle,
"aria-label": "Previous track",
children: /* @__PURE__ */ jsx27(PrevOutlineIcon, { width: 22, height: 22 })
}
)
}
),
/* @__PURE__ */ jsx27(
Tooltip4,
{
arrow: false,
color: "rgba(0, 0, 0, 0.75)",
title: isPlaying ? "Pause" : "Play",
placement: "top",
children: /* @__PURE__ */ jsx27(
"button",
{
onClick: togglePlay,
disabled: isDisabled,
style: buttonStyle,
"aria-label": isPlaying ? "Pause" : "Play",
type: "button",
children: isPlaying ? /* @__PURE__ */ jsx27(FsePlayingIcon, { width: 25, height: 25 }) : /* @__PURE__ */ jsx27(FsePausePlayIcon, { width: 22, height: 22, "aria-hidden": "true" })
}
)
}
),
/* @__PURE__ */ jsx27(
Tooltip4,
{
arrow: false,
color: "rgba(0, 0, 0, 0.75)",
title: "Next",
placement: "top",
children: /* @__PURE__ */ jsx27(
"button",
{
onClick: nextTrack,
disabled: isDisabled,
style: buttonStyle,
"aria-label": "Next track",
children: /* @__PURE__ */ jsx27(NextOutlineIcon, { width: 22, height: 22 })
}
)
}
),
/* @__PURE__ */ jsx27(
Tooltip4,
{
arrow: false,
color: "rgba(0, 0, 0, 0.75)",
title: "Collapse",
placement: "top",
children: /* @__PURE__ */ jsx27(
"button",
{
onClick: expandPlayer,
className: "udux-player-button",
"aria-label": "Minimize player",
children: /* @__PURE__ */ jsx27(MinimizePlayerIcon, { width: 22, height: 22 })
}
)
}
)
] })
] })
}
) });
};
// src/components/now-playing-view.tsx
import { useState as useState7, useRef as useRef3 } from "react";
import { X, Heart, MoreVertical, ListPlus, GripVertical } from "lucide-react";
import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
var DefaultNowPlayingView = () => {
const { queue, theme, setQueue } = useUduxPlayer();
const dragItem = useRef3(null);
const dragOverItem = useRef3(null);
const [isDragging, setIsDragging] = useState7(false);
const [draggedItemId, setDraggedItemId] = useState7(null);
const toggleFavorite = (id) => {
};
const removeSong = (id) => {
setQueue(queue.filter((song) => song.id !== id));
};
const handleDragStart = (e, index) => {
dragItem.current = index;
setIsDragging(true);
setDraggedItemId(queue[index].id);
const dragImage = new Image();
dragImage.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
e.dataTransfer.setDragImage(dragImage, 0, 0);
e.dataTransfer.effectAllowed = "move";
};
const handleDragEnter = (e, index) => {
e.preventDefault();
dragOverItem.current = index;
};
const handleDragOver = (e) => {
e.preventDefault();
e.dataTransfer.dropEffect = "move";
};
const handleDrop = (e) => {
e.preventDefault();
if (dragItem.current !== null && dragOverItem.current !== null) {
const newItems = [...queue];
const draggedItemContent = newItems[dragItem.current];
newItems.splice(dragItem.current, 1);
newItems.splice(dragOverItem.current, 0, draggedItemContent);
setQueue(newItems);
dragItem.current = null;
dragOverItem.current = null;
}
setIsDragging(false);
setDraggedItemId(null);
};
const handleDragEnd = () => {
setIsDragging(false);
setDraggedItemId(null);
dragItem.current = null;
dragOverItem.current = null;
};
return /* @__PURE__ */ jsxs20(
"div",
{
style: {
position: "fixed",
right: "20px",
bottom: 0,
backgroundColor: "#000",
color: theme.colors.text,
zIndex: 9999,
height: "500px",
width: "400px",
display: "flex",
flexDirection: "column",
paddingBottom: "100px"
},
children: [
/* @__PURE__ */ jsxs20(
"div",
{
style: {
backgroundColor: "#000",
borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
padding: "16px",
position: "sticky",
top: 0,
zIndex: 1
},
children: [
"Playing Queue: ",
queue?.length
]
}
),
/* @__PURE__ */ jsx28(
"div",
{
style: {
flex: 1,
overflowY: "auto",
scrollbarWidth: "thin",
scrollbarColor: "rgba(255, 255, 255, 0.2) transparent"
},
children: queue.map((song, index) => /* @__PURE__ */ jsxs20(
"div",
{
draggable: true,
onDragStart: (e) => handleDragStart(e, index),
onDragEnter: (e) => handleDragEnter(e, index),
onDragOver: handleDragOver,
onDragEnd: handleDragEnd,
onDrop: handleDrop,
style: {
display: "flex",
alignItems: "center",
padding: "16px",
borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
opacity: isDragging && song.id === draggedItemId ? 0.5 : 1,
backgroundColor: dragOverItem.current === index && isDragging ? "rgba(255, 255, 255, 0.05)" : "transparent",
cursor: isDragging ? song.id === draggedItemId ? "grabbing" : "default" : "default",
transition: "background-color 0.2s, opacity 0.2s"
},
children: [
/* @__PURE__ */ jsx28(
"div",
{
style: {
cursor: "grab",
marginRight: "8px",
display: "flex",
alignItems: "center",
color: "rgba(255, 255, 255, 0.5)"
},
children: /* @__PURE__ */ jsx28(GripVertical, { size: 16 })
}
),
/* @__PURE__ */ jsx28(
"button",
{
onClick: () => removeSong(song.id),
style: {
background: "none",
border: "none",
color: "#ffffff",
cursor: "pointer",
padding: "8px",
display: "flex",
alignItems: "center",
justifyContent: "center"
},
children: /* @__PURE__ */ jsx28(X, { size: 18 })
}
),
/* @__PURE__ */ jsx28(
"div",
{
style: {
width: "48px",
height: "48px",
marginLeft: "8px",
marginRight: "16px",
flexShrink: 0
},
children: /* @__PURE__ */ jsx28(
"img",
{
src: song.coverUrl || "/placeholder.svg",
alt: `${song.title} cover`,
style: {
width: "100%",
height: "100%",
objectFit: "cover",
borderRadius: "4px"
}
}
)
}
),
/* @__PURE__ */ jsxs20(
"div",
{
style: {
flex: 1,
overflow: "hidden"
},
children: [
/* @__PURE__ */ jsx28(
"div",
{
style: {
fontSize: "16px",
fontWeight: 500,
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis"
},
children: song.title
}
),
/* @__PURE__ */ jsx28(
"div",
{
style: {
fontSize: "14px",
color: "rgba(255, 255, 255, 0.7)",
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis"
},
children: song.artist
}
)
]
}
),
/* @__PURE__ */ jsxs20(
"div",
{
style: {
display: "flex",
gap: "16px",
alignItems: "center"
},
children: [
/* @__PURE__ */ jsx28(
"button",
{
style: {
background: "none",
border: "none",
color: "#ffffff",
cursor: "pointer",
padding: "8px",
display: "flex"
},
children: /* @__PURE__ */ jsx28(ListPlus, { size: 20 })
}
),
/* @__PURE__ */ jsx28(
"button",
{
onClick: () => toggleFavorite(song.id),
style: {
background: "none",
border: "none",
// color: song.isFavorite ? "#ff4081" : "#ffffff",
cursor: "pointer",
padding: "8px",
display: "flex"
},
children: /* @__PURE__ */ jsx28(Heart, { size: 20 })
}
),
/* @__PURE__ */ jsx28(
"button",
{
style: {
background: "none",
border: "none",
color: "#ffffff",
cursor: "pointer",
padding: "8px",
display: "flex"
},
children: /* @__PURE__ */ jsx28(MoreVertical, { size: 20 })
}
)
]
}
)
]
},
song.id
))
}
)
]
}
);
};
// src/components/layout/player-layout.tsx
import { Fragment as Fragment3, jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
var UduxPlayer = () => {
const {
currentTrack,
isMinimized,
components,
isFullScreen,
isNowPlayingView
} = useUduxPlayer();
const PlayerContainer = components?.PlayerContainer || DefaultPlayerContainer;
const NowPlayingComponent = components?.NowPlayingView || DefaultNowPlayingView;
if (!currentTrack) return null;
return /* @__PURE__ */ jsxs21(Fragment3, { children: [
/* @__PURE__ */ jsx29(AudioPlayer, {}),
isFullScreen && /* @__PURE__ */ jsx29(FullScreenPlayer, {}),
isNowPlayingView && /* @__PURE__ */ jsx29(NowPlayingComponent, {}),
isMinimized ? (
// Minimized Player View
/* @__PURE__ */ jsx29(MinimizedPlayer, {})
) : (
// Full Player View
/* @__PURE__ */ jsx29(Player, {})
)
] });
};
var DefaultPlayerContainer = ({ children, style }) => {
return /* @__PURE__ */ jsx29("div", { className: "udux-player-container", style, children });
};
export {
AddSongIcon,
DefaultPlayerControls,
DefaultProgressBar,
DefaultTrackInfo,
DefaultVolumeControl,
ExpandOutlineIcon,
FavoriteFilledIcon,
FsePausePlayIcon,
GotoNowPlayingIcon,
LikeIcon,
LoadingIcon,
MinimizePlayerIcon,
NextOutlineIcon,
PlayerStyleProvider,
PrevOutlineIcon,
RepeatOutlineIcon,
ShuffleOutlineIcon,
TrackPreloader,
UduxPlayer,
UduxPlayerProvider,
VolumeControlIcon,
VolumeMuteIcon,
generatePlayerStyles,
useUduxPlayer
};