Search code examples
angularngforselecteditemselectedindex

Toggle icons in a selected row

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 enter image description here

Playing Song

enter image description here

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

    see working stackblitz