Add filter to generate /file/ link with appropriate basename.

Because inlining the |urlencode every time is easy to forget.

frontends/etiquette_flask/etiquette_flask/common.py

@@ -33,6 +33,7 @@ site.jinja_env.add_extension('jinja2.ext.do')
 site.jinja_env.trim_blocks = True
 site.jinja_env.lstrip_blocks = True
 site.jinja_env.filters['bytestring'] = jinja_filters.bytestring
+site.jinja_env.filters['file_link'] = jinja_filters.file_link
 site.debug = True
 
 P = etiquette.photodb.PhotoDB()

frontends/etiquette_flask/etiquette_flask/jinja_filters.py

@@ -1,9 +1,16 @@
 import etiquette
+import jinja2.filters
 
 import voussoirkit.bytestring
 
 def bytestring(x):
     try:
         return voussoirkit.bytestring.bytestring(x)
-    except Exception:
+    except Exception as e:
         return '??? b'
+
+def file_link(photo, short=False):
+    if short:
+        return f'/file/{photo.id}{photo.dot_extension}'
+    basename = jinja2.filters.do_urlencode(photo.basename)
+    return f'/file/{photo.id}/{basename}'

frontends/etiquette_flask/templates/photo.html

@@ -8,8 +8,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <link rel="stylesheet" href="/static/css/common.css">
     <script src="/static/js/common.js"></script>
-    {% set filename = photo.id + photo.dot_extension %}
-    {% set file_link = "/file/" + filename %}
 
 <style>
 #content_body
@@ -192,13 +190,13 @@
             <li>Dimensions: {{photo.width}}x{{photo.height}} px</li>
             <li>Aspect ratio: {{photo.ratio}}</li>
         {% endif %}
-        <li>Size: {{photo.bytestring}}</li>
+        <li>Size: {{photo.bytes|bytestring}}</li>
         {% if photo.duration %}
             <li>Duration: {{photo.duration_string}}</li>
             <li>Overall Bitrate: {{photo.bitrate|int}} kbps</li>
         {% endif %}
-        <li><a href="/file/{{photo.id}}{{photo.dot_extension}}?download=true&original_filename=true">Download as original filename</a></li>
+        <li><a href="{{photo|file_link}}?download=true&original_filename=true">Download as original filename</a></li>
-        <li><a href="/file/{{photo.id}}{{photo.dot_extension}}?download=true">Download as {{photo.id}}.{{photo.extension}}</a></li>
+        <li><a href="{{photo|file_link}}?download=true">Download as {{photo.id}}.{{photo.extension}}</a></li>
         </ul>
 
         <!-- CONTAINING ALBUMS -->
@@ -228,17 +226,17 @@
         <div id="photo_img_holder" onclick="toggle_hoverzoom(event)">
             <img
             id="photo_img"
-            src="{{file_link}}"
+            src="{{photo|file_link}}"
             alt="{{photo.basename}}"
             onload="this.style.opacity=0.99"
             >
         </div>
         {% elif photo.simple_mimetype == "video" %}
-        <video src="{{file_link}}" controls preload=none {%if photo.thumbnail%}poster="/thumbnail/{{photo.id}}.jpg"{%endif%}></video>
+        <video src="{{photo|file_link}}" controls preload=none {%if photo.thumbnail%}poster="/thumbnail/{{photo.id}}.jpg"{%endif%}></video>
         {% elif photo.simple_mimetype == "audio" %}
-        <audio src="{{file_link}}" controls></audio>
+        <audio src="{{photo|file_link}}" controls></audio>
         {% else %}
-        <a href="{{file_link}}">View {{filename}}</a>
+        <a href="{{photo|file_link}}">View {{photo.basename}}</a>
         {% endif %}
     </div>
 </div>
@@ -316,6 +314,7 @@ function refresh_metadata(photoid)
     post(url, data, callback);
 }
 
+var ZOOM_BG_URL = "url('{{photo|file_link(short=True)}}')";
 function enable_hoverzoom(event)
 {
     //console.log("enable zoom");
@@ -331,7 +330,7 @@ function enable_hoverzoom(event)
     photo_img.style.opacity = "0";
     photo_img.style.display = "none";
     photo_img_holder.style.cursor = "zoom-out";
-    photo_img_holder.style.backgroundImage = "url('{{file_link}}')";
+    photo_img_holder.style.backgroundImage = ZOOM_BG_URL;
     photo_img_holder.onmousemove = move_hoverzoom;
     move_hoverzoom(event)
     //setTimeout(function(){img_holder.onclick = toggle_hoverzoom;}, 100);

frontends/etiquette_flask/templates/photo_card.html

@@ -20,7 +20,7 @@
 <div class="photo_card photo_card_list" data-id="{{photo.id}}">
     <input type="checkbox" class="photo_card_selector_checkbox" onclick="on_photo_select(event)"/>
     <span class="photo_card_filename"><a target="_blank" href="/photo/{{photo.id}}">{{photo.basename}}</a></span>
-    <a class="photo_card_metadata" target="_blank" href="/file/{{photo.id + photo.dot_extension}}">{{photo.bytestring}}</a>
+    <a class="photo_card_metadata" target="_blank" href="{{photo|file_link}}">{{photo.bytestring}}</a>
 </div>
 {% else -%}
 
@@ -69,7 +69,7 @@
 
     <span class="photo_card_metadata">
     {{- metadata_inner|safe -}}
-    <a target="_blank" href="/file/{{photo.id + photo.dot_extension}}">{{photo.bytestring}}</a>
+    <a target="_blank" href="{{photo|file_link}}">{{photo.bytestring}}</a>
     </span>
 
     <input type="checkbox" class="photo_card_selector_checkbox" onclick="on_photo_select(event)"/>