feat: thumbnails for audio, text and other files

4 files changed, 16 insertions, 2 deletions

diff --git a/public/index.php b/public/index.php
index 4186399..9a0e293 100644
--- a/public/index.php
+++ b/public/index.php
@@ -539,6 +539,20 @@ $privacy_exists = is_file($_SERVER['DOCUMENT_ROOT'] . '/static/PRIVACY.txt');
                 file_deletion = `<button onclick="deleteUploadedFile('${file.urls.deletion_url}', '${file.id}')">Delete</button>`;
             }
 
+            <?php if (FILE_THUMBNAILS): ?>
+                let thumbnailPath = `<?= FILE_THUMBNAIL_DIRECTORY_PREFIX ?>/${file.id}.webp`;
+                let thumbnailSize = "width: 64px; height: 64px;";
+                if (file.mime.startsWith('audio/')) {
+                    thumbnailPath = '/static/img/icons/file_audio.png';
+                } else if (file.mime.startsWith('text/')) {
+                    thumbnailPath = '/static/img/icons/file_text.png';
+                } else if (!file.mime.startsWith('image/') && !file.mime.startsWith('video/')) {
+                    thumbnailPath = '/static/img/icons/file.png';
+                } else {
+                    thumbnailSize = 'max-width:100%; max-height: 100%;';
+                }
+            <?php endif; ?>
+
             return `
         <div class="box item column gap-4 pad-4">
             <button class="delete-btn" onclick="deleteFileLocally('${file.id}');loadUploadedFiles();" title="Delete locally">
@@ -546,8 +560,8 @@ $privacy_exists = is_file($_SERVER['DOCUMENT_ROOT'] . '/static/PRIVACY.txt');
             </button>
             <?php if (FILE_THUMBNAILS): ?>
             <div class="column align-center justify-center grow">
-                <div style="max-width: 128px; max-height:128px;">
-                    <p><i><img src="<?= FILE_THUMBNAIL_DIRECTORY_PREFIX ?>/${file.id}.webp" alt="No thumbnail." style="max-width:100%; max-height: 100%;"></i></p>
+                <div class="column justify-center align-center" style="width: 128px; height:128px;">
+                    <p><i><img src="${thumbnailPath}" alt="No thumbnail." style="${thumbnailSize}"></i></p>
                 </div>
             </div>
             <?php endif; ?>
diff --git a/public/static/img/icons/file.png b/public/static/img/icons/file.png
new file mode 100755
index 0000000..03ddd79
--- /dev/null
+++ b/public/static/img/icons/file.png
diff --git a/public/static/img/icons/file_audio.png b/public/static/img/icons/file_audio.png
new file mode 100755
index 0000000..a8b3ede
--- /dev/null
+++ b/public/static/img/icons/file_audio.png
diff --git a/public/static/img/icons/file_text.png b/public/static/img/icons/file_text.png
new file mode 100755
index 0000000..813f712
--- /dev/null
+++ b/public/static/img/icons/file_text.png