aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/Media.svelte
blob: c2a79a2bcb902f350e7dddcd0274a399ffa3f030 (plain) (blame)
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
<script lang="ts">
  export const isImage = (url: string) =>
    url?.match(/^.*\.(jpg|jpeg|png|webp|gif|avif|svg)/gi);
  export const isVideo = (url: string) =>
    url?.match(/^.*\.(mov|mkv|mp4|avi|m4v|webm)/gi);
  export const isAudio = (url: string) => url?.match(/^.*\.(ogg|mp3|wav)/gi);

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  let { value, minimal } = $props();
</script>

<div class="pt-2">
  {#if !!isImage(value.url)}
    <img src={value.url} alt={""} class:w-48={minimal} />
  {:else if isVideo(value.url)}
    <!-- svelte-ignore a11y-media-has-caption -->
    <video src={value.url} controls />
  {:else if isAudio(value.url)}
    <audio src={value.url} controls>
      <a href={value.url}>{value.url.replace(/https?:\/\/(www\.)?/, "")}</a>
    </audio>
  {:else}
    <a href={value.url} class="underline">
      link
    </a>
  {/if}
</div>