From 244359165e0a365d62ae37e34984a5cb59e2a7fd Mon Sep 17 00:00:00 2001
From: Thomas Steen Rasmussen <tykling@bornhack.org>
Date: Mon, 18 Nov 2024 21:14:49 +0100
Subject: [PATCH] WIP: support rendering other filetypes, lots of rough edges

---
 src/albums/templates/album_detail.html        |  6 +-
 src/albums/templates/album_slideshow.html     | 84 ++++++-------------
 src/files/managers.py                         |  4 +-
 src/files/tables.py                           | 20 ++++-
 src/files/templates/file_detail.html          | 28 ++-----
 .../templates/includes/file_thumbnail.html    |  4 +-
 .../templates/includes/render_audio.html      |  4 +
 .../templates/includes/render_document.html   |  3 +
 .../templates/includes/render_video.html      |  4 +
 src/files/tests.py                            |  2 +-
 src/files/views.py                            |  8 +-
 src/static_src/css/bma.css                    |  1 -
 src/static_src/js/splide-custom-album.js      | 26 +++---
 src/utils/templatetags/bma_utils.py           | 49 ++++++++++-
 14 files changed, 140 insertions(+), 103 deletions(-)
 create mode 100644 src/files/templates/includes/render_audio.html
 create mode 100644 src/files/templates/includes/render_document.html
 create mode 100644 src/files/templates/includes/render_video.html

diff --git a/src/albums/templates/album_detail.html b/src/albums/templates/album_detail.html
index 69c01295..c5d846de 100644
--- a/src/albums/templates/album_detail.html
+++ b/src/albums/templates/album_detail.html
@@ -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>
diff --git a/src/albums/templates/album_slideshow.html b/src/albums/templates/album_slideshow.html
index 60108895..7865ef04 100644
--- a/src/albums/templates/album_slideshow.html
+++ b/src/albums/templates/album_slideshow.html
@@ -1,13 +1,34 @@
 {% 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>
@@ -15,6 +36,7 @@
           </div>
         </div>
       </div>
+
       <div class="col">
         <div id="main-carousel" class="splide" aria-label="Album carousel">
           <div class="splide__track">
@@ -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>
diff --git a/src/files/managers.py b/src/files/managers.py
index 6ce36de9..cfe2ca60 100644
--- a/src/files/managers.py
+++ b/src/files/managers.py
@@ -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")
         )
diff --git a/src/files/tables.py b/src/files/tables.py
index 0cdab3e3..2e653add 100644
--- a/src/files/tables.py
+++ b/src/files/tables.py
@@ -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
 
@@ -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",
@@ -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."""
@@ -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."""
@@ -60,6 +75,7 @@ class Meta:
             "uploader",
             "license",
             "file_size",
+            "file_type",
             "tags",
             "hitcount",
             "jobs",
diff --git a/src/files/templates/file_detail.html b/src/files/templates/file_detail.html
index 3d9c48d1..4c711f06 100644
--- a/src/files/templates/file_detail.html
+++ b/src/files/templates/file_detail.html
@@ -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">
diff --git a/src/files/templates/includes/file_thumbnail.html b/src/files/templates/includes/file_thumbnail.html
index 56383d36..7592fe26 100644
--- a/src/files/templates/includes/file_thumbnail.html
+++ b/src/files/templates/includes/file_thumbnail.html
@@ -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 %}
diff --git a/src/files/templates/includes/render_audio.html b/src/files/templates/includes/render_audio.html
new file mode 100644
index 00000000..ea06d276
--- /dev/null
+++ b/src/files/templates/includes/render_audio.html
@@ -0,0 +1,4 @@
+<figure>
+  <audio controls src="{{ url }}" preload="metadata"></audio><br>
+  <a href="{{ url }}">Download audio</a>
+</figure>
diff --git a/src/files/templates/includes/render_document.html b/src/files/templates/includes/render_document.html
new file mode 100644
index 00000000..1ea13667
--- /dev/null
+++ b/src/files/templates/includes/render_document.html
@@ -0,0 +1,3 @@
+<div class="ratio ratio-16x9 mh-100">
+  <iframe src="{{ url }}"></iframe>
+</div>
diff --git a/src/files/templates/includes/render_video.html b/src/files/templates/includes/render_video.html
new file mode 100644
index 00000000..81f84c40
--- /dev/null
+++ b/src/files/templates/includes/render_video.html
@@ -0,0 +1,4 @@
+<figure>
+  <video controls src="{{ url }}" preload="metadata"></video><br>
+  <a href="{{ url }}">Download video</a>
+</figure>
diff --git a/src/files/tests.py b/src/files/tests.py
index fba4b0c3..5fdbe473 100644
--- a/src/files/tests.py
+++ b/src/files/tests.py
@@ -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 ####################################
 
