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:22:24 +02:00
padre c1302b4fb5
commit 7c9dc48b82
Se han modificado 1 ficheros con 27 adiciones y 25 borrados
Descargar archivo de parche Descargar archivo de diferencias Expandir todos los archivos Contraer todos los archivos

52
src/WaveForm.jsx
Ver fichero

@@ -2,10 +2,10 @@ import { useRef, useEffect, useState } from "react";
import useSize from "./useSize";
const BLUE_SHADES = [
"rgba(255,255,255,0.9)",
"rgba(255,255,255,0.7)",
"rgba(255,255,255,0.5)",
"rgba(255,255,255,0.4)",
"rgba(255,255,255,0.3)",
"rgba(255,255,255,0.2)",
];
// Fallback animation for Tizen browsers without Web Audio API
@@ -16,19 +16,21 @@ const animateFallbackBars = (canvas, ctx, fallbackData) => {
let x = 0;
// Set line width for better visibility on TV
ctx.lineWidth = 2;
ctx.lineWidth = 1;
for (let i = 0; i < barCount; i++) {
const barHeight = Math.max(2, fallbackData[i] * HEIGHT * 0.8); // Minimum 2px height
const barHeight = Math.max(2, fallbackData[i] * HEIGHT * 0.6); // Use 60% of height for better proportion
const blueShade = Math.min(3, Math.floor(fallbackData[i] * 4));
// Fill the bar
// Fill the bar with higher opacity
ctx.fillStyle = BLUE_SHADES[blueShade] || BLUE_SHADES[0];
ctx.fillRect(x + 1, HEIGHT - barHeight, barWidth - 2, barHeight);
// Add border for better visibility on TV
ctx.strokeStyle = "rgba(255,255,255,0.8)";
ctx.strokeRect(x + 1, HEIGHT - barHeight, barWidth - 2, barHeight);
// 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.shadowBlur = 0;
x += barWidth;
}
@@ -48,16 +50,15 @@ const animateBars = (analyser, canvas, ctx, dataArray, bufferLength) => {
for (let i = 0; i < barCount; i++) {
const dataIndex = i * step;
const barHeight = Math.max(2, (dataArray[dataIndex] / 255) * HEIGHT * 0.8);
const barHeight = Math.max(2, (dataArray[dataIndex] / 255) * HEIGHT * 0.6); // Use 60% of height
const blueShade = Math.min(3, Math.floor((dataArray[dataIndex] / 255) * 4));
// Fill the bar
// 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);
// Add subtle border
ctx.strokeStyle = "rgba(255,255,255,0.6)";
ctx.strokeRect(x + 1, HEIGHT - barHeight, barWidth - 2, barHeight);
ctx.shadowBlur = 0;
x += barWidth;
}
@@ -99,9 +100,8 @@ const WaveForm = ({ analyzerData }) => {
const render = () => {
try {
// Clear with black background for better visibility on TV
ctx.fillStyle = "rgba(0,0,0,0.1)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Clear canvas completely (transparent background)
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Ensure we're drawing from bottom up
ctx.save();
@@ -162,19 +162,21 @@ const WaveForm = ({ analyzerData }) => {
return (
<canvas
style={{
position: "fixed", // Changed from absolute to fixed for better TV compatibility
position: "absolute", // Changed back to absolute
top: 0,
left: 0,
width: "100vw", // Explicit viewport width
height: "100vh", // Explicit viewport height
zIndex: 0,
width: "100%", // Use percentage instead of viewport units
height: "100%",
zIndex: -1, // Put behind other content
// Tizen TV optimizations
willChange: "auto", // Changed from transform to auto
imageRendering: "auto", // Better for TV displays
// Ensure visibility on TV
willChange: "auto",
imageRendering: "auto",
// Ensure complete transparency
backgroundColor: "transparent",
// Prevent touch/click interference
pointerEvents: "none"
pointerEvents: "none",
// Ensure it doesn't interfere with layout
display: "block"
}}
ref={canvasRef}
width={width || window.innerWidth} // Fallback dimensions