PublicSnapshot
/
tubesync
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

front end media display tweaks

This commit is contained in:
meeb 2020-12-06 19:36:56 +11:00
parent 870f44d5e4
commit f3ab3b97f5
5 changed files with 44 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/common/static/styles/_colours.scss
View File

@ -41,8 +41,10 @@ $collection-text-colour: $colour-near-black;
$collection-background-hover-colour: $colour-orange;
$collection-text-hover-colour: $colour-near-white;
$mediacard-title-background-colour: $colour-black;
$mediacard-title-text-colour: $colour-white;
$mediacard-title-background-colour: $colour-near-black;
$mediacard-title-text-colour: $colour-near-white;
$mediacard-border-colour: $colour-near-white;
$mediacard-border-hover-colour: $colour-orange;
$box-error-background-colour: $colour-red;
$box-error-text-colour: $colour-near-white;

21
app/common/static/styles/_template.scss
View File

@ -106,19 +106,32 @@ main {
}
.mediacard {
a {
border-radius: 2px 2px 0 0;
display: block;
border: 3px $mediacard-border-colour solid;
&:hover {
border: 3px $mediacard-border-hover-colour solid;
}
}
.card-title {
padding: 3px 10px 3px 5px !important;
margin: 5px !important;
line-height: 1.5rem;
font-size: 1.5rem;
line-height: 1.4rem;
font-size: 1.3rem;
left: initial !important;
right: 0 !important;
max-width: 75% !important;
opacity: 80%;
max-width: 80% !important;
background-color: $mediacard-title-background-colour !important;
color: $mediacard-title-text-colour !important;
span {
font-size: 1rem;
line-height: 1rem;
}
}
.card-image {
img {
border-radius: 0 !important;
}
}
}

16
app/sync/models.py
View File

@ -89,6 +89,16 @@ class Source(models.Model):
SOURCE_TYPE_YOUTUBE_PLAYLIST: 'id',
}
PUBLISHED_FIELD = { # Field returned by indexing which contains the published date
SOURCE_TYPE_YOUTUBE_CHANNEL: 'upload_date',
SOURCE_TYPE_YOUTUBE_PLAYLIST: 'upload_date',
}
TITLE_FIELD = { # Field returned by indexing which contains the media title
SOURCE_TYPE_YOUTUBE_CHANNEL: 'title',
SOURCE_TYPE_YOUTUBE_PLAYLIST: 'title',
}
uuid = models.UUIDField(
_('uuid'),
primary_key=True,
@ -443,7 +453,8 @@ class Media(models.Model):
@property
def title(self):
return self.loaded_metadata.get('title', '').strip()
k = self.source.TITLE_FIELD.get(self.source.source_type, '')
return self.loaded_metadata.get(k, '').strip()
@property
def name(self):
@ -452,7 +463,8 @@ class Media(models.Model):
@property
def upload_date(self):
upload_date_str = self.loaded_metadata.get('upload_date', '').strip()
k = self.source.PUBLISHED_FIELD.get(self.source.source_type, '')
upload_date_str = self.loaded_metadata.get(k, '').strip()
try:
return datetime.strptime(upload_date_str, '%Y%m%d')
except (AttributeError, ValueError) as e:

4
app/sync/templates/sync/media.html
View File

@ -7,8 +7,8 @@
<div class="row no-margin-bottom">
{% for m in media %}
<div class="col s12 m6 l4 xl3">
<a href="{% url 'sync:media-item' pk=m.pk %}" class="collection-item">
<div class="card mediacard">
<a href="{% url 'sync:media-item' pk=m.pk %}" class="">
<div class="card-image">
<img src="{% if m.thumb %}{% url 'sync:media-thumb' pk=m.pk %}{% else %}{% static 'images/nothumb.png' %}{% endif %}">
<span class="card-title truncate">{{ m.source }}<br>
@ -16,9 +16,9 @@
<span>{{ m.published|date:'Y-m-d' }}</span>
</span>
</div>
</div>
</a>
</div>
</div>
{% empty %}
<div class="col s12">
<div class="collection">

6
app/sync/views.py
View File

@ -338,7 +338,11 @@ class MediaThumbView(DetailView):
thumb = b64decode('R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAA'
'AAAABAAEAAAICTAEAOw==')
content_type = 'image/gif'
return HttpResponse(thumb, content_type=content_type)
response = HttpResponse(thumb, content_type=content_type)
# Thumbnail media is never updated so we can ask the browser to cache it
# for ages, 604800 = 7 days
response['Cache-Control'] = 'public, max-age=604800'
return response
class MediaItemView(DetailView):