voussoir/etiquette
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add endpoint for photo generate thumbnail.

Browse source
This commit is contained in:
voussoir 2020-01-12 14:52:03 -08:00
parent ffe0be1c37
commit 89bfca8f9f
3 changed files with 60 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
frontends/etiquette_flask/backend/endpoints/photo_endpoints.py
View file

@ -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):

12
frontends/etiquette_flask/static/js/api.js
View file

@ -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)
{

36
frontends/etiquette_flask/templates/photo.html
View file

@ -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)
{