Thread viewer for Bluesky
mackuba.eu
1<script lang="ts">
2 let { gifURL, staticURL, alt }: { gifURL: string, staticURL: string, alt: string | undefined } = $props();
3
4 let loaded = $state(false);
5 let paused = $state(false);
6
7 let maxWidth = $state(500);
8 let maxHeight = $state(200);
9
10 function onload(e: Event) {
11 let img = e.target as HTMLImageElement;
12
13 if (img.naturalWidth < img.naturalHeight) {
14 maxWidth = 200;
15 maxHeight = 400;
16 }
17
18 loaded = true;
19 }
20
21 function onclick() {
22 paused = !paused;
23 }
24</script>
25
26<div class="gif">
27 <img src={paused ? staticURL : gifURL}
28 class={paused ? 'static' : ''}
29 alt={alt ? `Gif: ${alt}` : `Gif animation`}
30 {onload}
31 {onclick}
32 style:opacity={loaded ? 1 : 0}
33 style:max-width="{maxWidth}px"
34 style:max-height="{maxHeight}px">
35</div>
36
37<style>
38 .gif img {
39 user-select: none;
40 -webkit-user-select: none;
41 }
42
43 .gif img.static {
44 opacity: 0.75;
45 }
46</style>