Slim down the homepage

vrobbler/apps/scrobbles/views.py

@@ -63,6 +63,7 @@ from scrobbles.tasks import (
 from scrobbles.utils import (
     get_long_plays_completed,
     get_long_plays_in_progress,
+    get_recently_played_board_games,
 )
 
 logger = logging.getLogger(__name__)
@@ -79,6 +80,7 @@ class RecentScrobbleList(ListView):
                 played_to_completion=True, user=user
             )
             data["long_play_in_progress"] = get_long_plays_in_progress(user)
+            data["play_again"] = get_recently_played_board_games(user)
             data["video_scrobble_list"] = completed_for_user.filter(
                 video__isnull=False
             ).order_by("-timestamp")[:15]
@@ -105,32 +107,32 @@ class RecentScrobbleList(ListView):
                 user=self.request.user,
             )
 
-            limit = 14
-            artist = {"user": user, "media_type": "Artist", "limit": limit}
+            # limit = 14
+            # artist = {"user": user, "media_type": "Artist", "limit": limit}
             # This is weird. They don't display properly as QuerySets, so we cast to lists
-            data["chart_keys"] = {
-                "today": "Today",
-                "last7": "Last 7 days",
-                "last30": "Last 30 days",
-                "year": "This year",
-                "all": "All time",
-            }
-            data["current_artist_charts"] = {
-                "today": list(live_charts(**artist, chart_period="today")),
-                "last7": list(live_charts(**artist, chart_period="last7")),
-                "last30": list(live_charts(**artist, chart_period="last30")),
-                "year": list(live_charts(**artist, chart_period="year")),
-                "all": list(live_charts(**artist)),
-            }
-
-            track = {"user": user, "media_type": "Track", "limit": limit}
-            data["current_track_charts"] = {
-                "today": list(live_charts(**track, chart_period="today")),
-                "last7": list(live_charts(**track, chart_period="last7")),
-                "last30": list(live_charts(**track, chart_period="last30")),
-                "year": list(live_charts(**track, chart_period="year")),
-                "all": list(live_charts(**track)),
-            }
+            # data["chart_keys"] = {
+            #    "today": "Today",
+            #    "last7": "Last 7 days",
+            #    "last30": "Last 30 days",
+            #    "year": "This year",
+            #    "all": "All time",
+            # }
+            # data["current_artist_charts"] = {
+            #    "today": list(live_charts(**artist, chart_period="today")),
+            #    "last7": list(live_charts(**artist, chart_period="last7")),
+            #    "last30": list(live_charts(**artist, chart_period="last30")),
+            #    "year": list(live_charts(**artist, chart_period="year")),
+            #    "all": list(live_charts(**artist)),
+            # }
+
+            # track = {"user": user, "media_type": "Track", "limit": limit}
+            # data["current_track_charts"] = {
+            #    "today": list(live_charts(**track, chart_period="today")),
+            #    "last7": list(live_charts(**track, chart_period="last7")),
+            #    "last30": list(live_charts(**track, chart_period="last30")),
+            #    "year": list(live_charts(**track, chart_period="year")),
+            #    "all": list(live_charts(**track)),
+            # }
             data["counts"] = scrobble_counts(user)
         else:
             data["weekly_data"] = week_of_scrobbles()
@@ -396,7 +398,6 @@ def scrobble_start(request, uuid):
     success_url = request.META.get("HTTP_REFERER")
 
     if not user.is_authenticated:
-
         return HttpResponseRedirect(success_url)
 
     media_obj = None

vrobbler/templates/scrobbles/_media_box.html

@@ -0,0 +1,14 @@
+<div class="col-sm">
+    <dl>
+        <dt><a href="{{media.get_absolute_url}}">{{media.title}}</a></dt>
+        {% if media.hltb_cover %}
+        <dd><a href="{{media.get_absolute_url}}"><img src="{{media.hltb_cover.url}}" width=300 height=300 /></a></dd>
+        {% elif media.cover %}
+        <dd><a href="{{media.get_absolute_url}}"><img src="{{media.cover.url}}" style="width: 200px; height: 200px; object-fit:cover; " /></a></dd>
+        {% endif %}
+        <dd>
+            {% if media.is_long_play_in_progress %}Playing{% else %}<a type="button" class="btn btn-sm btn-primary" href="{{media.get_start_url}}">Resume</a>{% endif %}
+            <a type="button" class="right btn btn-sm " href="{{media.get_longplay_finish_url}}">Finish</a>
+        </dd>
+    </dl>
+</div>

vrobbler/templates/scrobbles/_quick_resume.html

