Clean up music detail views

vrobbler/apps/music/views.py

@@ -8,6 +8,7 @@ from scrobbles.stats import get_scrobble_count_qs
 
 class TrackListView(generic.ListView):
     model = Track
+    paginate_by = 200
 
     def get_queryset(self):
         return get_scrobble_count_qs(user=self.request.user).order_by(
@@ -30,10 +31,18 @@ class TrackDetailView(generic.DetailView):
 
 class ArtistListView(generic.ListView):
     model = Artist
+    paginate_by = 100
 
     def get_queryset(self):
         return super().get_queryset().order_by("name")
 
+    def get_context_data(self, *, object_list=None, **kwargs):
+        context_data = super().get_context_data(
+            object_list=object_list, **kwargs
+        )
+        context_data['view'] = self.request.GET.get('view')
+        return context_data
+
 
 class ArtistDetailView(generic.DetailView):
     model = Artist
@@ -49,6 +58,17 @@ class ArtistDetailView(generic.DetailView):
 
 class AlbumListView(generic.ListView):
     model = Album
+    paginate_by = 50
+
+    def get_queryset(self):
+        return super().get_queryset().order_by("name")
+
+    def get_context_data(self, *, object_list=None, **kwargs):
+        context_data = super().get_context_data(
+            object_list=object_list, **kwargs
+        )
+        context_data['view'] = self.request.GET.get('view')
+        return context_data
 
 
 class AlbumDetailView(generic.DetailView):

vrobbler/apps/scrobbles/templatetags/urlreplace.py

@@ -0,0 +1,10 @@
+from django import template
+
+register = template.Library()
+
+
+@register.simple_tag(takes_context=True)
+def urlreplace(context, **kwargs):
+    query = context['request'].GET.copy()
+    query.update(kwargs)
+    return query.urlencode()

vrobbler/templates/base.html

@@ -212,6 +212,7 @@
                                 Dashboard
                                 </a>
                             </li>
+                            {% if user.is_authenticated %}
                             <li class="nav-item">
                                 <a class="nav-link" aria-current="page" href="/charts/">
                                 <span data-feather="bar-chart"></span>
@@ -230,6 +231,12 @@
                                 Artists
                                 </a>
                             </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="/albums/">
+                                <span data-feather="music"></span>
+                                Albums
+                                </a>
+                            </li>
                             <li class="nav-item">
                                 <a class="nav-link" href="/movies/">
                                 <span data-feather="film"></span>
@@ -242,7 +249,6 @@
                                 TV Shows
                                 </a>
                             </li>
-                            {% if user.is_authenticated %}
                             <li class="nav-item">
                                 <a class="nav-link" href="/admin/">
                                 <span data-feather="key"></span>
@@ -261,13 +267,13 @@
                             {% for scrobble in now_playing_list %}
                             <div>
                                 {% if scrobble.media_obj.album.cover_image %}
-                                <td><img src="{{scrobble.track.album.cover_image.url}}" width=120 height=120
-                                        style="border:1px solid black; " /></td><br/>
+                                <td><img src="{{scrobble.track.album.cover_image.url}}" width=120 height=120 style="border:1px solid black; " /></td><br/>
                                 {% endif %}
-                                {{scrobble.media_obj.title}}<br/>
-                                {% if scrobble.media_obj.subtitle %}<em>{{scrobble.media_obj.subtitle}}</em><br/>{% endif %}
-                                <small>{{scrobble.timestamp|naturaltime}}<br/>
-                                    from {{scrobble.source}}</small>
+                                <a href="{{scrobble.media_obj.get_absolute_url}}">{{scrobble.media_obj.title}}</a><br/>
+                                {% if scrobble.media_obj.subtitle %}
+                                <em><a href="{{scrobble.media_obj.subtitle.get_absolute_url}}">{{scrobble.media_obj.subtitle}}</a></em><br/>
+                                {% endif %}
+                                <small>{{scrobble.timestamp|naturaltime}}<br/> from {{scrobble.source}}</small>
                                 <div class="progress-bar" style="margin-right:5px;">
                                     <span class="progress-bar-fill" style="width: {{scrobble.percent_played}}%;"></span>
                                 </div>

vrobbler/templates/music/album_list.html

@@ -1,11 +1,82 @@
 {% extends "base_list.html" %}
+{% load urlreplace %}
 
 {% block title %}Albums{% endblock %}
 
 {% block lists %}
-{% for album in object_list %}
-<dl style="width: 130px; float: left; margin-right:10px;">
-    <dd><img src="{{album.cover_image.url}}" width=120 height=120 /></dd>
-</dl>
-{% endfor %}
+
+<div class="row">
+    <p class="view">
+        <span class="view-links">
+            {% if view == 'grid' %}
+                View as <a href="?{% urlreplace view='list' %}">List</a>
+            {% else %}
+                View as <a href="?{% urlreplace view='grid' %}">Grid</a>
+            {% endif %}
+        </span>
+    </p>
+    <p class="pagination">
+        <span class="page-links">
+            {% if page_obj.has_previous %}
+                <a href="?{% urlreplace page=page_obj.previous_page_number %}">prev</a>
+            {% endif %}
+                <span class="page-current">
+                    Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
+                </span>
+            {% if page_obj.has_next %}
+                <a href="?{% urlreplace page=page_obj.next_page_number %}">next</a>
+            {% endif %}
+        </span>
+    </p>
+    <hr />
+
+    {% if view == 'grid' %}
+    <div>
+        {% for album in object_list %}
+        {% if album.cover_image %}
+        <dl style="width: 130px; float: left; margin-right:10px;">
+            <dd><img src="{{album.cover_image.url}}" width=120 height=120 /></dd>
+        </dl>
+        {% endif %}
+        {% endfor %}
+    </div>
+    {% else %}
+    <div class="col-md">
+        <div class="table-responsive">
+            <table class="table table-striped table-sm">
+            <thead>
+                <tr>
+                    <th scope="col">Album</th>
+                    <th scope="col">Artist</th>
+                    <th scope="col">Scrobbles</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for album in object_list %}
+                <tr>
+                    <td><a href="{{album.get_absolute_url}}">{{album}}</a></td>
+                    <td><a href="{{album.artist.get_absolute_url}}">{{album.artist}}</a></td>
+                    <td>{{album.scrobbles.count}}</td>
+                </tr>
+                {% endfor %}
+            </tbody>
+            </table>
+        </div>
+    </div>
+    {% endif %}
+
+    <div class="pagination" style="margin-bottom:50px;">
+        <span class="page-links">
+            {% if page_obj.has_previous %}
+                <a href="?{% urlreplace page=page_obj.previous_page_number %}">prev</a>
+            {% endif %}
+                <span class="page-current">
+                    Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
+                </span>
+            {% if page_obj.has_next %}
+                <a href="?{% urlreplace page=page_obj.next_page_number %}">next</a>
+            {% endif %}
+        </span>
+    </div>
+</div>
 {% endblock %}

