feat: track charts

This commit is contained in:
Cory Dransfeldt 2024-04-05 15:07:51 -07:00
parent 45b981d5b2
commit 2c80e347ba
No known key found for this signature in database
6 changed files with 99 additions and 2 deletions

View file

@ -53,6 +53,26 @@ layout: default
<div class="hidden" id="albums-three-months">
{% render "partials/now/media-grid.liquid", data:musicCharts.threeMonthChart.albums, shape: "square", count: 8 %}
</div>
<div class="now__section--header-wrapper">
<h2 id="tracks" class="now__section--header flex--centered">
{% tablericon "playlist" "Tracks" %}
Tracks
</h2>
<div class="now__section--header-buttons client-side">
<button class="small active" data-toggle="tracks-window">This week</button>
<button class="small secondary" data-toggle="tracks-month">This month</button>
<button class="small secondary" data-toggle="tracks-three-months">3 months</button>
</div>
</div>
<div id="tracks-window">
{% render "partials/now/track-chart.liquid", data:music.topTracks.data, mostPlayed:music.topTracks.mostPlayed %}
</div>
<div class="hidden" id="tracks-month">
{% render "partials/now/track-chart.liquid", data:musicCharts.month.topTracks.data, mostPlayed:musicCharts.month.topTracks.mostPlayed %}
</div>
<div class="hidden" id="tracks-three-months">
{% render "partials/now/track-chart.liquid", data:musicCharts.threeMonthChart.topTracks.data, mostPlayed:musicCharts.threeMonthChart.topTracks.mostPlayed %}
</div>
{% render "partials/now/albumReleases.liquid", albumReleases:albumReleases %}
<h2 id="books" class="now__section--header flex--centered">
{% tablericon "books" "Books" %}

View file

@ -0,0 +1,24 @@
{% if data.size > 0 %}
{% capture css %}
{% render "../../../assets/styles/components/track-chart.css" %}
{% render "../../../assets/styles/components/progress-bar.css" %}
{% endcapture %}
<style>{{ css}}</style>
{% endif %}
<div class="track__chart">
{% for item in data limit: 10 %}
{%- assign percentage = item.plays | calculatePlayPercentage: mostPlayed -%}
<div class="track__chart--item">
<div class="track__chart--presentation">
<div class="track__chart--count">{{ forloop.index }}.</div>
<div class="track__chart--info">
<div class="track__chart--title">{{ item.title }}</div>
<div class="track__chart--artists">
<a href="{{ track.url }}">{{ item.artist }}</a> • {{ item.plays }} plays
</div>
</div>
</div>
{% render "partials/now/progress-bar.liquid", percentage:percentage %}
</div>
{% endfor %}
</div>