From 897649a10f017b084c5ff91d7b89428002a9137f Mon Sep 17 00:00:00 2001
From: vr-varad <varadgupta21#gmail.com>
Date: Thu, 25 Apr 2024 01:19:58 +0530
Subject: [PATCH] Bug in media player in dark/light mode

---
 src/app/shared/media-player/media-player.css  |  4 +++
 src/app/shared/media-player/media-player.html | 32 +++++++++----------
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/app/shared/media-player/media-player.css b/src/app/shared/media-player/media-player.css
index d958a01..79e9817 100644
--- a/src/app/shared/media-player/media-player.css
+++ b/src/app/shared/media-player/media-player.css
@@ -183,3 +183,7 @@
     display: none;
   }
 }
+
+.media-btn{
+  color: white;
+}
diff --git a/src/app/shared/media-player/media-player.html b/src/app/shared/media-player/media-player.html
index 3c08f9f..ce4723d 100644
--- a/src/app/shared/media-player/media-player.html
+++ b/src/app/shared/media-player/media-player.html
@@ -57,36 +57,36 @@
   </div>
   <div class="media-controls" *ngIf="!maximized">
     <div class="media-controls-container">
-      <button matTooltip="Change speed" (click)="media.rate()" *ngIf="media.current?.type === 'Podcast'" mat-icon-button>
+      <button class="media-btn" matTooltip="Change speed" (click)="media.rate()" *ngIf="media.current?.type === 'Podcast'" mat-icon-button>
         <mat-icon>speed</mat-icon>
       </button>
-      <button matTooltip="Skip back 10 seconds" class="hide-small" (click)="media.rewind(10)" *ngIf="media.current?.type === 'Podcast'" mat-icon-button>
+      <button class="media-btn" matTooltip="Skip back 10 seconds" class="hide-small" (click)="media.rewind(10)" *ngIf="media.current?.type === 'Podcast'" mat-icon-button>
         <mat-icon>replay_10</mat-icon>
       </button>
-      <button matTooltip="Previous" [disabled]="!media.canPrevious" (click)="media.previous()" mat-icon-button>
+      <button class="media-btn" matTooltip="Previous" [disabled]="!media.canPrevious" (click)="media.previous()" mat-icon-button>
         <mat-icon>skip_previous</mat-icon>
       </button>
-      <button matTooltip="Play" *ngIf="media.paused" (click)="media.resume()" mat-icon-button>
-        <mat-icon>play_arrow</mat-icon>
+      <button class="media-btn" matTooltip="Play" *ngIf="media.paused" (click)="media.resume()" mat-icon-button>
+        <mat-icon >play_arrow</mat-icon>
       </button>
-      <button matTooltip="Pause" *ngIf="!media.paused" (click)="media.pause()" mat-icon-button>
+      <button class="media-btn" matTooltip="Pause" *ngIf="!media.paused" (click)="media.pause()" mat-icon-button>
         <mat-icon>pause</mat-icon>
       </button>
-      <button matTooltip="Next" [disabled]="!media.canNext" (click)="media.next()" mat-icon-button>
+      <button class="media-btn" matTooltip="Next" [disabled]="!media.canNext" (click)="media.next()" mat-icon-button>
         <mat-icon>skip_next</mat-icon>
       </button>
-      <button matTooltip="Skip forward 10 seconds" class="hide-small" (click)="media.forward(10)" *ngIf="media.current?.type === 'Podcast'" mat-icon-button>
+      <button class="media-btn" matTooltip="Skip forward 10 seconds" class="hide-small" (click)="media.forward(10)" *ngIf="media.current?.type === 'Podcast'" mat-icon-button>
         <mat-icon>forward_10</mat-icon>
       </button>
     </div>
     <div class="media-timeline" *ngIf="!media.videoMode && !miniplayer">
-      <div class="media-timeline-1 hide-small">{{media.time | time}}</div>
-      <div class="media-timeline-2">
+      <div class="media-timeline-1 hide-small" class="media-btn">{{media.time | time}}</div>
+      <div  class="media-timeline-2">
         <mat-slider class="media-slider" discrete [displayWith]="formatLabel" [max]="media.duration" [min]="0" [step]="1">
           <input matSliderThumb [(ngModel)]="media.time" />
         </mat-slider>
       </div>
-      <div class="media-timeline-3 hide-small">{{media.duration | time}}</div>
+      <div class="media-timeline-3 hide-small" class="media-btn">{{media.duration | time}}</div>
     </div>
   </div>
 
@@ -113,7 +113,7 @@
       <!-- <button matTooltip="Zen mode" mat-icon-button (click)="minimize()">
         <mat-icon>self_improvement</mat-icon>
       </button> -->
-      <button matTooltip="Queue" routerLink="/queue" class="hide-small" mat-icon-button>
+      <button  matTooltip="Queue" routerLink="/queue" class="hide-small media-btn" mat-icon-button>
         <mat-icon>queue_music</mat-icon>
       </button>
       <button matTooltip="Exit Media Player" (click)="media.exit()" mat-icon-button>
@@ -123,19 +123,19 @@
   </div>
   <div class="media-audio" *ngIf="!maximized && !media.videoMode">
     <div class="media-audio-container">
-      <button matTooltip="Mute" class="hide-small" *ngIf="media.muted" mat-icon-button (click)="media.mute()">
+      <button matTooltip="Mute" class="hide-small media-btn" *ngIf="media.muted" mat-icon-button (click)="media.mute()">
         <mat-icon>volume_off</mat-icon>
       </button>
-      <button matTooltip="Unmute" class="hide-small" *ngIf="!media.muted" mat-icon-button (click)="media.mute()">
+      <button matTooltip="Unmute" class="hide-small media-btn" *ngIf="!media.muted" mat-icon-button (click)="media.mute()">
         <mat-icon>volume_up</mat-icon>
       </button>
       <!-- <button matTooltip="Zen mode" mat-icon-button (click)="minimize()">
         <mat-icon>self_improvement</mat-icon>
       </button> -->
-      <button matTooltip="Queue" *ngIf="!miniplayer" routerLink="/queue" class="hide-small" mat-icon-button>
+      <button class="media-btn" matTooltip="Queue" *ngIf="!miniplayer" routerLink="/queue" class="hide-small media-btn" mat-icon-button>
         <mat-icon>queue_music</mat-icon>
       </button>
-      <button *ngIf="!miniplayer" matTooltip="Exit Media Player" (click)="media.exit()" mat-icon-button>
+      <button class="media-btn" *ngIf="!miniplayer" matTooltip="Exit Media Player" (click)="media.exit()" mat-icon-button>
         <mat-icon>close</mat-icon>
       </button>
     </div>