Now playing when not using v-repeat

[mrbrainz]

Hi,

I'm outputting a tracklist on a playlist with PHP so I can get individual data on each track (mainly to see if the user has liked the track before). I can't work out the syntax to add a class for "Now Playing"

This is the code I'm using

<div class="trackstuff">
    <div class="titlebox">
        <h4 class="artist"><a href="<?php echo $trackmetadata['artist_permalink_url']; ?>" target="_blank"><?php echo htmlentities($trackmetadata['artist_username']); ?></a></h4>
        <h3 class="tracktitle"><a href="<?php echo $trackmetadata['permalink_url']; ?>" target="_blank"><?php echo htmlentities($trackmetadata['title']); ?></a></h3>
    </div>

   <div class="pghold progresscontain" v-if="player.tracks[player.i] != track || !player.playing" v-on="click: playPause(player.playlistIndex)">
        <div class="progressbase"></div>
        <div class="progressbar" v-style="width: (currentTime / duration * 100) + '%'"></div>
        <div class="seeker"></div>
   </div>
   <div class="progresscontain" v-if="player.tracks[player.i] == track && player.playing" v-on="click: seek($event)">
        <div class="progressbase"></div>
        <div class="progressbar" v-style="width: (currentTime / duration * 100) + '%'"></div>
        <div class="seeker"></div>  
    </div>
    <div class="waveform" style="background-image:url({{ player.currentTrack.waveform_url }}); display:none;" v-if="player.tracks[player.i] == track && player.playing" v-class="'showme'"></div>
    <div class="waveform coverhold" style="background-image:url(<?php echo str_replace('large.jpg','t500x500.jpg',$trackmetadata['artworkuse']); ?>);" v-if="player.tracks[player.i] != track || !player.playing"></div>
    <div class="waveform covercover" v-if="player.tracks[player.i] != track || !player.playing"></div>

    <div class="durationcontain"><span class="starttime" v-on="click:return false">{{ currentTime | prettyTime }}</span>
    <span class="duration" v-on="click:return false">{{ duration | prettyTime }}</span></div>
</div>
<ul class="playlist-tracklist">
<?php $i = 0; foreach($trackmetadata['tracks'] as $playlistitem) : ?>
 <li class="tracklist-item"><a href="javascript:void(0)" id="playlist-item-<?php echo $i+1; ?>" class="playlist-item" v-on="click: playPause(<?php echo $i; ?>);"  v-class="player.currentTrack == tracks.<?php echo $i; ?> ? 'now-playing' : ''">
  <span class="trackno"><?php echo $i+1; ?>.</span>
  <span class="artist"><?php echo htmlentities($playlistitem->user->username);?></span> - <span class="tracktitle"><?php echo htmlentities($playlistitem->title);?></span>
</a> 
<div class="submeta">
    <div class="metaitem"><a href="<?php echo $playlistitem->permalink_url; ?>" target="_blank" class="awesome nssc soundcloudlink" title="Listen to <?php echo htmlentities($playlistitem->title); ?> on Soundcloud"><i class="fa fa-soundcloud"></i></a></div>
    <?php if(!$playlistitem->user_favorite) : ?><div class="metaitem"><a href="javascript:void(0)" onclick="nsscLike(<?php echo $playlistitem->id; ?> ,this,'like');" class="awesome nssc likebutton" title="Favourite <?php echo htmlentities($playlistitem->title); ?>"><i class="fa fa-heart-o"></i></a></div><?php endif; ?>
    <?php if($playlistitem->user_favorite) : ?><div class="metaitem"><a href="javascript:void(0)" onclick="nsscLike(<?php echo $playlistitem->id; ?>,this,'unlike');" class="awesome nssc likebutton liked" title="Favourite <?php echo htmlentities($playlistitem->title);?>"><i class="fa fa-heart"></i></a></div><?php endif; ?>
    <?php if($playlistitem->commentable) : ?><div class="metaitem"><a href="javascript:void(0)" onclick="nsscComment(<?php echo $playlistitem->id; ?>,this);" class="awesome nssc commentbutton" title="Comment on <?php echo htmlentities($playlistitem->title); ?>"><i class="fa fa-comment"></i></a></div><?php endif; ?>
    <?php if($playlistitem->downloadable) : ?><div class="metaitem"><a href="https://api.soundcloud.com/tracks/<?php echo $playlistitem->id; ?>/download?client_id=<?php echo SC_CLIENT_ID; ?>" class="awesome nssc downloadbutton" title="Download <?php echo htmlentities($playlistitem->title); ?>"><i class="fa fa-cloud-download"></i></a></div><?php endif; ?>
    <?php if($playlistitem->purchase_url) : ?><div class="metaitem"><a href="<?php echo $playlistitem->purchase_url; ?>" target="_blank" class="awesome nssc buynowbutton" title="<?php echo ($playlistitem->purchase_title) ? htmlentities($playlistitem->purchase_title) : 'Buy Now'; ?>"><i class="fa fa-shopping-cart"></i></a></div><?php endif; ?>
  </div></li>
<?php $i++; endforeach; ?>
</ul>

It's obviously this bit here that's not working:

v-class="player.currentTrack == tracks.<?php echo $i; ?> ? 'now-playing' : ''"

Is there a syntax that I can achieve what I want using the PHP increment rather than Vue's one?

Thanks,

Greg

[jxnblk]

I'm having a little trouble following the php templating, but if this is the only plangular instance on the page, you could try checking the loop index against player.i rather than the track object itself.

[mrbrainz]

Sorry man. I did kind of go all on the copy/paste there.

So in the v-class I'm adding $i which is an integer that starts at 0 and increments on every loop. There's multiple Plangular instances on the page, both tracks and playlists. So I need to reference now playing within this one instance of a Plangular player with playlist.

I DM'd you a link to the project on SoundCloud you're interested.

<ul class="playlist-tracklist"> 
<?php $i = 0; foreach($trackmetadata['tracks'] as $playlistitem) : ?> 
<li class="tracklist-item"><a href="javascript:void(0)" id="playlist-item-<?php echo $i+1; ?>" class="playlist-item" v-on="click: playPause(<?php echo $i; ?>);" v-class="player.currentTrack == tracks.<?php echo $i; ?> ? 'now-playing' : ''"> 

<span class="trackno"><?php echo $i+1; ?>.</span> 

<span class="artist"><?php echo htmlentities($playlistitem->user->username);?></span> - 

<span class="tracktitle"><?php echo htmlentities($playlistitem->title);?></span>
</a>
</li> <?php $i++; endforeach; ?></ul>```

[mrbrainz]

FYI I found a workaround. I hard-coded the track ID to match against. It now works!

v-class="player.currentTrack.id == '<?php echo $playlistitem->id; ?>' ? 'now-playing' : ''"