add fix for widgets js code

This commit is contained in:
harold 2025-06-24 00:21:06 +05:00
parent 20e89c8da8
commit efd2cb04ee

View File

@ -80,15 +80,12 @@ function startHeartbeat(streamerID) {
function createTextWithAmount(text, amount) { function createTextWithAmount(text, amount) {
const container = document.createElement('div'); const container = document.createElement('div');
container.className = 'text-container'; container.className = 'text-container';
const textElem = document.createElement('p'); const textElem = document.createElement('p');
textElem.className = 'donation-text'; textElem.className = 'donation-text';
textElem.textContent = text; textElem.textContent = text;
const amountElem = document.createElement('div'); const amountElem = document.createElement('div');
amountElem.className = 'donation-amount'; amountElem.className = 'donation-amount';
amountElem.textContent = amount + '₽'; amountElem.textContent = amount + '₽';
container.appendChild(textElem); container.appendChild(textElem);
container.appendChild(amountElem); container.appendChild(amountElem);
return container; return container;
@ -107,7 +104,12 @@ function createTextElement(text) {
async function getDonatInfo(streamerID) { async function getDonatInfo(streamerID) {
try { try {
let response = await fetch(widgetUrl + '/widget/get-donat-for-playing/' + streamerID); let response = await fetch(widgetUrl + '/widget/get-donat-for-playing/' + streamerID);
return response.ok ? await response.json() : null; if (!response.ok) {
console.error('Failed to get donation info:', response.status);
return null;
}
const data = await response.json();
return (data && Object.keys(data).length > 0) ? data : null;
} catch (error) { } catch (error) {
console.error('Fetch error (getDonatInfo):', error); console.error('Fetch error (getDonatInfo):', error);
return null; return null;
@ -117,120 +119,69 @@ async function getDonatInfo(streamerID) {
function playAudio(url, volume, signal) { function playAudio(url, volume, signal) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
if (signal?.aborted) return reject(new DOMException('Aborted', 'AbortError')); if (signal?.aborted) return reject(new DOMException('Aborted', 'AbortError'));
const audio = new Audio(url); const audio = new Audio(url);
audio.volume = volume; audio.volume = volume;
let resolved = false;
const cleanup = () => {
resolved = true;
audio.pause();
audio.src = "";
audio.removeEventListener('ended', onEnded);
audio.removeEventListener('error', onError);
};
const onAbort = () => { const onAbort = () => {
if (!resolved) cleanup(); audio.pause();
audio.src = '';
reject(new DOMException('Aborted', 'AbortError')); reject(new DOMException('Aborted', 'AbortError'));
}; };
const onEnded = () => {
cleanup();
resolve(audio);
};
const onError = (event) => {
cleanup();
reject(event.error || new Error('Audio playback failed'));
};
signal?.addEventListener('abort', onAbort, { once: true }); signal?.addEventListener('abort', onAbort, { once: true });
audio.addEventListener('ended', onEnded, { once: true }); audio.addEventListener('ended', () => {
audio.addEventListener('error', onError, { once: true }); signal?.removeEventListener('abort', onAbort);
resolve(audio);
}, { once: true });
audio.addEventListener('error', (e) => {
signal?.removeEventListener('abort', onAbort);
reject(e.error || new Error('Audio playback failed'));
}, { once: true });
audio.play().catch(err => { audio.play().catch(err => {
cleanup(); signal?.removeEventListener('abort', onAbort);
if (err.name === 'AbortError' && signal?.aborted) { reject(err);
reject(new DOMException('Aborted', 'AbortError'));
} else {
reject(err);
}
}); });
}); });
} }
async function playSpeech(text, voiceSettings, signal) { async function playSpeech(text, voiceSettings, signal) {
if (signal?.aborted) throw new DOMException('Aborted', 'AbortError'); if (signal?.aborted) throw new DOMException('Aborted', 'AbortError');
if (!voiceSettings.voice_enabled) return null; if (!voiceSettings.voice_enabled) return;
const requestBody = { const requestBody = { text, speed: (voiceSettings.voice_speed || 'medium').toLowerCase(), scenery: voiceSettings.scenery || 'default', sound_percent: voiceSettings.voice_sound_percent || 100, min_price: voiceSettings.min_price || 0, languages: voiceSettings.languages || ['ru'] };
text: text, const response = await fetch(ttsUrl + '/generate', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(requestBody), signal });
speed: (voiceSettings.voice_speed || 'medium').toLowerCase(), if (!response.ok) throw new Error('TTS API error: ' + response.status);
scenery: voiceSettings.scenery || 'default',
sound_percent: voiceSettings.voice_sound_percent || 100,
min_price: voiceSettings.min_price || 0,
languages: voiceSettings.languages || ['ru']
};
const blob = await response.blob();
const objectUrl = URL.createObjectURL(blob);
try { try {
const response = await fetch(ttsUrl + '/generate', { await playAudio(objectUrl, (voiceSettings.voice_sound_percent || 100) / 100, signal);
method: 'POST', } finally {
headers: {'Content-Type': 'application/json'}, URL.revokeObjectURL(objectUrl);
body: JSON.stringify(requestBody),
signal: signal
});
if (!response.ok) throw new Error('TTS API error: ' + response.status);
const blob = await response.blob();
const objectUrl = URL.createObjectURL(blob);
const audio = new Audio(objectUrl);
audio.volume = (voiceSettings.voice_sound_percent || 100) / 100;
return new Promise((resolve, reject) => {
audio.addEventListener('ended', () => {
URL.revokeObjectURL(objectUrl);
resolve(audio);
}, { once: true });
audio.addEventListener('error', (err) => {
URL.revokeObjectURL(objectUrl);
reject(err);
}, { once: true });
audio.play().catch(reject);
});
} catch (error) {
throw error;
} }
} }
async function playMedia(donat, voiceSettings) { async function playMedia(donat, voiceSettings) {
const controller = new AbortController(); const controller = new AbortController();
let timeoutId; const timeoutDuration = (donat.duration || 5) * 1000;
try { const mediaPromise = (async () => {
const mediaOperation = (async () => { if (donat.play_content && donat.audio_link) {
if (donat.play_content && donat.audio_link) { await playAudio(donat.audio_link, (voiceSettings.voice_sound_percent || 100) / 100, controller.signal);
await playAudio(donat.audio_link, (voiceSettings.voice_sound_percent || 100) / 100, controller.signal); if (donat.text) await playSpeech(donat.text, voiceSettings, controller.signal);
if (donat.text) await playSpeech(donat.text, voiceSettings, controller.signal); } else if (donat.text && donat.voice_enabled) {
} else if (donat.text && donat.voice_enabled) { await playSpeech(donat.text, voiceSettings, controller.signal);
await playSpeech(donat.text, voiceSettings, controller.signal); }
} })();
})();
const timeoutPromise = new Promise((_, reject) => { const timeoutPromise = new Promise((_, reject) => {
timeoutId = setTimeout(() => { setTimeout(() => {
controller.abort(); controller.abort();
reject(new DOMException('Timeout', 'AbortError')); reject(new DOMException('Timeout', 'AbortError'));
}, (donat.duration || 5) * 1000); }, timeoutDuration);
}); });
await Promise.race([mediaOperation, timeoutPromise]); // Promise.race будет ждать либо завершения медиа, либо таймаута
} finally { // Если медиа завершится с ошибкой (например, автоплей заблокирован), она пробросится дальше.
clearTimeout(timeoutId); return Promise.race([mediaPromise, timeoutPromise]);
controller.abort();
}
} }
function clearContainer(container) { function clearContainer(container) {
@ -245,31 +196,29 @@ async function widgetView() {
const contentDiv = document.getElementById('content'); const contentDiv = document.getElementById('content');
while (true) { while (true) {
const iterationStart = Date.now();
let currentDonat = null; let currentDonat = null;
const iterationStart = Date.now();
try { try {
currentDonat = await getDonatInfo(streamerID); currentDonat = await getDonatInfo(streamerID);
if (!currentDonat || Object.keys(currentDonat).length === 0) { if (!currentDonat) {
await new Promise(r => setTimeout(r, 5000)); await new Promise(r => setTimeout(r, 5000));
continue; continue; // Переходим к следующей итерации, если донатов нет
} }
clearContainer(contentDiv); // --- Отображение ---
clearContainer(contentDiv); // Очищаем перед показом нового
if (currentDonat.image_link) { if (currentDonat.image_link) {
const img = document.createElement('img'); const img = document.createElement('img');
img.src = currentDonat.image_link; img.src = currentDonat.image_link;
contentDiv.appendChild(img); contentDiv.appendChild(img);
} }
if (currentDonat.show_name && currentDonat.donat_user) { if (currentDonat.show_name && currentDonat.donat_user) {
const userElem = document.createElement('div'); const userElem = document.createElement('div');
userElem.className = 'donation-user'; userElem.className = 'donation-user';
userElem.textContent = currentDonat.donat_user; userElem.textContent = currentDonat.donat_user;
contentDiv.appendChild(userElem); contentDiv.appendChild(userElem);
} }
if (currentDonat.show_text && currentDonat.text) { if (currentDonat.show_text && currentDonat.text) {
const textElem = currentDonat.amount ? const textElem = currentDonat.amount ?
createTextWithAmount(currentDonat.text, currentDonat.amount) : createTextWithAmount(currentDonat.text, currentDonat.amount) :
@ -277,36 +226,43 @@ async function widgetView() {
contentDiv.appendChild(textElem); contentDiv.appendChild(textElem);
} }
const voiceSettings = { // --- Воспроизведение ---
voice_speed: currentDonat.voice_speed, const voiceSettings = { voice_speed: currentDonat.voice_speed, scenery: currentDonat.scenery, voice_sound_percent: currentDonat.voice_sound_percent, min_price: currentDonat.min_price, languages: currentDonat.languages, voice_enabled: currentDonat.voice_enabled };
scenery: currentDonat.scenery,
voice_sound_percent: currentDonat.voice_sound_percent,
min_price: currentDonat.min_price,
languages: currentDonat.languages,
voice_enabled: currentDonat.voice_enabled
};
await playMedia(currentDonat, voiceSettings); await playMedia(currentDonat, voiceSettings);
if (currentDonat.order_id) {
await fetch(widgetUrl + '/widget/donat/viewed', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({order_id: currentDonat.order_id}),
});
}
} catch (error) { } catch (error) {
console.error('Ошибка обработки доната:', error); // Логируем ошибку, но не прерываем логику ожидания и очистки
} console.error('Ошибка обработки доната:', error.name === 'AbortError' ? 'Таймаут или блокировка звука' : error);
} finally {
// --- Очистка и завершение ---
// Этот блок выполнится ВСЕГДА: и после успеха, и после ошибки.
if (currentDonat) {
// Отмечаем донат как просмотренный
if (currentDonat.order_id) {
try {
await fetch(widgetUrl + '/widget/donat/viewed', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({order_id: currentDonat.order_id}),
});
} catch (e) {
console.error('Не удалось отметить донат как просмотренный:', e);
}
}
// Очистка контента после отображения // Ждем оставшееся время до конца показа доната
const elapsedMs = Date.now() - iterationStart; const elapsedMs = Date.now() - iterationStart;
const remainingTimeMs = Math.max(0, (currentDonat?.duration || 5) * 1000 - elapsedMs); const durationMs = (currentDonat.duration || 5) * 1000;
const remainingTimeMs = Math.max(0, durationMs - elapsedMs);
if (remainingTimeMs > 0) { if (remainingTimeMs > 0) {
await new Promise(r => setTimeout(r, remainingTimeMs)); await new Promise(r => setTimeout(r, remainingTimeMs));
}
// Гарантированно очищаем контейнер
clearContainer(contentDiv);
}
} }
clearContainer(contentDiv); // Ключевое изменение здесь
} }
} }