@@ -0,0 +1,4 @@
+<h2>Quick resume</h2>
+{% for media in long_play_in_progress.active %}
+    {% include "scrobbles/_media_box.html" with media=media%}
+{% endfor %}

vrobbler/templates/scrobbles/_top_charts.html

@@ -0,0 +1,340 @@
+            <h2>Top Artist</h2>
+            <ul class="nav nav-tabs" id="artistTab" role="tablist">
+                {% for key, name in chart_keys.items %}
+                <li class="nav-item" role="presentation">
+                    <button class="nav-link {% if forloop.counter == 2 %}active{% endif %}"
+                            id="artist-{{key}}-tab" data-bs-toggle="tab" data-bs-target="#artist-{{key}}"
+                            type="button" role="tab" aria-controls="home" aria-selected="true">{{name}}</button>
+                </li>
+                {% endfor %}
+            </ul>
+
+            <div class="tab-content" id="artistTabContent" class="maloja-chart">
+                {% for key, artists in current_artist_charts.items %}
+                <div class="tab-pane fade {% if forloop.counter == 2 %}show active{% endif %}" id="artist-{{key}}" role="tabpanel" aria-labelledby="artist-{{key}}-tab">
+                    <div style="display:block">
+                        <div style="float:left;">
+                            <div class="image-wrapper" style="display:flex; flex-wrap: wrap; margin:0">
+                                <div class="caption">#1 {{artists.0.name}}</div>
+                                {% if artists.0 %}
+                                {% if artists.0.thumbnail %}
+                                <a href="{{artists.0.get_absolute_url}}"><img lt="{{artists.0.name}}" src="{{artists.0.thumbnail.url}}" width="300px"></a>
+                                {% else %}
+                                <a href="{{artists.0.get_absolute_url}}"><img lt="{{artists.0.name}}" src="{% static "images/not-found.jpg" %}" width="300px"></a>
+                                {% endif %}
+                                {% endif %}
+                            </div>
+                        </div>
+                        <div style="float:left; width:300px;">
+                            <div style="display:flex; flex-wrap: wrap;">
+                                <div class="image-wrapper" class="image-wrapper" style="width:50%">
+                                    <div class="caption-medium">#2 {{artists.1.name}}</div>
+                                    {% if artists.1 %}
+                                    {% if artists.1.thumbnail %}
+                                    <a href="{{artists.1.get_absolute_url}}"><img lt="{{artists.1.name}}" src="{{artists.1.thumbnail.url}}" width="150px"></a>
+                                    {% else %}
+                                    <a href="{{artists.1.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="150px"></a>
+                                    {% endif %}
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" class="image-wrapper" style="width:50%">
+                                    <div class="caption-medium">#3 {{artists.2.name}}</div>
+                                    {% if artists.2 %}
+                                    {% if artists.2.thumbnail %}
+                                    <a href="{{artists.2.get_absolute_url}}"><img src="{{artists.2.thumbnail.url}}" width="150px"></a>
+                                    {% else %}
+                                    <a href="{{artists.2.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="150px"></a>
+                                    {% endif %}
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" class="image-wrapper" style="width:50%">
+                                    <div class="caption-medium">#4 {{artists.3.name}}</div>
+                                    {% if artists.3 %}
+                                    {% if artists.3.thumbnail %}
+                                    <a href="{{artists.3.get_absolute_url}}"><img src="{{artists.3.thumbnail.url}}" width="150px"></a>
+                                    {% else %}
+                                    <a href="{{artists.3.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="150px"></a>
+                                    {% endif %}
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" class="image-wrapper" style="width:50%">
+                                    <div class="caption-medium">#5 {{artists.4.name}}</div>
+                                    {% if artists.4 %}
+                                    {% if artists.4.thumbnail %}
+                                    <a href="{{artists.4.get_absolute_url}}"><img src="{{artists.4.thumbnail.url}}" width="150px"></a>
+                                    {% else %}
+                                    <a href="{{artists.4.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="150px"></a>
+                                    {% endif %}
+                                    {% endif %}
+                                </div>
+                            </div>
+                        </div>
+                        <div style="float:left; width:300px;">
+                            <div style="display:flex; flex-wrap: wrap;">
+                                <div class="image-wrapper" class="image-wrapper" class="image-wrapper" style="width:33;">
+                                    <div class="caption-small">#6 {{artists.5.name}}</div>
+                                    {% if artists.5 %}
+                                    {% if artists.5.thumbnail %}
+                                    <a href="{{artists.5.get_absolute_url}}"><img src="{{artists.5.thumbnail.url}}" width="100px"></a>
+                                    {% else %}
+                                    <a href="{{artists.5.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
+                                    {% endif %}
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                                    <div class="caption-small">#7 {{artists.6.name}}</div>
+                                    {% if artists.6 %}
+                                    {% if artists.6.thumbnail %}
+                                    <a href="{{artists.6.get_absolute_url}}"><img src="{{artists.6.thumbnail.url}}" width="100px"></a>
+                                    {% else %}
+                                    <a href="{{artists.6.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
+                                    {% endif %}
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                                    <div class="caption-small">#8 {{artists.7.name}}</div>
+                                    {% if artists.7 %}
+                                    {% if artists.7.thumbnail %}
+                                    <a href="{{artists.7.get_absolute_url}}"><img src="{{artists.7.thumbnail.url}}" width="100px"></a>
+                                    {% else %}
+                                    <a href="{{artists.7.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
+                                    {% endif %}
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                                    <div class="caption-small">#9 {{artists.8.name}}</div>
+                                    {% if artists.8 %}
+                                    {% if artists.8.thumbnail %}
+                                    <a href="{{artists.8.get_absolute_url}}"><img src="{{artists.8.thumbnail.url}}" width="100px"></a>
+                                    {% else %}
+                                    <a href="{{artists.8.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
+                                    {% endif %}
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                                    <div class="caption-small">#10 {{artists.9.name}}</div>
+                                    {% if artists.9 %}
+                                    {% if artists.9.thumbnail %}
+                                    <a href="{{artists.9.get_absolute_url}}"><img src="{{artists.9.thumbnail.url}}" width="100px"></a>
+                                    {% else %}
+                                    <a href="{{artists.9.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
+                                    {% endif %}
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                                    <div class="caption-small">#11 {{artists.10.name}}</div>
+                                    {% if artists.10 %}
+                                    {% if artists.10.thumbnail %}
+                                    <a href="{{artists.10.get_absolute_url}}"><img src="{{artists.10.thumbnail.url}}" width="100px"></a>
+                                    {% else %}
+                                    <a href="{{artists.10.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
+                                    {% endif %}
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                                    <div class="caption-small">#12 {{artists.11.name}}</div>
+                                    {% if artists.11 %}
+                                    {% if artists.11.thumbnail %}
+                                    <a href="{{artists.11.get_absolute_url}}"><img src="{{artists.11.thumbnail.url}}" width="100px"></a>
+                                    {% else %}
+                                    <a href="{{artists.11.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
+                                    {% endif %}
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                                    <div class="caption-small">#13 {{artists.12.name}}</div>
+                                    {% if artists.12 %}
+                                    {% if artists.12.thumbnail %}
+                                    <a href="{{artists.12.get_absolute_url}}"><img src="{{artists.12.thumbnail.url}}" width="100px"></a>
+                                    {% else %}
+                                    <a href="{{artists.12.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
+                                    {% endif %}
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                                    <div class="caption-small">#14 {{artists.13.name}}</div>
+                                    {% if artists.13 %}
+                                    {% if artists.13.thumbnail %}
+                                    <a href="{{artists.13.get_absolute_url}}"><img src="{{artists.13.thumbnail.url}}" width="100px"></a>
+                                    {% else %}
+                                    <a href="{{artists.13.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
+                                    {% endif %}
+                                    {% endif %}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+        </div>
+
+        <div class="row">
+            <h2>Top Tracks</h2>
+            <ul class="nav nav-tabs" id="trackTab" role="tablist">
+                {% for key, name in chart_keys.items %}
+                <li class="nav-item" role="presentation">
+                    <button class="nav-link {% if forloop.counter == 2 %}active{% endif %}" id="track-{{key}}-tab" data-bs-toggle="tab"
+                            data-bs-target="#track-{{key}}" type="button" role="tab" aria-controls="home" aria-selected="true">{{name}}</button>
+                </li>
+                {% endfor %}
+            </ul>
+
+            <div class="tab-content" id="trackTabContent" class="maloja-chart">
+                {% for chart_name, tracks in current_track_charts.items %}
+                <div class="tab-pane fade {% if forloop.counter == 2 %}show active{% endif %}" id="track-{{chart_name}}" role="tabpanel" aria-labelledby="track-{{chart_name}}-tab">
+                    <div style="display:block">
+                        <div style="float:left;">
+                            <div class="image-wrapper" style="display:flex; flex-wrap: wrap; margin:0">
+                                <div class="caption">#1 {{tracks.0.title}}</div>
+                                {% if tracks.0 %}
+                                {% if tracks.0.album.cover_image %}
+                                <a href="{{tracks.0.get_absolute_url}}"><img src="{{tracks.0.album.cover_image.url}}" width="300px"></a>
+                                {% else %}
+                                <a href="{{tracks.0.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="300px"></a>
+                                {% endif %}
+                                {% endif %}
+                            </div>
+                        </div>
+                        <div style="float:left; width:300px;">
+                            <div style="display:flex; flex-wrap: wrap;">
+                                <div class="image-wrapper" style="width:50%">
+                                    <div class="caption-medium">#2 {{tracks.1.title}}</div>
+                                    {% if tracks.1 %}
+                                    {% if tracks.1.album.cover_image %}
+                                    <a href="{{tracks.1.get_absolute_url}}"><img src="{{tracks.1.album.cover_image.url}}" width="150px"></a>
+                                    {% else %}
+                                    <a href="{{tracks.1.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="150px"></a>
+                                    {% endif %}
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" style="width:50%">
+                                    <div class="caption-medium">#3 {{tracks.2.title}}</div>
+                                    {% if tracks.2 %}
+                                    {% if tracks.2.album.cover_image %}
+                                    <a href="{{tracks.2.get_absolute_url}}"><img src="{{tracks.2.album.cover_image.url}}" width="150px"></a>
+                                    {% else %}
+                                    <a href="{{tracks.2.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="150px"></a>
+                                    {% endif %}
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" style="width:50%">
+                                    <div class="caption-medium">#4 {{tracks.3.title}}</div>
+                                    {% if tracks.3 %}
+                                    {% if tracks.3.album.cover_image %}
+                                    <a href="{{tracks.3.get_absolute_url}}"><img src="{{tracks.3.album.cover_image.url}}" width="150px"></a>
+                                    {% else %}
+                                    <a href="{{tracks.3.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="150px"></a>
+                                    {% endif %}
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" style="width:50%">
+                                    <div class="caption-medium">#5 {{tracks.4.title}}</div>
+                                    {% if tracks.4 %}
+                                    {% if tracks.4.album.cover_image %}
+                                    <a href="{{tracks.4.get_absolute_url}}"><img src="{{tracks.4.album.cover_image.url}}" width="150px"></a>
+                                    {% else %}
+                                    <a href="{{tracks.4.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="150px"></a>
+                                    {% endif %}
+                                    {% endif %}
+                                </div>
+                            </div>
+                        </div>
+                        <div style="float:left; width:300px;">
+                            <div style="display:flex; flex-wrap: wrap;">
+                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                                    <div class="caption-small">#6 {{tracks.5.title}}</div>
+                                    {% if tracks.5 %}
+                                    {% if tracks.5.album.cover_image %}
+                                    <a href="{{tracks.5.get_absolute_url}}"><img src="{{tracks.5.album.cover_image.url}}" width="100px"></a>
+                                    {% else %}
+                                    <a href="{{tracks.5.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="100px"></a>
+                                    {% endif %}
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                                    <div class="caption-small">#7 {{tracks.6.title}}</div>
+                                    {% if tracks.6 %}
+                                    {% if tracks.6.album.cover_image %}
+                                    <a href="{{tracks.6.get_absolute_url}}"><img src="{{tracks.6.album.cover_image.url}}" width="100px"></a>
+                                    {% else %}
+                                    <a href="{{tracks.6.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="100px"></a>
+                                    {% endif %}
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                                    <div class="caption-small">#8 {{tracks.7.title}}</div>
+                                    {% if tracks.7 %}
+                                    {% if tracks.7.album.cover_image %}
+                                    <a href="{{tracks.7.get_absolute_url}}"><img src="{{tracks.7.album.cover_image.url}}" width="100px"></a>
+                                    {% else %}
+                                    <a href="{{tracks.7.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="100px"></a>
+                                    {% endif %}
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                                    <div class="caption-small">#9 {{tracks.8.title}}</div>
+                                    {% if tracks.8 %}
+                                    {% if tracks.8.album.cover_image %}
+                                    <a href="{{tracks.8.get_absolute_url}}"><img src="{{tracks.8.album.cover_image.url}}" width="100px"></a>
+                                    {% else %}
+                                    <a href="{{tracks.8.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="100px"></a>
+                                    {% endif %}
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                                    <div class="caption-small">#10 {{tracks.9.title}}</div>
+                                    {% if tracks.9 %}
+                                    {% if tracks.9.album.cover_image %}
+                                    <a href="{{tracks.9.get_absolute_url}}"><img src="{{tracks.9.album.cover_image.url}}" width="100px"></a>
+                                    {% else %}
+                                    <a href="{{tracks.9.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="100px"></a>
+                                    {% endif %}
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                                    <div class="caption-small">#11 {{tracks.10.title}}</div>
+                                    {% if tracks.10 %}
+                                    {% if tracks.10.album.cover_image %}
+                                    <a href="{{tracks.10.get_absolute_url}}"><img src="{{tracks.10.album.cover_image.url}}" width="100px"></a>
+                                    {% else %}
+                                    <a href="{{tracks.10.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="100px"></a>
+                                    {% endif %}
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                                    <div class="caption-small">#12 {{tracks.11.title}}</div>
+                                    {% if tracks.11 %}
+                                    {% if tracks.11.album.cover_image %}
+                                    <a href="{{tracks.11.get_absolute_url}}"><img src="{{tracks.11.album.cover_image.url}}" width="100px"></a>
+                                    {% else %}
+                                    <a href="{{tracks.11.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="100px"></a>
+                                    {% endif %}
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                                    <div class="caption-small">#13 {{tracks.12.title}}</div>
+                                    {% if tracks.12 %}
+                                    {% if tracks.12.album.cover_image %}
+                                    <a href="{{tracks.12.get_absolute_url}}"><img src="{{tracks.12.album.cover_image.url}}" width="100px"></a>
+                                    {% else %}
+                                    <a href="{{tracks.12.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="100px"></a>
+                                    {% endif %}
+                                    {% endif %}
+                                </div>
+                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
+                                    <div class="caption-small">#14 {{tracks.13.title}}</div>
+                                    {% if tracks.13 %}
+                                    {% if tracks.13.album.cover_image %}
+                                    <a href="{{tracks.13.get_absolute_url}}"><img src="{{tracks.13.album.cover_image.url}}" width="100px"></a>
+                                    {% else %}
+                                    <a href="{{tracks.13.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="100px"></a>
+                                    {% endif %}
+                                    {% endif %}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                {% endfor %}
+            </div>

