fix BUG-53 video/image viewer switching had spacing and name wrong

This commit is contained in:
2021-09-16 21:06:05 +10:00
parent 85dd7d7bd1
commit 67b1c0dd49
3 changed files with 52 additions and 46 deletions

View File

@@ -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">