// App.jsx import React, { useState, useRef, useEffect, useCallback } from 'react'; import ReactDOM from 'react-dom/client'; // Asset Loading System class AssetLoader { constructor() { this.cache = new Map(); this.loadingPromises = new Map(); this.loadingErrors = new Map(); } async preloadImage(url) { if (this.cache.has(url)) { return this.cache.get(url); } if (this.loadingPromises.has(url)) { return this.loadingPromises.get(url); } const loadPromise = new Promise((resolve, reject) => { const img = new Image(); img.onload = () => { this.cache.set(url, img); this.loadingPromises.delete(url); resolve(img); }; img.onerror = (error) => { this.loadingErrors.set(url, error); this.loadingPromises.delete(url); reject(error); }; img.src = url; }); this.loadingPromises.set(url, loadPromise); return loadPromise; } async preloadCharacterAssets(character, expression) { const assets = ASSETS.characters[character]?.[expression]; if (!assets) { throw new Error(`Invalid character or expression: ${character}_${expression}`); } const promises = Object.values(assets).map(url => this.preloadImage(url)); return Promise.all(promises); } async preloadAllAssets() { const promises = []; // Preload backgrounds Object.values(ASSETS.backgrounds).forEach(url => { promises.push(this.preloadImage(url)); }); // Preload character assets Object.entries(ASSETS.characters).forEach(([char, expressions]) => { Object.keys(expressions).forEach(expr => { promises.push(this.preloadCharacterAssets(char, expr)); }); }); // Preload UI assets Object.values(ASSETS.ui).forEach(url => { promises.push(this.preloadImage(url)); }); return Promise.all(promises); } getLoadedImage(url) { return this.cache.get(url); } isLoaded(url) { return this.cache.has(url); } hasError(url) { return this.loadingErrors.has(url); } getError(url) { return this.loadingErrors.get(url); } } // Create a single instance of AssetLoader const globalAssetLoader = new AssetLoader(); const ASSETS = { backgrounds: { justMonika: 'https://play.rosebud.ai/assets/justMonika_bg.png?E61J', mainBg: 'https://play.rosebud.ai/assets/bg-main.png?Xrrp' }, characters: { monika: { '1': { left: 'https://play.rosebud.ai/assets/monika_1l.png?fhp9', right: 'https://play.rosebud.ai/assets/monika_1r.png?9sq5', top: 'https://play.rosebud.ai/assets/monika_a.png?ETdg' } }, sayori: { '1': { left: 'https://play.rosebud.ai/assets/sayori_1l.png?SwBq', right: 'https://play.rosebud.ai/assets/sayori_1r.png?HYbe', top: 'https://play.rosebud.ai/assets/sayori_a.png?T27s' } }, natsuki: { '1': { left: 'https://play.rosebud.ai/assets/natsuki_1l.png?ygzA', right: 'https://play.rosebud.ai/assets/natsuki_1r.png?glSA', top: 'https://play.rosebud.ai/assets/natsuki_1t.png?v2NN' } }, yuri: { '1': { left: 'https://play.rosebud.ai/assets/yuri_1l.png?5VjN', right: 'https://play.rosebud.ai/assets/yuri_1r.png?sKDz', top: 'https://play.rosebud.ai/assets/yuri_a.png?CoS7' } } }, ui: { dialogueBox: 'https://play.rosebud.ai/assets/dialogue_box_748x135.png?Vq2A' } }; // LOCAL_DATA: Global variable to store application data // This array serves as the initial data structure for the application // and can be used as a fallback when localStorage is not available // Template for testing character movement sequences const LOCAL_DATA = [ { "id": 1, "type": "background", "background": "https://play.rosebud.ai/assets/club.png?Gc50" }, { "id": 7, "type": "action", "actions": [ { "type": "enter", "character": "yuri", "position": "middle" } ] }, { "id": 8, "type": "dialogue", "speaker": "Yuri", "line": "Welcome to the Literature Club. It's a pleasure meeting you." }, { "id": 9, "type": "dialogue", "speaker": "Yuri", "line": "Sayori always says nice things about you." }, { "id": 10, "type": "action", "actions": [ { "type": "enter", "character": "natsuki", "position": "middle-right" }, { "type": "move", "character": "yuri", "position": "middle-left" } ] }, { "id": 11, "type": "dialogue", "speaker": "Natsuki", "line": "Seriously? You brought a boy?" }, { "id": 12, "type": "dialogue", "speaker": "Natsuki", "line": "Way to kill the atmosphere." }, { "id": 13, "type": "action", "actions": [ { "type": "enter", "character": "monika", "position": "left" }, { "type": "move", "character": "natsuki", "position": "middle" }, { "type": "move", "character": "yuri", "position": "right" } ] }, { "id": 14, "type": "dialogue", "speaker": "Monika", "line": "Ah, welcome! What a nice surprise!" }, { "id": 15, "type": "dialogue", "speaker": "Monika", "line": "Welcome to the club!" }, { "id": 16, "type": "dialogue", "speaker": "Internal", "line": "All words escape me in this situation." }, { "id": 17, "type": "dialogue", "speaker": "Internal", "line": "This club..." }, { "id": 18, "type": "dialogue", "speaker": "Internal", "line": "...is full of incredibly cute girls!!" }, { "id": 19, "type": "action", "actions": [ { "type": "exit", "character": "monika" }, { "type": "exit", "character": "yuri" }, { "type": "move", "character": "natsuki", "position": "middle" } ] }, { "id": 20, "type": "dialogue", "speaker": "Natsuki", "line": "What are you looking at?" }, { "id": 21, "type": "dialogue", "speaker": "Natsuki", "line": "If you want to say something, say it." }, { "id": 22, "type": "dialogue", "speaker": "Internal", "line": "S-Sorry..." }, { "id": 23, "type": "action", "actions": [ { "type": "enter", "character": "yuri", "position": "right" } ] }, { "id": 24, "type": "dialogue", "speaker": "Yuri", "line": "Natsuki..." }, { "id": 25, "type": "dialogue", "speaker": "Natsuki", "line": "Hmph." }, { "id": 26, "type": "dialogue", "speaker": "Internal", "line": "The girl with the sour attitude, whose name is apparently Natsuki, is one I don't recognize." }, { "id": 27, "type": "dialogue", "speaker": "Internal", "line": "Her small figure makes me think she's probably a first-year." }, { "id": 28, "type": "dialogue", "speaker": "Internal", "line": "She is also the one who made cupcakes, according to Sayori." }, { "id": 29, "type": "action", "actions": [ { "type": "enter", "character": "sayori", "position": "left" }, ] }, { "id": 30, "type": "dialogue", "speaker": "Sayori", "line": "You can just ignore her when she gets moody~" }, { "id": 31, "type": "dialogue", "speaker": "Internal", "line": "Sayori says that quietly into my ear, then turns back toward the other girls." }, { "id": 32, "type": "dialogue", "speaker": "Sayori", "line": "Anyway! This is Natsuki, always full of energy." }, { "id": 33, "type": "dialogue", "speaker": "Sayori", "line": "And this is Yuri, the smartest in the club!" }, { "id": 34, "type": "dialogue", "speaker": "Yuri", "line": "D-Don't say things like that..." }, { "id": 35, "type": "dialogue", "speaker": "Internal", "line": "Yuri, who appears comparably more mature and timid, seems to have a hard time keeping up with people like Sayori and Natsuki." }, { "id": 36, "type": "dialogue", "speaker": "Internal", "line": "Ah... Well, it's nice to meet both of you." }, { "id": 37, "type": "action", "actions": [ { "type": "exit", "character": "yuri" }, { "type": "exit", "character": "natsuki" } ] }, { "id": 38, "type": "dialogue", "speaker": "Sayori", "line": "And it sounds like you already know Monika, is that right?" }, { "id": 39, "type": "action", "actions": [ { "type": "enter", "character": "monika", "position": "middle" } ] }, { "id": 40, "type": "dialogue", "speaker": "Monika", "line": "That's right." }, { "id": 41, "type": "dialogue", "speaker": "Monika", "line": "It's great to see you again." }, { "id": 42, "type": "dialogue", "speaker": "Internal", "line": "Monika smiles sweetly." }, { "id": 43, "type": "dialogue", "speaker": "Internal", "line": "We do know each other - well, we rarely talked, but we were in the same class last year." }, { "id": 44, "type": "dialogue", "speaker": "Internal", "line": "Monika was probably the most popular girl in class - smart, beautiful, athletic." }, { "id": 45, "type": "dialogue", "speaker": "Internal", "line": "Basically, completely out of my league." }, { "id": 46, "type": "dialogue", "speaker": "Internal", "line": "So, having her smile at me so genuinely feels a little..." }, { "id": 47, "type": "dialogue", "speaker": "Internal", "line": "Y-You too, Monika." }, { "id": 48, "type": "action", "actions": [ { "type": "exit", "character": "monika" } ] } ]; /** * Represents a single line of dialogue in a scene */ // Base class for all scene events class SceneEvent { constructor({ id, type }) { this.id = id; this.type = type; } } class BackgroundEvent extends SceneEvent { constructor({ id, background }) { super({ id, type: 'background' }); this.background = background; } toString() { return `[Background: ${this.background}]`; } } class ActionEvent extends SceneEvent { constructor({ id, actions }) { super({ id, type: 'action' }); this.actions = actions.map(action => ({ type: action.type, character: action.character, position: action.position })); } toString() { return `[Action: ${this.actions.map(a => `${a.type} ${a.character} ${a.position || ''}`).join(', ')}]`; } } class DialogueLine extends SceneEvent { constructor({ id, speaker, line }) { super({ id, type: 'dialogue' }); this.speaker = speaker; this.line = line; } toString() { return `${this.speaker}: ${this.line}`; } } /** * Represents a complete scene with multiple dialogue lines */ class DialogueScene { constructor(events = []) { this.events = events.map(event => { switch (event.type) { case 'background': return new BackgroundEvent(event); case 'action': return new ActionEvent(event); case 'dialogue': return new DialogueLine(event); default: console.warn(`Unknown event type: ${event.type}`); return null; } }).filter(Boolean); } addEvent(event) { const dialogueEvent = event instanceof DialogueLine ? event : new DialogueLine(event); this.events.push(dialogueEvent); } getEventById(id) { return this.events.find(event => event.id === id); } getEventsByType(type) { return this.events.filter(event => event.type === type); } getEventsBySpeaker(speaker) { return this.events.filter(event => event.type === 'dialogue' && event.speaker === speaker); } static fromJSON(jsonData) { if (!Array.isArray(jsonData)) { throw new Error('Invalid scene data format'); } // Validate and transform the JSON data const validatedData = jsonData.map(event => { if (!event.id || !event.type) { throw new Error(`Invalid event format: Missing id or type`); } switch (event.type) { case 'background': if (!event.background) { throw new Error(`Invalid background event: Missing background URL`); } return event; case 'action': if (!Array.isArray(event.actions)) { throw new Error(`Invalid action event: Actions must be an array`); } event.actions.forEach(action => { if (!action.type || !action.character) { throw new Error(`Invalid action: Missing type or character`); } }); return event; case 'dialogue': if (!event.speaker || !event.line) { throw new Error(`Invalid dialogue event: Missing speaker or line`); } return event; default: throw new Error(`Unknown event type: ${event.type}`); } }); return new DialogueScene(validatedData); } } // Global store for application data let GLOBAL_STORE = { currentScene: null, }; // App Settings const APP_SETTINGS = { controlVariables: { useLocalStorage: false, clearLocalStorage: false, testingFetchSpeech: false, useLocalSceneData: true, // Toggle between local data and JSON fetch useSpeechForDialogue: false, // Toggle speech generation for dialogue }, storage: { key: 'myRosebudApp' }, api: { baseUrl: 'http://localhost:3000' }, paths: { sceneData: 'https://play.rosebud.ai/assets/scene_justMonika_lines.json?Cpdd' }, sceneId: 'scene_justMonika' }; // Initialize application data const initializeAppData = async () => { try { console.group('Initializing App Data'); let sceneData; if (APP_SETTINGS.controlVariables.useLocalSceneData) { console.log('Using local scene data'); sceneData = { scene: LOCAL_DATA }; } else { console.log('Fetching remote scene data'); const response = await fetch(APP_SETTINGS.paths.sceneData); if (!response.ok) { throw new Error(`Failed to fetch scene data: ${response.statusText}`); } sceneData = await response.json(); } GLOBAL_STORE.currentScene = new DialogueScene(sceneData.scene); console.log('Scene data loaded:', GLOBAL_STORE.currentScene); console.groupEnd(); return GLOBAL_STORE.currentScene; } catch (error) { console.error('Error initializing app data:', error); console.groupEnd(); throw error; } }; // Local Storage Utilities const clearLocalStorageData = () => { if (APP_SETTINGS.controlVariables.clearLocalStorage) { try { localStorage.clear(); console.log('Local storage cleared successfully'); APP_SETTINGS.controlVariables.clearLocalStorage = false; return true; } catch (error) { console.error('Error clearing localStorage:', error); return false; } } return false; }; const useLocalStorage = (key, initialValue = LOCAL_DATA) => { const [storedValue, setStoredValue] = useState(() => { if (!APP_SETTINGS.controlVariables.useLocalStorage || APP_SETTINGS.controlVariables.clearLocalStorage) { return LOCAL_DATA.length > 0 ? LOCAL_DATA : (typeof initialValue === 'function' ? initialValue() : initialValue); } try { const item = localStorage.getItem(key); if (!item || clearLocalStorageData()) { return LOCAL_DATA.length > 0 ? LOCAL_DATA : (typeof initialValue === 'function' ? initialValue() : initialValue); } return JSON.parse(item); } catch (error) { console.error('Error reading from localStorage:', error); return typeof initialValue === 'function' ? initialValue() : initialValue; } }); const setValue = useCallback((value) => { try { const valueToStore = value instanceof Function ? value(storedValue) : value; setStoredValue(valueToStore); if (APP_SETTINGS.controlVariables.useLocalStorage) { localStorage.setItem(key, JSON.stringify(valueToStore)); } } catch (error) { console.error('Error saving to localStorage:', error); } }, [key, storedValue]); return [storedValue, setValue]; }; // Styles const styles = ` /* Character Position Classes */ /* Padding areas - empty by design */ .character-position-padding-left { grid-area: padding-left; visibility: hidden; } .character-position-padding-right { grid-area: padding-right; visibility: hidden; } /* Character positions */ .character-position-left { grid-area: left; justify-self: center; } .character-position-middle-left { grid-area: middle-left; justify-self: center; } .character-position-middle { grid-area: middle; justify-self: center; } .character-position-middle-right { grid-area: middle-right; justify-self: center; } .character-position-right { grid-area: right; justify-self: center; } /* Animations */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; display: none; } } .character-sprite-container { will-change: opacity, transform; transition: transform 0.3s ease-out; } .character-fade-in { animation: fadeIn 0.3s ease-out forwards; opacity: 0; } .character-fade-out { animation: fadeOut 0.2s ease-out forwards; pointer-events: none; } /* Scene Panel Styles */ .scene-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; z-index: 2; } .character-container { position: absolute; width: 100vw; height: 100vh; left: 0; top: 0; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-areas: "padding-left left middle-left middle middle-right right padding-right"; } .character-sprite-container { position: relative; height: 100%; width: 20vw; /* Each container takes up 20% of viewport width */ min-width: 200px; /* Minimum width to prevent too small containers */ max-width: 400px; /* Maximum width to prevent too large containers */ margin: 0 auto; /* Center the container in its grid area */ display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease-out; } .dialogue-container { position: relative; width: 100%; max-width: 800px; margin-bottom: 40px; z-index: 3; } /* Base Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Character Styles */ /* Removing duplicate style declaration */ /* Original declaration moved to line 847 */ .character-sprite { height: 100%; width: auto; object-fit: contain; max-height: 100vh; pointer-events: none; user-select: none; } .character-sprite-left, .character-sprite-right, .character-sprite-top { position: absolute; } * { margin: 0; padding: 0; box-sizing: border-box; } /* Typography */ .text-base { font-size: 16px; line-height: 1.5; } .text-lg { font-size: 18px; line-height: 1.6; } .text-white { color: #ffffff; } .font-bold { font-weight: 700; } .text-shadow { text-shadow: 2px 2px 2px rgba(0,0,0,0.5); } /* Layout */ .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-center { justify-content: center; } .gap-2 { gap: 8px; } .gap-4 { gap: 15px; } /* Containers */ .root-container { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; font-family: Arial, sans-serif; position: relative; overflow: hidden; } /* Positioning */ .relative { position: relative; } .absolute { position: absolute; } .z-1 { z-index: 1; } .z-2 { z-index: 2; } /* Components */ .dialogue-box { width: 560px; height: 120px; background-image: url(https://play.rosebud.ai/assets/dialogue_box_748x135.png?Vq2A); background-size: contain; background-repeat: no-repeat; background-position: center; position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; justify-content: center; padding: 15px 30px; z-index: 3; } .dialogue-next-button { position: absolute; bottom: 0px; right: 0px; width: 20px; height: 20px; background: transparent; border: none; cursor: pointer; z-index: 3; } .dialogue-next-button:hover { background: rgba(255, 255, 255, 0.1); } .dialogue-content { display: flex; flex-direction: column; gap: 8px; } .dialogue-speaker { font-weight: bold; color: #ffffff; font-size: 18px; text-shadow: 2px 2px 2px rgba(0,0,0,0.5); } .dialogue-text { color: #ffffff; font-size: 16px; line-height: 1.5; text-shadow: 1px 1px 1px rgba(0,0,0,0.5); } /* Background */ .background-overlay { position: absolute; inset: 0; background-image: url(https://play.rosebud.ai/assets/justMonika_bg.png?E61J); background-repeat: no-repeat; background-position: center; background-size: cover; opacity: 0.95; z-index: 1; } /* Controls */ .button { padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; font-size: 16px; } .button-primary { background-color: #4a90e2; color: white; } .button-primary:hover:not(:disabled) { background-color: #357abd; } .button:disabled { background-color: #cccccc; cursor: not-allowed; } /* Status and Error Messages */ .status-text { color: #666; font-size: 14px; } .error-text { color: #ff4444; font-size: 14px; } /* Content Layout */ .content-container { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; } .content-container > * { pointer-events: auto; } `; // Insert styles into document const styleSheet = document.createElement("style"); styleSheet.innerText = styles; document.head.appendChild(styleSheet); // ================================================== // ChatAIClass Definition // ================================================== // This module provides a class, ChatAIClass, which uses a ChatManager (provided externally) // to conduct a conversation with an AI. The AI's behavior is defined by a description string, // and the ChatAIClass offers a simple getResponse method to get AI responses. // // This is AI is powered by Rosebud AI and is Rosebud's method to add in-game AI features. // // IMPORTANT NOTE: // - Do not assume how ChatManager works beyond what is described here. // - We only know that: // 1. ChatManager is constructed by passing in a description string. // 2. We can add messages by calling chatManager.addMessage('user', prompt). // 3. We can get an AI-generated response by calling chatManager.getCharacterResponse('chat'). // - Any other assumptions about ChatManager internals or methods should not be made. // ////////////////////////////////////////////////////////////// // Defines how the AI should behave. This should change to match the project. const AI_BEHAVIOR_DESCRIPTION = ` You are an advanced and knowledgeable AI system capable of assisting users with a wide range of topics. You should respond concisely and helpfully, ensuring that the information you provide is accurate, clear, and context-aware. `; /** * ChatAIClass: * * This class is intended for non-technical users who want to interact with an AI system. * * Usage: * 1. Create an instance of ChatAIClass: * const chat = new ChatAIClass(); * * 2. Call getResponse(prompt) to get a response from the AI: * const answer = await chat.getResponse("What is quantum computing?"); * console.log(answer); */ export class ChatAIClass { constructor() { // Directly create a new ChatManager instance with the AI behavior description. // We assume ChatManager is available globally or imported from elsewhere. this.chatManager = new ChatManager(AI_BEHAVIOR_DESCRIPTION); } /** * Generates a response from the AI based on the given prompt. * * @param {string} prompt - The user's input or question. * @returns {Promise} - The AI's response as text. */ async getResponse(prompt) { // Add the user's message to the conversation. this.chatManager.addMessage('user', prompt); // Ask the ChatManager for the AI's response and return it. const response = await this.chatManager.getCharacterResponse('chat'); // Add the AI's message to the conversation so it has memory of it. this.chatManager.addMessage('assistant', response); return response; } } // ================================================== // Main App Component with Three.js Scene // ================================================== const Background = () => (

); class TextToSpeechService { constructor(baseUrl = APP_SETTINGS.api.baseUrl) { this.baseUrl = baseUrl; this.endpoints = { createSpeech: '/api/create-speech', fetchSpeech: '/api/speech' }; this.defaultVoiceId = "1SM7GgM6IMuvQlz2BwM3"; this.defaultModelId = "eleven_multilingual_v2"; } /** * Generates speech from text using the API * @param {string} text - The text to convert to speech * @param {string} voiceId - Optional voice ID * @param {string} modelId - Optional model ID * @returns {Promise} - Audio blob */ async generateSpeech(text, voiceId = this.defaultVoiceId, modelId = this.defaultModelId) { console.group('TextToSpeech - Generate Speech'); try { if (!text || typeof text !== 'string') { throw new Error('Invalid text input'); } const requestData = { text, voiceId, modelId }; console.log('Request Data:', requestData); console.log('Endpoint:', `${this.baseUrl}${this.endpoints.createSpeech}`); const response = await fetch(`${this.baseUrl}${this.endpoints.createSpeech}`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(requestData) }); if (!response.ok) { const errorData = await response.text(); console.error('API Error Response:', { status: response.status, statusText: response.statusText, errorData }); throw new Error(`API Error (${response.status}): ${errorData}`); } const blob = await response.blob(); console.log('Response received:', { size: blob.size, type: blob.type }); if (!blob || blob.size === 0) { throw new Error('Received empty audio data'); } return blob; } catch (error) { console.error('Generation Error:', error); throw new Error(`Speech generation failed: ${error.message}`); } finally { console.groupEnd(); } } /** * Fetches speech audio for a specific scene, character, and line * @param {string} sceneId - The ID of the scene * @param {string} character - The name of the character * @param {number} lineId - The ID of the line * @returns {Promise} - Audio blob */ async fetchSpeech(sceneId, character, lineId) { console.group('TextToSpeech - Fetch Speech'); try { if (!sceneId || !character || !lineId) { throw new Error('sceneId, character, and lineId are required'); } const params = new URLSearchParams({ sceneId, character, lineId: lineId.toString() }); console.log('Request Parameters:', { sceneId, character, lineId }); console.log('Endpoint:', `${this.baseUrl}${this.endpoints.fetchSpeech}?${params}`); const response = await fetch(`${this.baseUrl}${this.endpoints.fetchSpeech}?${params}`, { method: 'GET' }); if (!response.ok) { if (response.status === 404) { console.error('404 Error: Audio file not found'); throw new Error('Audio file not found'); } const errorData = await response.text(); console.error('API Error Response:', { status: response.status, statusText: response.statusText, errorData }); throw new Error(`API Error (${response.status}): ${errorData}`); } const blob = await response.blob(); console.log('Response received:', { size: blob.size, type: blob.type }); if (!blob || blob.size === 0) { throw new Error('Received empty audio data'); } return blob; } catch (error) { console.error('Fetch Error:', error); throw new Error(`Speech fetch failed: ${error.message}`); } finally { console.groupEnd(); } } /** * Creates a URL for an audio blob * @param {Blob} audioBlob - The audio blob to create a URL for * @returns {string} - The created URL */ createAudioUrl(audioBlob) { return URL.createObjectURL(audioBlob); } /** * Revokes a previously created audio URL * @param {string} url - The URL to revoke */ revokeAudioUrl(url) { if (url) { URL.revokeObjectURL(url); } } } const AudioPlayer = ({ audioUrl, autoPlay = false, onEnded = () => {}, audioQueue = [] }) => { const audioRef = useRef(null); const queueRef = useRef(audioQueue); const playAudio = useCallback(() => { if (audioRef.current && !audioRef.current.playing) { audioRef.current.play().catch(error => { console.error('Error playing audio:', error); }); } }, []); const playNextInQueue = useCallback(() => { if (queueRef.current.length > 0) { const nextAudio = queueRef.current.shift(); audioRef.current.src = nextAudio; playAudio(); } }, [playAudio]); useEffect(() => { if (audioRef.current) { audioRef.current.src = audioUrl; if (autoPlay) { playAudio(); } } }, [audioUrl, autoPlay, playAudio]); useEffect(() => { const audio = audioRef.current; if (audio) { const handleEnded = () => { onEnded(); playNextInQueue(); }; audio.addEventListener('ended', handleEnded); return () => audio.removeEventListener('ended', handleEnded); } }, [onEnded, playNextInQueue]); return