vrobbler/templates/scrobbles/scrobble_list.html

@@ -88,346 +88,7 @@
 
         {% if user.is_authenticated %}
         <div class="row">
-            <h2>Top Artist</h2>
-            <ul class="nav nav-tabs" id="artistTab" role="tablist">
-                {% for key, name in chart_keys.items %}
-                <li class="nav-item" role="presentation">
-                    <button class="nav-link {% if forloop.counter == 2 %}active{% endif %}"
-                            id="artist-{{key}}-tab" data-bs-toggle="tab" data-bs-target="#artist-{{key}}"
-                            type="button" role="tab" aria-controls="home" aria-selected="true">{{name}}</button>
-                </li>
-                {% endfor %}
-            </ul>
-
-            <div class="tab-content" id="artistTabContent" class="maloja-chart">
-                {% for key, artists in current_artist_charts.items %}
-                <div class="tab-pane fade {% if forloop.counter == 2 %}show active{% endif %}" id="artist-{{key}}" role="tabpanel" aria-labelledby="artist-{{key}}-tab">
-                    <div style="display:block">
-                        <div style="float:left;">
-                            <div class="image-wrapper" style="display:flex; flex-wrap: wrap; margin:0">
-                                <div class="caption">#1 {{artists.0.name}}</div>
-                                {% if artists.0 %}
-                                {% if artists.0.thumbnail %}
-                                <a href="{{artists.0.get_absolute_url}}"><img lt="{{artists.0.name}}" src="{{artists.0.thumbnail.url}}" width="300px"></a>
-                                {% else %}
-                                <a href="{{artists.0.get_absolute_url}}"><img lt="{{artists.0.name}}" src="{% static "images/not-found.jpg" %}" width="300px"></a>
-                                {% endif %}
-                                {% endif %}
-                            </div>
-                        </div>
-                        <div style="float:left; width:300px;">
-                            <div style="display:flex; flex-wrap: wrap;">
-                                <div class="image-wrapper" class="image-wrapper" style="width:50%">
-                                    <div class="caption-medium">#2 {{artists.1.name}}</div>
-                                    {% if artists.1 %}
-                                    {% if artists.1.thumbnail %}
-                                    <a href="{{artists.1.get_absolute_url}}"><img lt="{{artists.1.name}}" src="{{artists.1.thumbnail.url}}" width="150px"></a>
-                                    {% else %}
-                                    <a href="{{artists.1.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="150px"></a>
-                                    {% endif %}
-                                    {% endif %}
-                                </div>
-                                <div class="image-wrapper" class="image-wrapper" style="width:50%">
-                                    <div class="caption-medium">#3 {{artists.2.name}}</div>
-                                    {% if artists.2 %}
-                                    {% if artists.2.thumbnail %}
-                                    <a href="{{artists.2.get_absolute_url}}"><img src="{{artists.2.thumbnail.url}}" width="150px"></a>
-                                    {% else %}
-                                    <a href="{{artists.2.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="150px"></a>
-                                    {% endif %}
-                                    {% endif %}
-                                </div>
-                                <div class="image-wrapper" class="image-wrapper" style="width:50%">
-                                    <div class="caption-medium">#4 {{artists.3.name}}</div>
-                                    {% if artists.3 %}
-                                    {% if artists.3.thumbnail %}
-                                    <a href="{{artists.3.get_absolute_url}}"><img src="{{artists.3.thumbnail.url}}" width="150px"></a>
-                                    {% else %}
-                                    <a href="{{artists.3.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="150px"></a>
-                                    {% endif %}
-                                    {% endif %}
-                                </div>
-                                <div class="image-wrapper" class="image-wrapper" style="width:50%">
-                                    <div class="caption-medium">#5 {{artists.4.name}}</div>
-                                    {% if artists.4 %}
-                                    {% if artists.4.thumbnail %}
-                                    <a href="{{artists.4.get_absolute_url}}"><img src="{{artists.4.thumbnail.url}}" width="150px"></a>
-                                    {% else %}
-                                    <a href="{{artists.4.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="150px"></a>
-                                    {% endif %}
-                                    {% endif %}
-                                </div>
-                            </div>
-                        </div>
-                        <div style="float:left; width:300px;">
-                            <div style="display:flex; flex-wrap: wrap;">
-                                <div class="image-wrapper" class="image-wrapper" class="image-wrapper" style="width:33;">
-                                    <div class="caption-small">#6 {{artists.5.name}}</div>
-                                    {% if artists.5 %}
-                                    {% if artists.5.thumbnail %}
-                                    <a href="{{artists.5.get_absolute_url}}"><img src="{{artists.5.thumbnail.url}}" width="100px"></a>
-                                    {% else %}
-                                    <a href="{{artists.5.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
-                                    {% endif %}
-                                    {% endif %}
-                                </div>
-                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
-                                    <div class="caption-small">#7 {{artists.6.name}}</div>
-                                    {% if artists.6 %}
-                                    {% if artists.6.thumbnail %}
-                                    <a href="{{artists.6.get_absolute_url}}"><img src="{{artists.6.thumbnail.url}}" width="100px"></a>
-                                    {% else %}
-                                    <a href="{{artists.6.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
-                                    {% endif %}
-                                    {% endif %}
-                                </div>
-                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
-                                    <div class="caption-small">#8 {{artists.7.name}}</div>
-                                    {% if artists.7 %}
-                                    {% if artists.7.thumbnail %}
-                                    <a href="{{artists.7.get_absolute_url}}"><img src="{{artists.7.thumbnail.url}}" width="100px"></a>
-                                    {% else %}
-                                    <a href="{{artists.7.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
-                                    {% endif %}
-                                    {% endif %}
-                                </div>
-                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
-                                    <div class="caption-small">#9 {{artists.8.name}}</div>
-                                    {% if artists.8 %}
-                                    {% if artists.8.thumbnail %}
-                                    <a href="{{artists.8.get_absolute_url}}"><img src="{{artists.8.thumbnail.url}}" width="100px"></a>
-                                    {% else %}
-                                    <a href="{{artists.8.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
-                                    {% endif %}
-                                    {% endif %}
-                                </div>
-                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
-                                    <div class="caption-small">#10 {{artists.9.name}}</div>
-                                    {% if artists.9 %}
-                                    {% if artists.9.thumbnail %}
-                                    <a href="{{artists.9.get_absolute_url}}"><img src="{{artists.9.thumbnail.url}}" width="100px"></a>
-                                    {% else %}
-                                    <a href="{{artists.9.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
-                                    {% endif %}
-                                    {% endif %}
-                                </div>
-                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
-                                    <div class="caption-small">#11 {{artists.10.name}}</div>
-                                    {% if artists.10 %}
-                                    {% if artists.10.thumbnail %}
-                                    <a href="{{artists.10.get_absolute_url}}"><img src="{{artists.10.thumbnail.url}}" width="100px"></a>
-                                    {% else %}
-                                    <a href="{{artists.10.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
-                                    {% endif %}
-                                    {% endif %}
-                                </div>
-                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
-                                    <div class="caption-small">#12 {{artists.11.name}}</div>
-                                    {% if artists.11 %}
-                                    {% if artists.11.thumbnail %}
-                                    <a href="{{artists.11.get_absolute_url}}"><img src="{{artists.11.thumbnail.url}}" width="100px"></a>
-                                    {% else %}
-                                    <a href="{{artists.11.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
-                                    {% endif %}
-                                    {% endif %}
-                                </div>
-                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
-                                    <div class="caption-small">#13 {{artists.12.name}}</div>
-                                    {% if artists.12 %}
-                                    {% if artists.12.thumbnail %}
-                                    <a href="{{artists.12.get_absolute_url}}"><img src="{{artists.12.thumbnail.url}}" width="100px"></a>
-                                    {% else %}
-                                    <a href="{{artists.12.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
-                                    {% endif %}
-                                    {% endif %}
-                                </div>
-                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
-                                    <div class="caption-small">#14 {{artists.13.name}}</div>
-                                    {% if artists.13 %}
-                                    {% if artists.13.thumbnail %}
-                                    <a href="{{artists.13.get_absolute_url}}"><img src="{{artists.13.thumbnail.url}}" width="100px"></a>
-                                    {% else %}
-                                    <a href="{{artists.13.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
-                                    {% endif %}
-                                    {% endif %}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                {% endfor %}
-            </div>
-        </div>
-
-        <div class="row">
-            <h2>Top Tracks</h2>
-            <ul class="nav nav-tabs" id="trackTab" role="tablist">
-                {% for key, name in chart_keys.items %}
-                <li class="nav-item" role="presentation">
-                    <button class="nav-link {% if forloop.counter == 2 %}active{% endif %}" id="track-{{key}}-tab" data-bs-toggle="tab"
-                            data-bs-target="#track-{{key}}" type="button" role="tab" aria-controls="home" aria-selected="true">{{name}}</button>
-                </li>
-                {% endfor %}
-            </ul>
-
-            <div class="tab-content" id="trackTabContent" class="maloja-chart">
-                {% for chart_name, tracks in current_track_charts.items %}
-                <div class="tab-pane fade {% if forloop.counter == 2 %}show active{% endif %}" id="track-{{chart_name}}" role="tabpanel" aria-labelledby="track-{{chart_name}}-tab">
-                    <div style="display:block">
-                        <div style="float:left;">
-                            <div class="image-wrapper" style="display:flex; flex-wrap: wrap; margin:0">
-                                <div class="caption">#1 {{tracks.0.title}}</div>
-                                {% if tracks.0 %}
-                                {% if tracks.0.album.cover_image %}
-                                <a href="{{tracks.0.get_absolute_url}}"><img src="{{tracks.0.album.cover_image.url}}" width="300px"></a>
-                                {% else %}
-                                <a href="{{tracks.0.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="300px"></a>
-                                {% endif %}
-                                {% endif %}
-                            </div>
-                        </div>
-                        <div style="float:left; width:300px;">
-                            <div style="display:flex; flex-wrap: wrap;">
-                                <div class="image-wrapper" style="width:50%">
-                                    <div class="caption-medium">#2 {{tracks.1.title}}</div>
-                                    {% if tracks.1 %}
-                                    {% if tracks.1.album.cover_image %}
-                                    <a href="{{tracks.1.get_absolute_url}}"><img src="{{tracks.1.album.cover_image.url}}" width="150px"></a>
-                                    {% else %}
-                                    <a href="{{tracks.1.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="150px"></a>
-                                    {% endif %}
-                                    {% endif %}
-                                </div>
-                                <div class="image-wrapper" style="width:50%">
-                                    <div class="caption-medium">#3 {{tracks.2.title}}</div>
-                                    {% if tracks.2 %}
-                                    {% if tracks.2.album.cover_image %}
-                                    <a href="{{tracks.2.get_absolute_url}}"><img src="{{tracks.2.album.cover_image.url}}" width="150px"></a>
-                                    {% else %}
-                                    <a href="{{tracks.2.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="150px"></a>
-                                    {% endif %}
-                                    {% endif %}
-                                </div>
-                                <div class="image-wrapper" style="width:50%">
-                                    <div class="caption-medium">#4 {{tracks.3.title}}</div>
-                                    {% if tracks.3 %}
-                                    {% if tracks.3.album.cover_image %}
-                                    <a href="{{tracks.3.get_absolute_url}}"><img src="{{tracks.3.album.cover_image.url}}" width="150px"></a>
-                                    {% else %}
-                                    <a href="{{tracks.3.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="150px"></a>
-                                    {% endif %}
-                                    {% endif %}
-                                </div>
-                                <div class="image-wrapper" style="width:50%">
-                                    <div class="caption-medium">#5 {{tracks.4.title}}</div>
-                                    {% if tracks.4 %}
-                                    {% if tracks.4.album.cover_image %}
-                                    <a href="{{tracks.4.get_absolute_url}}"><img src="{{tracks.4.album.cover_image.url}}" width="150px"></a>
-                                    {% else %}
-                                    <a href="{{tracks.4.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="150px"></a>
-                                    {% endif %}
-                                    {% endif %}
-                                </div>
-                            </div>
-                        </div>
-                        <div style="float:left; width:300px;">
-                            <div style="display:flex; flex-wrap: wrap;">
-                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
-                                    <div class="caption-small">#6 {{tracks.5.title}}</div>
-                                    {% if tracks.5 %}
-                                    {% if tracks.5.album.cover_image %}
-                                    <a href="{{tracks.5.get_absolute_url}}"><img src="{{tracks.5.album.cover_image.url}}" width="100px"></a>
-                                    {% else %}
-                                    <a href="{{tracks.5.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="100px"></a>
-                                    {% endif %}
-                                    {% endif %}
-                                </div>
-                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
-                                    <div class="caption-small">#7 {{tracks.6.title}}</div>
-                                    {% if tracks.6 %}
-                                    {% if tracks.6.album.cover_image %}
-                                    <a href="{{tracks.6.get_absolute_url}}"><img src="{{tracks.6.album.cover_image.url}}" width="100px"></a>
-                                    {% else %}
-                                    <a href="{{tracks.6.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="100px"></a>
-                                    {% endif %}
-                                    {% endif %}
-                                </div>
-                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
-                                    <div class="caption-small">#8 {{tracks.7.title}}</div>
-                                    {% if tracks.7 %}
-                                    {% if tracks.7.album.cover_image %}
-                                    <a href="{{tracks.7.get_absolute_url}}"><img src="{{tracks.7.album.cover_image.url}}" width="100px"></a>
-                                    {% else %}
-                                    <a href="{{tracks.7.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="100px"></a>
-                                    {% endif %}
-                                    {% endif %}
-                                </div>
-                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
-                                    <div class="caption-small">#9 {{tracks.8.title}}</div>
-                                    {% if tracks.8 %}
-                                    {% if tracks.8.album.cover_image %}
-                                    <a href="{{tracks.8.get_absolute_url}}"><img src="{{tracks.8.album.cover_image.url}}" width="100px"></a>
-                                    {% else %}
-                                    <a href="{{tracks.8.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="100px"></a>
-                                    {% endif %}
-                                    {% endif %}
-                                </div>
-                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
-                                    <div class="caption-small">#10 {{tracks.9.title}}</div>
-                                    {% if tracks.9 %}
-                                    {% if tracks.9.album.cover_image %}
-                                    <a href="{{tracks.9.get_absolute_url}}"><img src="{{tracks.9.album.cover_image.url}}" width="100px"></a>
-                                    {% else %}
-                                    <a href="{{tracks.9.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="100px"></a>
-                                    {% endif %}
-                                    {% endif %}
-                                </div>
-                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
-                                    <div class="caption-small">#11 {{tracks.10.title}}</div>
-                                    {% if tracks.10 %}
-                                    {% if tracks.10.album.cover_image %}
-                                    <a href="{{tracks.10.get_absolute_url}}"><img src="{{tracks.10.album.cover_image.url}}" width="100px"></a>
-                                    {% else %}
-                                    <a href="{{tracks.10.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="100px"></a>
-                                    {% endif %}
-                                    {% endif %}
-                                </div>
-                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
-                                    <div class="caption-small">#12 {{tracks.11.title}}</div>
-                                    {% if tracks.11 %}
-                                    {% if tracks.11.album.cover_image %}
-                                    <a href="{{tracks.11.get_absolute_url}}"><img src="{{tracks.11.album.cover_image.url}}" width="100px"></a>
-                                    {% else %}
-                                    <a href="{{tracks.11.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="100px"></a>
-                                    {% endif %}
-                                    {% endif %}
-                                </div>
-                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
-                                    <div class="caption-small">#13 {{tracks.12.title}}</div>
-                                    {% if tracks.12 %}
-                                    {% if tracks.12.album.cover_image %}
-                                    <a href="{{tracks.12.get_absolute_url}}"><img src="{{tracks.12.album.cover_image.url}}" width="100px"></a>
-                                    {% else %}
-                                    <a href="{{tracks.12.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="100px"></a>
-                                    {% endif %}
-                                    {% endif %}
-                                </div>
-                                <div class="image-wrapper" class="image-wrapper" style="width:33;">
-                                    <div class="caption-small">#14 {{tracks.13.title}}</div>
-                                    {% if tracks.13 %}
-                                    {% if tracks.13.album.cover_image %}
-                                    <a href="{{tracks.13.get_absolute_url}}"><img src="{{tracks.13.album.cover_image.url}}" width="100px"></a>
-                                    {% else %}
-                                    <a href="{{tracks.13.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="100px"></a>
-                                    {% endif %}
-                                    {% endif %}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                {% endfor %}
-            </div>
+            {% include "scrobbles/_quick_resume.html" %}
         </div>
 
         <div class="row">