remove album slideshow view, add album grid view, add photoswipe ligh…

…tbox to album grid view (image and video support for now), add plyr video player to file detail page, remove unused js deps
bornhack · Nov 23, 2024 · 61ed575 · 61ed575
1 parent fd9e859
commit 61ed575
Show file tree

Hide file tree

Showing 23 changed files with 566 additions and 106 deletions.
diff --git a/MANIFEST.in b/MANIFEST.in
@@ -0,0 +1 @@
+recursive-include static-src *
diff --git a/src/albums/templates/album_detail.html b/src/albums/templates/album_detail.html
@@ -3,12 +3,6 @@
 {% load static %}
 {% load django_bootstrap5 %}
 
-{% block extra_head %}
-<link type="text/css" rel="stylesheet" href="{% static "css/vendor/splide-sea-green-v4.1.3.min.css" %}">
-<link type="text/css" rel="stylesheet" href="{% static "css/splide-custom-album.css" %}">
-<script src="{% static "js/vendor/splide-v4.1.3.min.js" %}"></script>
-<script src="{% static "js/splide-custom-album.js" %}"></script>
-{% endblock extra_head %}
 {% block title %}Album details{% endblock title %}
 
 {% block main_content %}
@@ -56,8 +50,8 @@ <h5 class="card-header">Filter Files</h5>
               <h5 class="card-title">{{ album.title }}</h5>
             </div>
             <div class="col-6 d-flex justify-content-end">
-              <a class="btn btn-primary" href="{% url 'albums:album_slideshow' album_uuid=album.pk %}{% querystring %}">
-                <i class="fa-solid fa-images"></i> Slideshow
+              <a class="btn btn-primary" href="{% url 'albums:album_grid' album_uuid=album.pk %}{% querystring %}">
+                <i class="fa-solid fa-images"></i> Grid
               </a>
               &nbsp;
               <a class="btn btn-primary" href="{% url 'albums:album_table' album_uuid=album.pk %}{% querystring %}">

