From 3ca54695dc31dc2214d71134d64c6eb0fdd62b5b Mon Sep 17 00:00:00 2001
From: Daniel Ponte <amigan@gmail.com>
Date: Thu, 2 Jan 2025 22:59:29 -0500
Subject: [PATCH] call player

---
 .../src/app/calls/calls.component.html        |  4 +-
 .../stillbox/src/app/calls/calls.component.ts |  9 +----
 .../call-player/call-player.component.html    |  9 +++++
 .../call-player/call-player.component.scss    |  0
 .../call-player/call-player.component.spec.ts | 22 +++++++++++
 .../call-player/call-player.component.ts      | 37 +++++++++++++++++++
 .../talkgroup-record.component.scss           |  3 +-
 7 files changed, 73 insertions(+), 11 deletions(-)
 create mode 100644 client/stillbox/src/app/calls/player/call-player/call-player.component.html
 create mode 100644 client/stillbox/src/app/calls/player/call-player/call-player.component.scss
 create mode 100644 client/stillbox/src/app/calls/player/call-player/call-player.component.spec.ts
 create mode 100644 client/stillbox/src/app/calls/player/call-player/call-player.component.ts

diff --git a/client/stillbox/src/app/calls/calls.component.html b/client/stillbox/src/app/calls/calls.component.html
index 67a38fd..c98b368 100644
--- a/client/stillbox/src/app/calls/calls.component.html
+++ b/client/stillbox/src/app/calls/calls.component.html
@@ -109,9 +109,7 @@
     <ng-container matColumnDef="play">
       <th mat-header-cell *matHeaderCellDef></th>
       <td mat-cell *matCellDef="let call">
-        <a class="playButton" (click)="playAudio($event, call)"
-          ><mat-icon>play_arrow</mat-icon></a
-        >
+        <call-player></call-player>
       </td>
     </ng-container>
     <ng-container matColumnDef="download">
diff --git a/client/stillbox/src/app/calls/calls.component.ts b/client/stillbox/src/app/calls/calls.component.ts
index 030f217..9113069 100644
--- a/client/stillbox/src/app/calls/calls.component.ts
+++ b/client/stillbox/src/app/calls/calls.component.ts
@@ -29,6 +29,7 @@ import { MatInputModule } from '@angular/material/input';
 import { debounceTime } from 'rxjs/operators';
 import { ToolbarContextService } from '../navigation/toolbar-context.service';
 import { MatSelectModule } from '@angular/material/select';
+import { CallPlayerComponent } from './player/call-player/call-player.component';
 
 @Pipe({
   name: 'grabDate',
@@ -139,6 +140,7 @@ const reqPageSize = 200;
     CommonModule,
     MatProgressSpinnerModule,
     MatSelectModule,
+    CallPlayerComponent,
   ],
   templateUrl: './calls.component.html',
   styleUrl: './calls.component.scss',
@@ -243,13 +245,6 @@ export class CallsComponent {
     return now.toISOString().slice(0, 16);
   }
 
-  playAudio(ev: Event, call: CallRecord) {
-    let au = new Audio();
-    au.src = this.callsSvc.callAudioURL(call.id);
-    au.load();
-    au.play();
-  }
-
   setPage(p: PageEvent, force?: boolean) {
     this.selection.clear();
     this.curPage = p;
diff --git a/client/stillbox/src/app/calls/player/call-player/call-player.component.html b/client/stillbox/src/app/calls/player/call-player/call-player.component.html
new file mode 100644
index 0000000..1aab7d8
--- /dev/null
+++ b/client/stillbox/src/app/calls/player/call-player/call-player.component.html
@@ -0,0 +1,9 @@
+@if (playing) {
+  <a class="playButton" (click)="stopAudio($event)"
+    ><mat-icon>stop</mat-icon></a
+  >
+} @else {
+  <a class="playButton" (click)="playAudio($event)"
+    ><mat-icon>play_arrow</mat-icon></a
+  >
+}
diff --git a/client/stillbox/src/app/calls/player/call-player/call-player.component.scss b/client/stillbox/src/app/calls/player/call-player/call-player.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/client/stillbox/src/app/calls/player/call-player/call-player.component.spec.ts b/client/stillbox/src/app/calls/player/call-player/call-player.component.spec.ts
new file mode 100644
index 0000000..1a06ffb
--- /dev/null
+++ b/client/stillbox/src/app/calls/player/call-player/call-player.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CallPlayerComponent } from './call-player.component';
+
+describe('CallPlayerComponent', () => {
+  let component: CallPlayerComponent;
+  let fixture: ComponentFixture<CallPlayerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CallPlayerComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CallPlayerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/client/stillbox/src/app/calls/player/call-player/call-player.component.ts b/client/stillbox/src/app/calls/player/call-player/call-player.component.ts
new file mode 100644
index 0000000..4a2eb86
--- /dev/null
+++ b/client/stillbox/src/app/calls/player/call-player/call-player.component.ts
@@ -0,0 +1,37 @@
+import { Component, Input } from '@angular/core';
+import { CallsService } from '../../calls.service';
+import { CallRecord } from '../../../calls';
+import { MatIconModule } from '@angular/material/icon';
+import { fromEvent, Observable, Subscription } from 'rxjs';
+
+@Component({
+  selector: 'call-player',
+  imports: [MatIconModule],
+  templateUrl: './call-player.component.html',
+  styleUrl: './call-player.component.scss',
+})
+export class CallPlayerComponent {
+  @Input() call!: CallRecord;
+  playing = false;
+  playSub!: Subscription;
+  au!: HTMLAudioElement;
+
+  constructor(private callsSvc: CallsService) {}
+
+  stopAudio(ev: Event) {
+    this.au.pause();
+    this.playing = false;
+  }
+
+  playAudio(ev: Event) {
+    this.au = new Audio();
+    this.playSub = fromEvent(this.au, 'ended').subscribe((ev) => {
+      this.playing = false;
+      this.playSub.unsubscribe();
+    });
+    this.playing = true;
+    this.au.src = this.callsSvc.callAudioURL(this.call.id);
+    this.au.load();
+    this.au.play();
+  }
+}
diff --git a/client/stillbox/src/app/talkgroups/talkgroup-record/talkgroup-record.component.scss b/client/stillbox/src/app/talkgroups/talkgroup-record/talkgroup-record.component.scss
index 370c939..5981fc8 100644
--- a/client/stillbox/src/app/talkgroups/talkgroup-record/talkgroup-record.component.scss
+++ b/client/stillbox/src/app/talkgroups/talkgroup-record/talkgroup-record.component.scss
@@ -6,7 +6,8 @@ form div {
 }
 
 mat-form-field,
-.alert {
+.alert,
+alert-rule-builder {
   width: 30rem;
   margin-right: 5px;
   margin-left: 5px;