@slopmachine/svelte 0.1.12 → 0.1.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/SlopImage.svelte +45 -43
  3. package/src/SlopVideo.svelte +48 -46
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@slopmachine/svelte",
3
- "version": "0.1.12",
3
+ "version": "0.1.13",
4
4
  "description": "The official Svelte SDK for Slop Machine",
5
5
  "type": "module",
6
6
  "main": "src/index.ts",
package/src/SlopImage.svelte CHANGED
@@ -15,7 +15,7 @@
15
15
  />
16
16
  ```
17
17
 
18
- @version 0.1.12
18
+ @version 0.1.13
19
19
  -->
20
20
  <script lang="ts">
21
21
  import {
@@ -133,51 +133,53 @@
133
133
  }
134
134
  </script>
135
135
 
136
- <div
137
- class="slop-wrapper {className}"
138
- style="aspect-ratio: {aspectRatio?.replace(':', '/')};"
139
- >
140
- {#if isLoading}
141
- {#if loader}
142
- <div class="custom-loader-wrapper">
143
- {@render loader()}
144
- </div>
145
- {:else}
146
- <div class="loading-overlay">
147
- <div class="spinner-container">
148
- <svg
149
- class="spinner"
150
- xmlns="http://www.w3.org/2000/svg"
151
- fill="none"
152
- viewBox="0 0 24 24"
153
- >
154
- <circle
155
- cx="12"
156
- cy="12"
157
- r="10"
158
- stroke="currentColor"
159
- stroke-width="4"
160
- ></circle>
161
- <path
162
- fill="currentColor"
163
- d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
164
- ></path>
165
- </svg>
166
- <span>Loading...</span>
136
+ <div class={className}>
137
+ <div
138
+ class="slop-wrapper"
139
+ style="aspect-ratio: {aspectRatio?.replace(':', '/')};"
140
+ >
141
+ {#if isLoading}
142
+ {#if loader}
143
+ <div class="custom-loader-wrapper">
144
+ {@render loader()}
167
145
  </div>
168
- </div>
169
- <div class="shimmer-effect"></div>
146
+ {:else}
147
+ <div class="loading-overlay">
148
+ <div class="spinner-container">
149
+ <svg
150
+ class="spinner"
151
+ xmlns="http://www.w3.org/2000/svg"
152
+ fill="none"
153
+ viewBox="0 0 24 24"
154
+ >
155
+ <circle
156
+ cx="12"
157
+ cy="12"
158
+ r="10"
159
+ stroke="currentColor"
160
+ stroke-width="4"
161
+ ></circle>
162
+ <path
163
+ fill="currentColor"
164
+ d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
165
+ ></path>
166
+ </svg>
167
+ <span>Loading...</span>
168
+ </div>
169
+ </div>
170
+ <div class="shimmer-effect"></div>
171
+ {/if}
170
172
  {/if}
171
- {/if}
172
173
 
173
- <img
174
- {src}
175
- {alt}
176
- onload={handleLoad}
177
- onerror={handleError}
178
- class:loaded={!isLoading}
179
- {...restProps}
180
- />
174
+ <img
175
+ {src}
176
+ {alt}
177
+ onload={handleLoad}
178
+ onerror={handleError}
179
+ class:loaded={!isLoading}
180
+ {...restProps}
181
+ />
182
+ </div>
181
183
  </div>
182
184
 
183
185
  <style>
package/src/SlopVideo.svelte CHANGED
@@ -143,55 +143,57 @@
143
143
  }
144
144
  </script>
145
145
 
146
- <div
147
- class="slop-wrapper {className}"
148
- style="aspect-ratio: {aspectRatio?.replace(':', '/')};"
149
- >
150
- {#if isLoading}
151
- {#if loader}
152
- <div class="custom-loader-wrapper">
153
- {@render loader()}
154
- </div>
155
- {:else}
156
- <div class="loading-overlay">
157
- <div class="spinner-container">
158
- <svg
159
- class="spinner"
160
- xmlns="http://www.w3.org/2000/svg"
161
- fill="none"
162
- viewBox="0 0 24 24"
163
- >
164
- <circle
165
- cx="12"
166
- cy="12"
167
- r="10"
168
- stroke="currentColor"
169
- stroke-width="4"
170
- ></circle>
171
- <path
172
- fill="currentColor"
173
- d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
174
- ></path>
175
- </svg>
176
- <span>Loading...</span>
146
+ <div class={className}>
147
+ <div
148
+ class="slop-wrapper"
149
+ style="aspect-ratio: {aspectRatio?.replace(':', '/')};"
150
+ >
151
+ {#if isLoading}
152
+ {#if loader}
153
+ <div class="custom-loader-wrapper">
154
+ {@render loader()}
177
155
  </div>
178
- </div>
179
- <div class="shimmer-effect"></div>
156
+ {:else}
157
+ <div class="loading-overlay">
158
+ <div class="spinner-container">
159
+ <svg
160
+ class="spinner"
161
+ xmlns="http://www.w3.org/2000/svg"
162
+ fill="none"
163
+ viewBox="0 0 24 24"
164
+ >
165
+ <circle
166
+ cx="12"
167
+ cy="12"
168
+ r="10"
169
+ stroke="currentColor"
170
+ stroke-width="4"
171
+ ></circle>
172
+ <path
173
+ fill="currentColor"
174
+ d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
175
+ ></path>
176
+ </svg>
177
+ <span>Loading...</span>
178
+ </div>
179
+ </div>
180
+ <div class="shimmer-effect"></div>
181
+ {/if}
180
182
  {/if}
181
- {/if}
182
183
 
183
- <!-- svelte-ignore a11y_media_has_caption -->
184
- <video
185
- {src}
186
- {autoplay}
187
- {loop}
188
- {muted}
189
- {playsinline}
190
- onloadeddata={handleLoadedData}
191
- onerror={handleError}
192
- class:loaded={!isLoading}
193
- {...restProps}
194
- ></video>
184
+ <!-- svelte-ignore a11y_media_has_caption -->
185
+ <video
186
+ {src}
187
+ {autoplay}
188
+ {loop}
189
+ {muted}
190
+ {playsinline}
191
+ onloadeddata={handleLoadedData}
192
+ onerror={handleError}
193
+ class:loaded={!isLoading}
194
+ {...restProps}
195
+ ></video>
196
+ </div>
195
197
  </div>
196
198
 
197
199
  <style>