sveltekit-ui 1.1.73 → 1.1.75

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

@@ -4,6 +4,8 @@ import { create_popover_manager } from "../Popover/index.svelte.js"
 import { create_slider_manager } from "../Slider/index.svelte.js"
 import { create_unique_id, set_closurable, deep_copy } from "../../client/index.js"
 
+let active_media_session_owner_id = null
+
 export function create_audio_manager(config) {
   let id = create_unique_id(null, 20)
   let src = $state(null)
@@ -31,6 +33,12 @@ export function create_audio_manager(config) {
   let download_audio_button_manager = $state(null)
   let download_is_loading = $state(false)
   let download_error_message = $state(null)
+  let playback_error_message = $state(null)
+  let is_destroyed = false
+  let lifecycle_version = 0
+  let download_abort_controller = null
+  const object_urls = new Set()
+  const revoke_timeout_ids = new Set()
 
   let time_loaded_until = $state(0)
   let time_highlight_range_start_percent = $derived((100 * time_slider_manager?.val) / time_slider_manager?.max)
@@ -55,6 +63,8 @@ export function create_audio_manager(config) {
     if (!browser) {
       return
     }
+    is_destroyed = false
+    lifecycle_version += 1
     let audio_el = document?.querySelector(`#audio_${id}`)
     if (audio_el) {
       if (audio_el.readyState >= 3) {
@@ -69,10 +79,12 @@ export function create_audio_manager(config) {
       // tbd on this
       return
     }
+    const normalized_volume = Number(volume)
     let audio_el = document?.querySelector(`#audio_${id}`)
-    if (audio_el && volume) {
-      audio_el.volume = volume
-      volume_slider_manager.set_val(deep_copy(volume))
+    if (audio_el && Number.isFinite(normalized_volume)) {
+      const clamped_volume = Math.min(Math.max(normalized_volume, 0), 1)
+      audio_el.volume = clamped_volume
+      volume_slider_manager.set_val(deep_copy(clamped_volume))
     }
   }
 
@@ -81,15 +93,17 @@ export function create_audio_manager(config) {
       // tbd on this
       return
     }
+    const normalized_rate = Number(rate)
     let audio_el = document?.querySelector(`#audio_${id}`)
-    if (audio_el && rate) {
-      audio_el.playbackRate = rate
-      rate_slider_manager.set_val(rate)
+    if (audio_el && Number.isFinite(normalized_rate) && normalized_rate > 0) {
+      audio_el.playbackRate = normalized_rate
+      rate_slider_manager.set_val(normalized_rate)
       update_position_state()
     }
   }
 
   function format_time(seconds) {
+    if (!Number.isFinite(Number(seconds)) || Number(seconds) < 0) return "00:00"
     const mins = Math.floor(seconds / 60)
       .toString()
       .padStart(2, "0")
@@ -156,8 +170,12 @@ export function create_audio_manager(config) {
   }
 
   function resize_image(src, callback) {
+    if (!browser || !src) {
+      callback(null)
+      return
+    }
     let img = new Image()
-    img.crossOrigin = "anonymous" // Request CORS permissions
+    img.crossOrigin = "anonymous"
     img.onload = function () {
       let width = img.width
       let height = img.height
@@ -174,69 +192,107 @@ export function create_audio_manager(config) {
       }
       let canvas = document.createElement("canvas")
       let ctx = canvas.getContext("2d")
+      if (!ctx) {
+        callback(null)
+        return
+      }
       canvas.width = width
       canvas.height = height
-      ctx.drawImage(img, 0, 0, width, height)
-      callback(canvas.toDataURL())
+      try {
+        ctx.drawImage(img, 0, 0, width, height)
+        callback(canvas.toDataURL())
+      } catch {
+        callback(null)
+      }
     }
+    img.onerror = () => callback(null)
     img.src = src
   }
 
   let has_setup_media_session = $state(false)
+  function get_media_session() {
+    return browser && typeof navigator !== "undefined" && "mediaSession" in navigator ? navigator.mediaSession : null
+  }
+
+  function set_media_session_metadata(artwork = []) {
+    const media_session = get_media_session()
+    if (!media_session || typeof MediaMetadata === "undefined" || active_media_session_owner_id !== id) return
+
+    try {
+      media_session.metadata = new MediaMetadata({
+        title: title || "Audio",
+        artist: artist || "",
+        album: album || "",
+        artwork,
+      })
+    } catch {
+      // Media Session metadata is optional and inconsistently implemented.
+    }
+  }
+
   function setup_media_session() {
-    let metadata = {
-      title: title,
-      artist: artist || "",
-      album: album,
-      artwork: [],
+    const media_session = get_media_session()
+    if (!media_session) return
+
+    active_media_session_owner_id = id
+    has_setup_media_session = true
+    const current_lifecycle_version = lifecycle_version
+    set_media_session_metadata()
+
+    const action_handlers = {
+      play: play_audio,
+      pause: pause_audio,
+      seekto: (details) => seek_to_audio(details.seekTime),
+      seekbackward: nav_seek_backward,
+      seekforward: nav_seek_forward,
     }
+    Object.entries(action_handlers).forEach(([action, handler]) => {
+      try {
+        media_session.setActionHandler(action, handler)
+      } catch {
+        // Ignore Media Session actions unsupported by the current browser.
+      }
+    })
+
     if (image_src) {
-      //temp fix since ios mobile is trash and not working with sizes over 128x128 even though it did on ios idk 16.4 or something
       resize_image(image_src, function (resized_image_src) {
-        metadata.artwork = [
+        if (is_destroyed || current_lifecycle_version !== lifecycle_version || !resized_image_src) return
+        set_media_session_metadata([
           {
             src: resized_image_src,
-            sizes: "128x128", // maximum size is now 128x128
-            type: image_type,
+            sizes: "128x128",
+            type: image_type || "image/png",
           },
-          // {
-          //   src: image_src,
-          //   sizes: "1000x1000", // seems as though need this even if not correct and max size of a size can be 1000px
-          //   type: image_type,
-          // },
-          // {
-          //   src: "https://dummyimage.com/1000x500",
-          //   sizes: "1000x500",
-          //   type: "image/png",
-          // },
-        ]
-        navigator.mediaSession.metadata = new MediaMetadata(metadata)
-        navigator.mediaSession.setActionHandler("play", play_audio)
-        navigator.mediaSession.setActionHandler("pause", pause_audio)
-        navigator.mediaSession.setActionHandler("seekto", (details) => seek_to_audio(details.seekTime))
-        navigator.mediaSession.setActionHandler("seekbackward", (details) => nav_seek_backward(details))
-        navigator.mediaSession.setActionHandler("seekforward", (details) => nav_seek_forward(details))
+        ])
       })
     }
   }
 
   function update_position_state() {
-    if ("setPositionState" in navigator.mediaSession) {
-      navigator.mediaSession.setPositionState({
-        duration: time_slider_manager?.max,
-        playback_rate: rate_slider_manager?.val,
-        position: time_slider_manager?.val,
+    const media_session = get_media_session()
+    const duration = Number(time_slider_manager?.max)
+    const playback_rate = Number(rate_slider_manager?.val)
+    const position = Number(time_slider_manager?.val)
+    if (!media_session?.setPositionState || !Number.isFinite(duration) || duration <= 0) return
+
+    try {
+      media_session.setPositionState({
+        duration,
+        playbackRate: Number.isFinite(playback_rate) && playback_rate > 0 ? playback_rate : 1,
+        position: Math.min(Math.max(Number.isFinite(position) ? position : 0, 0), duration),
       })
+    } catch {
+      // Position state may reject transient or unsupported media values.
     }
   }
 
   function nav_seek_backward(details) {
-    const skip_time = details.seekOffset || default_skip_time
+    const skip_time = details?.seekOffset ?? default_skip_time
     seek_to_audio(Math.max(time_slider_manager?.val - skip_time, 0))
   }
 
   function nav_seek_forward(details) {
-    const skip_time = details.seekOffset || default_skip_time
+    const skip_time = details?.seekOffset ?? default_skip_time
     seek_to_audio(Math.min(time_slider_manager?.val + skip_time, time_slider_manager?.max))
   }
 
@@ -261,14 +317,17 @@ export function create_audio_manager(config) {
     }
     let audio_el = document?.querySelector(`#audio_${id}`)
     const is_playing = !audio_el ? false : !audio_el.paused && !audio_el.ended && audio_el.currentTime > 0
-    play_pause_support_icon = "pause"
-    if (audio_el && !is_playing) {
-      if (!has_setup_media_session) {
-        setup_media_session()
-      }
-      await audio_el.play()
-      navigator.mediaSession.playbackState = "playing"
-      update_position_state()
+    if (!audio_el) return
+
+    playback_error_message = null
+    if (!has_setup_media_session || active_media_session_owner_id !== id) setup_media_session()
+
+    try {
+      if (!is_playing) await audio_el.play()
+      if (!is_destroyed) handle_playing()
+    } catch {
+      play_pause_support_icon = "play"
+      playback_error_message = "Audio playback could not start."
     }
   }
 
@@ -278,14 +337,53 @@ export function create_audio_manager(config) {
       return
     }
     let audio_el = document?.querySelector(`#audio_${id}`)
-    const is_playing = !audio_el ? false : !audio_el.paused && !audio_el.ended && audio_el.currentTime > 0
     play_pause_support_icon = "play"
-    if (audio_el && is_playing) {
-      audio_el.pause()
-      navigator.mediaSession.playbackState = "paused"
+    if (audio_el && !audio_el.paused) audio_el.pause()
+
+    const media_session = get_media_session()
+    if (media_session && active_media_session_owner_id === id) {
+      try {
+        media_session.playbackState = "paused"
+      } catch {
+        // Playback state is not implemented consistently across browsers.
+      }
+    }
+  }
+
+  function handle_playing() {
+    if (is_destroyed) return
+    play_pause_support_icon = "pause"
+    playback_error_message = null
+    if (!has_setup_media_session || active_media_session_owner_id !== id) setup_media_session()
+    const media_session = get_media_session()
+    if (media_session && active_media_session_owner_id === id) {
+      try {
+        media_session.playbackState = "playing"
+      } catch {
+        // Playback state is not implemented consistently across browsers.
+      }
+    }
+    update_position_state()
+  }
+
+  function handle_ended() {
+    play_pause_support_icon = "play"
+    const media_session = get_media_session()
+    if (media_session && active_media_session_owner_id === id) {
+      try {
+        media_session.playbackState = "none"
+      } catch {
+        // Playback state is not implemented consistently across browsers.
+      }
     }
   }
 
+  function handle_audio_error() {
+    is_loading = false
+    play_pause_support_icon = "play"
+    playback_error_message = "Audio could not be loaded."
+  }
+
   function set_is_loading(input) {
     is_loading = !!input
   }
@@ -327,15 +425,16 @@ export function create_audio_manager(config) {
     if (!browser) return
     download_error_message = null
     if (!src) {
-      download_error_message = "missing src"
+      download_error_message = "Missing audio source."
       return
     }
     try {
       download_is_loading = true
-      const res = await fetch(src)
+      download_abort_controller?.abort()
+      download_abort_controller = new AbortController()
+      const res = await fetch(src, { signal: download_abort_controller.signal })
       if (!res.ok) {
-        const t = await res.text().catch(() => null)
-        download_error_message = t || `download failed (${res.status})`
+        download_error_message = `Download failed (${res.status}).`
         return
       }
       const content_type = res.headers.get("content-type") || type || "audio/mpeg"
@@ -344,6 +443,7 @@ export function create_audio_manager(config) {
       const base = safe_file_base(title || album || artist || "recording")
       const file_name = `${base}.${ext}`
       const object_url = URL.createObjectURL(blob)
+      object_urls.add(object_url)
       const a = document.createElement("a")
       a.href = object_url
       a.download = file_name
@@ -351,10 +451,16 @@ export function create_audio_manager(config) {
       document.body.appendChild(a)
       a.click()
       a.remove()
-      setTimeout(() => URL.revokeObjectURL(object_url), 1000)
+      const timeout_id = window.setTimeout(() => {
+        URL.revokeObjectURL(object_url)
+        object_urls.delete(object_url)
+        revoke_timeout_ids.delete(timeout_id)
+      }, 1000)
+      revoke_timeout_ids.add(timeout_id)
     } catch (e) {
-      download_error_message = e?.message || "download failed"
+      if (e?.name !== "AbortError") download_error_message = "Download failed."
     } finally {
+      download_abort_controller = null
       download_is_loading = false
     }
   }
@@ -368,13 +474,13 @@ export function create_audio_manager(config) {
     album = config?.album ?? null
     image_src = get_src(config?.image_src, config?.image_storage_id)
     image_type = config?.image_type ?? null
-    default_skip_time = config?.default_skip_time ?? null
+    default_skip_time = config?.default_skip_time ?? 10
     ui_type = config?.ui_type ?? "standard"
     play_pause_button_manager = create_button_manager({
       type: "soft",
       is_uniform: true,
       is_icon_bg_tint: false,
-      aria_label: "play_pause",
+      aria_label: "Play or pause audio",
       is_loading: () => is_loading,
       support_icon: () => play_pause_support_icon ?? "play",
       on_click: () => toggle_play_pause(),
@@ -407,7 +513,7 @@ export function create_audio_manager(config) {
       icon_sw: 60,
       is_icon_bg_tint: false,
       is_uniform: true,
-      aria_label: "settings",
+      aria_label: "Audio settings",
       popover_target: () => `popover_${settings_popover_manager?.id}`,
     })
     volume_slider_manager = create_slider_manager({
@@ -436,10 +542,48 @@ export function create_audio_manager(config) {
       text: "Download",
       support_icon: "download",
       is_loading: () => download_is_loading,
+      is_disabled: () => !src,
+      aria_label: "Download audio",
       on_click: () => download_audio(),
     })
   }
 
+  function destroy() {
+    is_destroyed = true
+    lifecycle_version += 1
+    download_abort_controller?.abort()
+    download_abort_controller = null
+
+    const audio_el = browser ? document?.querySelector(`#audio_${id}`) : null
+    if (audio_el && !audio_el.paused) audio_el.pause()
+
+    if (browser) {
+      revoke_timeout_ids.forEach((timeout_id) => window.clearTimeout(timeout_id))
+      object_urls.forEach((object_url) => URL.revokeObjectURL(object_url))
+    }
+    revoke_timeout_ids.clear()
+    object_urls.clear()
+
+    const media_session = get_media_session()
+    if (media_session && active_media_session_owner_id === id) {
+      ;["play", "pause", "seekto", "seekbackward", "seekforward"].forEach((action) => {
+        try {
+          media_session.setActionHandler(action, null)
+        } catch {
+          // Ignore unsupported Media Session actions.
+        }
+      })
+      try {
+        media_session.playbackState = "none"
+        media_session.metadata = null
+      } catch {
+        // Playback state is not implemented consistently across browsers.
+      }
+      active_media_session_owner_id = null
+    }
+    has_setup_media_session = false
+  }
+
   init(config)
 
   return {
@@ -522,10 +666,20 @@ export function create_audio_manager(config) {
     get is_show_download_button() {
       return is_show_download_button
     },
+    get download_is_loading() {
+      return download_is_loading
+    },
+    get download_error_message() {
+      return download_error_message
+    },
+    get playback_error_message() {
+      return playback_error_message
+    },
     handle_mount,
     handle_loaded_metadata,
     handle_progress,
     handle_time_update,
+    handle_volume_change,
     handle_rate_change,
     handle_seeking,
     handle_can_play,
@@ -538,6 +692,11 @@ export function create_audio_manager(config) {
     toggle_play_pause,
     play_audio,
     pause_audio,
+    handle_playing,
+    handle_ended,
+    handle_audio_error,
+    download_audio,
     set_is_loading,
+    destroy,
   }
 }

package/dist/Components/AudioEditor/index.svelte

@@ -10,8 +10,11 @@
   import TextInput from "../TextInput/index.svelte"
   import Dropdown from "../Dropdown/index.svelte"
   import StoragePicker from "../StoragePicker/index.svelte"
+  import { onDestroy } from "svelte"
 
   let { manager, extra_buttons } = $props()
+
+  onDestroy(() => manager?.on_destroy?.())
 </script>
 
 {#snippet audio_input()}
@@ -38,7 +41,7 @@
       {/if}
       <Button manager={manager?.generate_audio_changes_button_manager} />
     </div>
-    {#if manager?.is_loading_generate_audio && manager?.is_text_to_audio && manager?.text_to_audio_text_input_manager && manager?.text_to_audio_text_input_manager.length > 10}
+    {#if manager?.is_loading_generate_audio && manager?.is_text_to_audio && manager?.text_to_audio_text_input_manager?.val?.length > 10}
       <p>
         This should take around {manager?.text_to_audio_time_in_minutes} minutes.
       </p>
@@ -67,14 +70,14 @@
     <Spacer mt={1} mb={1} />
     <LabeledItem
       is_disabled={manager?.is_loading_generate_audio || manager?.is_disabled}
-      label={!manager?.audio_file_obj?.src && manager?.is_text_to_audio ? "Audio Generation" : "Audio File"}
+      label={manager?.is_text_to_audio ? "Audio Generation" : "Audio File"}
       mt={1}
       content_min_width={35}
       content_max_width={60}
     >
       {#if !manager?.is_text_to_audio}
         <div style="display: flex; margin-bottom: 1rem;">
-          {#if !manager?.audio_file_obj?.src}
+          {#if !manager?.audio_storage_picker_manager?.val}
             <Button manager={manager?.use_text_to_audio_button_manager} />
             <Button manager={manager?.select_file_from_storage_button_manager} />
           {/if}

package/dist/Components/AudioEditor/index.svelte.d.ts

@@ -0,0 +1,13 @@
+export default Index;
+type Index = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Index: import("svelte").Component<{
+    manager: any;
+    extra_buttons: any;
+}, {}, "">;
+type $$ComponentProps = {
+    manager: any;
+    extra_buttons: any;
+};