Farmer app audio support

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

@@ -25,4 +25,8 @@ <h2 class="step-title">{{ step.title | translate }}</h2>
 
     }
   </div>
+  <div>
+    <h2>Test Audio Playback</h2>
+    <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,8 @@
+<button (click)="togglePlayback()" class="audio-button">
+  <div *ngIf="isAudioPlaying; else playIcon">
+    <mat-icon>play_circle_outline</mat-icon>
+  </div>
+  <ng-template #playIcon>
+    <mat-icon>headset</mat-icon>
+  </ng-template>
+</button>

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

@@ -0,0 +1,12 @@
+.audio-button{
+    outline: none;
+    background-color: inherit;
+    border: none;
+    padding: 5px;
+    .mat-icon{
+        color: #7292C7;
+        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,36 @@
+import { Component, ViewChild, ElementRef, OnDestroy, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AudioService } from './audio-playback.service';
+import { MatIconModule } from '@angular/material/icon';
+
+@Component({
+  selector: 'picsa-audio-playback',
+  standalone: true,
+  imports:[CommonModule, MatIconModule],
+  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 {
+    if (this.audioService.isPlaying()) {
+      this.audioService.pauseAudio();
+      this.isAudioPlaying = true;
+    } else {
+      this.audioService.playAudio(this.audioUrl);
+      this.isAudioPlaying = false;
+    }
+  }
+
+  isPlaying(): boolean {
+    return this.audioService.isPlaying();
+  }
+
+  ngOnDestroy(): void {
+    this.audioService.stop();
+  }
+}

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

@@ -0,0 +1,35 @@
+import { Injectable } from '@angular/core';
+import { Router, NavigationStart } from '@angular/router';
+
+@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';

yarn.lock

@@ -16925,7 +16925,7 @@ __metadata:
 "leaflet-draw@github:enketo/Leaflet.draw#ff730785db7fcccbf2485ffcf4dffe1238a7c617":
   version: 1.0.4
   resolution: "leaflet-draw@https://github.com/enketo/Leaflet.draw.git#commit=ff730785db7fcccbf2485ffcf4dffe1238a7c617"
-  checksum: b08b88994769667f11f2b6a8937656c89cea34dafd4661abab0b48b4b97f3bddbdce7b23ddfdb8d7c6335e065530e32a70e281314afa34afa134bf68597945fc
+  checksum: b2280f200f5ea410e33cc5feb500d67d86cb5f16b294eea1306da055614ffc906be7de6dbc9bbf4db6e6e5d27d0396e4701a3b6c4c920548d2aac94b8223879f
   languageName: node
   linkType: hard