vrobbler/templates/music/artist_detail.html

@@ -4,12 +4,11 @@
 {% block title %}{{object.name}}{% endblock %}
 
 {% block lists %}
-
 <div class="row">
 
     {% if object.thumbnail %}
-    <p style="float:left; width:302px; padding:0; border: 1px solid #ccc">
-        <img src="{{artist.thumbnail.url}}" width=300 height=300 />
+    <p style="float:left; width:300px; margin-right:10px;">
+        <img style="border:1px solid #ccc;" src="{{artist.thumbnail.url}}" width=300 height=300 />
     </p>
     {% else %}
     {% if object.album_set.first.cover_image %}
@@ -18,6 +17,11 @@
     </p>
     {% endif %}
     {% endif %}
+    <div style="float:left; width:600px; margin-left:10px; ">
+        <p>{{artist.biography|safe|linebreaks|truncatewords:160}}</p>
+        <hr/>
+        <p><a href="{{artist.mb_link}}">Musicbrainz</a></p>
+    </div>
 </div>
 <div class="row">
     <p>{{artist.scrobbles.count}} scrobbles</p>

vrobbler/templates/music/artist_list.html

@@ -1,9 +1,45 @@
 {% extends "base_list.html" %}
+{% load urlreplace %}
 
 {% block title %}Artists{% endblock %}
 
 {% block lists %}
 <div class="row">
