89 lines
2.2 KiB
Svelte
89 lines
2.2 KiB
Svelte
<script lang="ts">
|
|
let { simName, resourceName } = $props();
|
|
|
|
function getResourceUrl(simName: string, resourceName: string) {
|
|
return `/results/${simName}/${resourceName}`;
|
|
}
|
|
|
|
function isImage(fname: string) {
|
|
return (
|
|
fname.toLowerCase().endsWith(".png") ||
|
|
fname.toLowerCase().endsWith(".jpg") ||
|
|
fname.toLowerCase().endsWith(".jpeg")
|
|
);
|
|
}
|
|
|
|
function isVideo(fname: string) {
|
|
return (
|
|
fname.toLowerCase().endsWith(".mp4") ||
|
|
fname.toLowerCase().endsWith(".avi") ||
|
|
fname.toLowerCase().endsWith(".webm")
|
|
);
|
|
}
|
|
</script>
|
|
|
|
<div class="media-item">
|
|
<div class="media-title">
|
|
{resourceName}
|
|
<a href={getResourceUrl(simName, resourceName)} download class="dl-link"
|
|
>[Download]</a
|
|
>
|
|
</div>
|
|
{#if isImage(resourceName)}
|
|
<img src={getResourceUrl(simName, resourceName)} alt={resourceName} />
|
|
{:else if isVideo(resourceName)}
|
|
<video controls>
|
|
<source
|
|
src={getResourceUrl(simName, resourceName)}
|
|
type="video/webm"
|
|
/>
|
|
<source
|
|
src={getResourceUrl(simName, resourceName)}
|
|
type="video/mp4"
|
|
/>
|
|
<a href={getResourceUrl(simName, resourceName)}>Download Video</a>
|
|
</video>
|
|
{:else}
|
|
<ul>
|
|
<li>
|
|
<a
|
|
href={getResourceUrl(simName, resourceName)}
|
|
target="_blank"
|
|
download>{resourceName}</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
img,
|
|
video {
|
|
max-width: 600px;
|
|
border: 1px solid #000;
|
|
margin-bottom: 15px;
|
|
}
|
|
.media-item {
|
|
margin-bottom: 20px;
|
|
}
|
|
.media-title {
|
|
font-weight: bold;
|
|
margin-bottom: 5px;
|
|
}
|
|
.dl-link {
|
|
font-weight: normal;
|
|
margin-left: 10px;
|
|
font-size: 14px;
|
|
}
|
|
ul {
|
|
list-style-type: square;
|
|
}
|
|
a {
|
|
color: #0000ff;
|
|
text-decoration: underline;
|
|
}
|
|
a:visited {
|
|
color: #800080;
|
|
}
|
|
</style>
|