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!