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

Support video elements in photogallery.

Browse source
This commit is contained in:
voussoir 2024-03-31 18:58:52 -07:00
parent 507b5f48b0
commit e4ca2eecce
1 changed files with 12 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
photogallery.py
View file

@ -109,7 +109,8 @@ article .photograph:last-of-type
{ {
margin-bottom: 0; margin-bottom: 0;
} }
.photograph img .photograph img,
.photograph video
{ {
max-height: 92vh; max-height: 92vh;
border-radius: 8px; border-radius: 8px;
@ -286,12 +287,19 @@ pre,
<p>Click each photo to view its full resolution. Click the number to download it.</p> <p>Click each photo to view its full resolution. Click the number to download it.</p>
{% for file in files %} {% for file in files %}
{% if file.extension == 'jpg' %}
<article class="photograph"> <article class="photograph">
<a target="_blank" href="{{urlroot}}{{file.relative_to('.', simple=True)}}"><img loading="lazy" src="{{urlroot}}thumbs/small_{{file.relative_to('.', simple=True)}}"/></a> <a target="_blank" href="{{urlroot}}{{file.relative_to('.', simple=True)}}"><img loading="lazy" src="{{urlroot}}thumbs/small_{{file.relative_to('.', simple=True)}}"/></a>
{% if with_download_links %} {% if with_download_links %}
<a class="download_link" download="{{file.basename}}" href="{{urlroot}}{{file.relative_to('.', simple=True)}}">#{{loop.index}}/{{files|length}}</a> <a class="download_link" download="{{file.basename}}" href="{{urlroot}}{{file.relative_to('.', simple=True)}}">#{{loop.index}}/{{files|length}}</a>
{% endif %} {% endif %}
</article> </article>
{% elif file.extension in ['mp4', 'mov'] %}
<article class="photograph">
<p>{{file.replace_extension('').basename}}</p>
<video controls preload="none" src="{{urlroot}}{{file.relative_to('.', simple=True)}}" poster="{{urlroot}}thumbs/small_{{file.replace_extension('jpg').relative_to('.', simple=True)}}"></video>
</article>
{% endif %}
{% endfor %} {% endfor %}
</body> </body>
@ -332,7 +340,7 @@ function get_center_img()
{ {
const element = document.elementFromPoint(center_x, center_y); const element = document.elementFromPoint(center_x, center_y);
console.log(element); console.log(element);
if (element.tagName === "IMG") if (element.tagName === "IMG" || element.tagName === "VIDEO")
{ {
return element; return element;
} }
@ -345,7 +353,7 @@ function get_center_img()
} }
function next_img(img) function next_img(img)
{ {
const images = Array.from(document.images); const images = Array.from(document.querySelectorAll("img,video"));
const this_index = images.indexOf(img); const this_index = images.indexOf(img);
if (this_index === images.length-1) if (this_index === images.length-1)
{ {
@ -355,7 +363,7 @@ function next_img(img)
} }
function previous_img(img) function previous_img(img)
{ {
const images = Array.from(document.images); const images = Array.from(document.querySelectorAll("img,video"));
const this_index = images.indexOf(img); const this_index = images.indexOf(img);
if (this_index === 0) if (this_index === 0)
{ {