File size: 2,120 Bytes
0ad74ed |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
<script lang="ts">
import { onMount } from "svelte";
import { Image } from "@gradio/image/shared";
import { Video } from "@gradio/video/shared";
import type { FileData } from "@gradio/client";
export let value: { text: string; files: FileData[] } = {
text: "",
files: []
};
export let type: "gallery" | "table";
export let selected = false;
let size: number;
let el: HTMLDivElement;
function set_styles(element: HTMLElement, el_width: number): void {
if (!element || !el_width) return;
el.style.setProperty(
"--local-text-width",
`${el_width < 150 ? el_width : 200}px`
);
el.style.whiteSpace = "unset";
}
onMount(() => {
set_styles(el, size);
});
</script>
<div
class="container"
bind:clientWidth={size}
bind:this={el}
class:table={type === "table"}
class:gallery={type === "gallery"}
class:selected
class:border={value}
>
<p>{value.text ? value.text : ""}</p>
{#each value.files as file}
{#if file.mime_type && file.mime_type.includes("image")}
<Image src={file.url} alt="" />
{:else if file.mime_type && file.mime_type.includes("video")}
<Video src={file.url} alt="" loop={true} is_stream={false} />
{:else if file.mime_type && file.mime_type.includes("audio")}
<audio src={file.url} controls />
{:else}
{file.orig_name}
{/if}
{/each}
</div>
<style>
.gallery {
padding: var(--size-1) var(--size-2);
display: flex;
align-items: center;
gap: 20px;
overflow-x: auto;
}
div {
overflow: hidden;
min-width: var(--local-text-width);
white-space: nowrap;
}
.container :global(img),
.container :global(video) {
object-fit: contain;
width: 100px;
height: 100px;
}
.container.selected {
border-color: var(--border-color-accent);
}
.border.table {
border: 2px solid var(--border-color-primary);
}
.container.table {
margin: 0 auto;
border-radius: var(--radius-lg);
overflow-x: auto;
width: max-content;
height: max-content;
object-fit: cover;
padding: var(--size-2);
}
.container.gallery {
object-fit: cover;
}
div > :global(p) {
font-size: var(--text-lg);
white-space: normal;
}
</style>
|