updated files preview ui

ui/src/components/base/PreviewPopup.svelte

@@ -1,10 +1,13 @@
 <script>
+    import CommonHelper from "@/utils/CommonHelper";
     import OverlayPanel from "@/components/base/OverlayPanel.svelte";
 
     let panel;
     let url = "";
 
-    export let type;
+    $: filename = url.substring(url.lastIndexOf("/") + 1);
+
+    $: type = CommonHelper.getFileType(filename);
 
     export function show(newUrl) {
         if (newUrl === "") {
@@ -19,33 +22,33 @@
     export function hide() {
         return panel?.hide();
     }
-
-    $: filename = url.substring(url.lastIndexOf("/") + 1);
 </script>
 
-<OverlayPanel bind:this={panel} class="preview {type}-preview" btnClose={false} popup on:show on:hide>
+<OverlayPanel bind:this={panel} class="preview preview-{type}" btnClose={false} popup on:show on:hide>
     <svelte:fragment slot="header">
         <button type="button" class="overlay-close" on:click|preventDefault={hide}>
             <i class="ri-close-line" />
         </button>
     </svelte:fragment>
 
-    {#if type === "image"}
-        <img src={url} alt="Preview {url}" />
-    {:else if type === "pdf"}
-        <object title={filename} data={url} type="application/pdf"> PDF embed not loaded. </object>
+    {#if panel?.isActive()}
+        {#if type === "image"}
+            <img src={url} alt="Preview {filename}" />
+        {:else}
+            <object title={filename} data={url}>Cannot preview the file.</object>
+        {/if}
     {/if}
 
     <svelte:fragment slot="footer">
         <a
             href={url}
-            title="Download"
+            title={filename}
             target="_blank"
             rel="noreferrer noopener"
-            class="link-hint txt-ellipsis"
+            class="link-hint txt-ellipsis inline-flex"
         >
-            <i class="ri-file-download-line" />
             {filename}
+            <i class="ri-external-link-line" />
         </a>
         <div class="flex-fill" />
         <button type="button" class="btn btn-secondary" on:click={hide}>Close</button>

ui/src/components/base/SortHeader.svelte

@@ -21,6 +21,7 @@
 
 <th
     tabindex="0"
+    title={name}
     class="col-sort {classes}"
     class:col-sort-disabled={disable}
     class:sort-active={sort === "-" + name || sort === "+" + name}

ui/src/components/records/RecordFieldCell.svelte

@@ -66,3 +66,9 @@
         </span>
     {/if}
 </td>
+
+<style>
+    .filename {
+        max-width: 200px;
+    }
+</style>

ui/src/components/records/RecordFileThumb.svelte

@@ -3,16 +3,18 @@
     import CommonHelper from "@/utils/CommonHelper";
     import PreviewPopup from "@/components/base/PreviewPopup.svelte";
 
-    export let record;
-    export let filename;
-    export let size;
+    export let record = null;
+    export let filename = "";
+    export let size = ""; // sm/lg/xl
 
     let previewPopup;
     let thumbUrl = "";
-    let originalUrl = ApiClient.getFileUrl(record, `${filename}`);
+    let originalUrl = ApiClient.getFileUrl(record, filename);
 
     $: type = CommonHelper.getFileType(filename);
-    $: hasPreview = ["image", "pdf"].includes(type);
+
+    $: hasPreview = ["image", "audio", "video"].includes(type) || filename.endsWith(".pdf");
+
     $: thumbUrl = originalUrl ? originalUrl + "?thumb=100x100" : "";
 
     function onError() {
@@ -21,23 +23,25 @@
 </script>
 
 <a
-    class="thumb thumb-{size} link-fade"
+    class="thumb {size ? `thumb-${size}` : ''}"
     href={originalUrl}
     target="_blank"
     rel="noreferrer"
+    title={(hasPreview ? "Preview" : "Download") + " " + filename}
     on:click|stopPropagation={(e) => {
-        if (!hasPreview) return;
-        e.preventDefault();
-        previewPopup?.show(originalUrl);
+        if (hasPreview) {
+            e.preventDefault();
+            previewPopup?.show(originalUrl);
+        }
     }}
 >
     {#if type === "image"}
         <img src={thumbUrl} alt={filename} title="Preview {filename}" on:error={onError} />
-    {:else if type === "pdf"}
-        <i class="ri-file-pdf-line" />
+    {:else if type === "video" || type === "audio"}
+        <i class="ri-video-line" />
     {:else}
         <i class="ri-file-3-line" />
     {/if}
 </a>
 
-<PreviewPopup bind:this={previewPopup} {type} />
+<PreviewPopup bind:this={previewPopup} />

ui/src/components/records/fields/FileField.svelte

@@ -86,7 +86,7 @@
                     href={ApiClient.getFileUrl(record, filename)}
                     class="filename link-hint"
                     class:txt-strikethrough={deletedFileIndexes.includes(i)}
-                    use:tooltip={{ position: "right", text: "Download" }}
+                    title="Download"
                     target="_blank"
                     rel="noopener noreferrer"
                 >