From 67b1c0dd49d89d4c2b704d4a08e129039af4c109 Mon Sep 17 00:00:00 2001
From: Damien De Paoli <ddp@depaoli.id.au>
Date: Thu, 16 Sep 2021 21:06:05 +1000
Subject: [PATCH] fix BUG-53 video/image viewer switching had spacing and name
 wrong

---
 BUGs                        |  1 -
 internal/js/view_support.js | 18 ++++++---
 templates/viewer.html       | 79 +++++++++++++++++++------------------
 3 files changed, 52 insertions(+), 46 deletions(-)

diff --git a/BUGs b/BUGs
index 7b70695..9a5763b 100644
--- a/BUGs
+++ b/BUGs
@@ -1,4 +1,3 @@
 ### Next: 59
 BUG-52: updated tag on person, and it said successful, but the colour was red/danger
-BUG-53: when viewing list, moving to a video and the name of the file is not updated (are there 2 in the dom?)
 BUG-56: when making a viewing list of AI:mich, (any search?) and going past the page_size, it gets the wrong data from the DB for the 'next' entry
diff --git a/internal/js/view_support.js b/internal/js/view_support.js
index f02fa6e..2969116 100644
--- a/internal/js/view_support.js
+++ b/internal/js/view_support.js
@@ -51,12 +51,12 @@ function DrawImg()
     // show (or not) the whole figcaption with fname in it - based on state of fname_toggle
     if( $('#fname_toggle').prop('checked' ) )
     {
-        $('.figcaption').attr('style', 'display:show' )
         // reset fname for new image (if navigated left/right to get here)
         $('#fname').html(objs[current].name)
+        $('.figcaption').show()
     }
     else
-        $('.figcaption').attr('style', 'display:none' )
+        $('.figcaption').hide()
 
     // if we have faces, the enable the toggles, otherwise disable them
     // and reset model select too
@@ -154,8 +154,11 @@ function ViewImageOrVideo()
     if( objs[current].type == 'Image' )
     {
         im.src='../' + objs[current].url
-        $('#video').hide()
-        $('#vid-caption').hide()
+        $('#video_div').hide()
+        //$('#vid-cap').hide()
+        if( $('#fname_toggle').prop('checked' ) )
+            $('#img-cap').show()
+        $('#fname_i').html(objs[current].name)
         $('#figure').show()
         if( fullscreen )
             $('#canvas').get(0).requestFullscreen()
@@ -164,8 +167,11 @@ function ViewImageOrVideo()
     {
         $('#video').prop('src', '../' + objs[current].url )
         $('#figure').hide()
-        $('#video').show()
-        $('#vid-caption').show()
+        $('#fname_v').html(objs[current].name)
+        if( $('#fname_toggle').prop('checked' ) )
+            $('#img-cap').hide()
+        $('#video_div').show()
+        //$('#vid-cap').show()
         ResizeVideo()
         if( fullscreen )
             $('#video').get(0).requestFullscreen()
diff --git a/templates/viewer.html b/templates/viewer.html
index 045f380..131afc6 100644
--- a/templates/viewer.html
+++ b/templates/viewer.html
@@ -117,52 +117,53 @@
                             var context = canvas.getContext('2d')
                             window.addEventListener('resize', DrawImg, false);
                         </script>
-                        <figcaption class="figure-caption text-center text-wrap text-break"><span id="fname">{{objs[current].name}}</span></figcaption>
+                        <figcaption id="img-cap" class="figure-caption text-center text-wrap text-break"><span id="fname_i">{{objs[current].name}}</span></figcaption>
                     </figure>
-                {% if objs[current].type.name != "Image" %}
-                    <script>$('#figure').attr('style', 'display:none')</script>
-                {% endif %}
-                    <div class="col col-auto">
-                    <video id="video" class="col col-auto" controls>
-                        <source src="../{{objs[current].FullPathOnFS()}}" type="video/mp4">
-                        Your browser does not support the video tag.
-                    </video>
-                    <figcaption id="vid-caption" class="figure-caption text-center text-wrap text-break"><span id="fname">{{objs[current].name}}</span></figcaption>
+                    {% if objs[current].type.name != "Image" %}
+                        <script>$('#figure').hide()</script>
+                    {% endif %}
+                    <div id="video_div" class="col col-auto">
+                        <video id="video" class="col col-auto" controls>
+                            <source src="../{{objs[current].FullPathOnFS()}}" type="video/mp4">
+                            Your browser does not support the video tag.
+                        </video>
+                        <figcaption id="vid-cap" class="figure-caption text-center text-wrap text-break">
+                            <span id="fname_v">{{objs[current].name}}</span>
+                        </figcaption>
                     </div>
                     <script>
-                    window.addEventListener('resize', ResizeVideo, false);
-                    ResizeVideo()
-                {% if objs[current].type.name != "Video" %}
-                    $('#video').attr('style', 'display:none')
-                    $('#vid-caption').attr('style', 'display:none')
-                {% endif %}
+                        window.addEventListener('resize', ResizeVideo, false);
+                        ResizeVideo()
+                        {% if objs[current].type.name != "Video" %}
+                           $('#video_div').hide()
+                        {% endif %}
                     </script>
 
-                        <button title="Show next image" class="col-auto btn btn-outline-info px-2" style="padding: 10%" id="ra" 
-                            onClick="
-                            {% if OPT.last_entry_in_db is defined %}
-                                if( current == {{OPT.last_entry_in_db}} )
-                                {
-                                    $('#ra').attr('disabled', true )
-                                    return
-                                }
-                            {% endif %}
-                            if( document.fullscreen == false )
-                                fullscreen = false
-                            cidx = eid_lst.indexOf(current.toString())
-                            if( cidx < eid_lst.length-1 )
+                    <button title="Show next image" class="col-auto btn btn-outline-info px-2" style="padding: 10%" id="ra" 
+                        onClick="
+                        {% if OPT.last_entry_in_db is defined %}
+                            if( current == {{OPT.last_entry_in_db}} )
                             {
-                                current=eid_lst[cidx+1]
-                                ViewImageOrVideo()
-                                $('#la').attr('disabled', false )
+                                $('#ra').attr('disabled', true )
+                                return
                             }
-                            else
-                            {
-                                {# only go next route if list contains as many elements as we asked to display... can be more than how_many on any page in reality, as its really how_many per dir? #}
-                                if( eid_lst.length >= {{OPT.how_many}} )
-                                    CallViewListRoute('next')
-                            }
-                            ">
+                        {% endif %}
+                        if( document.fullscreen == false )
+                            fullscreen = false
+                        cidx = eid_lst.indexOf(current.toString())
+                        if( cidx < eid_lst.length-1 )
+                        {
+                            current=eid_lst[cidx+1]
+                            ViewImageOrVideo()
+                            $('#la').attr('disabled', false )
+                        }
+                        else
+                        {
+                            {# only go next route if list contains as many elements as we asked to display... can be more than how_many on any page in reality, as its really how_many per dir? #}
+                            if( eid_lst.length >= {{OPT.how_many}} )
+                                CallViewListRoute('next')
+                        }
+                        ">
                         <svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#next"/></svg>
                     </button>
         </div id="/form-row">