show number of media instances per item in media list

Author: FuzzyGrim

src/app/models.py

@@ -10,13 +10,16 @@
 from django.db import models
 from django.db.models import (
     CheckConstraint,
+    Count,
+    F,
     IntegerField,
     Max,
     Prefetch,
     Q,
     UniqueConstraint,
+    Window,
 )
-from django.db.models.functions import Cast
+from django.db.models.functions import Cast, RowNumber
 from django.utils import timezone
 from model_utils import FieldTracker
 from model_utils.fields import MonitorField
@@ -237,6 +240,18 @@ def get_media_list(self, user, media_type, status_filter, sort_filter, search=No
         if search:
             queryset = queryset.filter(item__title__icontains=search)
 
+        queryset = queryset.annotate(
+            repeats=Window(
+                expression=Count("id"),
+                partition_by=[F("item")],
+            ),
+            row_number=Window(
+                expression=RowNumber(),
+                partition_by=[F("item")],
+                order_by=F("created_at").desc(),
+            ),
+        ).filter(row_number=1)
+
         queryset = queryset.select_related("item")
         queryset = self._apply_prefetch_related(queryset, media_type)
 

src/static/css/main.css

@@ -43,6 +43,7 @@
     --color-fuchsia-400: oklch(74% 0.238 322.16);
     --color-fuchsia-600: oklch(59.1% 0.293 322.896);
     --color-fuchsia-700: oklch(51.8% 0.253 323.949);
+    --color-slate-200: oklch(92.9% 0.013 255.508);
     --color-gray-100: oklch(96.7% 0.003 264.542);
     --color-gray-200: oklch(92.8% 0.006 264.531);
     --color-gray-300: oklch(87.2% 0.01 258.338);
@@ -344,6 +345,9 @@
   .bottom-4 {
     bottom: calc(var(--spacing) * 4);
   }
+  .bottom-10 {
+    bottom: calc(var(--spacing) * 10);
+  }
   .bottom-full {
     bottom: 100%;
   }
@@ -1444,6 +1448,9 @@
   .pe-3 {
     padding-inline-end: calc(var(--spacing) * 3);
   }
+  .pe-8 {
+    padding-inline-end: calc(var(--spacing) * 8);
+  }
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
@@ -1643,6 +1650,9 @@
   .text-red-500 {
     color: var(--color-red-500);
   }
+  .text-slate-200 {
+    color: var(--color-slate-200);
+  }
   .text-white {
     color: var(--color-white);
   }
@@ -2324,6 +2334,11 @@
       right: calc(var(--spacing) * 2);
     }
   }
+  .sm\:bottom-2 {
+    @media (width >= 40rem) {
+      bottom: calc(var(--spacing) * 2);
+    }
+  }
   .sm\:left-auto {
     @media (width >= 40rem) {
       left: auto;

src/templates/app/components/media_card.html

@@ -120,6 +120,27 @@
       </div>
     {% endif %}
 
+    {% if media.repeats > 1 %}
+      <div class="absolute sm:bottom-2 sm:right-2 sm:left-auto bottom-10 left-2 bg-gray-900/90 text-white text-xs px-2 py-1 rounded-md flex items-center shadow-md">
+        <svg xmlns="http://www.w3.org/2000/svg"
+             width="24"
+             height="24"
+             viewBox="0 0 24 24"
+             fill="none"
+             stroke="currentColor"
+             stroke-width="2"
+             stroke-linecap="round"
+             stroke-linejoin="round"
+             class="w-4 h-4 text-slate-200 mr-1">
+          <path d="m17 2 4 4-4 4" />
+          <path d="M3 11v-1a4 4 0 0 1 4-4h14" />
+          <path d="m7 22-4-4 4-4" />
+          <path d="M21 13v1a4 4 0 0 1-4 4H3" />
+        </svg>
+        <span class="text-sm text-white">{{ media.repeats }}</span>
+      </div>
+    {% endif %}
+
     <div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 hover-tap:opacity-100">
       <a href="{{ item|media_url }}" class="absolute inset-0"></a>
 

src/templates/app/components/media_table_items.html

@@ -40,9 +40,32 @@
         </div>
       </div>
     </td>
-    <td class="p-2 font-medium">
-      <a href="{{ media.item|media_url }}"
-         class="hover:text-indigo-400 transition-colors line-clamp-2">{{ media.item }}</a>
+    <td class="p-2 pe-8 font-medium">
+      <div class=" flex justify-between items-center">
+        <a href="{{ media.item|media_url }}"
+           class="hover:text-indigo-400 transition-colors line-clamp-1">{{ media.item }}</a>
+
+        {% if media.repeats > 1 %}
+          <div class="flex items-center">
+            <svg xmlns="http://www.w3.org/2000/svg"
+                 width="24"
+                 height="24"
+                 viewBox="0 0 24 24"
+                 fill="none"
+                 stroke="currentColor"
+                 stroke-width="2"
+                 stroke-linecap="round"
+                 stroke-linejoin="round"
+                 class="w-4 h-4 text-slate-200 mr-1">
+              <path d="m17 2 4 4-4 4" />
+              <path d="M3 11v-1a4 4 0 0 1 4-4h14" />
+              <path d="m7 22-4-4 4-4" />
+              <path d="M21 13v1a4 4 0 0 1-4 4H3" />
+            </svg>
+            <span class="text-sm text-white">{{ media.repeats }}</span>
+          </div>
+        {% endif %}
+      </div>
     </td>
     {% if media.score is not None %}
       <td class="p-2 text-center">

src/templates/app/media_list.html

@@ -260,7 +260,7 @@ <h3 class="text-xl font-semibold mb-2">No {{ media_type|media_type_readable_plur
           <thead class="text-left text-gray-400 text-sm">
             <tr>
               <th class="p-2 w-15"></th>
-              <th class="p-2 w-2/5">Title</th>
+              <th class="p-2 pe-8 w-2/5">Title</th>
               <th class="p-2 text-center">Score</th>
               {% if media_type != MediaTypes.MOVIE.value %}<th class="p-2 text-center">Progress</th>{% endif %}
               {% if media_type == MediaTypes.TV.value %}<th class="p-2 text-center">Last Watched</th>{% endif %}