77 lines
2.1 KiB
Svelte
77 lines
2.1 KiB
Svelte
<script>
|
|
import Icon from "../../common/Icon.svelte";
|
|
import { imgurl } from "./imageserver.js";
|
|
import { getContext } from "svelte";
|
|
|
|
export let record;
|
|
const channel = getContext("channel");
|
|
export let size = "small";
|
|
export let showFilename = false;
|
|
let imageSide;
|
|
let fileSide;
|
|
let fontSize;
|
|
if (size == "large") {
|
|
imageSide = 256;
|
|
fileSide = 32;
|
|
fontSize = "20";
|
|
} else if (size == "medium") {
|
|
imageSide = 128;
|
|
fileSide = 12;
|
|
fontSize = "17";
|
|
} else if (size == "small") {
|
|
imageSide = 64;
|
|
fileSide = 12;
|
|
fontSize = "15";
|
|
} else if (size == "tiny") {
|
|
imageSide = 42;
|
|
fileSide = 12;
|
|
fontSize = "13";
|
|
}
|
|
</script>
|
|
|
|
<div style="display: flex;align-items: center;gap: 5px;">
|
|
{#if record}
|
|
{#if record._file.mime.startsWith("image")}
|
|
<!-- href={imgurl(record)} -->
|
|
<a
|
|
href="{channel.lucentUrl}/records/{record.id}"
|
|
title={record._file.originalName}
|
|
style="width:{imageSide}px;height:{imageSide}px"
|
|
>
|
|
<img
|
|
class="rounded w-100"
|
|
src={imgurl(channel, record)}
|
|
alt={record._file.path}
|
|
/>
|
|
</a>
|
|
{:else}
|
|
<a
|
|
href="{channel.lucentUrl}/records/{record.id}"
|
|
title={record._file.path}
|
|
class="file-preview-small"
|
|
style="width:{imageSide}px;height:{imageSide}px"
|
|
>
|
|
<Icon icon="file" width={fileSide} height={fileSide} />
|
|
<span class="ms-2"
|
|
>.{record._file.path.split(".").pop().toLowerCase()}</span
|
|
>
|
|
</a>
|
|
{/if}
|
|
{/if}
|
|
{#if showFilename}
|
|
<a
|
|
href="{channel.lucentUrl}/records/{record.id}"
|
|
title={record._file.path}
|
|
class="preview-file-filename lx-small-text text-decoration-none"
|
|
>{record._file.path}
|
|
</a>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
img {
|
|
border-radius: 12px;
|
|
padding: 4px;
|
|
}
|
|
</style>
|