Added secondary theme to audio player

This theme is opt-in. Default is the previous color. This is used for the attached audio answer.
sillsdev · Apr 23, 2024 · 5400b31 · 5400b31
1 parent ae3175d
commit 5400b31
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 5 deletions.
diff --git a/...ture/ClientApp/src/app/checking/checking/checking-answers/checking-answers.component.html b/...ture/ClientApp/src/app/checking/checking/checking-answers/checking-answers.component.html
@@ -62,7 +62,12 @@
                 </button>
               </div>
               <div class="audio-added" *ngIf="answer.input?.audioUrl">
-                <app-single-button-audio-player #audio [source]="answer.input?.audioUrl" (click)="toggleAudio()">
+                <app-single-button-audio-player
+                  #audio
+                  [source]="answer.input?.audioUrl"
+                  (click)="toggleAudio()"
+                  theme="secondary"
+                >
                   <mat-icon>{{ audio.playing ? "stop" : "play_arrow" }}</mat-icon>
                 </app-single-button-audio-player>
                 <button mat-icon-button (click)="deleteAudio()" class="clear">

diff --git a/...pp/checking/checking/single-button-audio-player/single-button-audio-player.component.html b/...pp/checking/checking/single-button-audio-player/single-button-audio-player.component.html
@@ -1,4 +1,12 @@
-<button type="button" [style.--audio-progress]="progressInDegrees" *transloco="let t; read: 'checking_audio_player'">
+<button
+  type="button"
+  [style.--audio-progress]="progressInDegrees"
+  [ngClass]="{
+    primary: theme === 'primary',
+    secondary: theme !== 'primary'
+  }"
+  *transloco="let t; read: 'checking_audio_player'"
+>
   <ng-content *ngIf="isAudioAvailable$ | async"></ng-content>
   <mat-spinner *ngIf="audioStatus === AudioStatus.Initializing" [diameter]="20" color="primary"></mat-spinner>
   <mat-icon *ngIf="!isAudioAvailable$.value && audioStatus !== AudioStatus.Initializing" [matTooltip]="t(audioStatus)">

diff --git a/...pp/checking/checking/single-button-audio-player/single-button-audio-player.component.scss b/...pp/checking/checking/single-button-audio-player/single-button-audio-player.component.scss
@@ -1,8 +1,15 @@
 @import 'src/variables';
 
-$progressColor: $purpleLight;
 $progressBackgroundColor: rgba(205, 219, 204, 0.33);
 
+.primary {
+  --theme: #{$purpleLight};
+}
+
+.secondary {
+  --theme: black;
+}
+
 button {
   padding: 0;
   display: flex;
@@ -17,7 +24,7 @@ button {
   // Create a radial gradient and then remove the center of it with a conic gradient to create a circular progress bar
   // The transition between white and transparent happens over several percentage points to avoid aliasing
   background: radial-gradient(white 57%, transparent 61% 100%),
-    conic-gradient($progressColor var(--audio-progress), $progressBackgroundColor 0);
+    conic-gradient(var(--theme) var(--audio-progress), $progressBackgroundColor 0);
 }
 
 button:hover {
@@ -33,5 +40,5 @@ mat-icon {
 }
 
 .ng-star-inserted {
-  color: $purpleLight;
+  color: var(--theme);
 }
diff --git a/.../app/checking/checking/single-button-audio-player/single-button-audio-player.component.ts b/.../app/checking/checking/single-button-audio-player/single-button-audio-player.component.ts
@@ -16,6 +16,7 @@ export class SingleButtonAudioPlayerComponent extends AudioPlayerBaseComponent i
   readonly AudioStatus = AudioStatus;
   readonly hasFinishedPlayingOnce$: BehaviorSubject<boolean> = new BehaviorSubject(false);
 
+  @Input() theme: 'primary' | 'secondary' = 'primary';
   @Input() start?: number;
   @Input() end?: number;
   @Input() override set source(source: string | undefined) {