Revert "use SvelteUI Lottie over DotLottieSvelte"

This reverts commit 3c7945e.

Author: JeremyGamer13

package-lock.json

@@ -11,6 +11,7 @@
 		"indexl10n": "node scripts/programatic-langs.js && node scripts/translation-index.js"
 	},
 	"dependencies": {
+		"@lottiefiles/dotlottie-svelte": "^0.10.6",
 		"penguinmod": "github:PenguinMod/PenguinMod-ApiModule",
 		"PenguinMod-MarkDown": "github:PenguinMod/PenguinMod-MarkDownNew",
 		"PenguinMod-SvelteUI": "github:PenguinMod/PenguinMod-SvelteUI"

package.json

@@ -1,9 +1,10 @@
 <script>
-    // components
-    import { Lottie } from "PenguinMod-SvelteUI";
-    import Icon from "$lib/components/Icon/Component.svelte";
+    import { DotLottieSvelte } from '@lottiefiles/dotlottie-svelte';
 </script>
 
+<h1>DotLottieSvelte</h1>
+<h2>@lottiefiles/dotlottie-svelte</h2>
+
 <h3>hoverdevice</h3>
 <p>
     <span><b>{"/asset/penguin/animated/lottie/hoverdevice.json"}</b></span>
@@ -12,42 +13,15 @@
 </p>
 <div class="row">
     <div class="card">
-        <Lottie
+        <DotLottieSvelte
             src="/asset/penguin/animated/lottie/hoverdevice.json"
-            autoplay
-        >
-            <div class="card-lottie-placeholder">
-                <Icon style="font-size:48px;">downloading</Icon>
-            </div>
-        </Lottie>
-    </div>
-    <div class="card">
-        <img
-            src="/asset/penguin/animated/svg/hoverdevice.svg"
-            alt="Penguin"
+            autoplay={true}
+            loop={true}
         />
     </div>
-</div>
-<h3>test</h3>
-<p>
-    <span><b>{"/asset/penguin/animated/lottie/test.json"}</b></span>
-    <span>vs.</span>
-    <span><b>{"/asset/penguin/animated/svg/test.svg"}</b></span>
-</p>
-<div class="row">
-    <div class="card">
-        <Lottie
-            src="/asset/penguin/animated/lottie/test.json"
-            autoplay
-        >
-            <div class="card-lottie-placeholder">
-                <Icon style="font-size:48px;">downloading</Icon>
-            </div>
-        </Lottie>
-    </div>
     <div class="card">
         <img
-            src="/asset/penguin/animated/svg/test.svg"
+            src="/asset/penguin/animated/svg/hoverdevice.svg"
             alt="Penguin"
         />
     </div>
@@ -65,27 +39,11 @@
         width: 480px;
         height: 480px;
     }
-    .card :global(div[data-penguinmodsvelteui-lottie-placeholder="true"]) {
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 100%;
-    }
-    .card-lottie-placeholder {
-        width: 100%;
-        height: 100%;
 
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-    }
-    .card :global(div[data-penguinmodsvelteui-lottie="true"]),
-    .card img {
+    img {
         width: 100%;
         height: 100%;
-    }
-    .card img {
+        
         object-fit: contain;
     }
 </style>