@ngbase/adk 0.1.16 → 0.1.18

package/schematics/components/files/audio/AudioRecorder.ts.template

@@ -0,0 +1,377 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  signal,
+  output,
+  OnDestroy,
+  effect,
+} from '@angular/core';
+import { AudioVisualizer } from './AudioVisualizer';
+import { provideIcons } from '@ng-icons/core';
+import { lucideMic, lucideSquare, lucidePlay, lucidePause } from '@ng-icons/lucide';
+import { Icon } from '<%= basepath %>/icon';
+import { Button } from '<%= basepath %>/button';
+
+export type RecorderState = 'idle' | 'recording' | 'stopped' | 'playing' | 'paused';
+
+@Component({
+  selector: '<%= name %>-audio-recorder',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [provideIcons({ lucideMic, lucideSquare, lucidePlay, lucidePause })],
+  imports: [AudioVisualizer, Icon, Button],
+  template: `
+    <div class="space-y-3">
+      <!-- Visualizer and Controls -->
+      <div class="bg-card flex items-center rounded-xl border p-1">
+        <!-- Record/Stop Button -->
+        <button
+          (click)="handleRecordClick()"
+          <%= name %>Button="secondary"
+          [disabled]="state() === 'playing'"
+          [attr.aria-label]="state() === 'recording' ? 'Stop Recording' : 'Start Recording'"
+          class="aspect-square !px-2"
+        >
+          <<%= name %>-icon [name]="state() === 'recording' ? 'lucideSquare' : 'lucideMic'" />
+        </button>
+
+        <!-- Visualizer -->
+        <div class="relative h-8 flex-grow overflow-hidden">
+          <app-audio-visualizer
+            [audioBuffer]="state() === 'recording' ? liveAudioBuffer() : audioBuffer()"
+            [progress]="state() === 'recording' ? 1 : playbackProgress()"
+            [useFixedBarWidth]="state() === 'recording'"
+          />
+          @if (state() === 'recording') {
+            <div class="absolute top-2 right-2 flex items-center gap-2">
+              <div class="h-2 w-2 animate-pulse rounded-full bg-red-500"></div>
+              <p class="text-xs font-medium text-red-600">{{ formattedTime() }}</p>
+            </div>
+          }
+        </div>
+
+        <!-- Play/Pause Button -->
+        @if (state() === 'stopped' || state() === 'playing' || state() === 'paused') {
+          <button
+            (click)="handlePlayClick()"
+            <%= name %>Button="secondary"
+            [attr.aria-label]="state() === 'playing' ? 'Pause Audio' : 'Play Audio'"
+            class="aspect-square !px-2"
+          >
+            <<%= name %>-icon [name]="state() === 'playing' ? 'lucidePause' : 'lucidePlay'" />
+          </button>
+        }
+      </div>
+
+      <!-- Status Text -->
+      <div class="text-muted-foreground text-center text-sm">
+        @if (state() === 'idle') {
+          <p>Click the microphone to start recording</p>
+        } @else if (state() === 'recording') {
+          <p>Recording in progress...</p>
+        } @else if (state() === 'stopped' || state() === 'playing' || state() === 'paused') {
+          <p>Recording complete • {{ formattedTime() }}</p>
+        }
+      </div>
+    </div>
+  `,
+  host: {
+    class: 'block w-full',
+  },
+})
+export class AudioRecorder implements OnDestroy {
+  readonly state = signal<RecorderState>('idle');
+  readonly audioBuffer = signal<AudioBuffer | null>(null);
+  readonly audioBlob = signal<Blob | null>(null);
+  readonly recordingTime = signal(0);
+  readonly currentTime = signal(0);
+  readonly duration = signal(0);
+  readonly error = signal<string | null>(null);
+  readonly liveAudioBuffer = signal<AudioBuffer | null>(null);
+
+  // Outputs
+  readonly recordingComplete = output<Blob>();
+  readonly errorChange = output<string | null>();
+
+  private mediaRecorder: MediaRecorder | null = null;
+  private audioChunks: Blob[] = [];
+  private recordingTimer: number | null = null;
+  private audioElement: HTMLAudioElement | null = null;
+  private animationFrameId: number | null = null;
+  private audioContext: AudioContext | null = null;
+  private analyser: AnalyserNode | null = null;
+  private dataArray: Uint8Array<ArrayBuffer> | null = null;
+  private amplitudeHistory: number[] = [];
+  private lastSampleTime = 0;
+  private readonly sampleInterval = 100; // Sample every 100ms
+
+  readonly playbackProgress = computed(() =>
+    this.duration() > 0 ? this.currentTime() / this.duration() : 0,
+  );
+
+  readonly formattedTime = computed(() => {
+    const seconds = this.state() === 'recording' ? this.recordingTime() : this.duration();
+    return this.formatTime(seconds);
+  });
+
+  constructor() {
+    effect(() => {
+      const currentState = this.state();
+      if (currentState === 'stopped' && this.audioBlob()) {
+        this.decodeAudioBuffer();
+      }
+    });
+  }
+
+  async handleRecordClick(): Promise<void> {
+    if (this.state() === 'recording') {
+      this.stopRecording();
+    } else {
+      await this.startRecording();
+    }
+  }
+
+  async handlePlayClick(): Promise<void> {
+    if (this.state() === 'playing') {
+      this.pausePlayback();
+    } else {
+      await this.startPlayback();
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.cleanup();
+  }
+
+  private async startRecording(): Promise<void> {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+
+      // Initialize audio context for live visualization
+      if (!this.audioContext) {
+        this.audioContext = new AudioContext();
+      }
+
+      // Set up analyser for live waveform
+      this.analyser = this.audioContext.createAnalyser();
+      this.analyser.fftSize = 256;
+      const bufferLength = this.analyser.frequencyBinCount;
+      this.dataArray = new Uint8Array(bufferLength);
+
+      // Connect microphone to analyser
+      const source = this.audioContext.createMediaStreamSource(stream);
+      source.connect(this.analyser);
+
+      // Start MediaRecorder
+      this.mediaRecorder = new MediaRecorder(stream);
+      this.audioChunks = [];
+      this.recordingTime.set(0);
+      this.amplitudeHistory = [];
+      this.lastSampleTime = performance.now();
+
+      this.mediaRecorder.ondataavailable = event => {
+        if (event.data.size > 0) {
+          this.audioChunks.push(event.data);
+        }
+      };
+
+      this.mediaRecorder.onstop = () => {
+        const blob = new Blob(this.audioChunks, { type: 'audio/webm' });
+        this.audioBlob.set(blob);
+        this.recordingComplete.emit(blob);
+        this.state.set('stopped');
+        this.stopLiveVisualization();
+
+        // Stop all tracks
+        stream.getTracks().forEach(track => track.stop());
+      };
+
+      this.mediaRecorder.start();
+      this.state.set('recording');
+
+      // Start live visualization
+      this.startLiveVisualization();
+
+      // Start recording timer
+      this.recordingTimer = window.setInterval(() => {
+        this.recordingTime.update(time => time + 1);
+      }, 1000);
+    } catch (error) {
+      console.error('Failed to start recording:', error);
+      const errorMsg = 'Failed to access microphone. Please grant permission.';
+      this.error.set(errorMsg);
+      this.errorChange.emit(errorMsg);
+    }
+  }
+
+  private stopRecording(): void {
+    if (this.mediaRecorder && this.state() === 'recording') {
+      this.mediaRecorder.stop();
+      if (this.recordingTimer) {
+        clearInterval(this.recordingTimer);
+        this.recordingTimer = null;
+      }
+    }
+  }
+
+  private async decodeAudioBuffer(): Promise<void> {
+    const blob = this.audioBlob();
+    if (!blob) return;
+
+    try {
+      if (!this.audioContext) {
+        this.audioContext = new AudioContext();
+      }
+
+      const arrayBuffer = await blob.arrayBuffer();
+      const buffer = await this.audioContext.decodeAudioData(arrayBuffer);
+      this.audioBuffer.set(buffer);
+      this.duration.set(buffer.duration);
+    } catch (error) {
+      console.error('Failed to decode audio:', error);
+    }
+  }
+
+  private async startPlayback(): Promise<void> {
+    const blob = this.audioBlob();
+    if (!blob) return;
+
+    if (!this.audioElement) {
+      this.audioElement = new Audio();
+      this.audioElement.src = URL.createObjectURL(blob);
+
+      this.audioElement.onended = () => {
+        this.state.set('stopped');
+        this.stopAnimationLoop();
+        this.currentTime.set(0);
+      };
+    }
+
+    try {
+      await this.audioElement.play();
+      this.state.set('playing');
+      this.startAnimationLoop();
+    } catch (error) {
+      console.error('Playback failed:', error);
+      const errorMsg = 'Could not play audio.';
+      this.error.set(errorMsg);
+      this.errorChange.emit(errorMsg);
+    }
+  }
+
+  private pausePlayback(): void {
+    if (this.audioElement && this.state() === 'playing') {
+      this.audioElement.pause();
+      this.state.set('paused');
+      this.stopAnimationLoop();
+    }
+  }
+
+  private startAnimationLoop(): void {
+    if (!this.audioElement) return;
+
+    const animate = () => {
+      if (this.audioElement) {
+        this.currentTime.set(this.audioElement.currentTime);
+        this.animationFrameId = requestAnimationFrame(animate);
+      }
+    };
+    animate();
+  }
+
+  private stopAnimationLoop(): void {
+    if (this.animationFrameId) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = null;
+    }
+  }
+
+  private startLiveVisualization(): void {
+    if (!this.analyser || !this.dataArray || !this.audioContext) return;
+
+    const visualize = () => {
+      if (this.state() !== 'recording' || !this.analyser || !this.dataArray) {
+        return;
+      }
+
+      const currentTime = performance.now();
+
+      // Sample amplitude at regular intervals
+      if (currentTime - this.lastSampleTime >= this.sampleInterval) {
+        // Get time domain data from analyser
+        this.analyser.getByteTimeDomainData(this.dataArray);
+
+        // Calculate average amplitude for this sample
+        let sum = 0;
+        for (let i = 0; i < this.dataArray.length; i++) {
+          const normalized = (this.dataArray[i] - 128) / 128.0;
+          sum += Math.abs(normalized);
+        }
+        const avgAmplitude = sum / this.dataArray.length;
+
+        // Add to history
+        this.amplitudeHistory.push(avgAmplitude);
+        this.lastSampleTime = currentTime;
+
+        // Create an AudioBuffer with all amplitude values
+        // The visualizer will handle showing only what fits in the canvas width
+        const sampleRate = this.audioContext!.sampleRate;
+        const samplesPerBar = Math.floor((sampleRate * this.sampleInterval) / 1000);
+        const totalSamples = this.amplitudeHistory.length * samplesPerBar;
+
+        const buffer = this.audioContext!.createBuffer(1, totalSamples, sampleRate);
+        const channelData = buffer.getChannelData(0);
+
+        // Fill the buffer with amplitude values, repeating each for the bar duration
+        for (let i = 0; i < this.amplitudeHistory.length; i++) {
+          const amplitude = this.amplitudeHistory[i];
+          const startIdx = i * samplesPerBar;
+          for (let j = 0; j < samplesPerBar && startIdx + j < totalSamples; j++) {
+            channelData[startIdx + j] = amplitude;
+          }
+        }
+
+        this.liveAudioBuffer.set(buffer);
+      }
+
+      this.animationFrameId = requestAnimationFrame(visualize);
+    };
+
+    visualize();
+  }
+
+  private stopLiveVisualization(): void {
+    if (this.animationFrameId) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = null;
+    }
+    this.liveAudioBuffer.set(null);
+    this.amplitudeHistory = [];
+  }
+
+  private cleanup(): void {
+    this.stopRecording();
+    this.stopAnimationLoop();
+    this.stopLiveVisualization();
+
+    if (this.audioElement) {
+      this.audioElement.pause();
+      if (this.audioElement.src) {
+        URL.revokeObjectURL(this.audioElement.src);
+      }
+      this.audioElement = null;
+    }
+
+    if (this.recordingTimer) {
+      clearInterval(this.recordingTimer);
+      this.recordingTimer = null;
+    }
+  }
+
+  private formatTime(seconds: number): string {
+    if (isNaN(seconds) || seconds === 0) return '0:00';
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+  }
+}

