lucent-laravel/front/js/svelte/files/Preview.svelte

<script>
    import Icon from "../common/Icon.svelte";
    import {imgurl} from "../files/imageserver";
    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>

{#if record}
    {#if record._file.mime.startsWith("image")}
        <!-- href={imgurl(record)} -->
        <a
                href="{channel.lucentUrl}/records/{record.id}"
                title={record._file.path}
                class="d-flex  align-items-center justify-content-center "
                style="width:{imageSide}px;height:{imageSide}px"
        >
            <img
                    class="rounded w-100"
                    src={imgurl(record)}
                    alt={record._file.path}
            />
        </a>
    {:else}
        <a
                href="{channel.lucentUrl}/records/{record.id}"
                title={record._file.path}
                class="btn btn-outline-primary btn-sm d-flex align-items-center justify-content-center"
                style="width:{imageSide}px;height:{imageSide}px"
        >
            <Icon icon="file" width={fileSide} height={fileSide}/>
            <span class="ms-2" style="font-size:{fontSize}px"
            >.{record._file.path.split(".").pop()}</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}