Spaces:
Running
Running
Update flare-ui/src/app/components/chat/realtime-chat.component.ts
Browse files
flare-ui/src/app/components/chat/realtime-chat.component.ts
CHANGED
@@ -386,33 +386,6 @@ export class RealtimeChatComponent implements OnInit, OnDestroy, AfterViewChecke
|
|
386 |
animate();
|
387 |
}
|
388 |
|
389 |
-
private drawVolumeVisualization(ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement, volume: number): void {
|
390 |
-
const barCount = 64;
|
391 |
-
const barWidth = canvas.width / barCount;
|
392 |
-
const barSpacing = 2;
|
393 |
-
|
394 |
-
for (let i = 0; i < barCount; i++) {
|
395 |
-
// Create wave effect
|
396 |
-
const waveOffset = Math.sin((i / barCount) * Math.PI * 2 + Date.now() * 0.002) * 0.3;
|
397 |
-
const barHeight = (volume * 0.7 + waveOffset + Math.random() * 0.3) * canvas.height * 0.8;
|
398 |
-
|
399 |
-
const x = i * barWidth;
|
400 |
-
const y = (canvas.height - barHeight) / 2;
|
401 |
-
|
402 |
-
// Gradient color based on height
|
403 |
-
const hue = 120; // Green
|
404 |
-
const saturation = 70;
|
405 |
-
const lightness = 40 + (barHeight / canvas.height) * 30;
|
406 |
-
|
407 |
-
ctx.fillStyle = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
|
408 |
-
ctx.fillRect(x + barSpacing / 2, y, barWidth - barSpacing, barHeight);
|
409 |
-
|
410 |
-
// Mirror effect
|
411 |
-
ctx.fillStyle = `hsla(${hue}, ${saturation}%, ${lightness}%, 0.3)`;
|
412 |
-
ctx.fillRect(x + barSpacing / 2, canvas.height - y, barWidth - barSpacing, -barHeight * 0.3);
|
413 |
-
}
|
414 |
-
}
|
415 |
-
|
416 |
private stopVisualization(): void {
|
417 |
if (this.animationId) {
|
418 |
cancelAnimationFrame(this.animationId);
|
|
|
386 |
animate();
|
387 |
}
|
388 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
389 |
private stopVisualization(): void {
|
390 |
if (this.animationId) {
|
391 |
cancelAnimationFrame(this.animationId);
|