feat: generate thumbnail from client is not found on server

- supported thumbnail filetype: image, pdf, video
- add play character if video's thumbnail is loaded

static/css/base/variables.css

@@ -425,4 +425,7 @@
     --color-music-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     --color-music-background: var(--color-bg-surface);
     --color-music-public-bg: rgba(74, 144, 217, 0.12);
+
+    --color-video-play: white;
+    --color-video-play-shadow: black;
 }

static/css/components/fileType.css

@@ -51,6 +51,15 @@
     color: var(--color-ft-video-text);
 }
 
+/* special case for vidao, add ▶ over the thumbnail (only if not hidden = thumb loaded) */
+.video-icon:has(img:not(.hidden))::before {
+    content: "▶";
+    color: var(--color-video-play);
+    text-shadow: 0 0 3px var(--color-video-play-shadow);
+    z-index: 2; /* above the img */
+    font-weight: bold;
+}
+
 .code-icon {
     background-color: var(--color-border);
 }

static/css/components/filesView.css

@@ -65,6 +65,14 @@
     color: var(--color-badge-blue-text);
 }
 
+.file-item .file-icon > i,
+.file-item .file-icon > svg {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
 /* ------------------File list View --------------------- */
 
 .list-header {
@@ -145,7 +153,7 @@
     align-items: center;
     justify-content: center;
     border-radius: 8px;
-    font-size: 20px;
+    font-size: 16px;
     margin-bottom: 0;
     flex-shrink: 0;
 }
@@ -422,17 +430,14 @@
 .files-grid-view .file-item .file-icon {
     margin: auto;
     margin-bottom: 10px;
+    font-size: 30px;
 }
 
 .files-grid-view .file-item .file-icon > i,
 .files-grid-view .file-item .file-icon > svg {
-    position: absolute;
     top: 5px;
     width: 60px;
     height: 60px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
 }
 
 /* ----------------------- dragged items -----------*/