Add ability to manage long plays

This commit is contained in:
2023-03-11 14:11:31 -05:00
parent 6e03cf5075
commit bb2a80e2aa
9 changed files with 179 additions and 38 deletions

View File

@ -31,11 +31,13 @@
min-height: 3em;
border-right: 1px solid #777;
}
.now-playing { margin-right:20px;}
.now-playing p { margin:0; }
.now-playing .right { float:right; margin-right:10px; }
.latest-scrobble {
width: 50%;
}
.now-playing img { height:75px; width: 75px; object-fit: cover; }
.progress-bar {
width: 100%;
@ -244,13 +246,18 @@
{% for scrobble in now_playing_list %}
<div class="now-playing">
{% if scrobble.media_obj.album.cover_image %}
<div style="float:left;padding-right:5px;"><img src="{{scrobble.track.album.cover_image.url}}" width=75 height=75 style="border:1px solid black; " /></div>
<div style="float:left;padding-right:5px;"><img src="{{scrobble.media_obj.album.cover_image.url}}" /></div>
{% endif %}
{% if scrobble.media_obj.cover %}
<div style="float:left;padding-right:5px;"><img src="{{scrobble.media_obj.cover.url}}" /></div>
{% endif %}
{% if scrobble.media_obj.hltb_cover %}
<div style="float:left;padding-right:5px;"><img src="{{scrobble.media_obj.hltb_cover.url}}" /></div>
{% endif %}
<p><a href="{{scrobble.media_obj.get_absolute_url}}">{{scrobble.media_obj.title}}</a></p>
{% if scrobble.media_obj.subtitle %}
<p><em><a href="{{scrobble.media_obj.subtitle.get_absolute_url}}">{{scrobble.media_obj.subtitle}}</a></em></p>
{% endif %}
<br/>
<p><small>{{scrobble.timestamp|naturaltime}} from {{scrobble.source}}</small></p>
<div class="progress-bar" style="margin-right:5px;">
<span class="progress-bar-fill" style="width: {{scrobble.percent_played}}%;"></span>
@ -259,6 +266,7 @@
<a href="{% url "scrobbles:cancel" scrobble.uuid %}">Cancel</a>
<a class="right" href="{% url "scrobbles:finish" scrobble.uuid %}">Finish</a>
</p>
{% if not forloop.last %}<hr/>{% endif %}
</div>
{% endfor %}
</ul>

View File

@ -2,6 +2,15 @@
{% block title %}Long Plays{% endblock %}
{% block head_extra %}
<style>
dl { width: 260px; float:left; margin-right: 10px; }
dt a { color:white; text-decoration: none; font-size:smaller; }
img { height:200px; width: 250px; object-fit: cover; }
dd .right { float:right; }
</style>
{% endblock %}
{% block lists %}
<div class="row">
@ -10,14 +19,22 @@
<div>
{% for media in in_progress %}
{% if media.hltb_cover %}
<dl style="width: 210px; float: left; margin-right:10px;">
<dd><a href="{{media.get_absolute_url}}"><img src="{{media.hltb_cover.url}}" width=200 /></a></dd>
<dl>
<dt><a href="{{media.get_absolute_url}}">{{media.title}}</a></dt>
<dd><a href="{{media.get_absolute_url}}"><img src="{{media.hltb_cover.url}}" width=200 height=200 /></a></dd>
<dd>
<a type="button" class="btn btn-sm btn-primary" href="{{media.get_start_url}}">Resume</a>
<a type="button" class="right btn btn-sm " href="{{media.get_longplay_finish_url}}">Finish</a>
</dd>
</dl>
{% elif media.cover %}
<dl style="width: 210px; float: left; margin-right:10px;">
<dd><a href="{{media.get_absolute_url}}"><img src="{{media.cover.url}}" width=200 /></a></dd>
<dl>
<dt><a href="{{media.get_absolute_url}}">{{media.title}}</a></dt>
<dd><a href="{{media.get_absolute_url}}"><img src="{{media.cover.url}}" style="width: 200px; height: 200px; object-fit:cover; " /></a></dd>
<dd>
<a type="button" class="btn btn-sm btn-primary" href="{{media.get_start_url}}">Resume</a>
<a type="button" class="right btn btn-sm " href="{{media.get_longplay_finish_url}}">Finish</a>
</dd>
</dl>
{% endif %}
{% endfor %}
@ -45,17 +62,18 @@
</div>
{% endif %}
<hr/>
<h2>Completed</h2>
{% if view == 'grid' %}
<div>
{% for media in completed %}
{% if media.hltb_cover %}
<dl style="width: 210px; float: left; margin-right:10px;">
<dl>
<dd><a href="{{media.get_absolute_url}}"><img src="{{media.hltb_cover.url}}" width=200 /></a></dd>
<dt><a href="{{media.get_absolute_url}}">{{media.title}}</a></dt>
</dl>
{% elif media.cover %}
<dl style="width: 210px; float: left; margin-right:10px;">
<dl>
<dd><a href="{{media.get_absolute_url}}"><img src="{{media.cover.url}}" width=200 /></a></dd>
<dt><a href="{{media.get_absolute_url}}">{{media.title}}</a></dt>
</dl>
@ -85,4 +103,4 @@
</div>
{% endif %}
</div>
{% endblock %}
{% endblock %}

View File

@ -5,16 +5,24 @@
{% block title %}{{object.title}}{% endblock %}
{% block head_extra %}
<style>
.cover img { width: 250px; }
.cover { float: left; width:252px; padding:0; border: 1px solid #ccc; }
.summary {
float:left; width:600px; margin-left:10px;
}
</style>
{% endblock %}
{% block lists %}
<div class="row">
{% if object.hltb_cover%}
<p style="float:left; width:202px; padding:0; border: 1px solid #ccc">
<img src="{{object.hltb_cover.url}}" width=200 />
</p>
<div class="cover"><img src="{{object.hltb_cover.url}}" /></div>
{% endif %}
<div style="float:left; width:600px; margin-left:10px; ">
<div class="summary">
{% if object.summary %}
<p>{{object.summary|safe|linebreaks|truncatewords:160}}</p>
<hr/>