2 files changed, 39 insertions, 3 deletions
diff --git a/templates/detail.qtpl b/templates/detail.qtpl
new file mode 100644
index 0000000..a981be9
--- /dev/null
+++ b/templates/detail.qtpl
@@ -0,0 +1,34 @@
+{% import "git.sr.ht/~gabrielgio/img/pkg/database/repository" %}
+
+{% code
+type DetailPage struct {
+	Media   *repository.Media
+	Settings *repository.Settings
+}
+
+func (m *DetailPage) PreloadAttr() string {
+    if m.Settings.PreloadVideoMetadata {
+        return "metadata"
+    }
+    return "none"
+}
+%}
+
+{% func (p *DetailPage) Title() %}Media{% endfunc %}
+
+{% func (p *DetailPage) Content() %}
+<div class="card-image">
+    {% if p.Media.IsVideo() %}
+    <video class="image is-fit" controls muted="true" poster="/media/thumbnail?path_hash={%s p.Media.PathHash %}" preload="{%s p.PreloadAttr() %}">
+        <source src="/media/image?path_hash={%s p.Media.PathHash %}" type="{%s p.Media.MIMEType %}">
+    </video>
+    {% else %}
+     <figure class="image is-fit">
+        <img src="/media/image?path_hash={%s p.Media.PathHash %}">
+    </figure>
+    {% endif %}
+</div>
+{% endfunc %}
+
+{% func (p *DetailPage) Script() %}
+{% endfunc %}
diff --git a/templates/mosaic.qtpl b/templates/mosaic.qtpl
index 18dbcba..21a8bae 100644
--- a/templates/mosaic.qtpl
+++ b/templates/mosaic.qtpl
@@ -7,14 +7,16 @@
     <div class="column is-2">
     {% for _, media := range c %}
     <div class="card-image">
+       <a href="/detail?path_hash={%s media.PathHash %}">
        {% if media.IsVideo() %}
        <video class="image is-fit" controls muted="true" poster="/media/thumbnail?path_hash={%s media.PathHash %}" preload="{%s preloadAttr %}">
            <source src="/media/image?path_hash={%s media.PathHash %}" type="{%s media.MIMEType %}">
        </video>
        {% else %}
-        <figure class="image is-fit">
-            <img src="/media/thumbnail?path_hash={%s media.PathHash %}">
-        </figure>
+       <figure class="image is-fit">
+           <img src="/media/thumbnail?path_hash={%s media.PathHash %}">
+       </figure>
+       </a>
         {% endif %}
     </div>
     {% endfor %}