Skip to content

Commit

Permalink
WIP: support rendering other filetypes, lots of rough edges
Browse files Browse the repository at this point in the history
  • Loading branch information
@tykling
tykling committed Nov 18, 2024
1 parent 4230aee commit 2443591
Show file tree
Hide file tree
Showing 14 changed files with 140 additions and 103 deletions.
6 changes: 2 additions & 4 deletions src/albums/templates/album_detail.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,10 +68,8 @@ <h5 class="card-title">{{ album.title }}</h5>
</div>
<div class="card-body">
<!-- album detail block -->
<div class="row mb-3">
{% block album_detail %}
{% endblock %}
</div>
{% block album_detail %}
{% endblock %}
</div>
</div>
</div>
Expand Down
84 changes: 26 additions & 58 deletions src/albums/templates/album_slideshow.html
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,42 @@
{% extends "album_detail.html" %}
{% load humanize %}
{% block album_detail %}
<div class="row mb-3">
<div id="col-8 text-center">
<div class="row mb-2">
<!-- Thumbnail carousel -->
<div class="col-8">
<div id="thumbnail-carousel" class="splide" aria-label="The carousel with thumbnails." >
<div class="splide__track">
<ul class="splide__list">
{% for file in filter.qs %}
<li class="splide__slide">
{% thumbnail file.thumbnail.source width=200 ratio="16/9" %}
{% thumbnail file.thumbnail.source filetype=file.filetype width=200 ratio="16/9" %}
</li>
{% endfor %}
</ul>
</div>
</div>
</div>

<!-- Metadata carousel -->
<div class="col-4">
<div id="metadata-carousel" class="splide" aria-label="The carousel with metadata." >
<div class="splide__track">
<ul class="splide__list">
{% for file in filter.qs %}
<li class="splide__slide">
<table class="table table-sm">
<tr><th>File</th><td>{{ file.title }} <a href="{% url 'files:file_detail' file_uuid=file.uuid %}">{{ file.uuid }}</a></td></tr>
<tr><th>Original File</th><td><a href="{{ file.original.url }}">Download</a> ({{ file.file_size|intcomma }} bytes, {{ file.mimetype }})</td></tr>
<tr><th>Attribution</th><td>{{ file.attribution }} (license: {{ file.license }})</td></tr>
</table>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>

<div class="col">
<div id="main-carousel" class="splide" aria-label="Album carousel">
<div class="splide__track">
Expand All @@ -23,61 +45,7 @@
<li class="splide__slide">
<div class="row">
<div id="col">
<div class="text-center">
{% picture file.original img_alt=file.title img_class="img-fluid" sm=12 lg=8 %}
</div>
</div>
</div>
<div class="row mt-3 d-flex justify-content-center">
<div class="col-6">
<table class="table">
<tbody>
<tr>
<th>UUID</th>
<td>{{ file.pk }}</td>
</tr>
<tr>
<th>Title</th>
<td>{{ file.title }}</td>
</tr>
<tr>
<th>Attribution</th>
<td>{{ file.attribution }}</td>
</tr>
<tr>
<th>Source</th>
<td>
<a href="{{ file.source }}">{{ file.source }}</a>
</td>
</tr>
<tr>
<th>License</th>
<td>
<a href="{{ file.license_url }}" target="_blank">{{ file.license_name }}</a>
</td>
</tr>
<tr>
<th>Hits</th>
<td>
{{ file.hits.count }}
</td>
</tr>
<tr>
<th>Description</th>
<td>{{ file.description|default:"N/A" }}</td>
</tr>
<tr>
<th>{{ file.filetype|capfirst }} Tags <small><a href="{% url 'files:file_tags' file_uuid=file.pk %}">Details</a></th>
<td>
{% for tag in file.tags.all %}
<span class="badge bg-secondary">{{ tag }}</span>
{% empty %}
N/A
{% endfor %}
</td>
</tr>
</tbody>
</table>
{% render_file file.original img_alt=file.title img_loading="lazy" img_class="img-fluid" lg=8 sm=12 %}
</div>
</div>
</li>
Expand Down
4 changes: 2 additions & 2 deletions src/files/managers.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,8 @@ def get_queryset(self) -> models.QuerySet["BaseFile"]:
)
.prefetch_related("hits")
.annotate(hitcount=Count("hits", distinct=True))
.annotate(jobs_finished=Count("jobs", filter=models.Q(jobs__finished=False)))
.annotate(jobs_unfinished=Count("jobs", filter=models.Q(jobs__finished=True)))
.annotate(jobs_finished=Count("jobs", filter=models.Q(jobs__finished=True)))
.annotate(jobs_unfinished=Count("jobs", filter=models.Q(jobs__finished=False)))
.prefetch_active_albums_list(recursive=True)
.prefetch_related("thumbnail")
)
Expand Down
20 changes: 18 additions & 2 deletions src/files/tables.py
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
"""This module defines the table used to show files."""

