Issue
Working stacklitz – https://stackblitz.com/edit/github-rlkrzv?file=src/app/play-list-page/play-list-page.component.html
Im trying to toggle between play and pause icons of a selected row, but when a song starts playing,
the whole table gets a "pause" icon (examples below).
Highlighting a specific row works fine, toggle between play and pause functions and icons also,
its just toggling the icons in the selected row..
Paused Song
Playing Song
Component.html
<tr *ngFor="let song of playListSongs?.tracks | search:searchTerm; let i = index;" [class.selected]="i==selectedRow" id="selectttt">
<td *ngIf="!isPlaying">
<img src="../assets/play_line_icon.png" class="playBtn" (click)="togglePlaystateSong(song.track_id,i);
getSongInfo(song);setClickedRow(i)" id="imgClickAndChange">
</td>
<td *ngIf="isPlaying">
<img src="../assets/pause_line_icon.png" class="pauseBtn" (click)="togglePlaystateSong(song.track_id,i);
getSongInfo(song);setClickedRow(i)" id="imgClickAndChange">
</td>
<!-- <img class="playBtn" src="..\assets\play_line_icon.png"> -->
<td><img src="..\assets\not_liked.png" id="likedImg" (click)="toggleLikedSongs(song.track_id);setClickedRow(i)" style="cursor:pointer"></td>
<td> {{song.name}}</td>
<td>{{song.artists_names}}</td>
<td>{{song.album_name}}</td>
<td>{{song.release_date | date: 'yyyy-MM-dd'}}</td>
</tr>Component.ts
isPlaying:boolean=false
setClickedRow(index: any) {
this.selectedRow = index;
}
togglePlaystateSong(id: number,index:number) {
// let image = <HTMLInputElement>document.getElementById("imgClickAndChange");
let image2 = <HTMLInputElement>(
document.getElementById("imgClickAndChange2"));
if (!this.selectedSong || this.selectedSong.track_id !== id) {
const token = this.playListsAPI.generateToken();
const songUrl = `http://api.sprintt.co/spotify/play/${id}?access=${token}`;
this.player.src = songUrl;
this.player.load();
this.player.play();
console.log("row's index:", index);
this.isPlaying=true;
// (<HTMLInputElement>document.getElementById("bars")).value="0";
// this.player.currentTime=0;
// image.src = "../assets/pause_line_icon.png";
image2.src = "../assets/controller_icons/bar_pause.png";
} else {
if (this.player.paused) {
this.isPlaying=true;
this.player.play();
// image.src = "../assets/pause_line_icon.png";
image2.src = "../assets/controller_icons/bar_pause.png";
} else {
this.player.pause();
this.isPlaying=false;
// image.src = "../assets/play_line_icon.png";
image2.src = "../assets/controller_icons/bar_play.png";
}
}
}Component.css
.selected {
background: rgba(29, 185, 84, 0.2) !important;
/* color: white; */
}
.playBtn {
visibility: hidden;
/* content: url("/assets/play_line_icon.png"); */
}
.tableWrapper table tr:hover .playBtn {
visibility: visible;
padding-top: 3px;
cursor: pointer;
}
.selected .pauseBtn {
content: url("/assets/pause_line_icon.png");
visibility: visible;
width: 19.98px;
height: 20px;
padding-top: 3px;
}
.selected .playBtn {
content: url("/assets/play_line_icon.png");
visibility: visible;
width: 19.98px;
height: 20px;
padding-top: 3px;
}Much appreciated!
Solution
You are showing the pause picture for every song, you need to make sure you are only showing it for the selected item, make the following change in your template:
<td *ngIf="isPlaying">
<img
src="../assets/pause_line_icon.png"
class="pauseBtn"
(click)="togglePlaystateSong(song.track_id,i);getSongInfo(song);setClickedRow(i)"
id="imgClickAndChange"
*ngIf="selectedRow === i"
/>
</td>
the change is adding *ngIf="selectedRow === i" on the img