ale/stream-radio
0
Fork 0
Código Incidencias Pull Requests Acciones Paquetes Proyectos Lanzamientos Wiki Actividad

waveform AI changes

Explorar el Código 
Signed-off-by: ale <ale@manalejandro.com>
Este commit está contenido en:
ale
2025-06-04 20:27:21 +02:00
padre 7c9dc48b82
commit 3533003456
Se han modificado 1 ficheros con 49 adiciones y 35 borrados
Descargar archivo de parche Descargar archivo de diferencias Expandir todos los archivos Contraer todos los archivos

84
src/WaveForm.jsx
Ver fichero

@@ -11,25 +11,30 @@ const BLUE_SHADES = [
// Fallback animation for Tizen browsers without Web Audio API
const animateFallbackBars = (canvas, ctx, fallbackData) => {
const HEIGHT = canvas.height;
const barCount = 32; // Further reduced for Tizen TV performance
const barWidth = Math.max(4, Math.floor(canvas.width / barCount)); // Minimum 4px width
const barCount = 64; // Increased for more detail
const barWidth = Math.max(6, Math.floor(canvas.width / barCount)); // Minimum 6px width
const centerY = HEIGHT / 2; // Center point for bars
let x = 0;
// Set line width for better visibility on TV
ctx.lineWidth = 1;
for (let i = 0; i < barCount; i++) {
const barHeight = Math.max(2, fallbackData[i] * HEIGHT * 0.6); // Use 60% of height for better proportion
// Make bars taller and more visible
const barHeight = Math.max(20, fallbackData[i] * HEIGHT * 0.4); // Minimum 20px height, use 40% of screen
const blueShade = Math.min(3, Math.floor(fallbackData[i] * 4));
// Fill the bar with higher opacity
ctx.fillStyle = BLUE_SHADES[blueShade] || BLUE_SHADES[0];
ctx.fillRect(x + 1, HEIGHT - barHeight, barWidth - 2, barHeight);
// Create gradient for better visibility
const gradient = ctx.createLinearGradient(0, centerY - barHeight/2, 0, centerY + barHeight/2);
gradient.addColorStop(0, BLUE_SHADES[0]);
gradient.addColorStop(0.5, BLUE_SHADES[blueShade] || BLUE_SHADES[0]);
gradient.addColorStop(1, BLUE_SHADES[3]);
// Add subtle glow effect instead of stroke
ctx.shadowColor = "rgba(255,255,255,0.5)";
ctx.shadowBlur = 3;
ctx.fillRect(x + 1, HEIGHT - barHeight, barWidth - 2, barHeight);
ctx.fillStyle = gradient;
// Draw bars from center, extending up and down
ctx.fillRect(x + 2, centerY - barHeight/2, barWidth - 4, barHeight);
// Add glow effect
ctx.shadowColor = "rgba(255,255,255,0.8)";
ctx.shadowBlur = 5;
ctx.fillRect(x + 2, centerY - barHeight/2, barWidth - 4, barHeight);
ctx.shadowBlur = 0;
x += barWidth;
@@ -41,23 +46,32 @@ const animateBars = (analyser, canvas, ctx, dataArray, bufferLength) => {
try {
analyser.getByteFrequencyData(dataArray);
const HEIGHT = canvas.height;
const barCount = Math.min(128, bufferLength); // Limit bars for TV performance
const barWidth = Math.max(3, Math.floor(canvas.width / barCount));
const barCount = Math.min(64, bufferLength); // Reduced for better visibility
const barWidth = Math.max(6, Math.floor(canvas.width / barCount));
const step = Math.floor(bufferLength / barCount);
const centerY = HEIGHT / 2;
let x = 0;
ctx.lineWidth = 1;
for (let i = 0; i < barCount; i++) {
const dataIndex = i * step;
const barHeight = Math.max(2, (dataArray[dataIndex] / 255) * HEIGHT * 0.6); // Use 60% of height
const barHeight = Math.max(20, (dataArray[dataIndex] / 255) * HEIGHT * 0.4); // Minimum 20px, use 40% of screen
const blueShade = Math.min(3, Math.floor((dataArray[dataIndex] / 255) * 4));
// Fill the bar with glow effect
ctx.fillStyle = BLUE_SHADES[blueShade] || BLUE_SHADES[0];
ctx.shadowColor = "rgba(255,255,255,0.5)";
ctx.shadowBlur = 2;
ctx.fillRect(x + 1, HEIGHT - barHeight, barWidth - 2, barHeight);
// Create gradient for better visibility
const gradient = ctx.createLinearGradient(0, centerY - barHeight/2, 0, centerY + barHeight/2);
gradient.addColorStop(0, BLUE_SHADES[0]);
gradient.addColorStop(0.5, BLUE_SHADES[blueShade] || BLUE_SHADES[0]);
gradient.addColorStop(1, BLUE_SHADES[3]);
ctx.fillStyle = gradient;
// Draw bars from center, extending up and down
ctx.fillRect(x + 2, centerY - barHeight/2, barWidth - 4, barHeight);
// Add glow effect
ctx.shadowColor = "rgba(255,255,255,0.8)";
ctx.shadowBlur = 5;
ctx.fillRect(x + 2, centerY - barHeight/2, barWidth - 4, barHeight);
ctx.shadowBlur = 0;
x += barWidth;
@@ -78,7 +92,7 @@ const WaveForm = ({ analyzerData }) => {
// Initialize fallback data
useEffect(() => {
const initialData = Array(32).fill(0).map(() => Math.random() * 0.5 + 0.3); // Higher initial values
const initialData = Array(64).fill(0).map(() => Math.random() * 0.7 + 0.3); // Higher initial values, more bars
setFallbackData(initialData);
}, []);
@@ -134,18 +148,18 @@ const WaveForm = ({ analyzerData }) => {
}
};
// Start fallback data animation if needed
if (useFallback || !hasValidAnalyzer) {
fallbackIntervalRef.current = setInterval(() => {
setFallbackData(prevData =>
prevData.map(val => {
const target = Math.random() * 0.7 + 0.3; // Higher amplitude for visibility
const smoothing = 0.2; // Faster transitions
return val + (target - val) * smoothing;
})
);
}, 80); // Faster updates for more responsive animation
}
// Always start fallback animation for immediate visibility
fallbackIntervalRef.current = setInterval(() => {
setFallbackData(prevData =>
prevData.map((val, index) => {
// Create wave-like pattern with more dramatic changes
const wave = Math.sin((Date.now() * 0.005) + (index * 0.2)) * 0.3;
const target = Math.random() * 0.6 + 0.4 + wave; // Higher amplitude with wave effect
const smoothing = 0.3; // Faster transitions
return Math.max(0.2, Math.min(1, val + (target - val) * smoothing));
})
);
}, 50); // Much faster updates for smoother animation
render();