From 40d57b153635725386b537555f17c0baeca6c289 Mon Sep 17 00:00:00 2001
From: susanodd <s.johanna.even@hetnet.nl>
Date: Wed, 3 Jul 2024 12:37:56 +0200
Subject: [PATCH] #1268: Show videos of similar glosses.

---
 media/js/glosses_toggle_edit.js               | 37 +++++++++++++++++--
 signbank/dictionary/batch_edit.py             | 14 ++++---
 .../dictionary/admin_batch_edit_view.html     | 11 +++++-
 3 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/media/js/glosses_toggle_edit.js b/media/js/glosses_toggle_edit.js
index 7dc49ef9a..c8ca1ce0b 100644
--- a/media/js/glosses_toggle_edit.js
+++ b/media/js/glosses_toggle_edit.js
@@ -221,13 +221,39 @@ function show_similar_glosses(data) {
     if (similar_glosses) {
         var similar_glosses_lookup = '#similar_gloss_videos_' + glossid;
         var similar_glossesElt = $(similar_glosses_lookup);
-        var similar_glossesCell = "<ul>";
         for (var inx in similar_glosses) {
             var similar = similar_glosses[inx];
-            similar_glossesCell = similar_glossesCell + "<li>"+similar['annotation_idgloss']+"</li>";
+            var annotation = similar['annotation_idgloss'];
+            var imagelink = similar['imagelink'];
+            var videolink = similar['videolink'];
+            var pk = similar['pk'];
+            var annotationCell = '<span><a href="'+url+'/dictionary/gloss/'+pk+'/">'+annotation+'</a></span>';
+            var annotationElt = $(annotationCell);
+            if (videolink) {
+                var video_container_html = "<div class='thumbnail_container'/>";
+                video_container = $(video_container_html);
+                video_container.append(annotationElt);
+                var video_elt_html = "<div id='glossvideo_"+glossid+'_'+pk+"'>";
+                video_elt_html += "<video id='videoplayer' class='thumbnail-video' src='"
+                                +videolink+"' type='video/mp4' controls muted autoplay></video>";
+                video_elt_html += "</div>";
+                var video_elt = $(video_elt_html);
+                video_container.append(video_elt);
+                video_container.append("</div>");
+                similar_glossesElt.append(video_container);
+            } else {
+                var video_container_html = "<div class='thumbnail_container'/>";
+                video_container = $(video_container_html);
+                video_container.append(annotationElt);
+                var video_elt_html = "<div id='glossvideo_"+glossid+'_'+pk+"'>";
+                video_elt_html += "<img class='thumbnail' src='"+imagelink+"'>";
+                video_elt_html += "</div>";
+                var video_elt = $(video_elt_html);
+                video_container.append(video_elt);
+                video_container.append("</div>");
+                similar_glossesElt.append(video_container);
+            }
         }
-        similar_glossesCell = similar_glossesCell + "</ul>";
-        similar_glossesElt.html(similar_glossesCell);
     }
 }
 
@@ -425,6 +451,9 @@ $(document).ready(function() {
 	 {
          e.preventDefault();
 	     var glossid = $(this).attr('data-glossid');
+        var similar_glosses_lookup = '#similar_gloss_videos_' + glossid;
+        var similar_glossesElt = $(similar_glosses_lookup);
+        similar_glossesElt.empty();
 	     var query = { 'csrfmiddlewaretoken': csrf_token };
          for (var i=0; i < similar_gloss_fields.length; i++) {
             var fieldname = similar_gloss_fields[i];
diff --git a/signbank/dictionary/batch_edit.py b/signbank/dictionary/batch_edit.py
index 0c2371680..7f0f21733 100644
--- a/signbank/dictionary/batch_edit.py
+++ b/signbank/dictionary/batch_edit.py
@@ -11,6 +11,7 @@
 
 from signbank.dictionary.models import *
 from signbank.dictionary.forms import *
+from signbank.tools import get_default_annotationidglosstranslation
 
 
 def internal_batch_update_fields_for_gloss(gloss):
@@ -417,13 +418,14 @@ def similarglosses(request, gloss_id):
         return JsonResponse(result, safe=False)
 
     for g in qs:
-        annotationidglosstranslations = g.annotationidglosstranslation_set.all()
-        if not annotationidglosstranslations:
-            continue
-        # if there are results, just grab the first one
-        default_annotationidglosstranslation = annotationidglosstranslations.first().text
+        videolink = g.get_video_url()
+        imagelink = g.get_image_url()
+        default_annotationidglosstranslation = get_default_annotationidglosstranslation(g)
         similar_glosses.append({'annotation_idgloss': default_annotationidglosstranslation,
-                                'idgloss': g.idgloss,
+                                'videolink': '/dictionary/protected_media/' + videolink
+                                if videolink else '',
+                                'imagelink': '/dictionary/protected_media/' + imagelink
+                                if imagelink else settings.STATIC_URL + 'images/no-video-ngt.png',
                                 'pk': "%s" % g.id})
 
     result['glossid'] = str(gloss.id)
diff --git a/signbank/dictionary/templates/dictionary/admin_batch_edit_view.html b/signbank/dictionary/templates/dictionary/admin_batch_edit_view.html
index f6042785e..ec5dfb007 100644
--- a/signbank/dictionary/templates/dictionary/admin_batch_edit_view.html
+++ b/signbank/dictionary/templates/dictionary/admin_batch_edit_view.html
@@ -684,7 +684,16 @@ <h4>{% trans "On initial view, the most recent query results are shown." %}</h4>
                         <td id="number_of_matches_{{gloss.id}}"></td>
                     </tr>
                     <tr>
-                        <td id="similar_gloss_videos_{{gloss.id}}" style="width:800px;">
+                        <td  style="width:800px;">
+                            <table>
+                                <tbody>
+                                    <tr>
+                                        <td id="similar_gloss_videos_{{gloss.id}}">
+
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
                         </td>
                     </tr>
                 </table>