Changeset 13b2986 in Klonkt

Timestamp:

06/19/2026 08:20:35 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

977f65d

Parents:

59e522f

Message:

EPK: Music section = top 10 most played (instead of first 6 in order)

Query now orders by play_count DESC LIMIT 10; section is titled "Most played"
with a rank number per track.

Co-Authored-By: Claude <noreply@…>

Location:

src

Files:

• routes/epk.js (modified) (1 diff)
• views/pages/epk.ejs (modified) (2 diffs)

src/routes/epk.js

@@ -25 +25 @@
   if (!site) return next();
 
+  // Top 10 meest beluisterde nummers (op play_count), niet zomaar de eerste paar.
   const tracks = db.prepare(
-    `SELECT title, artist, duration, cover_url
+    `SELECT title, artist, duration, cover_url, COALESCE(play_count, 0) AS plays
        FROM audio_tracks
       WHERE site_id = ?
-      ORDER BY position ASC, created_at ASC
-      LIMIT 6`
+      ORDER BY plays DESC, position ASC, created_at ASC
+      LIMIT 10`
   ).all(site.id);
 

src/views/pages/epk.ejs

@@ -28 +28 @@
   <% if (epkTracks && epkTracks.length) { %>
     <div class="epk-block">
-      <h2 class="epk-h2">Muziek</h2>
+      <h2 class="epk-h2">Meest beluisterd</h2>
       <ul class="epk-tracks">
-        <% epkTracks.forEach(function(t){ %>
+        <% epkTracks.forEach(function(t, i){ %>
           <li class="epk-track">
+            <span class="epk-rank"><%= i + 1 %></span>
             <% if (t.cover_url) { %><span class="epk-cover" style="background-image:url('<%= t.cover_url %>')"></span><% } else { %><span class="epk-cover epk-cover-empty">♪</span><% } %>
             <span class="epk-track-meta">
@@ -77 +78 @@
   .epk-tracks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
   .epk-track { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid rgba(128,128,128,.18); border-radius: 12px; }
+  .epk-rank { flex: 0 0 auto; width: 20px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; opacity: .45; }
   .epk-cover { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 8px; background-size: cover; background-position: center; display: grid; place-items: center; }
   .epk-cover-empty { background: var(--epk-accent); color: #fff; opacity: .85; }