diff --git a/src/files/views.py b/src/files/views.py
index 36490f9a..29ea5620 100644
--- a/src/files/views.py
+++ b/src/files/views.py
@@ -1,6 +1,7 @@
 """File views."""
 
 import logging
+import mimetypes
 import re
 from pathlib import Path
 from urllib.parse import quote
@@ -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"
diff --git a/src/static_src/css/bma.css b/src/static_src/css/bma.css
index 057d9039..12e9a836 100644
--- a/src/static_src/css/bma.css
+++ b/src/static_src/css/bma.css
@@ -6,7 +6,6 @@ main > .container {
 .card-img-top {
     width: 100%;
     height: 10vw;
-    object-fit: cover;
     text-align: center;
 }
 
diff --git a/src/static_src/js/splide-custom-album.js b/src/static_src/js/splide-custom-album.js
index 9bc09648..9a0c2640 100644
--- a/src/static_src/js/splide-custom-album.js
+++ b/src/static_src/js/splide-custom-album.js
@@ -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();
 } );
diff --git a/src/utils/templatetags/bma_utils.py b/src/utils/templatetags/bma_utils.py
index 5df1f6ea..422b76b3 100644
--- a/src/utils/templatetags/bma_utils.py
+++ b/src/utils/templatetags/bma_utils.py
@@ -4,10 +4,13 @@
 
 from django import template
 from django.conf import settings
+from django.template import loader
 from django.template.context import RequestContext
 from django.utils.safestring import mark_safe
+from pictures.templatetags.pictures import picture
 
 if TYPE_CHECKING:
+    from django.db.models.fields.files import FieldFile
     from pictures.models import PictureFieldFile
 
 register = template.Library()
@@ -29,27 +32,67 @@ def get_group_icons(
 
 
 @register.simple_tag()
-def thumbnail(field_file: "PictureFieldFile", width: int, ratio: str | None = None) -> str:
+def thumbnail(field_file: "PictureFieldFile", filetype: str, width: int, ratio: str | None = None) -> str:
     """BMA thumbnail tag. Depends on the hardcoded 50,100,150,200px (and 2x)."""
     if isinstance(field_file, str):
         return mark_safe(  # noqa: S308
-            "<!-- Error creating thumbnail markup, field_file is a string -->"
+            f'<img class="img-fluid img-thumbnail" src="{settings.DEFAULT_THUMBNAIL_URLS[filetype]}" width="{width}">'
         )
+
     if width not in [50, 100, 150, 200]:
         return mark_safe(  # noqa: S308
             f"<!-- Error creating thumbnail markup, width {width} is not supported, "
             "only 50,100,150,200 is supported -->"
         )
+
     if ratio not in field_file.field.aspect_ratios:
         return mark_safe(  # noqa: S308
             f"<!-- Error creating thumbnail markup, aspect ratio {ratio} is not supported, "
             f"only {field_file.field.aspect_ratios} are supported -->"
         )
+
     url = field_file.aspect_ratios[ratio]["WEBP"][width].url
     url2x = field_file.aspect_ratios[ratio]["WEBP"][width * 2].url
     height = field_file.aspect_ratios[ratio]["WEBP"][width].height
     title = field_file.instance.basefile.original_filename
     alt = field_file.instance.basefile.description or field_file.instance.basefile.original_filename
     return mark_safe(  # noqa: S308
-        f'<img srcset="{url}, {url2x} 2x" src="{url}" height="{height}" width="{width}" title="{title}" alt="{alt}">'
+        f'<img srcset="{url}, {url2x} 2x" src="{url}" '
+        f'height="{height}" width="{width}" title="{title}" '
+        f'alt="{alt}" class="img-fluid img-thumbnail">'
     )
+
+
+@register.simple_tag()
+def render_file(field_file: "PictureFieldFile | FieldFile", **kwargs: str) -> str:
+    """Render a file."""
+    if not hasattr(field_file.instance, "filetype"):
+        output = "<!-- No filetype -->"
+    elif field_file.instance.filetype == "image":
+        output = picture(field_file=field_file, **kwargs)
+
+    elif field_file.instance.filetype == "audio":
+        tmpl = loader.get_template("includes/render_audio.html")
+        output = tmpl.render(
+            {
+                "url": field_file.url,
+            }
+        )
+    elif field_file.instance.filetype == "video":
+        tmpl = loader.get_template("includes/render_video.html")
+        output = tmpl.render(
+            {
+                "url": field_file.url,
+            }
+        )
+    elif field_file.instance.filetype == "document":
+        tmpl = loader.get_template("includes/render_document.html")
+        output = tmpl.render(
+            {
+                "url": field_file.url,
+                **kwargs,
+            }
+        )
+    else:
+        output = "<!-- Unknown filetype -->"
+    return mark_safe(output)  # noqa: S308