package/schematics/components/files/audio/AudioVisualizer.ts.template

@@ -0,0 +1,175 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ElementRef,
+  viewChild,
+  input,
+  OnDestroy,
+  computed,
+  afterRenderEffect,
+} from '@angular/core';
+
+@Component({
+  selector: 'app-audio-visualizer',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<canvas #canvas class="h-full w-full"></canvas>`,
+  host: {
+    class: 'block w-full h-full',
+  },
+})
+export class AudioVisualizer implements OnDestroy {
+  audioBuffer = input<AudioBuffer | null>(null);
+  progress = input(0); // 0 to 1
+  useFixedBarWidth = input(false); // Whether to use fixed bar width (for recording) or fit all bars (for playback)
+  canvasEl = viewChild.required<ElementRef<HTMLCanvasElement>>('canvas');
+
+  private canvasCtx: CanvasRenderingContext2D | null = null;
+
+  private readonly fixedBarWidth = 3; // Fixed width for each bar in pixels
+  private readonly barGap = 2; // Gap between bars
+
+  private readonly waveformData = computed(() => {
+    const buffer = this.audioBuffer();
+    if (!buffer) {
+      return null;
+    }
+
+    const rawData = buffer.getChannelData(0);
+    // Calculate number of bars based on the buffer duration and sample interval
+    // Assuming each bar represents 100ms of audio
+    const numBars = Math.ceil(rawData.length / (buffer.sampleRate * 0.1));
+
+    if (numBars <= 0) {
+      return [];
+    }
+
+    const samplesPerBar = Math.floor(rawData.length / numBars);
+    const data: number[] = [];
+    for (let i = 0; i < numBars; i++) {
+      let sum = 0;
+      const start = i * samplesPerBar;
+      for (let j = 0; j < samplesPerBar; j++) {
+        sum += Math.abs(rawData[start + j]);
+      }
+      data.push(sum / samplesPerBar);
+    }
+
+    const maxAmp = Math.max(...data);
+    if (maxAmp === 0) {
+      return data.map(() => 0.05); // Draw a flat line for silence
+    }
+
+    return data.map(d => d / maxAmp);
+  });
+
+  constructor() {
+    afterRenderEffect(() => {
+      // Establish dependency on waveformData, progress, and useFixedBarWidth.
+      // This effect will run whenever they change.
+      this.waveformData();
+      this.progress();
+      this.useFixedBarWidth();
+
+      // Only attempt to draw if the canvas context is ready.
+      const canvas = this.canvasEl().nativeElement;
+      this.canvasCtx = canvas.getContext('2d');
+      this.resizeCanvas();
+      window.addEventListener('resize', this.resizeCanvas);
+      this.draw();
+    });
+  }
+
+  ngOnDestroy(): void {
+    // window.removeEventListener('resize', this.resizeCanvas);
+  }
+
+  private resizeCanvas = (): void => {
+    const canvas = this.canvasEl()?.nativeElement;
+    if (canvas && this.canvasCtx) {
+      const parent = canvas.parentElement;
+      if (parent) {
+        const dpr = window.devicePixelRatio || 1;
+        const rect = parent.getBoundingClientRect();
+
+        // Setting width/height resets canvas state, so we must do this every time.
+        canvas.width = rect.width * dpr;
+        canvas.height = rect.height * dpr;
+        this.canvasCtx.scale(dpr, dpr);
+
+        // Redraw with the new dimensions.
+        this.draw();
+      }
+    }
+  };
+
+  private draw(): void {
+    if (!this.canvasCtx) return;
+
+    const canvas = this.canvasEl().nativeElement;
+    const ctx = this.canvasCtx;
+    // Use parent's client dimensions for drawing, as the context is scaled.
+    const { clientWidth: width, clientHeight: height } = canvas.parentElement!;
+
+    ctx.clearRect(0, 0, width, height);
+
+    const data = this.waveformData();
+    if (!data) {
+      return;
+    }
+
+    // Use constant colors for canvas compatibility
+    const primaryColor = '#667eea';
+    const mutedForegroundColor = '#9ca3af';
+
+    const totalBars = data.length;
+
+    if (this.useFixedBarWidth()) {
+      // Fixed bar width mode (for recording)
+      const barSpacing = this.fixedBarWidth + this.barGap;
+
+      // Calculate how many bars can fit in the canvas width
+      const maxVisibleBars = Math.floor(width / barSpacing);
+
+      // Show only the most recent bars (from the right)
+      const startBarIndex = Math.max(0, totalBars - maxVisibleBars);
+      const visibleBars = data.slice(startBarIndex);
+
+      const progressIndex = Math.floor(this.progress() * totalBars);
+
+      // Draw bars from left to right
+      for (let i = 0; i < visibleBars.length; i++) {
+        const actualBarIndex = startBarIndex + i;
+        const barHeight = Math.max(1, visibleBars[i] * height * 0.9);
+
+        const x = i * barSpacing;
+        const y = (height - barHeight) / 2;
+
+        // Use primary color for progress, muted color for remaining
+        ctx.fillStyle = actualBarIndex < progressIndex ? primaryColor : mutedForegroundColor;
+
+        ctx.beginPath();
+        ctx.roundRect(x, y, this.fixedBarWidth, barHeight, 2);
+        ctx.fill();
+      }
+    } else {
+      // Fit all bars mode (for playback)
+      const barWidth = width / totalBars;
+      const progressIndex = Math.floor(this.progress() * totalBars);
+
+      for (let i = 0; i < totalBars; i++) {
+        const barHeight = Math.max(1, data[i] * height * 0.9);
+
+        const actualBarWidth = barWidth * 0.6;
+        const x = i * barWidth + barWidth * 0.2;
+        const y = (height - barHeight) / 2;
+
+        // Use primary color for progress, muted color for remaining
+        ctx.fillStyle = i < progressIndex ? primaryColor : mutedForegroundColor;
+
+        ctx.beginPath();
+        ctx.roundRect(x, y, actualBarWidth, barHeight, 2);
+        ctx.fill();
+      }
+    }
+  }
+}

package/schematics/components/files/audio/index.ts.template

@@ -0,0 +1,3 @@
+export * from './AudioVisualizer';
+export * from './AudioPlayer';
+export * from './AudioRecorder';

package/schematics/components/files/button/button-llm.md.template

@@ -11,14 +11,15 @@ import { Button } from '@/ui/button';
 - ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'outline' | 'icon'
 - **Inputs:**
 
-  - `variant`: ButtonVariant = 'primary'
+  - `<%= name %>Button`: ButtonVariant = 'primary'
 
 - **Export:** `#button="<%= name %>Button"` - Template reference
 
 ## Usage
 
 ```html
-<button <%= name %>Button>Button</button> <button <%= name %>Button variant="ghost">Button</button>
+<button <%= name %>Button>Button</button>
+<button <%= name %>Button="ghost">Button</button>
 <button <%= name %>Button="icon">
   <<%= name %>-icon name="lucideHouse" />
 </button>