sveltekit-ui 1.1.19 → 1.1.21

package/dist/Components/Audio/index.svelte

@@ -8,12 +8,10 @@
   let { manager } = $props()
 
   onMount(() => {
-    if(typeof manager?.handle_mount == "function"){
+    if (typeof manager?.handle_mount == "function") {
       manager?.handle_mount()
     }
   })
-
-
 </script>
 
 {#snippet settings()}
@@ -23,6 +21,9 @@
       <div>
         <Slider manager={manager?.volume_slider_manager} />
         <Slider manager={manager?.rate_slider_manager} />
+        {#if manager?.is_show_download_button}
+          <Button manager={manager?.download_audio_button_manager} />
+        {/if}
       </div>
     {/snippet}
   </Popover>
@@ -53,7 +54,7 @@ onabort={(e) => console.log('abort',e)} -->
     src={manager?.src}
     type={manager?.type}
   ></audio>
-  {#if manager?.ui_type == 'square'}
+  {#if manager?.ui_type == "square"}
     <div
       class="container_square"
       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)} -->
         </div>
         <div style="display: flex;">
           <Button manager={manager?.play_pause_button_manager} />
-          <div class="slider_box" class:is_short={manager?.ui_type == 'short'} >
-            <span>{manager?.formatted_current_time}{manager?.time_slider_manager?.max && manager?.time_slider_manager?.max != Infinity ? ` / ${manager?.formatted_duration}` : ""}</span>
+          <div class="slider_box" class:is_short={manager?.ui_type == "short"}>
+            <span
+              >{manager?.formatted_current_time}{manager?.time_slider_manager?.max &&
+              manager?.time_slider_manager?.max != Infinity
+                ? ` / ${manager?.formatted_duration}`
+                : ""}</span
+            >
           </div>
           {@render settings()}
         </div>
@@ -91,7 +97,7 @@ onabort={(e) => console.log('abort',e)} -->
   {:else}
     <div
       class="container_line"
-      class:is_short={manager?.ui_type == 'short'}
+      class:is_short={manager?.ui_type == "short"}
       style="margin-left: {manager?.ml}rem; margin-right: {manager?.mr}rem; margin-top: {manager?.mt}rem; margin-bottom: {manager?.mb}rem;"
     >
       {#if manager?.image_src && !manager?.is_hide_image}
@@ -105,20 +111,20 @@ onabort={(e) => console.log('abort',e)} -->
         />
       {/if}
       {#if !manager?.src}
-        <p style="display: flex; flex: 1;" class:is_short={manager?.ui_type == 'short'}>Missing Audio Source</p>
+        <p style="display: flex; flex: 1;" class:is_short={manager?.ui_type == "short"}>Missing Audio Source</p>
       {:else if manager?.is_loading && !manager?.time_slider_manager?.max}
-        <div style="display: flex; flex: 1; margin-left: 1rem;" class:is_short={manager?.ui_type == 'short'}>
+        <div style="display: flex; flex: 1; margin-left: 1rem;" class:is_short={manager?.ui_type == "short"}>
           <LoadingWheel size={2} />
-          {#if manager?.ui_type != 'standard'}
-            <p style="margin-left: 1rem;" class:is_short={manager?.ui_type == 'short'}>Loading...</p>
+          {#if manager?.ui_type != "standard"}
+            <p style="margin-left: 1rem;" class:is_short={manager?.ui_type == "short"}>Loading...</p>
           {/if}
         </div>
       {:else}
         <Button manager={manager?.play_pause_button_manager} />
-        <div class="slider_box" class:is_short={manager?.ui_type == 'short'}>
+        <div class="slider_box" class:is_short={manager?.ui_type == "short"}>
           <span>{manager?.formatted_current_time}</span>
-          {#if manager?.ui_type == 'standard'}
-            <div style="display: flex; flex: 1; flex-direction: column;" class:is_short={manager?.ui_type == 'short'}>
+          {#if manager?.ui_type == "standard"}
+            <div style="display: flex; flex: 1; flex-direction: column;" class:is_short={manager?.ui_type == "short"}>
               <Slider manager={manager?.time_slider_manager} />
             </div>
           {:else}
@@ -128,7 +134,7 @@ onabort={(e) => console.log('abort',e)} -->
             <span>{manager?.formatted_duration}</span>
           {/if}
         </div>
-        {#if manager?.ui_type == 'standard'}
+        {#if manager?.ui_type == "standard"}
           {@render settings()}
         {/if}
       {/if}
@@ -157,7 +163,7 @@ onabort={(e) => console.log('abort',e)} -->
       0 0.2rem 1rem var(--shadow2),
       inset 0 0 0 1px var(--shadow7-t);
   }
-  .container_square{
+  .container_square {
     display: flex;
     flex-direction: column;
     flex: 0;

package/dist/Components/Audio/index.svelte.js

@@ -27,6 +27,10 @@ export function create_audio_manager(config) {
   let settings_button_manager = $state(null)
   let volume_slider_manager = $state(null)
   let rate_slider_manager = $state(null)
+  let is_show_download_button = $derived(set_closurable(config?.is_show_download_button, false))
+  let download_audio_button_manager = $state(null)
+  let download_is_loading = $state(false)
+  let download_error_message = $state(null)
 
   let time_loaded_until = $state(0)
   let time_highlight_range_start_percent = $derived((100 * time_slider_manager?.val) / time_slider_manager?.max)
@@ -293,6 +297,68 @@ export function create_audio_manager(config) {
     is_loading = false
   }
 
+  function mime_to_ext(mime) {
+    const v = String(mime || "").toLowerCase()
+    if (v.includes("mpeg")) return "mp3"
+    if (v.includes("mp4")) return "mp4"
+    if (v.includes("webm")) return "webm"
+    if (v.includes("ogg")) return "ogg"
+    if (v.includes("wav")) return "wav"
+    if (v.includes("flac")) return "flac"
+    if (v.includes("aac")) return "aac"
+    return "audio"
+  }
+
+  function safe_file_base(input) {
+    const s = String(input || "").trim()
+    if (!s) return "audio"
+    return (
+      s
+        .replace(/\.[a-z0-9]+$/i, "")
+        .replace(/[^a-z0-9_\- ]/gi, "")
+        .trim()
+        .replace(/\s+/g, "_")
+        .slice(0, 80)
+        .toLowerCase() || "audio"
+    )
+  }
+
+  async function download_audio() {
+    if (!browser) return
+    download_error_message = null
+    if (!src) {
+      download_error_message = "missing src"
+      return
+    }
+    try {
+      download_is_loading = true
+      const res = await fetch(src)
+      if (!res.ok) {
+        const t = await res.text().catch(() => null)
+        download_error_message = t || `download failed (${res.status})`
+        return
+      }
+      const content_type = res.headers.get("content-type") || type || "audio/mpeg"
+      const blob = await res.blob()
+      const ext = mime_to_ext(content_type || blob.type)
+      const base = safe_file_base(title || album || artist || "recording")
+      const file_name = `${base}.${ext}`
+      const object_url = URL.createObjectURL(blob)
+      const a = document.createElement("a")
+      a.href = object_url
+      a.download = file_name
+      a.rel = "noopener"
+      document.body.appendChild(a)
+      a.click()
+      a.remove()
+      setTimeout(() => URL.revokeObjectURL(object_url), 1000)
+    } catch (e) {
+      download_error_message = e?.message || "download failed"
+    } finally {
+      download_is_loading = false
+    }
+  }
+
   function init(config) {
     storage_path = config?.storage_path
     src = get_src(config?.src, config?.storage_id)
@@ -364,6 +430,14 @@ export function create_audio_manager(config) {
       val: 1,
       on_change: (input) => handle_rate_change(input),
     })
+    download_audio_button_manager = create_button_manager({
+      type: "outlined",
+      mt: 1,
+      text: "Download",
+      support_icon: "download",
+      is_loading: () => download_is_loading,
+      on_click: () => download_audio(),
+    })
   }
 
   init(config)
@@ -442,6 +516,12 @@ export function create_audio_manager(config) {
     get is_loading() {
       return is_loading
     },
+    get download_audio_button_manager() {
+      return download_audio_button_manager
+    },
+    get is_show_download_button() {
+      return is_show_download_button
+    },
     handle_mount,
     handle_loaded_metadata,
     handle_progress,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sveltekit-ui",
-  "version": "1.1.19",
+  "version": "1.1.21",
   "description": "A SvelteKit UI component library for building modern web applications",
   "license": "MIT",
   "type": "module",

package/src/lib/Components/Audio/index.svelte

@@ -8,12 +8,10 @@
   let { manager } = $props()
 
   onMount(() => {
-    if(typeof manager?.handle_mount == "function"){
+    if (typeof manager?.handle_mount == "function") {
       manager?.handle_mount()
     }
   })
-
-
 </script>
 
 {#snippet settings()}
@@ -23,6 +21,9 @@
       <div>
         <Slider manager={manager?.volume_slider_manager} />
         <Slider manager={manager?.rate_slider_manager} />
+        {#if manager?.is_show_download_button}
+          <Button manager={manager?.download_audio_button_manager} />
+        {/if}
       </div>
     {/snippet}
   </Popover>
@@ -53,7 +54,7 @@ onabort={(e) => console.log('abort',e)} -->
     src={manager?.src}
     type={manager?.type}
   ></audio>
-  {#if manager?.ui_type == 'square'}
+  {#if manager?.ui_type == "square"}
     <div
       class="container_square"
       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)} -->
         </div>
         <div style="display: flex;">
           <Button manager={manager?.play_pause_button_manager} />
-          <div class="slider_box" class:is_short={manager?.ui_type == 'short'} >
-            <span>{manager?.formatted_current_time}{manager?.time_slider_manager?.max && manager?.time_slider_manager?.max != Infinity ? ` / ${manager?.formatted_duration}` : ""}</span>
+          <div class="slider_box" class:is_short={manager?.ui_type == "short"}>
+            <span
+              >{manager?.formatted_current_time}{manager?.time_slider_manager?.max &&
+              manager?.time_slider_manager?.max != Infinity
+                ? ` / ${manager?.formatted_duration}`
+                : ""}</span
+            >
           </div>
           {@render settings()}
         </div>
@@ -91,7 +97,7 @@ onabort={(e) => console.log('abort',e)} -->
   {:else}
     <div
       class="container_line"
-      class:is_short={manager?.ui_type == 'short'}
+      class:is_short={manager?.ui_type == "short"}
       style="margin-left: {manager?.ml}rem; margin-right: {manager?.mr}rem; margin-top: {manager?.mt}rem; margin-bottom: {manager?.mb}rem;"
     >
       {#if manager?.image_src && !manager?.is_hide_image}
@@ -105,20 +111,20 @@ onabort={(e) => console.log('abort',e)} -->
         />
       {/if}
       {#if !manager?.src}
-        <p style="display: flex; flex: 1;" class:is_short={manager?.ui_type == 'short'}>Missing Audio Source</p>
+        <p style="display: flex; flex: 1;" class:is_short={manager?.ui_type == "short"}>Missing Audio Source</p>
       {:else if manager?.is_loading && !manager?.time_slider_manager?.max}
-        <div style="display: flex; flex: 1; margin-left: 1rem;" class:is_short={manager?.ui_type == 'short'}>
+        <div style="display: flex; flex: 1; margin-left: 1rem;" class:is_short={manager?.ui_type == "short"}>
           <LoadingWheel size={2} />
-          {#if manager?.ui_type != 'standard'}
-            <p style="margin-left: 1rem;" class:is_short={manager?.ui_type == 'short'}>Loading...</p>
+          {#if manager?.ui_type != "standard"}
+            <p style="margin-left: 1rem;" class:is_short={manager?.ui_type == "short"}>Loading...</p>
           {/if}
         </div>
       {:else}
         <Button manager={manager?.play_pause_button_manager} />
-        <div class="slider_box" class:is_short={manager?.ui_type == 'short'}>
+        <div class="slider_box" class:is_short={manager?.ui_type == "short"}>
           <span>{manager?.formatted_current_time}</span>
-          {#if manager?.ui_type == 'standard'}
-            <div style="display: flex; flex: 1; flex-direction: column;" class:is_short={manager?.ui_type == 'short'}>
+          {#if manager?.ui_type == "standard"}
+            <div style="display: flex; flex: 1; flex-direction: column;" class:is_short={manager?.ui_type == "short"}>
               <Slider manager={manager?.time_slider_manager} />
             </div>
           {:else}
@@ -128,7 +134,7 @@ onabort={(e) => console.log('abort',e)} -->
             <span>{manager?.formatted_duration}</span>
           {/if}
         </div>
-        {#if manager?.ui_type == 'standard'}
+        {#if manager?.ui_type == "standard"}
           {@render settings()}
         {/if}
       {/if}
@@ -157,7 +163,7 @@ onabort={(e) => console.log('abort',e)} -->
       0 0.2rem 1rem var(--shadow2),
       inset 0 0 0 1px var(--shadow7-t);
   }
-  .container_square{
+  .container_square {
     display: flex;
     flex-direction: column;
     flex: 0;

package/src/lib/Components/Audio/index.svelte.js

@@ -27,6 +27,10 @@ export function create_audio_manager(config) {
   let settings_button_manager = $state(null)
   let volume_slider_manager = $state(null)
   let rate_slider_manager = $state(null)
+  let is_show_download_button = $derived(set_closurable(config?.is_show_download_button, false))
+  let download_audio_button_manager = $state(null)
+  let download_is_loading = $state(false)
+  let download_error_message = $state(null)
 
   let time_loaded_until = $state(0)
   let time_highlight_range_start_percent = $derived((100 * time_slider_manager?.val) / time_slider_manager?.max)
@@ -293,6 +297,68 @@ export function create_audio_manager(config) {
     is_loading = false
   }
 
+  function mime_to_ext(mime) {
+    const v = String(mime || "").toLowerCase()
+    if (v.includes("mpeg")) return "mp3"
+    if (v.includes("mp4")) return "mp4"
+    if (v.includes("webm")) return "webm"
+    if (v.includes("ogg")) return "ogg"
+    if (v.includes("wav")) return "wav"
+    if (v.includes("flac")) return "flac"
+    if (v.includes("aac")) return "aac"
+    return "audio"
+  }
+
+  function safe_file_base(input) {
+    const s = String(input || "").trim()
+    if (!s) return "audio"
+    return (
+      s
+        .replace(/\.[a-z0-9]+$/i, "")
+        .replace(/[^a-z0-9_\- ]/gi, "")
+        .trim()
+        .replace(/\s+/g, "_")
+        .slice(0, 80)
+        .toLowerCase() || "audio"
+    )
+  }
+
+  async function download_audio() {
+    if (!browser) return
+    download_error_message = null
+    if (!src) {
+      download_error_message = "missing src"
+      return
+    }
+    try {
+      download_is_loading = true
+      const res = await fetch(src)
+      if (!res.ok) {
+        const t = await res.text().catch(() => null)
+        download_error_message = t || `download failed (${res.status})`
+        return
+      }
+      const content_type = res.headers.get("content-type") || type || "audio/mpeg"
+      const blob = await res.blob()
+      const ext = mime_to_ext(content_type || blob.type)
+      const base = safe_file_base(title || album || artist || "recording")
+      const file_name = `${base}.${ext}`
+      const object_url = URL.createObjectURL(blob)
+      const a = document.createElement("a")
+      a.href = object_url
+      a.download = file_name
+      a.rel = "noopener"
+      document.body.appendChild(a)
+      a.click()
+      a.remove()
+      setTimeout(() => URL.revokeObjectURL(object_url), 1000)
+    } catch (e) {
+      download_error_message = e?.message || "download failed"
+    } finally {
+      download_is_loading = false
+    }
+  }
+
   function init(config) {
     storage_path = config?.storage_path
     src = get_src(config?.src, config?.storage_id)
@@ -364,6 +430,14 @@ export function create_audio_manager(config) {
       val: 1,
       on_change: (input) => handle_rate_change(input),
     })
+    download_audio_button_manager = create_button_manager({
+      type: "outlined",
+      mt: 1,
+      text: "Download",
+      support_icon: "download",
+      is_loading: () => download_is_loading,
+      on_click: () => download_audio(),
+    })
   }
 
   init(config)
@@ -442,6 +516,12 @@ export function create_audio_manager(config) {
     get is_loading() {
       return is_loading
     },
+    get download_audio_button_manager() {
+      return download_audio_button_manager
+    },
+    get is_show_download_button() {
+      return is_show_download_button
+    },
     handle_mount,
     handle_loaded_metadata,
     handle_progress,

package/src/routes/components/[component]/Showcase/Audio/index.svelte

@@ -24,6 +24,7 @@
     type: "audio/aac",
     image_src: "https://dummyimage.com/1000x400",
     image_type: "image/png",
+    is_show_download_button: true,
   })
 
   let audio_manager3 = create_audio_manager({