front end media display tweaks
This commit is contained in:
parent
870f44d5e4
commit
f3ab3b97f5
|
@ -41,8 +41,10 @@ $collection-text-colour: $colour-near-black;
|
||||||
$collection-background-hover-colour: $colour-orange;
|
$collection-background-hover-colour: $colour-orange;
|
||||||
$collection-text-hover-colour: $colour-near-white;
|
$collection-text-hover-colour: $colour-near-white;
|
||||||
|
|
||||||
$mediacard-title-background-colour: $colour-black;
|
$mediacard-title-background-colour: $colour-near-black;
|
||||||
$mediacard-title-text-colour: $colour-white;
|
$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-background-colour: $colour-red;
|
||||||
$box-error-text-colour: $colour-near-white;
|
$box-error-text-colour: $colour-near-white;
|
||||||
|
|
|
@ -106,19 +106,32 @@ main {
|
||||||
}
|
}
|
||||||
|
|
||||||
.mediacard {
|
.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 {
|
.card-title {
|
||||||
padding: 3px 10px 3px 5px !important;
|
padding: 3px 10px 3px 5px !important;
|
||||||
margin: 5px !important;
|
margin: 5px !important;
|
||||||
line-height: 1.5rem;
|
line-height: 1.4rem;
|
||||||
font-size: 1.5rem;
|
font-size: 1.3rem;
|
||||||
left: initial !important;
|
left: initial !important;
|
||||||
right: 0 !important;
|
right: 0 !important;
|
||||||
max-width: 75% !important;
|
max-width: 80% !important;
|
||||||
opacity: 80%;
|
|
||||||
background-color: $mediacard-title-background-colour !important;
|
background-color: $mediacard-title-background-colour !important;
|
||||||
color: $mediacard-title-text-colour !important;
|
color: $mediacard-title-text-colour !important;
|
||||||
span {
|
span {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
|
line-height: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.card-image {
|
||||||
|
img {
|
||||||
|
border-radius: 0 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -89,6 +89,16 @@ class Source(models.Model):
|
||||||
SOURCE_TYPE_YOUTUBE_PLAYLIST: 'id',
|
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 = models.UUIDField(
|
||||||
_('uuid'),
|
_('uuid'),
|
||||||
primary_key=True,
|
primary_key=True,
|
||||||
|
@ -443,7 +453,8 @@ class Media(models.Model):
|
||||||
|
|
||||||
@property
|
@property
|
||||||
def title(self):
|
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
|
@property
|
||||||
def name(self):
|
def name(self):
|
||||||
|
@ -452,7 +463,8 @@ class Media(models.Model):
|
||||||
|
|
||||||
@property
|
@property
|
||||||
def upload_date(self):
|
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:
|
try:
|
||||||
return datetime.strptime(upload_date_str, '%Y%m%d')
|
return datetime.strptime(upload_date_str, '%Y%m%d')
|
||||||
except (AttributeError, ValueError) as e:
|
except (AttributeError, ValueError) as e:
|
||||||
|
|
|
@ -7,8 +7,8 @@
|
||||||
<div class="row no-margin-bottom">
|
<div class="row no-margin-bottom">
|
||||||
{% for m in media %}
|
{% for m in media %}
|
||||||
<div class="col s12 m6 l4 xl3">
|
<div class="col s12 m6 l4 xl3">
|
||||||
<a href="{% url 'sync:media-item' pk=m.pk %}" class="collection-item">
|
<div class="card mediacard">
|
||||||
<div class="card mediacard">
|
<a href="{% url 'sync:media-item' pk=m.pk %}" class="">
|
||||||
<div class="card-image">
|
<div class="card-image">
|
||||||
<img src="{% if m.thumb %}{% url 'sync:media-thumb' pk=m.pk %}{% else %}{% static 'images/nothumb.png' %}{% endif %}">
|
<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>
|
<span class="card-title truncate">{{ m.source }}<br>
|
||||||
|
@ -16,8 +16,8 @@
|
||||||
<span>{{ m.published|date:'Y-m-d' }}</span>
|
<span>{{ m.published|date:'Y-m-d' }}</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</a>
|
||||||
</a>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% empty %}
|
{% empty %}
|
||||||
<div class="col s12">
|
<div class="col s12">
|
||||||
|
|
|
@ -338,7 +338,11 @@ class MediaThumbView(DetailView):
|
||||||
thumb = b64decode('R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAA'
|
thumb = b64decode('R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAA'
|
||||||
'AAAABAAEAAAICTAEAOw==')
|
'AAAABAAEAAAICTAEAOw==')
|
||||||
content_type = 'image/gif'
|
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):
|
class MediaItemView(DetailView):
|
||||||
|
|
Loading…
Reference in New Issue