Farmer app audio support

apps/picsa-tools/farmer-content/src/app/pages/home/farmer-home.component.html

@@ -25,4 +25,15 @@ <h2 class="step-title">{{ step.title | translate }}</h2>
 
     }
   </div>
+  <div>
+    <h2>Test Audio Playback</h2>
+    <h3>Web Audio</h3>
+    <picsa-audio-playback
+      audioUrl="https://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/theme_01.mp3"
+    ></picsa-audio-playback>
+    <h3>File Audio (TODO)</h3>
+    <picsa-audio-playback
+      audioUrl="https://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/theme_01.mp3"
+    ></picsa-audio-playback>
+  </div>
 </div>

apps/picsa-tools/farmer-content/src/app/pages/home/farmer-home.component.ts

@@ -7,8 +7,11 @@ import { RouterModule } from '@angular/router';
 import { FARMER_CONTENT_DATA } from '@picsa/data';
 import { FadeInOut } from '@picsa/shared/animations';
 import { PicsaScrollRestoreDirective } from '@picsa/shared/directives';
+import { AudioPlaybackComponent } from '@picsa/shared/features/audio-playback';
+import { AudioService } from '@picsa/shared/features/audio-playback';
 import { PicsaTranslateModule } from '@picsa/shared/modules';
 
+// import TestAudio from '@picsa/farmer-content/src/assets/'
 @Component({
   selector: 'farmer-home',
   standalone: true,
@@ -20,11 +23,14 @@ import { PicsaTranslateModule } from '@picsa/shared/modules';
     PicsaScrollRestoreDirective,
     PicsaTranslateModule,
     RouterModule,
+    AudioPlaybackComponent
   ],
+  providers: [AudioService],
   templateUrl: './farmer-home.component.html',
   styleUrl: './farmer-home.component.scss',
   animations: [FadeInOut()],
 })
 export class FarmerContentHomeComponent {
   public content = FARMER_CONTENT_DATA;
+  // public testAudio = TestAudio
 }

libs/shared/src/features/audio-playback/audio-playback.component.html

@@ -0,0 +1,7 @@
+<div (click)="togglePlayback()" class="audio-button">
+  @if (isAudioPlaying) {
+  <button mat-flat-button><mat-icon>play_circle_outline</mat-icon></button>
+  } @else{
+  <button mat-flat-button><mat-icon>headset</mat-icon></button>
+  }
+</div>

libs/shared/src/features/audio-playback/audio-playback.component.scss

@@ -0,0 +1,15 @@
+.audio-button{
+    outline: none;
+    background-color: none;
+    border: none;
+    padding: 5px;
+    &:hover{
+        background-color: none;
+    }
+    .mat-icon{
+        color: var(--color-secondary);
+        font-size: 28px;
+        height: 32px;
+        width: 32px;
+    }
+}

libs/shared/src/features/audio-playback/audio-playback.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AudioPlaybackComponent } from './audio-playback.component';
+
+describe('AudioPlaybackComponent', () => {
+  let component: AudioPlaybackComponent;
+  let fixture: ComponentFixture<AudioPlaybackComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AudioPlaybackComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AudioPlaybackComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

libs/shared/src/features/audio-playback/audio-playback.component.ts

@@ -0,0 +1,32 @@
+import { Component, OnDestroy, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AudioService } from './audio-playback.service';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+
+@Component({
+  selector: 'picsa-audio-playback',
+  standalone: true,
+  imports:[CommonModule, MatIconModule, MatButtonModule],
+  templateUrl: './audio-playback.component.html',
+  styleUrls: ['./audio-playback.component.scss'],
+})
+export class AudioPlaybackComponent implements OnDestroy {
+  @Input() audioUrl: string;
+  isAudioPlaying = false;
+
+  constructor(private audioService: AudioService) {}
+
+  togglePlayback(): void {
+    this.isAudioPlaying = !this.isAudioPlaying;
+    if (this.audioService.isPlaying()) {
+      this.audioService.pauseAudio();
+    } else {
+      this.audioService.playAudio(this.audioUrl);
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.audioService.stop();
+  }
+}

libs/shared/src/features/audio-playback/audio-playback.service.ts

@@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AudioService {
+  private audio: HTMLAudioElement;
+
+  constructor() {
+    this.audio = new Audio();
+  }
+
+  playAudio(url: string): void {
+    if (this.audio.src !== url) {
+      this.audio.src = url;
+    }
+    this.audio.play();
+  }
+
+  pauseAudio(): void {
+    this.audio.pause();
+  }
+
+  isPlaying(): boolean {
+    return !this.audio.paused;
+  }
+
+  stop(): void {
+    if (this.audio) {
+      this.audio.pause();
+      this.audio.currentTime = 0;
+    }
+  }
+}

libs/shared/src/features/audio-playback/index.ts

@@ -0,0 +1,2 @@
+export * from './audio-playback.component';
+export * from './audio-playback.service';

libs/shared/src/features/index.ts

@@ -1,4 +1,5 @@
 export * from './animations';
+export * from './audio-playback';
 export * from './charts';
 export * from './data-table';
 export * from './dialog';

libs/theme/src/themes/_mixins.scss

@@ -8,4 +8,5 @@
   --color-black: #1a2138;
   --color-light: #d8d8d8;
   --color-white: #ffffff;
+  --color-secondary-200: #{map-get($accent, 200)};  
 }