add Lottie

Author: JeremyGamer13

package-lock.json

@@ -21,7 +21,7 @@
 	"type": "module",
 	"exports": {
 		".": {
-            "development": "./src/lib/index.js",
+			"development": "./src/lib/index.js",
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js"
 		}
@@ -43,6 +43,7 @@
 		"svelte"
 	],
 	"dependencies": {
-		"@asamuzakjp/css-color": "^4.1.0"
+		"@asamuzakjp/css-color": "^4.1.0",
+		"lottie-web": "^5.13.0"
 	}
 }

package.json

@@ -0,0 +1,73 @@
+<script>
+    // NOTE: for some reason we have to do this ugly mess for typings
+    import * as _lottie from 'lottie-web';
+    /** @type {import("lottie-web").LottiePlayer} */
+    const lottie = _lottie.default;
+
+    /**
+     * @callback AnimationCallback
+     * @param {import("lottie-web").AnimationItem} animation
+     * @returns {void}
+     */
+    /**
+     * @typedef {Object} Properties
+     * @property {string?} src Lottie src to display
+     * @property {boolean?} autoplay
+     * @property {number|boolean?} loop
+     * @property {number?} speed
+     * @property {import("lottie-web").AnimationSegment?} initialSegment
+     * @property {AnimationCallback} animationRef Get a reference to the Lottie AnimationItem.
+     */
+    /** @type {Properties} */
+    const props = $props();
+
+    let container;
+    let loaded = $state(false);
+    $effect(() => {
+        const animation = lottie.loadAnimation({
+            container: container,
+            renderer: 'svg',
+
+            path: props.src,
+            autoplay: props.autoplay,
+            loop: props.loop,
+            speed: props.speed,
+            initialSegment: props.initialSegment,
+        });
+        if (typeof props.speed === "number") animation.setSpeed(props.speed);
+        animation.addEventListener("error", () => {
+            loaded = false;
+        });
+        animation.addEventListener("DOMLoaded", () => {
+            loaded = true;
+        });
+
+        if (props.animationRef) props.animationRef(animation);
+        return () => animation.destroy();
+    });
+</script>
+
+<div
+    {...props}
+    class="lottie"
+    data-penguinmodsvelteui-lottie="true"
+    bind:this={container}
+>
+    {#if !loaded}
+        <div
+            class="lottie-placeholder"
+            data-penguinmodsvelteui-lottie-placeholder="true"
+        >
+            {@render props.children?.()}
+        </div>
+    {/if}
+</div>
+
+<style>
+    .lottie {
+        position: relative;
+    }
+    .lottie-placeholder {
+        position: absolute;
+    }
+</style>

src/lib/Lottie.svelte

@@ -4,11 +4,13 @@ import Category from "./Category.svelte";
 import SwappableHolder from "./SwappableHolder.svelte";
 import UserDisplay from "./UserDisplay.svelte";
 import Project from "./Project.svelte";
+import Lottie from "./Lottie.svelte";
 
 export {
     Button,
     Category,
     SwappableHolder,
     UserDisplay,
     Project,
+    Lottie,
 };

src/lib/index.js

@@ -0,0 +1,42 @@
+<script>
+    import * as PenguinModSvelteUI from "$lib/index.js";
+    import testLottie1 from "./lottie1.json";
+    import testLottie2 from "./lottie2.json";
+    
+    const testLottieURI1 = `data:application/json;,${encodeURIComponent(JSON.stringify(testLottie1))}`;
+    const testLottieURI2 = `data:application/json;,${encodeURIComponent(JSON.stringify(testLottie2))}`;
+
+    // svelte-ignore non_reactive_update
+    /** @type {import("lottie-web").AnimationItem} */
+    let controlTestLottie;
+    let controlTestLottieSrc = $state(testLottieURI1);
+</script>
+
+<h1>Lottie</h1>
+<PenguinModSvelteUI.Lottie src={testLottieURI1}>
+    <p>Loading</p>
+</PenguinModSvelteUI.Lottie>
+<PenguinModSvelteUI.Lottie src={testLottieURI1} autoplay>
+    <p>Loading</p>
+</PenguinModSvelteUI.Lottie>
+<PenguinModSvelteUI.Lottie src={testLottieURI1} autoplay speed={8}>
+    <p>Loading</p>
+</PenguinModSvelteUI.Lottie>
+<PenguinModSvelteUI.Lottie src={testLottieURI1} autoplay loop>
+    <p>Loading</p>
+</PenguinModSvelteUI.Lottie>
+<PenguinModSvelteUI.Lottie src={testLottieURI1} autoplay loop={false}>
+    <p>Loading</p>
+</PenguinModSvelteUI.Lottie>
+<hr>
+<PenguinModSvelteUI.Lottie src={"about:blank"}>
+    <p>this will not render</p>
+</PenguinModSvelteUI.Lottie>
+<hr>
+<PenguinModSvelteUI.Lottie src={controlTestLottieSrc} animationRef={(animation) => { controlTestLottie = animation; }}>
+    <p>Controllable</p>
+</PenguinModSvelteUI.Lottie>
+<button onclick={() => { controlTestLottieSrc = controlTestLottieSrc === testLottieURI1 ? testLottieURI2 : testLottieURI1; }}>Swap SRC</button>
+<button onclick={() => controlTestLottie.play()}>Play</button>
+<button onclick={() => controlTestLottie.pause()}>Pause</button>
+<button onclick={() => controlTestLottie.stop()}>Stop</button>