call player

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">

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;

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
+  >
+}

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();
+  });
+});

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();
+  }
+}

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;