@testgorilla/tgo-ui 11.22.3 → 12.0.0

package/fesm2022/testgorilla-tgo-ui-components-ai-audio-circle.mjs

@@ -1,468 +1,550 @@
-import * as i0 from '@angular/core';
-import { input, model, signal, computed, effect, ViewChild, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { Color } from '@testgorilla/tgo-ui/components/core';
-import { CommonModule } from '@angular/common';
-
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, NgModule, ViewChild, computed, effect, input, model, signal } from "@angular/core";
+import { Color } from "@testgorilla/tgo-ui/components/core";
+import { CommonModule } from "@angular/common";
 var InterviewState;
-(function (InterviewState) {
-    InterviewState["CandidateSpeaking"] = "candidate-speaking";
-    InterviewState["AiListening"] = "ai-listening";
-    InterviewState["AiSpeaking"] = "ai-speaking";
-    InterviewState["Static"] = "static";
+(function(InterviewState) {
+	InterviewState["CandidateSpeaking"] = "candidate-speaking";
+	InterviewState["AiListening"] = "ai-listening";
+	InterviewState["AiSpeaking"] = "ai-speaking";
+	InterviewState["Static"] = "static";
 })(InterviewState || (InterviewState = {}));
-class AiAudioCircleComponent {
-    constructor() {
-        this.audioTrack = input(...(ngDevMode ? [undefined, { debugName: "audioTrack" }] : /* istanbul ignore next */ []));
-        this.candidateAudioTrack = input(...(ngDevMode ? [undefined, { debugName: "candidateAudioTrack" }] : /* istanbul ignore next */ []));
-        this.state = model(InterviewState.AiListening, ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
-        this.canvasSize = input(350, ...(ngDevMode ? [{ debugName: "canvasSize" }] : /* istanbul ignore next */ []));
-        this.animated = input(true, ...(ngDevMode ? [{ debugName: "animated" }] : /* istanbul ignore next */ []));
-        this.isSpeaking = signal(false, ...(ngDevMode ? [{ debugName: "isSpeaking" }] : /* istanbul ignore next */ []));
-        this.scaleValue = signal(1, ...(ngDevMode ? [{ debugName: "scaleValue" }] : /* istanbul ignore next */ []));
-        this.currentAmp = 0.02;
-        this.simTime = 0;
-        this.baseRadius = computed(() => this.canvasSize() * 0.28, ...(ngDevMode ? [{ debugName: "baseRadius" }] : /* istanbul ignore next */ []));
-        // Audio detection thresholds
-        this.AI_SPEAKING_THRESHOLD = 0.02;
-        this.CANDIDATE_SPEAKING_THRESHOLD = 0.5;
-        this.SHADOW_COLOR_RGB = this.hexToRgb(Color.BRAND_50);
-        this.pulseTime = 0;
-        this.pulseScale = 1;
-        this.pulseTargetScale = 1;
-        this.blobs = [];
-        effect(() => {
-            const audioTrack = this.audioTrack();
-            if (audioTrack) {
-                this.setupAudioAnalysis();
-            }
-        });
-        effect(() => {
-            const candidateAudioTrack = this.candidateAudioTrack();
-            if (candidateAudioTrack) {
-                this.setupCandidateAudioAnalysis();
-            }
-        });
-    }
-    ngAfterViewInit() {
-        this.initializeCanvas();
-        this.initializeBlobs();
-        this.startAnimations();
-    }
-    initializeCanvas() {
-        if (!this.pulseCanvasRef) {
-            return;
-        }
-        const pulseCanvas = this.pulseCanvasRef.nativeElement;
-        const dpr = window.devicePixelRatio || 1;
-        // Setup pulse canvas
-        const size = this.canvasSize();
-        pulseCanvas.width = size * dpr;
-        pulseCanvas.height = size * dpr;
-        pulseCanvas.style.width = `${size}px`;
-        pulseCanvas.style.height = `${size}px`;
-        const ctx = pulseCanvas.getContext('2d');
-        if (!ctx) {
-            console.error('[AI_AUDIO_CIRCLE] Failed to get 2d context');
-            return;
-        }
-        this.pulseCtx = ctx;
-        this.pulseCtx.scale(dpr, dpr);
-    }
-    initializeBlobs() {
-        const size = this.canvasSize();
-        const centerX = size / 2;
-        const centerY = size / 2;
-        const baseRadius = this.baseRadius();
-        const colors = [
-            { color: Color.INFORMATIVE_30, opacity: 0.8 },
-            { color: Color.INFORMATIVE_20, opacity: 0.7 },
-            { color: Color.BRAND_50, opacity: 0.75 },
-            { color: Color.BRAND_20, opacity: 0.6 },
-            { color: Color.INFORMATIVE_30, opacity: 0.65 },
-        ];
-        // Use deterministic seed values when not animated for stable visual tests
-        const seedVelocities = [0.12, -0.08, 0.15, -0.1, 0.06];
-        const seedRadii = [0.72, 0.65, 0.8, 0.68, 0.76];
-        this.blobs = colors.map((c, i) => {
-            const angle = (i / colors.length) * Math.PI * 2;
-            const dist = baseRadius * 0.25;
-            return {
-                x: centerX + Math.cos(angle) * dist,
-                y: centerY + Math.sin(angle) * dist,
-                vx: this.animated() ? (Math.random() - 0.5) * 0.4 : seedVelocities[i],
-                vy: this.animated() ? (Math.random() - 0.5) * 0.4 : seedVelocities[(i + 2) % 5],
-                radius: baseRadius * (this.animated() ? 0.6 + Math.random() * 0.4 : seedRadii[i]),
-                color: c.color,
-                opacity: c.opacity,
-            };
-        });
-    }
-    setupAudioAnalysis() {
-        const audioTrack = this.audioTrack();
-        if (!audioTrack) {
-            return;
-        }
-        try {
-            this.audioContext ??= new AudioContext();
-            this.analyser = this.audioContext.createAnalyser();
-            this.analyser.fftSize = 256;
-            this.analyser.smoothingTimeConstant = 0.8;
-            const bufferLength = this.analyser.frequencyBinCount;
-            this.dataArray = new Uint8Array(bufferLength);
-            const stream = new MediaStream([audioTrack]);
-            this.source = this.audioContext.createMediaStreamSource(stream);
-            this.source.connect(this.analyser);
-            this.analyzeAudio();
-        }
-        catch (error) {
-            console.error('[AI_AUDIO_CIRCLE] Error setting up audio analysis:', error);
-        }
-    }
-    setupCandidateAudioAnalysis() {
-        const candidateAudioTrack = this.candidateAudioTrack();
-        if (!candidateAudioTrack) {
-            return;
-        }
-        try {
-            this.audioContext ??= new AudioContext();
-            this.candidateAnalyser = this.audioContext.createAnalyser();
-            this.candidateAnalyser.fftSize = 256;
-            this.candidateAnalyser.smoothingTimeConstant = 0.8;
-            const bufferLength = this.candidateAnalyser.frequencyBinCount;
-            this.candidateDataArray = new Uint8Array(bufferLength);
-            const stream = new MediaStream([candidateAudioTrack]);
-            this.candidateSource = this.audioContext.createMediaStreamSource(stream);
-            this.candidateSource.connect(this.candidateAnalyser);
-        }
-        catch (error) {
-            console.error('[AI_AUDIO_CIRCLE] Error setting up candidate audio analysis:', error);
-        }
-    }
-    analyzeAudio() {
-        if (!this.analyser || !this.dataArray) {
-            return;
-        }
-        const analyze = () => {
-            if (!this.analyser || !this.dataArray) {
-                return;
-            }
-            // Analyze AI audio
-            this.analyser.getByteFrequencyData(this.dataArray);
-            const sum = Array.from(this.dataArray).reduce((a, b) => a + b, 0);
-            const aiVolume = sum / this.dataArray.length / 255;
-            // Analyze candidate audio if available
-            let candidateVolume = 0;
-            if (this.candidateAnalyser && this.candidateDataArray) {
-                this.candidateAnalyser.getByteFrequencyData(this.candidateDataArray);
-                const candidateSum = Array.from(this.candidateDataArray).reduce((a, b) => a + b, 0);
-                candidateVolume = candidateSum / this.candidateDataArray.length / 255;
-            }
-            const aiSpeaking = aiVolume > this.AI_SPEAKING_THRESHOLD;
-            const candidateSpeaking = candidateVolume > this.CANDIDATE_SPEAKING_THRESHOLD;
-            if (candidateSpeaking) {
-                this.state.set(InterviewState.CandidateSpeaking);
-            }
-            else if (aiSpeaking) {
-                this.state.set(InterviewState.AiSpeaking);
-            }
-            else {
-                this.state.set(InterviewState.AiListening);
-            }
-            this.isSpeaking.set(aiSpeaking);
-            // Update amplitude for animations
-            const currentStateValue = this.state();
-            if (currentStateValue === InterviewState.AiSpeaking && aiSpeaking) {
-                const target = Math.pow(aiVolume, 0.75) * 1.8;
-                this.currentAmp += (target - this.currentAmp) * 0.5;
-            }
-            else if (currentStateValue === InterviewState.CandidateSpeaking) {
-                const target = 0.55;
-                this.currentAmp += (target - this.currentAmp) * 0.1;
-            }
-            else {
-                const fixedBase = 0.2;
-                this.currentAmp += (fixedBase - this.currentAmp) * 0.05;
-            }
-            this.animationFrameId = requestAnimationFrame(analyze);
-        };
-        this.animationFrameId = requestAnimationFrame(analyze);
-    }
-    startAnimations() {
-        this.animatePulse = this.animatePulse.bind(this);
-        this.mainLoop = this.mainLoop.bind(this);
-        if (!this.animated()) {
-            // Render a single static frame for deterministic visual tests
-            this.animatePulse();
-            return;
-        }
-        this.animatePulse();
-        this.mainLoop();
-    }
-    mainLoop() {
-        this.simTime += 0.05;
-        const currentStateValue = this.state();
-        if (currentStateValue === InterviewState.Static) {
-            // Static: no amplitude updates — the render locks scale at 1.0
-        }
-        else if (currentStateValue === InterviewState.AiSpeaking) {
-            if (this.analyser && this.dataArray) {
-                // Use real audio amplitude (already handled in analyzeAudio)
-            }
-            else {
-                // Simulated speaking
-                const rhythm = Math.sin(this.simTime * 0.8) * 0.5 + 0.5;
-                const spikes = Math.random() * 0.9;
-                const target = rhythm * spikes;
-                this.currentAmp += (target - this.currentAmp) * 0.25;
-            }
-        }
-        else if (currentStateValue === InterviewState.CandidateSpeaking) {
-            const target = 0.55;
-            this.currentAmp += (target - this.currentAmp) * 0.1;
-        }
-        else {
-            const fixedBase = 0.2;
-            this.currentAmp += (fixedBase - this.currentAmp) * 0.05;
-        }
-        // eslint-disable-next-line @typescript-eslint/unbound-method -- mainLoop is .bind(this)-ed in startAnimations()
-        requestAnimationFrame(this.mainLoop);
-    }
-    animatePulse() {
-        if (!this.pulseCtx) {
-            return;
-        }
-        const ctx = this.pulseCtx;
-        this.pulseTime += 0.016;
-        const size = this.canvasSize();
-        const centerX = size / 2;
-        const centerY = size / 2;
-        const baseRadius = this.baseRadius();
-        ctx.clearRect(0, 0, size, size);
-        const currentStateValue = this.state();
-        const effectiveAmp = this.currentAmp;
-        const isListening = currentStateValue === InterviewState.AiListening;
-        const isCandidate = currentStateValue === InterviewState.CandidateSpeaking;
-        const isAiSpeaking = currentStateValue === InterviewState.AiSpeaking;
-        const isStatic = currentStateValue === InterviewState.Static;
-        // Scale logic
-        if (isStatic) {
-            // Static: fixed scale at 1.0, no breathing, no amplitude reactivity
-            this.pulseTargetScale = 1;
-            this.pulseScale = 1;
-        }
-        else if (isCandidate) {
-            // Candidate speaking: Fixed enlarged scale (115%), no breathing effect
-            this.pulseTargetScale = 1.15;
-            const breathing = 0;
-            this.pulseScale += (this.pulseTargetScale + breathing - this.pulseScale) * 0.08;
-        }
-        else {
-            // AI speaking/listening: Scale reacts to audio amplitude, with optional breathing
-            // When AI is speaking: effectiveAmp is high, scale grows with voice + erratic wobble
-            // When AI is listening: effectiveAmp is low (~0.2), scale stays near 1.0 with breathing effect
-            this.pulseTargetScale = 1 + effectiveAmp * 0.5;
-            let breathing;
-            if (isListening) {
-                breathing = Math.sin(this.pulseTime * 1.5) * 0.035;
-            }
-            else if (isAiSpeaking) {
-                // Erratic movement: overlapping waves at incommensurate frequencies for non-periodic feel
-                breathing =
-                    Math.sin(this.pulseTime * 2.7) * 0.055 +
-                        Math.cos(this.pulseTime * 1.9) * 0.04 +
-                        Math.sin(this.pulseTime * 4.1 + 1) * 0.025;
-            }
-            else {
-                breathing = 0;
-            }
-            const smoothing = isAiSpeaking ? 0.11 : 0.06;
-            this.pulseScale += (this.pulseTargetScale + breathing - this.pulseScale) * smoothing;
-        }
-        const currentRadius = baseRadius * this.pulseScale;
-        // Draw shadows (skipped in static state)
-        if (!isStatic) {
-            for (let i = 3; i >= 1; i--) {
-                const shadowRadius = currentRadius + i * 10;
-                const shadowOpacity = 0.35 - i * 0.06;
-                const shadowGradient = ctx.createRadialGradient(centerX, centerY, currentRadius * 0.98, centerX, centerY, shadowRadius);
-                shadowGradient.addColorStop(0, `rgba(${this.SHADOW_COLOR_RGB}, ${shadowOpacity})`);
-                shadowGradient.addColorStop(0.6, `rgba(${this.SHADOW_COLOR_RGB}, ${shadowOpacity * 0.5})`);
-                shadowGradient.addColorStop(1, `rgba(${this.SHADOW_COLOR_RGB}, 0)`);
-                ctx.beginPath();
-                ctx.arc(centerX, centerY, shadowRadius, 0, Math.PI * 2);
-                ctx.fillStyle = shadowGradient;
-                ctx.fill();
-            }
-        }
-        // Clip to circle
-        ctx.save();
-        ctx.beginPath();
-        ctx.arc(centerX, centerY, currentRadius, 0, Math.PI * 2);
-        ctx.clip();
-        // Background gradient
-        const bgGradient = ctx.createLinearGradient(centerX - currentRadius, centerY - currentRadius, centerX + currentRadius, centerY + currentRadius);
-        bgGradient.addColorStop(0, Color.BRAND_50);
-        bgGradient.addColorStop(0.5, Color.INFORMATIVE_20);
-        bgGradient.addColorStop(1, Color.INFORMATIVE_30);
-        ctx.beginPath();
-        ctx.arc(centerX, centerY, currentRadius, 0, Math.PI * 2);
-        ctx.fillStyle = bgGradient;
-        ctx.fill();
-        // Animate blobs
-        let speedMultiplier;
-        let chaosStrength;
-        if (isCandidate) {
-            speedMultiplier = 3.0;
-            chaosStrength = 1.0;
-        }
-        else if (isListening) {
-            speedMultiplier = 2.0;
-            chaosStrength = 1.0;
-        }
-        else {
-            speedMultiplier = 1.5 + effectiveAmp * 3.0;
-            chaosStrength = isAiSpeaking ? 1.8 : 1.0;
-        }
-        this.blobs.forEach((blob, index) => {
-            if (!isStatic) {
-                // Chaos forces
-                let chaos1 = Math.sin(this.pulseTime * 0.6 + index * 2.5 + blob.x * 0.02) * 0.15;
-                let chaos2 = Math.cos(this.pulseTime * 0.4 + index * 1.8 + blob.y * 0.015) * 0.12;
-                let chaos3 = Math.sin(this.pulseTime + index * 0.7) * 0.08;
-                if (isAiSpeaking) {
-                    chaos1 += Math.sin(this.pulseTime * 3.2 + index * 1.3) * 0.18;
-                    chaos2 += Math.cos(this.pulseTime * 2.5 + index * 2.1) * 0.14;
-                    chaos3 += Math.sin(this.pulseTime * 4.0 + index * 0.5) * 0.1;
-                }
-                // Apply forces
-                const force = 0.045 * speedMultiplier * chaosStrength;
-                blob.vx += (chaos1 + chaos3 * Math.cos(this.pulseTime * 1.5 + index)) * force;
-                blob.vy += (chaos2 + chaos3 * Math.sin(this.pulseTime * 1.2 + index)) * force;
-                // Friction (slightly less when AI speaking for more sustained movement)
-                const friction = isAiSpeaking ? 0.985 : 0.98;
-                blob.vx *= friction;
-                blob.vy *= friction;
-                // Max velocity (higher when AI speaking for more erratic motion)
-                const maxVelBase = isListening ? 3.0 : isAiSpeaking ? 6.0 : 4.5;
-                const maxVel = maxVelBase * speedMultiplier;
-                const vel = Math.sqrt(blob.vx * blob.vx + blob.vy * blob.vy);
-                if (vel > maxVel) {
-                    blob.vx = (blob.vx / vel) * maxVel;
-                    blob.vy = (blob.vy / vel) * maxVel;
-                }
-                // Update position
-                blob.x += blob.vx;
-                blob.y += blob.vy;
-                // Keep within bounds
-                const dx = blob.x - centerX;
-                const dy = blob.y - centerY;
-                const dist = Math.sqrt(dx * dx + dy * dy);
-                const maxDist = currentRadius * 0.55;
-                if (dist > maxDist) {
-                    const angle = Math.atan2(dy, dx);
-                    blob.x = centerX + Math.cos(angle) * maxDist;
-                    blob.y = centerY + Math.sin(angle) * maxDist;
-                    blob.vx -= dx * 0.065;
-                    blob.vy -= dy * 0.065;
-                }
-            }
-            // Parse color to RGB
-            const rgb = this.hexToRgb(blob.color);
-            // Draw blob with glow
-            const blurRadius = blob.radius * 1.3;
-            const outerGlow = ctx.createRadialGradient(blob.x, blob.y, 0, blob.x, blob.y, blurRadius);
-            outerGlow.addColorStop(0, `rgba(${rgb}, ${blob.opacity * 0.9})`);
-            outerGlow.addColorStop(0.2, `rgba(${rgb}, ${blob.opacity * 0.7})`);
-            outerGlow.addColorStop(0.4, `rgba(${rgb}, ${blob.opacity * 0.5})`);
-            outerGlow.addColorStop(0.6, `rgba(${rgb}, ${blob.opacity * 0.3})`);
-            outerGlow.addColorStop(0.8, `rgba(${rgb}, ${blob.opacity * 0.1})`);
-            outerGlow.addColorStop(1, `rgba(${rgb}, 0)`);
-            ctx.beginPath();
-            ctx.arc(blob.x, blob.y, blurRadius, 0, Math.PI * 2);
-            ctx.fillStyle = outerGlow;
-            ctx.fill();
-        });
-        // Highlight
-        const highlightGradient = ctx.createRadialGradient(centerX - currentRadius * 0.3, centerY - currentRadius * 0.3, 0, centerX - currentRadius * 0.3, centerY - currentRadius * 0.3, currentRadius * 0.6);
-        highlightGradient.addColorStop(0, 'rgba(255, 255, 255, 0.12)');
-        highlightGradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.03)');
-        highlightGradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
-        ctx.beginPath();
-        ctx.arc(centerX, centerY, currentRadius, 0, Math.PI * 2);
-        ctx.fillStyle = highlightGradient;
-        ctx.fill();
-        ctx.restore();
-        if (this.animated()) {
-            // eslint-disable-next-line @typescript-eslint/unbound-method -- animatePulse is .bind(this)-ed in startAnimations()
-            this.pulseAnimationId = requestAnimationFrame(this.animatePulse);
-        }
-    }
-    hexToRgb(hex) {
-        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-        if (!result) {
-            return '0, 0, 0';
-        }
-        const r = parseInt(result[1], 16);
-        const g = parseInt(result[2], 16);
-        const b = parseInt(result[3], 16);
-        return `${r}, ${g}, ${b}`;
-    }
-    cleanup() {
-        if (this.animationFrameId) {
-            cancelAnimationFrame(this.animationFrameId);
-            this.animationFrameId = undefined;
-        }
-        if (this.pulseAnimationId) {
-            cancelAnimationFrame(this.pulseAnimationId);
-            this.pulseAnimationId = undefined;
-        }
-        if (this.source) {
-            this.source.disconnect();
-            this.source = undefined;
-        }
-        if (this.candidateSource) {
-            this.candidateSource.disconnect();
-            this.candidateSource = undefined;
-        }
-        if (this.audioContext && this.audioContext.state !== 'closed') {
-            void this.audioContext.close();
-            this.audioContext = undefined;
-        }
-        this.analyser = undefined;
-        this.candidateAnalyser = undefined;
-        this.dataArray = undefined;
-        this.candidateDataArray = undefined;
-    }
-    ngOnDestroy() {
-        this.cleanup();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: AiAudioCircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: AiAudioCircleComponent, isStandalone: true, selector: "ui-ai-audio-circle", inputs: { audioTrack: { classPropertyName: "audioTrack", publicName: "audioTrack", isSignal: true, isRequired: false, transformFunction: null }, candidateAudioTrack: { classPropertyName: "candidateAudioTrack", publicName: "candidateAudioTrack", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, canvasSize: { classPropertyName: "canvasSize", publicName: "canvasSize", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { state: "stateChange" }, viewQueries: [{ propertyName: "pulseCanvasRef", first: true, predicate: ["pulseCanvas"], descendants: true }], ngImport: i0, template: "<div class=\"ai-audio-visualizer\">\n  <div class=\"canvas-container\">\n    <canvas #pulseCanvas></canvas>\n  </div>\n</div>\n", styles: [".ai-audio-visualizer{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%}.canvas-container{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center}canvas{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: AiAudioCircleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ui-ai-audio-circle', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ai-audio-visualizer\">\n  <div class=\"canvas-container\">\n    <canvas #pulseCanvas></canvas>\n  </div>\n</div>\n", styles: [".ai-audio-visualizer{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%}.canvas-container{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center}canvas{display:block}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { pulseCanvasRef: [{
-                type: ViewChild,
-                args: ['pulseCanvas', { static: false }]
-            }], audioTrack: [{ type: i0.Input, args: [{ isSignal: true, alias: "audioTrack", required: false }] }], candidateAudioTrack: [{ type: i0.Input, args: [{ isSignal: true, alias: "candidateAudioTrack", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }, { type: i0.Output, args: ["stateChange"] }], canvasSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "canvasSize", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }] } });
-
-class AiAudioCircleModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: AiAudioCircleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: AiAudioCircleModule, imports: [CommonModule, AiAudioCircleComponent], exports: [AiAudioCircleComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: AiAudioCircleModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: AiAudioCircleModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, AiAudioCircleComponent],
-                    exports: [AiAudioCircleComponent],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var AiAudioCircleComponent = class AiAudioCircleComponent {
+	constructor() {
+		this.audioTrack = input(...ngDevMode ? [void 0, { debugName: "audioTrack" }] : /* istanbul ignore next */ []);
+		this.candidateAudioTrack = input(...ngDevMode ? [void 0, { debugName: "candidateAudioTrack" }] : /* istanbul ignore next */ []);
+		this.state = model(InterviewState.AiListening, ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
+		this.canvasSize = input(350, ...ngDevMode ? [{ debugName: "canvasSize" }] : /* istanbul ignore next */ []);
+		this.animated = input(true, ...ngDevMode ? [{ debugName: "animated" }] : /* istanbul ignore next */ []);
+		this.isSpeaking = signal(false, ...ngDevMode ? [{ debugName: "isSpeaking" }] : /* istanbul ignore next */ []);
+		this.scaleValue = signal(1, ...ngDevMode ? [{ debugName: "scaleValue" }] : /* istanbul ignore next */ []);
+		this.currentAmp = .02;
+		this.simTime = 0;
+		this.baseRadius = computed(() => this.canvasSize() * .28, ...ngDevMode ? [{ debugName: "baseRadius" }] : /* istanbul ignore next */ []);
+		this.AI_SPEAKING_THRESHOLD = .02;
+		this.CANDIDATE_SPEAKING_THRESHOLD = .5;
+		this.SHADOW_COLOR_RGB = this.hexToRgb(Color.BRAND_50);
+		this.pulseTime = 0;
+		this.pulseScale = 1;
+		this.pulseTargetScale = 1;
+		this.blobs = [];
+		effect(() => {
+			if (this.audioTrack()) this.setupAudioAnalysis();
+		});
+		effect(() => {
+			if (this.candidateAudioTrack()) this.setupCandidateAudioAnalysis();
+		});
+	}
+	ngAfterViewInit() {
+		this.initializeCanvas();
+		this.initializeBlobs();
+		this.startAnimations();
+	}
+	initializeCanvas() {
+		if (!this.pulseCanvasRef) return;
+		const pulseCanvas = this.pulseCanvasRef.nativeElement;
+		const dpr = window.devicePixelRatio || 1;
+		const size = this.canvasSize();
+		pulseCanvas.width = size * dpr;
+		pulseCanvas.height = size * dpr;
+		pulseCanvas.style.width = `${size}px`;
+		pulseCanvas.style.height = `${size}px`;
+		const ctx = pulseCanvas.getContext("2d");
+		if (!ctx) {
+			console.error("[AI_AUDIO_CIRCLE] Failed to get 2d context");
+			return;
+		}
+		this.pulseCtx = ctx;
+		this.pulseCtx.scale(dpr, dpr);
+	}
+	initializeBlobs() {
+		const size = this.canvasSize();
+		const centerX = size / 2;
+		const centerY = size / 2;
+		const baseRadius = this.baseRadius();
+		const colors = [
+			{
+				color: Color.INFORMATIVE_30,
+				opacity: .8
+			},
+			{
+				color: Color.INFORMATIVE_20,
+				opacity: .7
+			},
+			{
+				color: Color.BRAND_50,
+				opacity: .75
+			},
+			{
+				color: Color.BRAND_20,
+				opacity: .6
+			},
+			{
+				color: Color.INFORMATIVE_30,
+				opacity: .65
+			}
+		];
+		const seedVelocities = [
+			.12,
+			-.08,
+			.15,
+			-.1,
+			.06
+		];
+		const seedRadii = [
+			.72,
+			.65,
+			.8,
+			.68,
+			.76
+		];
+		this.blobs = colors.map((c, i) => {
+			const angle = i / colors.length * Math.PI * 2;
+			const dist = baseRadius * .25;
+			return {
+				x: centerX + Math.cos(angle) * dist,
+				y: centerY + Math.sin(angle) * dist,
+				vx: this.animated() ? (Math.random() - .5) * .4 : seedVelocities[i],
+				vy: this.animated() ? (Math.random() - .5) * .4 : seedVelocities[(i + 2) % 5],
+				radius: baseRadius * (this.animated() ? .6 + Math.random() * .4 : seedRadii[i]),
+				color: c.color,
+				opacity: c.opacity
+			};
+		});
+	}
+	setupAudioAnalysis() {
+		const audioTrack = this.audioTrack();
+		if (!audioTrack) return;
+		try {
+			this.audioContext ??= new AudioContext();
+			this.analyser = this.audioContext.createAnalyser();
+			this.analyser.fftSize = 256;
+			this.analyser.smoothingTimeConstant = .8;
+			const bufferLength = this.analyser.frequencyBinCount;
+			this.dataArray = new Uint8Array(bufferLength);
+			const stream = new MediaStream([audioTrack]);
+			this.source = this.audioContext.createMediaStreamSource(stream);
+			this.source.connect(this.analyser);
+			this.analyzeAudio();
+		} catch (error) {
+			console.error("[AI_AUDIO_CIRCLE] Error setting up audio analysis:", error);
+		}
+	}
+	setupCandidateAudioAnalysis() {
+		const candidateAudioTrack = this.candidateAudioTrack();
+		if (!candidateAudioTrack) return;
+		try {
+			this.audioContext ??= new AudioContext();
+			this.candidateAnalyser = this.audioContext.createAnalyser();
+			this.candidateAnalyser.fftSize = 256;
+			this.candidateAnalyser.smoothingTimeConstant = .8;
+			const bufferLength = this.candidateAnalyser.frequencyBinCount;
+			this.candidateDataArray = new Uint8Array(bufferLength);
+			const stream = new MediaStream([candidateAudioTrack]);
+			this.candidateSource = this.audioContext.createMediaStreamSource(stream);
+			this.candidateSource.connect(this.candidateAnalyser);
+		} catch (error) {
+			console.error("[AI_AUDIO_CIRCLE] Error setting up candidate audio analysis:", error);
+		}
+	}
+	analyzeAudio() {
+		if (!this.analyser || !this.dataArray) return;
+		const analyze = () => {
+			if (!this.analyser || !this.dataArray) return;
+			this.analyser.getByteFrequencyData(this.dataArray);
+			const aiVolume = Array.from(this.dataArray).reduce((a, b) => a + b, 0) / this.dataArray.length / 255;
+			let candidateVolume = 0;
+			if (this.candidateAnalyser && this.candidateDataArray) {
+				this.candidateAnalyser.getByteFrequencyData(this.candidateDataArray);
+				candidateVolume = Array.from(this.candidateDataArray).reduce((a, b) => a + b, 0) / this.candidateDataArray.length / 255;
+			}
+			const aiSpeaking = aiVolume > this.AI_SPEAKING_THRESHOLD;
+			if (candidateVolume > this.CANDIDATE_SPEAKING_THRESHOLD) this.state.set(InterviewState.CandidateSpeaking);
+			else if (aiSpeaking) this.state.set(InterviewState.AiSpeaking);
+			else this.state.set(InterviewState.AiListening);
+			this.isSpeaking.set(aiSpeaking);
+			const currentStateValue = this.state();
+			if (currentStateValue === InterviewState.AiSpeaking && aiSpeaking) {
+				const target = Math.pow(aiVolume, .75) * 1.8;
+				this.currentAmp += (target - this.currentAmp) * .5;
+			} else if (currentStateValue === InterviewState.CandidateSpeaking) {
+				const target = .55;
+				this.currentAmp += (target - this.currentAmp) * .1;
+			} else {
+				const fixedBase = .2;
+				this.currentAmp += (fixedBase - this.currentAmp) * .05;
+			}
+			this.animationFrameId = requestAnimationFrame(analyze);
+		};
+		this.animationFrameId = requestAnimationFrame(analyze);
+	}
+	startAnimations() {
+		this.animatePulse = this.animatePulse.bind(this);
+		this.mainLoop = this.mainLoop.bind(this);
+		if (!this.animated()) {
+			this.animatePulse();
+			return;
+		}
+		this.animatePulse();
+		this.mainLoop();
+	}
+	mainLoop() {
+		this.simTime += .05;
+		const currentStateValue = this.state();
+		if (currentStateValue === InterviewState.Static) {} else if (currentStateValue === InterviewState.AiSpeaking) {
+			if (this.analyser && this.dataArray) {} else {
+				const target = (Math.sin(this.simTime * .8) * .5 + .5) * (Math.random() * .9);
+				this.currentAmp += (target - this.currentAmp) * .25;
+			}
+		} else if (currentStateValue === InterviewState.CandidateSpeaking) {
+			const target = .55;
+			this.currentAmp += (target - this.currentAmp) * .1;
+		} else {
+			const fixedBase = .2;
+			this.currentAmp += (fixedBase - this.currentAmp) * .05;
+		}
+		requestAnimationFrame(this.mainLoop);
+	}
+	animatePulse() {
+		if (!this.pulseCtx) return;
+		const ctx = this.pulseCtx;
+		this.pulseTime += .016;
+		const size = this.canvasSize();
+		const centerX = size / 2;
+		const centerY = size / 2;
+		const baseRadius = this.baseRadius();
+		ctx.clearRect(0, 0, size, size);
+		const currentStateValue = this.state();
+		const effectiveAmp = this.currentAmp;
+		const isListening = currentStateValue === InterviewState.AiListening;
+		const isCandidate = currentStateValue === InterviewState.CandidateSpeaking;
+		const isAiSpeaking = currentStateValue === InterviewState.AiSpeaking;
+		const isStatic = currentStateValue === InterviewState.Static;
+		if (isStatic) {
+			this.pulseTargetScale = 1;
+			this.pulseScale = 1;
+		} else if (isCandidate) {
+			this.pulseTargetScale = 1.15;
+			const breathing = 0;
+			this.pulseScale += (this.pulseTargetScale + breathing - this.pulseScale) * .08;
+		} else {
+			this.pulseTargetScale = 1 + effectiveAmp * .5;
+			let breathing;
+			if (isListening) breathing = Math.sin(this.pulseTime * 1.5) * .035;
+			else if (isAiSpeaking) breathing = Math.sin(this.pulseTime * 2.7) * .055 + Math.cos(this.pulseTime * 1.9) * .04 + Math.sin(this.pulseTime * 4.1 + 1) * .025;
+			else breathing = 0;
+			const smoothing = isAiSpeaking ? .11 : .06;
+			this.pulseScale += (this.pulseTargetScale + breathing - this.pulseScale) * smoothing;
+		}
+		const currentRadius = baseRadius * this.pulseScale;
+		if (!isStatic) for (let i = 3; i >= 1; i--) {
+			const shadowRadius = currentRadius + i * 10;
+			const shadowOpacity = .35 - i * .06;
+			const shadowGradient = ctx.createRadialGradient(centerX, centerY, currentRadius * .98, centerX, centerY, shadowRadius);
+			shadowGradient.addColorStop(0, `rgba(${this.SHADOW_COLOR_RGB}, ${shadowOpacity})`);
+			shadowGradient.addColorStop(.6, `rgba(${this.SHADOW_COLOR_RGB}, ${shadowOpacity * .5})`);
+			shadowGradient.addColorStop(1, `rgba(${this.SHADOW_COLOR_RGB}, 0)`);
+			ctx.beginPath();
+			ctx.arc(centerX, centerY, shadowRadius, 0, Math.PI * 2);
+			ctx.fillStyle = shadowGradient;
+			ctx.fill();
+		}
+		ctx.save();
+		ctx.beginPath();
+		ctx.arc(centerX, centerY, currentRadius, 0, Math.PI * 2);
+		ctx.clip();
+		const bgGradient = ctx.createLinearGradient(centerX - currentRadius, centerY - currentRadius, centerX + currentRadius, centerY + currentRadius);
+		bgGradient.addColorStop(0, Color.BRAND_50);
+		bgGradient.addColorStop(.5, Color.INFORMATIVE_20);
+		bgGradient.addColorStop(1, Color.INFORMATIVE_30);
+		ctx.beginPath();
+		ctx.arc(centerX, centerY, currentRadius, 0, Math.PI * 2);
+		ctx.fillStyle = bgGradient;
+		ctx.fill();
+		let speedMultiplier;
+		let chaosStrength;
+		if (isCandidate) {
+			speedMultiplier = 3;
+			chaosStrength = 1;
+		} else if (isListening) {
+			speedMultiplier = 2;
+			chaosStrength = 1;
+		} else {
+			speedMultiplier = 1.5 + effectiveAmp * 3;
+			chaosStrength = isAiSpeaking ? 1.8 : 1;
+		}
+		this.blobs.forEach((blob, index) => {
+			if (!isStatic) {
+				let chaos1 = Math.sin(this.pulseTime * .6 + index * 2.5 + blob.x * .02) * .15;
+				let chaos2 = Math.cos(this.pulseTime * .4 + index * 1.8 + blob.y * .015) * .12;
+				let chaos3 = Math.sin(this.pulseTime + index * .7) * .08;
+				if (isAiSpeaking) {
+					chaos1 += Math.sin(this.pulseTime * 3.2 + index * 1.3) * .18;
+					chaos2 += Math.cos(this.pulseTime * 2.5 + index * 2.1) * .14;
+					chaos3 += Math.sin(this.pulseTime * 4 + index * .5) * .1;
+				}
+				const force = .045 * speedMultiplier * chaosStrength;
+				blob.vx += (chaos1 + chaos3 * Math.cos(this.pulseTime * 1.5 + index)) * force;
+				blob.vy += (chaos2 + chaos3 * Math.sin(this.pulseTime * 1.2 + index)) * force;
+				const friction = isAiSpeaking ? .985 : .98;
+				blob.vx *= friction;
+				blob.vy *= friction;
+				const maxVel = (isListening ? 3 : isAiSpeaking ? 6 : 4.5) * speedMultiplier;
+				const vel = Math.sqrt(blob.vx * blob.vx + blob.vy * blob.vy);
+				if (vel > maxVel) {
+					blob.vx = blob.vx / vel * maxVel;
+					blob.vy = blob.vy / vel * maxVel;
+				}
+				blob.x += blob.vx;
+				blob.y += blob.vy;
+				const dx = blob.x - centerX;
+				const dy = blob.y - centerY;
+				const dist = Math.sqrt(dx * dx + dy * dy);
+				const maxDist = currentRadius * .55;
+				if (dist > maxDist) {
+					const angle = Math.atan2(dy, dx);
+					blob.x = centerX + Math.cos(angle) * maxDist;
+					blob.y = centerY + Math.sin(angle) * maxDist;
+					blob.vx -= dx * .065;
+					blob.vy -= dy * .065;
+				}
+			}
+			const rgb = this.hexToRgb(blob.color);
+			const blurRadius = blob.radius * 1.3;
+			const outerGlow = ctx.createRadialGradient(blob.x, blob.y, 0, blob.x, blob.y, blurRadius);
+			outerGlow.addColorStop(0, `rgba(${rgb}, ${blob.opacity * .9})`);
+			outerGlow.addColorStop(.2, `rgba(${rgb}, ${blob.opacity * .7})`);
+			outerGlow.addColorStop(.4, `rgba(${rgb}, ${blob.opacity * .5})`);
+			outerGlow.addColorStop(.6, `rgba(${rgb}, ${blob.opacity * .3})`);
+			outerGlow.addColorStop(.8, `rgba(${rgb}, ${blob.opacity * .1})`);
+			outerGlow.addColorStop(1, `rgba(${rgb}, 0)`);
+			ctx.beginPath();
+			ctx.arc(blob.x, blob.y, blurRadius, 0, Math.PI * 2);
+			ctx.fillStyle = outerGlow;
+			ctx.fill();
+		});
+		const highlightGradient = ctx.createRadialGradient(centerX - currentRadius * .3, centerY - currentRadius * .3, 0, centerX - currentRadius * .3, centerY - currentRadius * .3, currentRadius * .6);
+		highlightGradient.addColorStop(0, "rgba(255, 255, 255, 0.12)");
+		highlightGradient.addColorStop(.5, "rgba(255, 255, 255, 0.03)");
+		highlightGradient.addColorStop(1, "rgba(255, 255, 255, 0)");
+		ctx.beginPath();
+		ctx.arc(centerX, centerY, currentRadius, 0, Math.PI * 2);
+		ctx.fillStyle = highlightGradient;
+		ctx.fill();
+		ctx.restore();
+		if (this.animated()) this.pulseAnimationId = requestAnimationFrame(this.animatePulse);
+	}
+	hexToRgb(hex) {
+		const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+		if (!result) return "0, 0, 0";
+		return `${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}`;
+	}
+	cleanup() {
+		if (this.animationFrameId) {
+			cancelAnimationFrame(this.animationFrameId);
+			this.animationFrameId = void 0;
+		}
+		if (this.pulseAnimationId) {
+			cancelAnimationFrame(this.pulseAnimationId);
+			this.pulseAnimationId = void 0;
+		}
+		if (this.source) {
+			this.source.disconnect();
+			this.source = void 0;
+		}
+		if (this.candidateSource) {
+			this.candidateSource.disconnect();
+			this.candidateSource = void 0;
+		}
+		if (this.audioContext && this.audioContext.state !== "closed") {
+			this.audioContext.close();
+			this.audioContext = void 0;
+		}
+		this.analyser = void 0;
+		this.candidateAnalyser = void 0;
+		this.dataArray = void 0;
+		this.candidateDataArray = void 0;
+	}
+	ngOnDestroy() {
+		this.cleanup();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: AiAudioCircleComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.1.0",
+			version: "22.2.4",
+			type: AiAudioCircleComponent,
+			isStandalone: true,
+			selector: "ui-ai-audio-circle",
+			inputs: {
+				audioTrack: {
+					classPropertyName: "audioTrack",
+					publicName: "audioTrack",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				candidateAudioTrack: {
+					classPropertyName: "candidateAudioTrack",
+					publicName: "candidateAudioTrack",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				state: {
+					classPropertyName: "state",
+					publicName: "state",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				canvasSize: {
+					classPropertyName: "canvasSize",
+					publicName: "canvasSize",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				animated: {
+					classPropertyName: "animated",
+					publicName: "animated",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: { state: "stateChange" },
+			viewQueries: [{
+				propertyName: "pulseCanvasRef",
+				first: true,
+				predicate: ["pulseCanvas"],
+				descendants: true
+			}],
+			ngImport: i0,
+			template: "<div class=\"ai-audio-visualizer\">\n  <div class=\"canvas-container\">\n    <canvas #pulseCanvas></canvas>\n  </div>\n</div>\n",
+			styles: [".ai-audio-visualizer{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%}.canvas-container{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center}canvas{display:block}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: AiAudioCircleComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-ai-audio-circle",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div class=\"ai-audio-visualizer\">\n  <div class=\"canvas-container\">\n    <canvas #pulseCanvas></canvas>\n  </div>\n</div>\n",
+			styles: [".ai-audio-visualizer{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%}.canvas-container{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center}canvas{display:block}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		pulseCanvasRef: [{
+			type: ViewChild,
+			args: ["pulseCanvas", { static: false }]
+		}],
+		audioTrack: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "audioTrack",
+				required: false
+			}]
+		}],
+		candidateAudioTrack: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "candidateAudioTrack",
+				required: false
+			}]
+		}],
+		state: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "state",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["stateChange"]
+		}],
+		canvasSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "canvasSize",
+				required: false
+			}]
+		}],
+		animated: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "animated",
+				required: false
+			}]
+		}]
+	}
+});
+var AiAudioCircleModule = class AiAudioCircleModule {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: AiAudioCircleModule,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.NgModule
+		});
+	}
+	static {
+		this.ɵmod = i0.ɵɵngDeclareNgModule({
+			minVersion: "14.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: AiAudioCircleModule,
+			imports: [CommonModule, AiAudioCircleComponent],
+			exports: [AiAudioCircleComponent]
+		});
+	}
+	static {
+		this.ɵinj = i0.ɵɵngDeclareInjector({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: AiAudioCircleModule,
+			imports: [CommonModule]
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: AiAudioCircleModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [CommonModule, AiAudioCircleComponent],
+			exports: [AiAudioCircleComponent]
+		}]
+	}]
+});
 export { AiAudioCircleComponent, AiAudioCircleModule, InterviewState };
-//# sourceMappingURL=testgorilla-tgo-ui-components-ai-audio-circle.mjs.map
+
+//# sourceMappingURL=testgorilla-tgo-ui-components-ai-audio-circle.mjs.map