import django_tables2 as tables
from django.contrib.humanize.templatetags.humanize import intcomma
from django.urls import reverse
from django.utils.safestring import mark_safe

Expand All @@ -11,7 +12,7 @@ class FileTable(tables.Table):
"""Defines the django-tables2 used to show files."""

selection = tables.CheckBoxColumn(accessor="pk", orderable=False)
uuid = tables.Column(linkify=True)
uuid = tables.Column(linkify=True, verbose_name="File UUID")
thumbnail = tables.TemplateColumn(
verbose_name="Thumbnail",
template_name="includes/file_thumbnail.html",
Expand All @@ -21,6 +22,7 @@ class FileTable(tables.Table):
uploader = tables.Column(linkify=True)
hitcount = tables.Column(verbose_name="Hits")
jobs = tables.Column(verbose_name="Jobs")
file_type = tables.Column(verbose_name="File Type")

def render_albums(self, record: BaseFile) -> str:
"""Render albums as a list of links."""
Expand All @@ -43,7 +45,20 @@ def render_tags(self, record: BaseFile) -> str:

def render_jobs(self, record: BaseFile) -> str:
"""Render the jobs column."""
return f"{record.jobs_finished} / {record.jobs_unfinished}"
finished_url = reverse("jobs:job_list") + f"?files={record.uuid}&finished=true"
unfinished_url = reverse("jobs:job_list") + f"?files={record.uuid}&finished=false"
return mark_safe( # noqa: S308
f'<a href="{unfinished_url}">{record.jobs_unfinished}</a> / '
f'<a href="{finished_url}">{record.jobs_finished}</a>'
)

def render_file_size(self, value: int) -> str:
"""Render the file size column."""
return f"{intcomma(value)} bytes"

def render_file_type(self, record: BaseFile) -> str:
"""Render the filetype column."""
return mark_safe(f'<i class="{record.filetype_icon} fa-2x"></i>') # noqa: S308

class Meta:
"""Define model, template, fields."""
Expand All @@ -60,6 +75,7 @@ class Meta:
"uploader",
"license",
"file_size",
"file_type",
"tags",
"hitcount",
"jobs",
Expand Down
28 changes: 9 additions & 19 deletions src/files/templates/file_detail.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,32 +8,22 @@
<div class="row">

<div class="col-lg-9 col-sm-12">
<div class="row mb-3">
<div class="col">
<h3>{{ file.filetype|capfirst }} {{ file.title }}</h3>
</div>
</div>
<div class="row">
<div class="col">
{% picture file.original img_alt=file.title img_loading="lazy" img_class="img-fluid" lg=9 sm=12 %}
<div class="card">
<div class="card-header">
<h5 class="card-title">{{ file.filetype|capfirst }} {{ file.title }}</h5>
</div>
<div class="card-body">
{% render_file file.original img_alt=file.title img_loading="lazy" img_class="img-fluid" lg=9 sm=12 %}
</div>
</div>
</div>
</div>
</div>

<!-- Sidebar start -->
<div class="col-sm-12 col-lg-3">
<div class="row mb-3">
<div class="col d-flex justify-content-end">
<div class="dropdown">
<button class="btn btn-outline-primary dropdown-toggle" type="button" id="dropdownActionsButton1" data-bs-toggle="dropdown" aria-expanded="false">
Actions
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownActionsButton1">
<li><a class="dropdown-item" href="#">[Add to album]</a></li>
</ul>
</div>
</div>
</div>

<div class="row">
<div class="col mb-3">
<div class="card">
Expand Down
4 changes: 3 additions & 1 deletion src/files/templates/includes/file_thumbnail.html
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
{% if record.thumbnail %}
{% thumbnail record.thumbnail.source width=width|default:50 ratio=ratio|default:"" %}
{% thumbnail record.thumbnail.source filetype=record.filetype width=width|default:50 ratio=ratio|default:"" %}
{% else %}
<div class="text-center"><i class="center fas {{ record.filetype_icon }} fa-3x"></i></div>
{% endif %}
4 changes: 4 additions & 0 deletions src/files/templates/includes/render_audio.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<figure>
<audio controls src="{{ url }}" preload="metadata"></audio><br>
<a href="{{ url }}">Download audio</a>
</figure>
3 changes: 3 additions & 0 deletions src/files/templates/includes/render_document.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<div class="ratio ratio-16x9 mh-100">
<iframe src="{{ url }}"></iframe>
</div>
4 changes: 4 additions & 0 deletions src/files/templates/includes/render_video.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<figure>
<video controls src="{{ url }}" preload="metadata"></video><br>
<a href="{{ url }}">Download video</a>
</figure>
2 changes: 1 addition & 1 deletion src/files/tests.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1123,7 +1123,7 @@ def test_file_detail_view(self) -> None:
self.client.login(username="creator2", password="secret")
response = self.client.get(reverse("files:file_detail", kwargs={"file_uuid": self.files[0]}))
content = response.content.decode()
assert "<h3>Image creator2 file 0</h3>" in content
assert "Image creator2 file 0" in content

######### FILE TAG LIST ####################################

Expand Down
8 changes: 6 additions & 2 deletions src/files/views.py
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
"""File views."""

import logging
import mimetypes
import re
from pathlib import Path
from urllib.parse import quote
Expand Down Expand Up @@ -150,8 +151,11 @@ def bma_media_view(request: HttpRequest, *, path: str, accel: bool) -> FileRespo
response["X-Accel-Redirect"] = f"/public/{quote(path)}"
else:
# we are serving the file locally
f = Path.open(Path(settings.MEDIA_ROOT) / Path(path), "rb")
response = FileResponse(f, status=200)
f = Path.open(Path(settings.MEDIA_ROOT) / path, "rb")
response = FileResponse(f, filename=Path(path).name, status=200)
mimetype, _encoding = mimetypes.guess_type(path, strict=False)
if mimetype:
response["Content-Type"] = mimetype
# cache for an hour in development for a more
# pleasant (and closer to realworld) dev experience
response["Cache-Control"] = "max-age=3600"
Expand Down
1 change: 0 additions & 1 deletion src/static_src/css/bma.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ main > .container {
.card-img-top {
width: 100%;
height: 10vw;
object-fit: cover;
text-align: center;
}

Expand Down
26 changes: 16 additions & 10 deletions src/static_src/js/splide-custom-album.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,25 +7,31 @@ document.addEventListener( 'DOMContentLoaded', function () {
arrows : true,
} );


var thumbnails = new Splide( '#thumbnail-carousel', {
fixedWidth : 200,
fixedHeight : 120,
//fixedWidth : 100,
//fixedHeight : 112,
height : "10vh",
//width : "100%",
autoWidth : true,
focus : 'center',
gap : 10,
rewind : true,
pagination : false,
arrows : false,
arrows : true,
isNavigation: true,
breakpoints : {
600: {
fixedWidth : 60,
fixedHeight: 44,
},
},
} );

var metadata = new Splide( '#metadata-carousel', {
rewind : true,
pagination : false,
arrows : false,
isNavigation: false,
perPage : 1,
} );

main.sync( thumbnails );
main.sync( metadata );
main.mount();
thumbnails.mount();
metadata.mount();
} );
Loading

0 comments on commit 2443591

Please sign in to comment.