diff --git a/src/albums/templates/album_grid.html b/src/albums/templates/album_grid.html
@@ -0,0 +1,26 @@
+{% extends "album_detail.html" %}
+{% load humanize static %}
+{% block extra_head %}
+<link rel="stylesheet" href="{% static 'css/vendor/photoswipe-v5.4.4.css' %}">
+{% endblock extra_head %}
+
+{% block album_detail %}
+<div class="pswp-gallery pswp-gallery--single-column" id="gallery">
+{% for file in filter.qs %}
+
+{% if file.filetype == "image" %}
+<a href="{{ file.original.url }}" data-pswp-width="{{ file.width }}"  data-pswp-height="{{ file.height }}"  data-pswp-type="image"  data-pswp-srcset="{% render_source_set field_file=file.original file_type="WEBP" max_width=4000 cols=12 %}">{% thumbnail file.thumbnail.source filetype=file.filetype width=200 ratio="1/1" %}</a>
+
+{% elif file.filetype == "video" %}
+{# Set max video player size to 1280x1024 #}
+<a href="{{ file.original.url }}" data-pswp-type="video" data-pswp-width="1280" data-pswp-height="1024">{% thumbnail file.thumbnail.source filetype=file.filetype width=200 ratio="16/9" %}</a>
+
+{% else %}
+<a href="{{ file.original.url }}">
+ {% thumbnail file.thumbnail.source filetype=file.filetype width=200 ratio="1/1" %}
+</a>
+{% endif %}
+{% endfor %}
+</div>
+<script type="module" src="{% static 'js/photoswipe.js' %}"></script>
+{% endblock album_detail %}
diff --git a/src/albums/templates/album_slideshow.html b/src/albums/templates/album_slideshow.html
diff --git a/src/albums/urls.py b/src/albums/urls.py
@@ -22,9 +22,9 @@
         "<uuid:album_uuid>/",
         include(
             [
-                path("", RedirectView.as_view(pattern_name="albums:album_slideshow"), name="album_detail"),
+                path("", RedirectView.as_view(pattern_name="albums:album_grid"), name="album_detail"),
                 path("update/", AlbumUpdateView.as_view(), name="album_update"),
-                path("slideshow/", AlbumDetailView.as_view(), name="album_slideshow"),
+                path("grid/", AlbumDetailView.as_view(), name="album_grid"),
                 path("table/", AlbumDetailView.as_view(), name="album_table"),
                 path("add-files/", AlbumAddFilesView.as_view(), name="album_add_files"),
                 path("remove-files/", AlbumRemoveFilesView.as_view(), name="album_remove_files"),

diff --git a/src/albums/views.py b/src/albums/views.py
@@ -117,7 +117,7 @@ class AlbumUpdateView(CuratorGroupRequiredMixin, UpdateView):  # type: ignore[ty
     def get_success_url(self) -> str:
         """Return to the album."""
         messages.success(self.request, "Album updated!")
-        return reverse(self.get_object())
+        return str(self.get_object().get_absolute_url())
 
 
 class AlbumAddFilesView(LoginRequiredMixin, FormView):  # type: ignore[type-arg]

diff --git a/src/files/filters.py b/src/files/filters.py
@@ -247,6 +247,7 @@ class Meta:
         model = BaseFile
         fields: ClassVar[dict[str, list[str]]] = {
             "attribution": ["exact", "icontains"],
+            "title": ["icontains"],
             "approved": ["exact"],
             "published": ["exact"],
             "deleted": ["exact"],

diff --git a/src/files/templates/file_detail.html b/src/files/templates/file_detail.html
@@ -1,11 +1,16 @@
 {% extends "base.html" %}
+{% load static %}
 {% load django_bootstrap5 %}
 {% load pictures %}
 {% load humanize %}
 {% block title %}File details{% endblock title %}
+{% block extra_head %}
+<link rel="stylesheet" href="{% static 'css/vendor/plyr-v3.7.8.css' %}">
+<script src="{% static "js/vendor/plyr-v3.7.8.js" %}"></script>
+<script src="{% static "js/plyr.js" %}"></script>
+{% endblock extra_head %}
 
 {% block main_content %}
-
   <div class="row">
 
     <div class="col-lg-9 col-sm-12">
@@ -31,44 +36,47 @@ <h5 class="card-title">{{ file.filetype|capfirst }} {{ file.title }}</h5>
             <div class="card-header">
               <div class="row">
                 <div class="col-6">
-                  <h5 class="card-title">File Information</h5>
+                  <h5 class="card-title">{{ file.filetype|capfirst }} Information</h5>
                 </div>
               </div>
             </div>
             <div class="card-body">
               <div class="row justfiy-content-between">
                 <div class="col-12">
                   <dl class="row mb-1">
+                    <h5>CC Attribution</h5>
                     <dt class="col-sm-3 text-truncate">Title</dt>
                     <dd class="col-sm-9">{{ file.title }}</dd>
 
-                    <dt class="col-sm-3">Download</dt>
+                    <dt class="col-sm-3">Attribution</dt>
+                    <dd class="col-sm-9">{{ file.attribution }}</dd>
+
+                    <dt class="col-sm-3">Source</dt>
+                    <dd class="col-sm-9"><a href="{{ file.source }}">{{ file.source }}</a></dd>
+
+                    <dt class="col-sm-3">License</dt>
+                    <dd class="col-sm-9">{{ file.get_license_display }}</dd>
+
+                    <h5>Downloads</h5>
+                    <dt class="col-sm-3">Original File</dt>
                     <dd class="col-sm-9"><a class="btn btn-primary btn-sm" href="{{ file.original.url }}"><i class="fas fa-download"></i> download</a> ({{ file.file_size|intcomma }} bytes {{ file.mimetype }})</dd>
 
-                    <dt class="col-sm-3 text-truncate">UUID</dt>
-                    <dd class="col-sm-9">{{ file.uuid }}</dd>
+                    <h5>Metadata</h5>
+                    <dt class="col-sm-3">Description</dt>
+                    <dd class="col-sm-9"><p>{{ file.description|default:"n/a" }}</p></dd>
 
                     <dt class="col-sm-3">Uploader</dt>
                     <dd class="col-sm-9"><a href="{{ file.uploader.get_absolute_url }}">{{ file.uploader }}</a></dd>
 
-                    <dt class="col-sm-3">CC Attribution</dt>
-                    <dd class="col-sm-9">{{ file.attribution }}</dd>
-
-                    <dt class="col-sm-3">CC Source</dt>
-                    <dd class="col-sm-9"><a href="{{ file.source }}">{{ file.source }}</a></dd>
-
-                    <dt class="col-sm-3">CC License</dt>
-                    <dd class="col-sm-9">{{ file.get_license_display }}</dd>
+                    <dt class="col-sm-3 text-truncate">UUID</dt>
+                    <dd class="col-sm-9">{{ file.uuid }}</dd>
 
                     <dt class="col-sm-3">Hits</dt>
                     <dd class="col-sm-9">{{ file.hits.count }}</dd>
 
                     <dt class="col-sm-3 text-truncate">Original Filename</dt>
                     <dd class="col-sm-9">{{ file.original_filename }}</dd>
 
-                    <dt class="col-sm-3">Description</dt>
-                    <dd class="col-sm-9"><p>{{ file.description|default:"n/a" }}</p></dd>
-
                     <dt class="col-sm-3">Created</dt>
                     <dd class="col-sm-9">{{ file.created|date:"d/m/y-H:i:s" }}</dd>
 
@@ -226,5 +234,4 @@ <h5 class="card-title">Image Exif Data</h5>
 
     </div>
   </div>
-
 {% endblock main_content %}
diff --git a/src/files/templates/includes/render_audio.html b/src/files/templates/includes/render_audio.html
@@ -1,4 +1,3 @@
 <figure>
   <audio controls src="{{ url }}" preload="metadata"></audio><br>
-  <a href="{{ url }}">Download audio</a>
 </figure>
diff --git a/src/files/templates/includes/render_video.html b/src/files/templates/includes/render_video.html
@@ -1,4 +1,3 @@
 <figure>
-  <video controls src="{{ url }}" preload="metadata"></video><br>
-  <a href="{{ url }}">Download video</a>
+  <video id="player" controls src="{{ url }}" preload="metadata"></video><br>
 </figure>
diff --git a/src/images/templates/picture.html b/src/images/templates/picture.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>{{ image.title }}</title>
+  </head>
+  <body>
+    {% render_file image.original img_alt=file.title img_loading="lazy" img_class="img-fluid" lg=9 sm=12 %}
+  </body>
+</html>