+    <p class="view">
+        <span class="view-links">
+            {% if view == 'grid' %}
+                View as <a href="?{% urlreplace view='list' %}">List</a>
+            {% else %}
+                View as <a href="?{% urlreplace view='grid' %}">Grid</a>
+            {% endif %}
+        </span>
+    </p>
+    <p class="pagination">
+        <span class="page-links">
+            {% if page_obj.has_previous %}
+                <a href="?{% urlreplace page=page_obj.previous_page_number %}">prev</a>
+            {% endif %}
+                <span class="page-current">
+                    Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
+                </span>
+            {% if page_obj.has_next %}
+                <a href="?{% urlreplace page=page_obj.next_page_number %}">next</a>
+            {% endif %}
+        </span>
+    </p>
+    <hr />
+
+    {% if view == 'grid' %}
+    <div>
+        {% for artist in object_list %}
+        {% if artist.thumbnail %}
+        <dl style="width: 130px; float: left; margin-right:10px;">
+            <dd><img src="{{artist.thumbnail.url}}" width=120 height=120 /></dd>
+        </dl>
+        {% endif %}
+        {% endfor %}
+    </div>
+    {% else %}
     <div class="col-md">
         <div class="table-responsive">
             <table class="table table-striped table-sm">
@@ -26,5 +62,20 @@
             </table>
         </div>
     </div>
+    {% endif %}
+
+    <div class="pagination" style="margin-bottom:50px;">
+        <span class="page-links">
+            {% if page_obj.has_previous %}
+                <a href="?{% urlreplace page=page_obj.previous_page_number %}">prev</a>
+            {% endif %}
+                <span class="page-current">
+                    Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
+                </span>
+            {% if page_obj.has_next %}
+                <a href="?{% urlreplace page=page_obj.next_page_number %}">next</a>
+            {% endif %}
+        </span>
+    </div>
 </div>
 {% endblock %}

vrobbler/templates/music/track_list.html

@@ -3,10 +3,57 @@
 {% block title %}Tracks{% endblock %}
 
 {% block lists %}
-<h2>All time</h2>
-{% for track in object_list %}
-<ul>
-    <li><a href="{{track.get_absolute_url}}">{{track}}</a></li>
-</ul>
-{% endfor %}
+<div class="row">
+    <p class="pagination">
+        <span class="page-links">
+            {% if page_obj.has_previous %}
+                <a href="?page={{ page_obj.previous_page_number }}">previous</a>
+            {% endif %}
+                <span class="page-current">
+                    Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
+                </span>
+            {% if page_obj.has_next %}
+                <a href="?page={{ page_obj.next_page_number }}">next</a>
+            {% endif %}
+        </span>
+    </p>
+    <hr />
+
+    <div class="col-md">
+        <div class="table-responsive">
+            <table class="table table-striped table-sm">
+            <thead>
+                <tr>
+                    <th scope="col">Track</th>
+                    <th scope="col">Artist</th>
+                    <th scope="col">Scrobbles</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for track in object_list %}
+                <tr>
+                    <td><a href="{{track.get_absolute_url}}">{{track}}</a></td>
+                    <td><a href="{{track.artist.get_absolute_url}}">{{track.artist}}</a></td>
+                    <td>{{track.scrobble_set.count}}</td>
+                </tr>
+                {% endfor %}
+            </tbody>
+            </table>
+        </div>
+    </div>
+
+    <div class="pagination" style="margin-bottom:50px;">
+        <span class="page-links">
+            {% if page_obj.has_previous %}
+                <a href="?page={{ page_obj.previous_page_number }}">previous</a>
+            {% endif %}
+                <span class="page-current">
+                    Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
+                </span>
+            {% if page_obj.has_next %}
+                <a href="?page={{ page_obj.next_page_number }}">next</a>
+            {% endif %}
+        </span>
+    </div>
+</div>
 {% endblock %}