sveltekit-ui 1.1.19 → 1.1.20

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 (5) hide show
  1. package/dist/Components/Audio/index.svelte +22 -16
  2. package/dist/Components/Audio/index.svelte.js +54 -0
  3. package/package.json +1 -1
  4. package/src/lib/Components/Audio/index.svelte +22 -16
  5. package/src/lib/Components/Audio/index.svelte.js +54 -0
package/dist/Components/Audio/index.svelte CHANGED
@@ -8,12 +8,10 @@
8
8
  let { manager } = $props()
9
9
 
10
10
  onMount(() => {
11
- if(typeof manager?.handle_mount == "function"){
11
+ if (typeof manager?.handle_mount == "function") {
12
12
  manager?.handle_mount()
13
13
  }
14
14
  })
15
-
16
-
17
15
  </script>
18
16
 
19
17
  {#snippet settings()}
@@ -23,6 +21,9 @@
23
21
  <div>
24
22
  <Slider manager={manager?.volume_slider_manager} />
25
23
  <Slider manager={manager?.rate_slider_manager} />
24
+ {#if manager?.is_show_download_button}
25
+ <Button manager={manager?.download_audio_button_manager} />
26
+ {/if}
26
27
  </div>
27
28
  {/snippet}
28
29
  </Popover>
@@ -53,7 +54,7 @@ onabort={(e) => console.log('abort',e)} -->
53
54
  src={manager?.src}
54
55
  type={manager?.type}
55
56
  ></audio>
56
- {#if manager?.ui_type == 'square'}
57
+ {#if manager?.ui_type == "square"}
57
58
  <div
58
59
  class="container_square"
59
60
  style="margin-left: {manager?.ml}rem; margin-right: {manager?.mr}rem; margin-top: {manager?.mt}rem; margin-bottom: {manager?.mb}rem;"
@@ -81,8 +82,13 @@ onabort={(e) => console.log('abort',e)} -->
81
82
  </div>
82
83
  <div style="display: flex;">
83
84
  <Button manager={manager?.play_pause_button_manager} />
84
- <div class="slider_box" class:is_short={manager?.ui_type == 'short'} >
85
- <span>{manager?.formatted_current_time}{manager?.time_slider_manager?.max && manager?.time_slider_manager?.max != Infinity ? ` / ${manager?.formatted_duration}` : ""}</span>
85
+ <div class="slider_box" class:is_short={manager?.ui_type == "short"}>
86
+ <span
87
+ >{manager?.formatted_current_time}{manager?.time_slider_manager?.max &&
88
+ manager?.time_slider_manager?.max != Infinity
89
+ ? ` / ${manager?.formatted_duration}`
90
+ : ""}</span
91
+ >
86
92
  </div>
87
93
  {@render settings()}
88
94
  </div>
@@ -91,7 +97,7 @@ onabort={(e) => console.log('abort',e)} -->
91
97
  {:else}
92
98
  <div
93
99
  class="container_line"
94
- class:is_short={manager?.ui_type == 'short'}
100
+ class:is_short={manager?.ui_type == "short"}
95
101
  style="margin-left: {manager?.ml}rem; margin-right: {manager?.mr}rem; margin-top: {manager?.mt}rem; margin-bottom: {manager?.mb}rem;"
96
102
  >
97
103
  {#if manager?.image_src && !manager?.is_hide_image}
@@ -105,20 +111,20 @@ onabort={(e) => console.log('abort',e)} -->
105
111
  />
106
112
  {/if}
107
113
  {#if !manager?.src}
108
- <p style="display: flex; flex: 1;" class:is_short={manager?.ui_type == 'short'}>Missing Audio Source</p>
114
+ <p style="display: flex; flex: 1;" class:is_short={manager?.ui_type == "short"}>Missing Audio Source</p>
109
115
  {:else if manager?.is_loading && !manager?.time_slider_manager?.max}
110
- <div style="display: flex; flex: 1; margin-left: 1rem;" class:is_short={manager?.ui_type == 'short'}>
116
+ <div style="display: flex; flex: 1; margin-left: 1rem;" class:is_short={manager?.ui_type == "short"}>
111
117
  <LoadingWheel size={2} />
112
- {#if manager?.ui_type != 'standard'}
113
- <p style="margin-left: 1rem;" class:is_short={manager?.ui_type == 'short'}>Loading...</p>
118
+ {#if manager?.ui_type != "standard"}
119
+ <p style="margin-left: 1rem;" class:is_short={manager?.ui_type == "short"}>Loading...</p>
114
120
  {/if}
115
121
  </div>
116
122
  {:else}
117
123
  <Button manager={manager?.play_pause_button_manager} />
118
- <div class="slider_box" class:is_short={manager?.ui_type == 'short'}>
124
+ <div class="slider_box" class:is_short={manager?.ui_type == "short"}>
119
125
  <span>{manager?.formatted_current_time}</span>
120
- {#if manager?.ui_type == 'standard'}
121
- <div style="display: flex; flex: 1; flex-direction: column;" class:is_short={manager?.ui_type == 'short'}>
126
+ {#if manager?.ui_type == "standard"}
127
+ <div style="display: flex; flex: 1; flex-direction: column;" class:is_short={manager?.ui_type == "short"}>
122
128
  <Slider manager={manager?.time_slider_manager} />
123
129
  </div>
124
130
  {:else}
@@ -128,7 +134,7 @@ onabort={(e) => console.log('abort',e)} -->
128
134
  <span>{manager?.formatted_duration}</span>
129
135
  {/if}
130
136
  </div>
131
- {#if manager?.ui_type == 'standard'}
137
+ {#if manager?.ui_type == "standard"}
132
138
  {@render settings()}
133
139
  {/if}
134
140
  {/if}
@@ -157,7 +163,7 @@ onabort={(e) => console.log('abort',e)} -->
157
163
  0 0.2rem 1rem var(--shadow2),
158
164
  inset 0 0 0 1px var(--shadow7-t);
159
165
  }
160
- .container_square{
166
+ .container_square {
161
167
  display: flex;
162
168
  flex-direction: column;
163
169
  flex: 0;
package/dist/Components/Audio/index.svelte.js CHANGED
@@ -27,6 +27,10 @@ export function create_audio_manager(config) {
27
27
  let settings_button_manager = $state(null)
28
28
  let volume_slider_manager = $state(null)
29
29
  let rate_slider_manager = $state(null)
30
+ let is_show_download_button = $derived(set_closurable(config?.is_show_download_button, false))
31
+ let download_audio_button_manager = $state(null)
32
+ let download_is_loading = $state(false)
33
+ let download_error_message = $state(null)
30
34
 
31
35
  let time_loaded_until = $state(0)
32
36
  let time_highlight_range_start_percent = $derived((100 * time_slider_manager?.val) / time_slider_manager?.max)
@@ -293,6 +297,42 @@ export function create_audio_manager(config) {
293
297
  is_loading = false
294
298
  }
295
299
 
300
+ async function download_audio() {
301
+ if (!browser) return
302
+ download_error_message = null
303
+ if (!src) {
304
+ download_error_message = "missing src"
305
+ return
306
+ }
307
+ try {
308
+ download_is_loading = true
309
+ const res = await fetch(src, { credentials: "include" })
310
+ if (!res.ok) {
311
+ const t = await res.text().catch(() => null)
312
+ download_error_message = t || `download failed (${res.status})`
313
+ return
314
+ }
315
+ const content_type = res.headers.get("content-type") || type || "audio/mpeg"
316
+ const blob = await res.blob()
317
+ const ext = mime_to_ext(content_type || blob.type)
318
+ const base = safe_file_base(title || album || artist || "recording")
319
+ const filename = `${base}.${ext}`
320
+ const object_url = URL.createObjectURL(blob)
321
+ const a = document.createElement("a")
322
+ a.href = object_url
323
+ a.download = filename
324
+ a.rel = "noopener"
325
+ document.body.appendChild(a)
326
+ a.click()
327
+ a.remove()
328
+ setTimeout(() => URL.revokeObjectURL(object_url), 1000)
329
+ } catch (e) {
330
+ download_error_message = e?.message || "download failed"
331
+ } finally {
332
+ download_is_loading = false
333
+ }
334
+ }
335
+
296
336
  function init(config) {
297
337
  storage_path = config?.storage_path
298
338
  src = get_src(config?.src, config?.storage_id)
@@ -364,6 +404,14 @@ export function create_audio_manager(config) {
364
404
  val: 1,
365
405
  on_change: (input) => handle_rate_change(input),
366
406
  })
407
+ download_audio_button_manager = create_button_manager({
408
+ type: "outlined",
409
+ mt: 1,
410
+ text: "Download",
411
+ support_icon: "download",
412
+ is_loading: () => download_is_loading,
413
+ on_click: () => download_audio(),
414
+ })
367
415
  }
368
416
 
369
417
  init(config)
@@ -442,6 +490,12 @@ export function create_audio_manager(config) {
442
490
  get is_loading() {
443
491
  return is_loading
444
492
  },
493
+ get download_audio_button_manager() {
494
+ return download_audio_button_manager
495
+ },
496
+ get is_show_download_button() {
497
+ return is_show_download_button
498
+ },
445
499
  handle_mount,
446
500
  handle_loaded_metadata,
447
501
  handle_progress,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sveltekit-ui",
3
- "version": "1.1.19",
3
+ "version": "1.1.20",
4
4
  "description": "A SvelteKit UI component library for building modern web applications",
5
5
  "license": "MIT",
6
6
  "type": "module",
package/src/lib/Components/Audio/index.svelte CHANGED
@@ -8,12 +8,10 @@
8
8
  let { manager } = $props()
9
9
 
10
10
  onMount(() => {
11
- if(typeof manager?.handle_mount == "function"){
11
+ if (typeof manager?.handle_mount == "function") {
12
12
  manager?.handle_mount()
13
13
  }
14
14
  })
15
-
16
-
17
15
  </script>
18
16
 
19
17
  {#snippet settings()}
@@ -23,6 +21,9 @@
23
21
  <div>
24
22
  <Slider manager={manager?.volume_slider_manager} />
25
23
  <Slider manager={manager?.rate_slider_manager} />
24
+ {#if manager?.is_show_download_button}
25
+ <Button manager={manager?.download_audio_button_manager} />
26
+ {/if}
26
27
  </div>
27
28
  {/snippet}
28
29
  </Popover>
@@ -53,7 +54,7 @@ onabort={(e) => console.log('abort',e)} -->
53
54
  src={manager?.src}
54
55
  type={manager?.type}
55
56
  ></audio>
56
- {#if manager?.ui_type == 'square'}
57
+ {#if manager?.ui_type == "square"}
57
58
  <div
58
59
  class="container_square"
59
60
  style="margin-left: {manager?.ml}rem; margin-right: {manager?.mr}rem; margin-top: {manager?.mt}rem; margin-bottom: {manager?.mb}rem;"
@@ -81,8 +82,13 @@ onabort={(e) => console.log('abort',e)} -->
81
82
  </div>
82
83
  <div style="display: flex;">
83
84
  <Button manager={manager?.play_pause_button_manager} />
84
- <div class="slider_box" class:is_short={manager?.ui_type == 'short'} >
85
- <span>{manager?.formatted_current_time}{manager?.time_slider_manager?.max && manager?.time_slider_manager?.max != Infinity ? ` / ${manager?.formatted_duration}` : ""}</span>
85
+ <div class="slider_box" class:is_short={manager?.ui_type == "short"}>
86
+ <span
87
+ >{manager?.formatted_current_time}{manager?.time_slider_manager?.max &&
88
+ manager?.time_slider_manager?.max != Infinity
89
+ ? ` / ${manager?.formatted_duration}`
90
+ : ""}</span
91
+ >
86
92
  </div>
87
93
  {@render settings()}
88
94
  </div>
@@ -91,7 +97,7 @@ onabort={(e) => console.log('abort',e)} -->
91
97
  {:else}
92
98
  <div
93
99
  class="container_line"
94
- class:is_short={manager?.ui_type == 'short'}
100
+ class:is_short={manager?.ui_type == "short"}
95
101
  style="margin-left: {manager?.ml}rem; margin-right: {manager?.mr}rem; margin-top: {manager?.mt}rem; margin-bottom: {manager?.mb}rem;"
96
102
  >
97
103
  {#if manager?.image_src && !manager?.is_hide_image}
@@ -105,20 +111,20 @@ onabort={(e) => console.log('abort',e)} -->
105
111
  />
106
112
  {/if}
107
113
  {#if !manager?.src}
108
- <p style="display: flex; flex: 1;" class:is_short={manager?.ui_type == 'short'}>Missing Audio Source</p>
114
+ <p style="display: flex; flex: 1;" class:is_short={manager?.ui_type == "short"}>Missing Audio Source</p>
109
115
  {:else if manager?.is_loading && !manager?.time_slider_manager?.max}
110
- <div style="display: flex; flex: 1; margin-left: 1rem;" class:is_short={manager?.ui_type == 'short'}>
116
+ <div style="display: flex; flex: 1; margin-left: 1rem;" class:is_short={manager?.ui_type == "short"}>
111
117
  <LoadingWheel size={2} />
112
- {#if manager?.ui_type != 'standard'}
113
- <p style="margin-left: 1rem;" class:is_short={manager?.ui_type == 'short'}>Loading...</p>
118
+ {#if manager?.ui_type != "standard"}
119
+ <p style="margin-left: 1rem;" class:is_short={manager?.ui_type == "short"}>Loading...</p>
114
120
  {/if}
115
121
  </div>
116
122
  {:else}
117
123
  <Button manager={manager?.play_pause_button_manager} />
118
- <div class="slider_box" class:is_short={manager?.ui_type == 'short'}>
124
+ <div class="slider_box" class:is_short={manager?.ui_type == "short"}>
119
125
  <span>{manager?.formatted_current_time}</span>
120
- {#if manager?.ui_type == 'standard'}
121
- <div style="display: flex; flex: 1; flex-direction: column;" class:is_short={manager?.ui_type == 'short'}>
126
+ {#if manager?.ui_type == "standard"}
127
+ <div style="display: flex; flex: 1; flex-direction: column;" class:is_short={manager?.ui_type == "short"}>
122
128
  <Slider manager={manager?.time_slider_manager} />
123
129
  </div>
124
130
  {:else}
@@ -128,7 +134,7 @@ onabort={(e) => console.log('abort',e)} -->
128
134
  <span>{manager?.formatted_duration}</span>
129
135
  {/if}
130
136
  </div>
131
- {#if manager?.ui_type == 'standard'}
137
+ {#if manager?.ui_type == "standard"}
132
138
  {@render settings()}
133
139
  {/if}
134
140
  {/if}
@@ -157,7 +163,7 @@ onabort={(e) => console.log('abort',e)} -->
157
163
  0 0.2rem 1rem var(--shadow2),
158
164
  inset 0 0 0 1px var(--shadow7-t);
159
165
  }
160
- .container_square{
166
+ .container_square {
161
167
  display: flex;
162
168
  flex-direction: column;
163
169
  flex: 0;
package/src/lib/Components/Audio/index.svelte.js CHANGED
@@ -27,6 +27,10 @@ export function create_audio_manager(config) {
27
27
  let settings_button_manager = $state(null)
28
28
  let volume_slider_manager = $state(null)
29
29
  let rate_slider_manager = $state(null)
30
+ let is_show_download_button = $derived(set_closurable(config?.is_show_download_button, false))
31
+ let download_audio_button_manager = $state(null)
32
+ let download_is_loading = $state(false)
33
+ let download_error_message = $state(null)
30
34
 
31
35
  let time_loaded_until = $state(0)
32
36
  let time_highlight_range_start_percent = $derived((100 * time_slider_manager?.val) / time_slider_manager?.max)
@@ -293,6 +297,42 @@ export function create_audio_manager(config) {
293
297
  is_loading = false
294
298
  }
295
299
 
300
+ async function download_audio() {
301
+ if (!browser) return
302
+ download_error_message = null
303
+ if (!src) {
304
+ download_error_message = "missing src"
305
+ return
306
+ }
307
+ try {
308
+ download_is_loading = true
309
+ const res = await fetch(src, { credentials: "include" })
310
+ if (!res.ok) {
311
+ const t = await res.text().catch(() => null)
312
+ download_error_message = t || `download failed (${res.status})`
313
+ return
314
+ }
315
+ const content_type = res.headers.get("content-type") || type || "audio/mpeg"
316
+ const blob = await res.blob()
317
+ const ext = mime_to_ext(content_type || blob.type)
318
+ const base = safe_file_base(title || album || artist || "recording")
319
+ const filename = `${base}.${ext}`
320
+ const object_url = URL.createObjectURL(blob)
321
+ const a = document.createElement("a")
322
+ a.href = object_url
323
+ a.download = filename
324
+ a.rel = "noopener"
325
+ document.body.appendChild(a)
326
+ a.click()
327
+ a.remove()
328
+ setTimeout(() => URL.revokeObjectURL(object_url), 1000)
329
+ } catch (e) {
330
+ download_error_message = e?.message || "download failed"
331
+ } finally {
332
+ download_is_loading = false
333
+ }
334
+ }
335
+
296
336
  function init(config) {
297
337
  storage_path = config?.storage_path
298
338
  src = get_src(config?.src, config?.storage_id)
@@ -364,6 +404,14 @@ export function create_audio_manager(config) {
364
404
  val: 1,
365
405
  on_change: (input) => handle_rate_change(input),
366
406
  })
407
+ download_audio_button_manager = create_button_manager({
408
+ type: "outlined",
409
+ mt: 1,
410
+ text: "Download",
411
+ support_icon: "download",
412
+ is_loading: () => download_is_loading,
413
+ on_click: () => download_audio(),
414
+ })
367
415
  }
368
416
 
369
417
  init(config)
@@ -442,6 +490,12 @@ export function create_audio_manager(config) {
442
490
  get is_loading() {
443
491
  return is_loading
444
492
  },
493
+ get download_audio_button_manager() {
494
+ return download_audio_button_manager
495
+ },
496
+ get is_show_download_button() {
497
+ return is_show_download_button
498
+ },
445
499
  handle_mount,
446
500
  handle_loaded_metadata,
447
501
  handle_progress,