[templates] Add polling live page for all scrobbles
Some checks failed
build / test (push) Failing after 35s
Some checks failed
build / test (push) Failing after 35s
This commit is contained in:
19
PROJECT.org
19
PROJECT.org
@ -88,7 +88,7 @@ fetching and simple saving.
|
||||
*** Metadata sources
|
||||
**** Scraper
|
||||
|
||||
* Backlog [0/23] :vrobbler:project:personal:
|
||||
* Backlog [3/26] :vrobbler:project:personal:
|
||||
** TODO [#C] Create small utility to clean up tracks scrobbled with wonky playback times :bug:music:scrobbles:
|
||||
:PROPERTIES:
|
||||
:ID: 702462cf-d54b-48c6-8a7c-78b8de751deb
|
||||
@ -604,7 +604,22 @@ independent of the email flow it was originally creatdd for
|
||||
|
||||
** TODO [#B] Is there way to create unique slugs for media instances :media_types:
|
||||
|
||||
** TODO [#C] What would it look like to add an MCP server to expose scrobbles and media items? :mcpserver:feature:
|
||||
** STRT [#B] Use HTMx to update the Now Playing widget :feature:templates:
|
||||
:PROPERTIES:
|
||||
:ID: 5f5631fc-9ee1-d5a5-d0f8-94fea6fbbfa4
|
||||
:END:
|
||||
** DONE [#B] Add a live page that updates the scrobble list via JS polling :feature:templates:
|
||||
:PROPERTIES:
|
||||
:ID: 58790d76-dc6e-8aa5-2dc0-e64fe786fbf1
|
||||
:END:
|
||||
** DONE [#A] Turns out we cant cache the now playing widget :bug:templates:
|
||||
:PROPERTIES:
|
||||
:ID: 9ce669ea-c000-cdfe-a634-ad5cdaeae81c
|
||||
:END:
|
||||
** DONE [#C] What would it look like to add an MCP server to expose scrobbles and media items? :mcpserver:feature:
|
||||
:PROPERTIES:
|
||||
:ID: c5fca159-c7e0-5795-7c05-bbc48f539650
|
||||
:END:
|
||||
* Version 56.4 [3/3]
|
||||
** DONE [#B] Add ability to do reverse address lookup on lat-long pairs :geolocations:feature:
|
||||
:PROPERTIES:
|
||||
|
||||
@ -366,6 +366,11 @@ class ScrobbleListView(LoginRequiredMixin, ListView):
|
||||
paginate_by = 100
|
||||
template_name = "scrobbles/scrobble_all_list.html"
|
||||
|
||||
def get_template_names(self):
|
||||
if self.request.headers.get("HX-Request"):
|
||||
return ["scrobbles/_scrobble_all_content.html"]
|
||||
return ["scrobbles/scrobble_all_list.html"]
|
||||
|
||||
def get_queryset(self):
|
||||
qs = Scrobble.objects.filter(user=self.request.user).order_by("-timestamp")
|
||||
tags_param = self.request.GET.get("tags", "")
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.10/clipboard.min.js"></script>
|
||||
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
|
||||
<style type="text/css">
|
||||
dl {
|
||||
display: flex;
|
||||
|
||||
146
vrobbler/templates/scrobbles/_scrobble_all_content.html
Normal file
146
vrobbler/templates/scrobbles/_scrobble_all_content.html
Normal file
@ -0,0 +1,146 @@
|
||||
{% load humanize %}
|
||||
{% load naturalduration %}
|
||||
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4" hx-get="{% url 'scrobbles:scrobble-list' %}{% if request.META.QUERY_STRING %}?{{ request.META.QUERY_STRING }}{% endif %}" hx-trigger="every 7s" hx-swap="outerHTML">
|
||||
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
|
||||
<div>
|
||||
<h1 class="h2">All Scrobbles</h1>
|
||||
{% if tag_list %}
|
||||
<h6 class="text-muted">Tagged {{ tag_list|join:", " }}</h6>
|
||||
{% if total_time_seconds %}
|
||||
<p class="text-muted small mb-0">Total time: {{ total_time_seconds|natural_duration }}</p>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% if request.GET.visibility %}
|
||||
<h6 class="text-muted">Filter: {{ request.GET.visibility|title }} scrobbles only</h6>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Date</th>
|
||||
<th scope="col">Type</th>
|
||||
<th scope="col">Title</th>
|
||||
<th scope="col">Time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for scrobble in object_list %}
|
||||
<tr class="{% if scrobble.id in overlap_map %}{{ overlap_map.scrobble.id }}{% endif %}">
|
||||
<td>
|
||||
{% if scrobble.id in overlap_map %}⏱ {% endif %}
|
||||
<a href="{{scrobble.get_absolute_url}}">{{ scrobble.timestamp|naturaltime }}</a>
|
||||
</td>
|
||||
<td>
|
||||
{% if scrobble.video %}
|
||||
🎬 Video
|
||||
{% elif scrobble.track %}
|
||||
🎵 Track
|
||||
{% elif scrobble.podcast_episode %}
|
||||
🎙️ Podcast episode
|
||||
{% elif scrobble.sport_event %}
|
||||
⚽ Sport event
|
||||
{% elif scrobble.book %}
|
||||
📖 Book
|
||||
{% elif scrobble.paper %}
|
||||
📄 Paper
|
||||
{% elif scrobble.video_game %}
|
||||
🎮 Video game
|
||||
{% elif scrobble.board_game %}
|
||||
🎲 Board game
|
||||
{% elif scrobble.geo_location %}
|
||||
📍 GeoLocation
|
||||
{% elif scrobble.trail %}
|
||||
🥾 Trail
|
||||
{% elif scrobble.beer %}
|
||||
🍺 Beer
|
||||
{% elif scrobble.puzzle %}
|
||||
🧩 Puzzle
|
||||
{% elif scrobble.food %}
|
||||
🍔 Food
|
||||
{% elif scrobble.task %}
|
||||
✅ Task
|
||||
{% elif scrobble.web_page %}
|
||||
🌐 Web Page
|
||||
{% elif scrobble.life_event %}
|
||||
🎉 Life event
|
||||
{% elif scrobble.mood %}
|
||||
😊 Mood
|
||||
{% elif scrobble.brick_set %}
|
||||
🧱 Brick set
|
||||
{% elif scrobble.channel %}
|
||||
📺 Channel
|
||||
{% else %}
|
||||
Unknown
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
{% if scrobble.video %}
|
||||
<a href="{% url 'videos:video_detail' scrobble.video.uuid %}">{{ scrobble.video.title }}</a>
|
||||
{% elif scrobble.track %}
|
||||
<a href="{% url 'music:track_detail' scrobble.track.uuid %}">{{ scrobble.track.title }}</a>
|
||||
{% elif scrobble.video_game %}
|
||||
<a href="{% url 'videogames:videogame_detail' scrobble.video_game.uuid %}">{{ scrobble.video_game.title }}</a>
|
||||
{% elif scrobble.book %}
|
||||
<a href="{% url 'books:book_detail' scrobble.book.uuid %}">{{ scrobble.book.title }}</a>
|
||||
{% elif scrobble.food %}
|
||||
<a href="{% url 'foods:food_detail' scrobble.food.uuid %}">{{ scrobble.food.title }}</a>
|
||||
{% elif scrobble.beer %}
|
||||
<a href="{% url 'beers:beer_detail' scrobble.beer.uuid %}">{{ scrobble.beer.title }}</a>
|
||||
{% elif scrobble.web_page %}
|
||||
<a href="{% url 'webpages:webpage_detail' scrobble.web_page.uuid %}">{{ scrobble.web_page.title }}</a>
|
||||
{% elif scrobble.podcast_episode %}
|
||||
<a href="{% url 'podcasts:podcast_detail' scrobble.podcast_episode.podcast.id %}">{{ scrobble.podcast_episode.title }}</a>
|
||||
{% elif scrobble.board_game %}
|
||||
<a href="{% url 'boardgames:boardgame_detail' scrobble.board_game.uuid %}">{{ scrobble.board_game.title }}</a>
|
||||
{% elif scrobble.trail %}
|
||||
<a href="{% url 'trails:trail_detail' scrobble.trail.uuid %}">{{ scrobble.trail.title }}</a>
|
||||
{% elif scrobble.puzzle %}
|
||||
<a href="{% url 'puzzles:puzzle_detail' scrobble.puzzle.uuid %}">{{ scrobble.puzzle.title }}</a>
|
||||
{% elif scrobble.brick_set %}
|
||||
<a href="{% url 'bricksets:brickset_detail' scrobble.brick_set.uuid %}">{{ scrobble.brick_set.title }}</a>
|
||||
{% elif scrobble.task %}
|
||||
<a href="{% url 'tasks:task_detail' scrobble.task.uuid %}">{{scrobble.media_obj}}{% if scrobble.log.title %} - {{ scrobble.log.title }}{% endif %}</a>
|
||||
{% elif scrobble.life_event %}
|
||||
<a href="{% url 'lifeevents:lifeevent_detail' scrobble.life_event.uuid %}">{{ scrobble.life_event.title }}</a>
|
||||
{% elif scrobble.mood %}
|
||||
<a href="{% url 'moods:mood_detail' scrobble.mood.uuid %}">{{ scrobble.mood.title}}</a>
|
||||
{% elif scrobble.geo_location %}
|
||||
<a href="{% url 'locations:geolocation_detail' scrobble.geo_location.uuid %}">{{ scrobble.geo_location.title }}</a>
|
||||
{% else %}
|
||||
Unknown
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
{% if scrobble.in_progress and not scrobble.played_to_completion %}
|
||||
In progress ...
|
||||
{% elif scrobble.playback_position_seconds %}
|
||||
{{ scrobble.playback_position_seconds|natural_duration }}
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% empty %}
|
||||
<tr>
|
||||
<td colspan="4">No scrobbles found.</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{% if page_obj.has_previous or page_obj.has_next %}
|
||||
<nav>
|
||||
<ul class="pagination">
|
||||
{% if page_obj.has_previous %}
|
||||
<li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if tags_param %}&tags={{ tags_param }}{% endif %}">Previous</a></li>
|
||||
{% endif %}
|
||||
<li class="page-item"><span class="page-link">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span></li>
|
||||
{% if page_obj.has_next %}
|
||||
<li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}{% if tags_param %}&tags={{ tags_param }}{% endif %}">Next</a></li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</nav>
|
||||
{% endif %}
|
||||
</main>
|
||||
@ -1,148 +1,4 @@
|
||||
{% extends "base.html" %}
|
||||
{% load humanize %}
|
||||
{% load naturalduration %}
|
||||
|
||||
{% block content %}
|
||||
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
|
||||
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
|
||||
<div>
|
||||
<h1 class="h2">All Scrobbles</h1>
|
||||
{% if tag_list %}
|
||||
<h6 class="text-muted">Tagged {{ tag_list|join:", " }}</h6>
|
||||
{% if total_time_seconds %}
|
||||
<p class="text-muted small mb-0">Total time: {{ total_time_seconds|natural_duration }}</p>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% if request.GET.visibility %}
|
||||
<h6 class="text-muted">Filter: {{ request.GET.visibility|title }} scrobbles only</h6>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Date</th>
|
||||
<th scope="col">Type</th>
|
||||
<th scope="col">Title</th>
|
||||
<th scope="col">Time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for scrobble in object_list %}
|
||||
<tr class="{% if scrobble.id in overlap_map %}{{ overlap_map.scrobble.id }}{% endif %}">
|
||||
<td>
|
||||
{% if scrobble.id in overlap_map %}⏱ {% endif %}
|
||||
<a href="{{scrobble.get_absolute_url}}">{{ scrobble.timestamp|naturaltime }}</a>
|
||||
</td>
|
||||
<td>
|
||||
{% if scrobble.video %}
|
||||
🎬 Video
|
||||
{% elif scrobble.track %}
|
||||
🎵 Track
|
||||
{% elif scrobble.podcast_episode %}
|
||||
🎙️ Podcast episode
|
||||
{% elif scrobble.sport_event %}
|
||||
⚽ Sport event
|
||||
{% elif scrobble.book %}
|
||||
📖 Book
|
||||
{% elif scrobble.paper %}
|
||||
📄 Paper
|
||||
{% elif scrobble.video_game %}
|
||||
🎮 Video game
|
||||
{% elif scrobble.board_game %}
|
||||
🎲 Board game
|
||||
{% elif scrobble.geo_location %}
|
||||
📍 GeoLocation
|
||||
{% elif scrobble.trail %}
|
||||
🥾 Trail
|
||||
{% elif scrobble.beer %}
|
||||
🍺 Beer
|
||||
{% elif scrobble.puzzle %}
|
||||
🧩 Puzzle
|
||||
{% elif scrobble.food %}
|
||||
🍔 Food
|
||||
{% elif scrobble.task %}
|
||||
✅ Task
|
||||
{% elif scrobble.web_page %}
|
||||
🌐 Web Page
|
||||
{% elif scrobble.life_event %}
|
||||
🎉 Life event
|
||||
{% elif scrobble.mood %}
|
||||
😊 Mood
|
||||
{% elif scrobble.brick_set %}
|
||||
🧱 Brick set
|
||||
{% elif scrobble.channel %}
|
||||
📺 Channel
|
||||
{% else %}
|
||||
Unknown
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
{% if scrobble.video %}
|
||||
<a href="{% url 'videos:video_detail' scrobble.video.uuid %}">{{ scrobble.video.title }}</a>
|
||||
{% elif scrobble.track %}
|
||||
<a href="{% url 'music:track_detail' scrobble.track.uuid %}">{{ scrobble.track.title }}</a>
|
||||
{% elif scrobble.video_game %}
|
||||
<a href="{% url 'videogames:videogame_detail' scrobble.video_game.uuid %}">{{ scrobble.video_game.title }}</a>
|
||||
{% elif scrobble.book %}
|
||||
<a href="{% url 'books:book_detail' scrobble.book.uuid %}">{{ scrobble.book.title }}</a>
|
||||
{% elif scrobble.food %}
|
||||
<a href="{% url 'foods:food_detail' scrobble.food.uuid %}">{{ scrobble.food.title }}</a>
|
||||
{% elif scrobble.beer %}
|
||||
<a href="{% url 'beers:beer_detail' scrobble.beer.uuid %}">{{ scrobble.beer.title }}</a>
|
||||
{% elif scrobble.web_page %}
|
||||
<a href="{% url 'webpages:webpage_detail' scrobble.web_page.uuid %}">{{ scrobble.web_page.title }}</a>
|
||||
{% elif scrobble.podcast_episode %}
|
||||
<a href="{% url 'podcasts:podcast_detail' scrobble.podcast_episode.podcast.id %}">{{ scrobble.podcast_episode.title }}</a>
|
||||
{% elif scrobble.board_game %}
|
||||
<a href="{% url 'boardgames:boardgame_detail' scrobble.board_game.uuid %}">{{ scrobble.board_game.title }}</a>
|
||||
{% elif scrobble.trail %}
|
||||
<a href="{% url 'trails:trail_detail' scrobble.trail.uuid %}">{{ scrobble.trail.title }}</a>
|
||||
{% elif scrobble.puzzle %}
|
||||
<a href="{% url 'puzzles:puzzle_detail' scrobble.puzzle.uuid %}">{{ scrobble.puzzle.title }}</a>
|
||||
{% elif scrobble.brick_set %}
|
||||
<a href="{% url 'bricksets:brickset_detail' scrobble.brick_set.uuid %}">{{ scrobble.brick_set.title }}</a>
|
||||
{% elif scrobble.task %}
|
||||
<a href="{% url 'tasks:task_detail' scrobble.task.uuid %}">{{scrobble.media_obj}}{% if scrobble.log.title %} - {{ scrobble.log.title }}{% endif %}</a>
|
||||
{% elif scrobble.life_event %}
|
||||
<a href="{% url 'lifeevents:lifeevent_detail' scrobble.life_event.uuid %}">{{ scrobble.life_event.title }}</a>
|
||||
{% elif scrobble.mood %}
|
||||
<a href="{% url 'moods:mood_detail' scrobble.mood.uuid %}">{{ scrobble.mood.title}}</a>
|
||||
{% elif scrobble.geo_location %}
|
||||
<a href="{% url 'locations:geolocation_detail' scrobble.geo_location.uuid %}">{{ scrobble.geo_location.title }}</a>
|
||||
{% else %}
|
||||
Unknown
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
{% if scrobble.playback_position_seconds %}
|
||||
{{ scrobble.playback_position_seconds|natural_duration }}
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% empty %}
|
||||
<tr>
|
||||
<td colspan="4">No scrobbles found.</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{% if page_obj.has_previous or page_obj.has_next %}
|
||||
<nav>
|
||||
<ul class="pagination">
|
||||
{% if page_obj.has_previous %}
|
||||
<li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if tags_param %}&tags={{ tags_param }}{% endif %}">Previous</a></li>
|
||||
{% endif %}
|
||||
<li class="page-item"><span class="page-link">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span></li>
|
||||
{% if page_obj.has_next %}
|
||||
<li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}{% if tags_param %}&tags={{ tags_param }}{% endif %}">Next</a></li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</nav>
|
||||
{% endif %}
|
||||
</main>
|
||||
{% include "scrobbles/_scrobble_all_content.html" %}
|
||||
{% endblock %}
|
||||
|
||||
@ -73,24 +73,19 @@
|
||||
<div class="btn-group me-2">
|
||||
<a href="{% url 'charts:charts-home' %}" class="btn btn-sm btn-outline-secondary">Charts</a>
|
||||
</div>
|
||||
<div class="btn-group me-2">
|
||||
<a href="{% url 'scrobbles:scrobble-list' %}" class="btn btn-sm btn-outline-secondary">Live</a>
|
||||
</div>
|
||||
<div class="btn-group me-2">
|
||||
<a href="{% url 'trends:trends-home' %}" class="btn btn-sm btn-outline-secondary">Trends</a>
|
||||
</div>
|
||||
<div class="btn-group me-2">
|
||||
{% if user.profile.lastfm_username and not user.profile.lastfm_auto_import %}
|
||||
<form action="{% url 'scrobbles:lastfm-import' %}" method="get">
|
||||
<button type="submit" class="btn btn-sm btn-outline-secondary">Last.fm Sync</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
{% if prev_link %}
|
||||
<a type="button" class="btn btn-sm btn-outline-secondary" href="{{prev_link}}"
|
||||
data-bs-target="#">Previous</a>
|
||||
{% endif %}
|
||||
{% if today_link %}
|
||||
<a type="button" class="btn btn-sm btn-outline-secondary" href="{{today_link}}"
|
||||
data-bs-target="#">Today</a>
|
||||
{% endif %}
|
||||
{% if next_link %}
|
||||
<a type="button" class="btn btn-sm btn-outline-secondary" href="{{next_link}}"
|
||||
data-bs-target="#">Next</a>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
<div class="btn-group me-2">
|
||||
{% if user.profile.lastfm_username and not user.profile.lastfm_auto_import %}
|
||||
@ -105,19 +100,6 @@
|
||||
data-bs-target="#exportModal">Export</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="dropdown">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle" id="graphDateButton"
|
||||
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<div data-feather="calendar"></div>
|
||||
{{title}}
|
||||
</button>
|
||||
<div class="dropdown-menu" data-bs-toggle="#graphDataChange" aria-labelledby="graphDateButton">
|
||||
<a class="dropdown-item" href="?date=today">Today</a>
|
||||
<a class="dropdown-item" href="?date=this_week">This week</a>
|
||||
<a class="dropdown-item" href="?date=this_month">This month</a>
|
||||
<a class="dropdown-item" href="?date=this_year">This year</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user