viewer now deals with videos and images when next/prev, AND, fullscreen is maintained on videos and handles when escape gets you out as well...

TODO

@@ -1,7 +1,6 @@
 ## GENERAL
     * viewer:
         - buttons need tootltips to show shortcut key
-        - if DrawImg runs into a video, deal with it :)
 
     * files.py cleanup:
         class Option for dot-notation, or namespace???

templates/viewer.html

@@ -30,6 +30,7 @@
         e=new Object()
         e.name = "{{objs[id].name}}"
         e.url = "{{objs[id].FullPathOnFS()}}"
+        e.type = "{{objs[id].type.name}}"
         {% if objs[id].file_details.faces %}
             e.face_model="{{objs[id].file_details.faces[0].facefile_lnk.model_used}}"
         {% endif %}
@@ -175,7 +176,7 @@
 
     function ResizeVideo()
     {
-        $('#_v').height(window.innerHeight*gap)
+        $('#video').height(window.innerHeight*gap)
     }
 
     function FaceToggle()
@@ -206,6 +207,32 @@
         $('#_fmv').submit();
     }
 
+    function ViewImageOrVideo()
+    {
+        if( objs[current].type == 'Image' )
+        {
+            im.src='http://mara.ddp.net:5000/' + objs[current].url
+            $('#video').hide()
+            $('#figure').show()
+            if( fullscreen )
+            {
+                console.log('going fs on image')
+                $('#canvas').get(0).requestFullscreen()
+            }
+        }
+        if( objs[current].type == 'Video' )
+        {
+            $('#video').prop('src', 'http://mara.ddp.net:5000/' + objs[current].url )
+            $('#figure').hide()
+            $('#video').show()
+            if( fullscreen )
+            {
+                console.log('going fs on video')
+                $('#video').get(0).requestFullscreen()
+            }
+        }
+    }
+
 </script>
 
 <div id="viewer" class="container-fluid">
@@ -214,7 +241,12 @@
         <input type="hidden" name="eids" value={{eids}}>
         <div class="row">
                 <button title="Show previous image" class="col-auto btn btn-outline-info px-2" style="padding: 10%" id="la"
+                {% if OPT['offset'] == 0 and eids.find(current|string) == 0 %}
+                    disabled
+                {% endif %}
                     onClick="
+                        if( document.fullscreen == false )
+                            fullscreen = false
                         cidx = eid_lst.indexOf(current.toString())
                         prev=cidx-1
                         if( prev < 0 )
@@ -232,11 +264,10 @@
                         }
                         $('#ra').attr('disabled', false )
                         current=eid_lst[prev]
-                        im.src='http://mara.ddp.net:5000/' + objs[current].url
+                        ViewImageOrVideo()
                         ">
                     <svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#prev"/></svg>
                 </button>
-                {% if objs[current].type.name == "Image" %}
                     <figure class="col col-auto border border-info rounded m-0 p-1" id="figure">
                         <canvas id="canvas"></canvas>
                         <img id="throbber" src="{{url_for('internal', filename='throbber.gif')}}" style="display:none;">
@@ -249,16 +280,20 @@
                         </script>
                         <figcaption class="figure-caption text-center text-wrap text-break"><span id="fname">{{objs[current].name}}</span></figcaption>
                     </figure>
-                {% elif objs[current].type.name == "Video" %}
-                    <video id="_v" controls>
+                {% if objs[current].type.name != "Image" %}
+                    <script>$('#figure').attr('style', 'display:none')</script>
+                {% endif %}
+                    <video id="video" class="col col-auto" controls>
                         <source src="http://mara.ddp.net:5000/{{objs[current].FullPathOnFS()}}" type="video/mp4">
                         Your browser does not support the video tag.
                     </video>
                     <script>
                     window.addEventListener('resize', ResizeVideo, false);
                     ResizeVideo()
-                    </script>
+                {% if objs[current].type.name != "Video" %}
+                    $('#video').attr('style', 'display:none')
                 {% endif %}
+                    </script>
 
                         <button title="Show next image" class="col-auto btn btn-outline-info px-2" style="padding: 10%" id="ra" 
                             onClick="
@@ -269,11 +304,13 @@
                                     return
                                 }
                             {% endif %}
+                            if( document.fullscreen == false )
+                                fullscreen = false
                             cidx = eid_lst.indexOf(current.toString())
                             if( cidx < eid_lst.length-1 )
                             {
                                 current=eid_lst[cidx+1]
-                                im.src='http://mara.ddp.net:5000/' + objs[current].url
+                                ViewImageOrVideo()
                                 $('#la').attr('disabled', false )
                             }
                             else
@@ -328,7 +365,7 @@
             <button class="btn btn-outline-info p-1" title="Flip vertically" onClick="Transform('flipv')">
                 <svg width="28" height="28" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#flip_v"/></svg>
             </button>
-            <button class="btn btn-outline-info p-1" title="View in Fullscreen mode" onClick="$('#prev_fullscreen').val('true'); $('#next_fullscreen').val('true'); document.getElementById('canvas').requestFullscreen()">
+            <button class="btn btn-outline-info p-1" title="View in Fullscreen mode" onClick="fullscreen=true; ViewImageOrVideo()">
                 <svg width="28" height="28" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#fullscreen"/></svg>
             </button>
         </div>
@@ -341,10 +378,12 @@ $( document ).keydown(function(event) {
     {
         case "Left": // IE/Edge specific value
         case "ArrowLeft":
+            if( $('#la').prop('disabled') == false )
                 $('#la').click()
             break;
         case "Right": // IE/Edge specific value
         case "ArrowRight":
+            if( $('#ra').prop('disabled') == false )
                 $('#ra').click()
             break;
         case "d":
@@ -354,14 +393,17 @@ $( document ).keydown(function(event) {
             $('#faces').click()
             break;
         case "n":
-            $('#fname').click()
+            $('#fname_toggle').click()
             break;
         default:
             return; // Quit when this doesn't handle the key event.
     }
 });
+
+var fullscreen=false;
 {% if OPT['fullscreen']=='true' %}
-$( document ).ready ( function() { document.getElementById('canvas').requestFullscreen() } )
+fullscreen=true;
+ViewImageOrVideo()
 {% endif %}
 </script>
 {% endblock script_content %}