Add endpoint for photo generate thumbnail.

frontends/etiquette_flask/backend/endpoints/photo_endpoints.py

@@ -137,6 +137,18 @@ def post_batch_photos_remove_tag():
 
 # Photo metadata operations ########################################################################
 
+@decorators.catch_etiquette_exception
+@site.route('/photo/<photo_id>/generate_thumbnail', methods=['POST'])
+def post_photo_generate_thumbnail(photo_id):
+    special = request.form.to_dict()
+    special.pop('commit', None)
+
+    photo = common.P_photo(photo_id, response_type='json')
+    photo.generate_thumbnail(**special)
+
+    response = jsonify.make_json_response({})
+    return response
+
 @decorators.catch_etiquette_exception
 def post_photo_refresh_metadata_core(photo_ids):
     if isinstance(photo_ids, str):

frontends/etiquette_flask/static/js/api.js

@@ -165,6 +165,18 @@ function add_tag(photo_id, tagname, callback)
     common.post(url, data, callback);
 }
 
+api.photos.generate_thumbnail =
+function generate_thumbnail(photo_id, special, callback)
+{
+    var url = `/photo/${photo_id}/generate_thumbnail`
+    var data = new FormData();
+    for (x in special)
+    {
+        data.append(x, special[x]);
+    }
+    common.post(url, data, callback);
+}
+
 api.photos.refresh_metadata =
 function refresh_metadata(photo_id, callback)
 {

frontends/etiquette_flask/templates/photo.html

@@ -12,6 +12,7 @@
     <script src="/static/js/api.js"></script>
     <script src="/static/js/hotkeys.js"></script>
     <script src="/static/js/photo_clipboard.js"></script>
+    <script src="/static/js/spinner.js"></script>
     <script src="/static/js/tag_autocomplete.js"></script>
 
 <style>
@@ -39,6 +40,7 @@
     grid-area: right;
 
     display: grid;
+    position: relative;
     grid-template: "viewer" 1fr / 1fr;
 }
 #editor_area
@@ -98,6 +100,14 @@
     max-width: 100%;
 }
 
+#hovering_tools
+{
+    position: absolute;
+    right: 8px;
+    top: 8px;
+    background-color: var(--color_theme_primary);
+}
+
 @media screen and (max-width: 800px)
 {
     #content_body
@@ -226,6 +236,11 @@
 
         {% endif %}
     </div>
+    <div id="hovering_tools">
+        {% if photo.simple_mimetype == "video" %}
+        <button id="generate_thumbnail_button" class="green_button button_with_spinner" data-onclick="generate_thumbnail_for_video(event)">Capture thumbnail</button>
+        {% endif %}
+    </div>
 </div>
 </div>
 </body>
@@ -287,6 +302,27 @@ function add_remove_photo_tag_callback(response)
     common.create_message_bubble(message_area, message_positivity, message_text, 8000);
 }
 
+function generate_thumbnail_callback(response)
+{
+    if (response["meta"]["status"] == 200)
+    {
+        common.create_message_bubble(message_area, "message_positive", "Thumbnail captured", 8000);
+    }
+    else
+    {
+        common.create_message_bubble(message_area, "message_negative", response["data"]["error_message"], 8000);
+    }
+    generate_thumbnail_button = document.getElementById("generate_thumbnail_button");
+    window[generate_thumbnail_button.dataset.spinnerCloser]();
+}
+
+function generate_thumbnail_for_video(event)
+{
+    var timestamp = document.querySelector("#right video").currentTime;
+    var special = {"timestamp": timestamp};
+    api.photos.generate_thumbnail(PHOTO_ID, special, generate_thumbnail_callback)
+}
+
 var ZOOM_BG_URL = "url('{{photo|file_link}}')";
 function enable_hoverzoom(event)
 {