|
<div class="media-grid">
|
|
{% for item in media %}
|
|
<div class="media-tile" data-media-tile="{{ item['uid'] }}">
|
|
{% if item.get('is_image') and item.get('thumbnail_url') %}
|
|
<img src="{{ item['thumbnail_url'] }}" alt="{{ item.get('original_filename', '') }}" loading="lazy" class="gallery-thumb" data-lightbox data-full="{{ item['url'] }}">
|
|
{% elif item.get('is_image') %}
|
|
<img src="{{ item['url'] }}" alt="{{ item.get('original_filename', '') }}" loading="lazy" class="gallery-thumb" data-lightbox data-full="{{ item['url'] }}">
|
|
{% elif item.get('is_video') %}
|
|
<video src="{{ item['url'] }}" controls preload="metadata" class="gallery-video"></video>
|
|
{% elif item.get('is_audio') %}
|
|
<audio src="{{ item['url'] }}" controls preload="metadata" class="gallery-audio"></audio>
|
|
{% else %}
|
|
<a href="{{ item['url'] }}" target="_blank" rel="noopener" class="non-image" download="{{ item.get('original_filename', 'file') }}">
|
|
<span class="icon">{{ file_icon_emoji(item.get('original_filename', 'file')) }}</span>
|
|
<span class="name">{{ item.get('original_filename', 'file') }}</span>
|
|
<span class="size">{{ format_file_size(item.get('file_size', 0)) }}</span>
|
|
</a>
|
|
{% endif %}
|
|
<div class="media-tile-overlay">
|
|
{% if item.get('target_url') %}
|
|
<a href="{{ item['target_url'] }}" class="media-source-link">{{ item.get('target_type', 'source')|capitalize }}</a>
|
|
{% endif %}
|
|
{% if is_owner or viewer_is_admin %}
|
|
<button type="button" class="media-delete-btn" data-media-delete="{{ item['uid'] }}" data-confirm="Delete this media?" data-confirm-danger aria-label="Delete media">🗑️</button>
|
|
<noscript>
|
|
<form method="POST" action="/media/{{ item['uid'] }}/delete" class="media-delete-form">
|
|
<button type="submit" class="media-delete-btn" aria-label="Delete media">🗑️</button>
|
|
</form>
|
|
</noscript>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="empty-state">No media yet.</div>
|
|
{% endfor %}
|
|
</div>
|