@slopmachine/svelte 0.1.12 → 0.1.14

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 +3 -2
  2. package/src/SlopImage.svelte +47 -43
  3. package/src/SlopVideo.svelte +50 -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.14",
4
4
  "description": "The official Svelte SDK for Slop Machine",
5
5
  "type": "module",
6
6
  "main": "src/index.ts",
@@ -21,5 +21,6 @@
21
21
  },
22
22
  "peerDependencies": {
23
23
  "svelte": "^5.0.0"
24
- }
24
+ },
25
+ "license": "MIT"
25
26
  }
package/src/SlopImage.svelte CHANGED
@@ -15,7 +15,7 @@
15
15
  />
16
16
  ```
17
17
 
18
- @version 0.1.12
18
+ @version 0.1.14
19
19
  -->
20
20
  <script lang="ts">
21
21
  import {
@@ -50,6 +50,7 @@
50
50
  version,
51
51
  resultId,
52
52
  model,
53
+ quality = "fast",
53
54
  variables = {},
54
55
  baseUrl = undefined,
55
56
  class: className = "",
@@ -68,6 +69,7 @@
68
69
  variables,
69
70
  baseUrl,
70
71
  model,
72
+ quality,
71
73
  }),
72
74
  );
73
75
  let src = $state("");
@@ -133,51 +135,53 @@
133
135
  }
134
136
  </script>
135
137
 
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>
138
+ <div class={className}>
139
+ <div
140
+ class="slop-wrapper"
141
+ style="aspect-ratio: {aspectRatio?.replace(':', '/')};"
142
+ >
143
+ {#if isLoading}
144
+ {#if loader}
145
+ <div class="custom-loader-wrapper">
146
+ {@render loader()}
167
147
  </div>
168
- </div>
169
- <div class="shimmer-effect"></div>
148
+ {:else}
149
+ <div class="loading-overlay">
150
+ <div class="spinner-container">
151
+ <svg
152
+ class="spinner"
153
+ xmlns="http://www.w3.org/2000/svg"
154
+ fill="none"
155
+ viewBox="0 0 24 24"
156
+ >
157
+ <circle
158
+ cx="12"
159
+ cy="12"
160
+ r="10"
161
+ stroke="currentColor"
162
+ stroke-width="4"
163
+ ></circle>
164
+ <path
165
+ fill="currentColor"
166
+ 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"
167
+ ></path>
168
+ </svg>
169
+ <span>Loading...</span>
170
+ </div>
171
+ </div>
172
+ <div class="shimmer-effect"></div>
173
+ {/if}
170
174
  {/if}
171
- {/if}
172
175
 
173
- <img
174
- {src}
175
- {alt}
176
- onload={handleLoad}
177
- onerror={handleError}
178
- class:loaded={!isLoading}
179
- {...restProps}
180
- />
176
+ <img
177
+ {src}
178
+ {alt}
179
+ onload={handleLoad}
180
+ onerror={handleError}
181
+ class:loaded={!isLoading}
182
+ {...restProps}
183
+ />
184
+ </div>
181
185
  </div>
182
186
 
183
187
  <style>
package/src/SlopVideo.svelte CHANGED
@@ -56,6 +56,7 @@
56
56
  version,
57
57
  resultId,
58
58
  model,
59
+ quality = "fast",
59
60
  variables = {},
60
61
  duration,
61
62
  baseUrl = undefined,
@@ -80,6 +81,7 @@
80
81
  duration,
81
82
  baseUrl,
82
83
  model,
84
+ quality,
83
85
  }),
84
86
  );
85
87
  let src = $state("");
@@ -143,55 +145,57 @@
143
145
  }
144
146
  </script>
145
147
 
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>
148
+ <div class={className}>
149
+ <div
150
+ class="slop-wrapper"
151
+ style="aspect-ratio: {aspectRatio?.replace(':', '/')};"
152
+ >
153
+ {#if isLoading}
154
+ {#if loader}
155
+ <div class="custom-loader-wrapper">
156
+ {@render loader()}
177
157
  </div>
178
- </div>
179
- <div class="shimmer-effect"></div>
158
+ {:else}
159
+ <div class="loading-overlay">
160
+ <div class="spinner-container">
161
+ <svg
162
+ class="spinner"
163
+ xmlns="http://www.w3.org/2000/svg"
164
+ fill="none"
165
+ viewBox="0 0 24 24"
166
+ >
167
+ <circle
168
+ cx="12"
169
+ cy="12"
170
+ r="10"
171
+ stroke="currentColor"
172
+ stroke-width="4"
173
+ ></circle>
174
+ <path
175
+ fill="currentColor"
176
+ 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"
177
+ ></path>
178
+ </svg>
179
+ <span>Loading...</span>
180
+ </div>
181
+ </div>
182
+ <div class="shimmer-effect"></div>
183
+ {/if}
180
184
  {/if}
181
- {/if}
182
185
 
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>
186
+ <!-- svelte-ignore a11y_media_has_caption -->
187
+ <video
188
+ {src}
189
+ {autoplay}
190
+ {loop}
191
+ {muted}
192
+ {playsinline}
193
+ onloadeddata={handleLoadedData}
194
+ onerror={handleError}
195
+ class:loaded={!isLoading}
196
+ {...restProps}
197
+ ></video>
198
+ </div>
195
199
  </div>
196
200
 
197
201
  <style>