sveltekit-ui 1.1.74 → 1.1.76

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

@@ -1,543 +0,0 @@
-import { browser } from "$app/environment"
-import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
-import { create_popover_manager } from "$lib/Components/Popover/index.svelte.js"
-import { create_slider_manager } from "$lib/Components/Slider/index.svelte.js"
-import { create_unique_id, set_closurable, deep_copy } from "$lib/client/index.js"
-
-export function create_audio_manager(config) {
-  let id = create_unique_id(null, 20)
-  let src = $state(null)
-  let type = $state("audio/mpeg")
-  let title = $state(null)
-  let artist = $state(null)
-  let album = $state(null)
-  let image_src = $state(null)
-  let image_type = $state(null)
-  let default_skip_time = $state(10)
-  let ui_type = $state("standard") // standard, short, square
-  let ml = $derived(set_closurable(config?.ml, 0))
-  let mr = $derived(set_closurable(config?.mr, 0))
-  let mt = $derived(set_closurable(config?.mt, 0))
-  let mb = $derived(set_closurable(config?.mb, 0))
-  let is_hide_image = $derived(set_closurable(config?.is_hide_image, false))
-  let play_pause_support_icon = $state("play")
-  let play_pause_button_manager = $state(null)
-  let time_slider_manager = $state(null)
-  let settings_popover_manager = $state(null)
-  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)
-  let time_highlight_range_end_percent = $derived((100 * time_loaded_until) / time_slider_manager?.max)
-
-  let storage_path = $state(null)
-  let is_loading = $state(true)
-  let formatted_duration = $derived(!isNaN(time_slider_manager?.max) ? format_time(time_slider_manager?.max) : "")
-  let formatted_current_time = $derived(!isNaN(time_slider_manager?.val) ? format_time(time_slider_manager?.val) : "")
-
-  function get_src(src, storage_id) {
-    if (src) {
-      return src
-    } else if (storage_id && storage_path) {
-      return storage_path.replace("{storage_id}", storage_id)
-    } else {
-      return null
-    }
-  }
-
-  function handle_mount() {
-    if (!browser) {
-      return
-    }
-    let audio_el = document?.querySelector(`#audio_${id}`)
-    if (audio_el) {
-      if (audio_el.readyState >= 3) {
-        handle_loaded_metadata()
-        is_loading = false
-      }
-    }
-  }
-
-  function handle_volume_change(volume) {
-    if (!browser) {
-      // tbd on this
-      return
-    }
-    let audio_el = document?.querySelector(`#audio_${id}`)
-    if (audio_el && volume) {
-      audio_el.volume = volume
-      volume_slider_manager.set_val(deep_copy(volume))
-    }
-  }
-
-  function handle_rate_change(rate) {
-    if (!browser) {
-      // tbd on this
-      return
-    }
-    let audio_el = document?.querySelector(`#audio_${id}`)
-    if (audio_el && rate) {
-      audio_el.playbackRate = rate
-      rate_slider_manager.set_val(rate)
-      update_position_state()
-    }
-  }
-
-  function format_time(seconds) {
-    const mins = Math.floor(seconds / 60)
-      .toString()
-      .padStart(2, "0")
-    const secs = Math.floor(seconds % 60)
-      .toString()
-      .padStart(2, "0")
-    return `${mins}:${secs}`
-  }
-
-  function handle_loaded_metadata() {
-    if (!browser) {
-      // tbd on this
-      return
-    }
-    let audio_el = document?.querySelector(`#audio_${id}`)
-    if (audio_el) {
-      time_slider_manager.set_max(audio_el.duration)
-      is_loading = false
-    }
-  }
-
-  function handle_progress() {
-    if (!browser) {
-      // tbd on this
-      return
-    }
-    let audio_el = document?.querySelector(`#audio_${id}`)
-    if (audio_el?.buffered?.length) {
-      time_loaded_until = audio_el.buffered.end(0)
-    }
-  }
-
-  function handle_time_update() {
-    if (!browser) {
-      // tbd on this
-      return
-    }
-    let audio_el = document?.querySelector(`#audio_${id}`)
-    if (audio_el) {
-      time_slider_manager.set_val(audio_el.currentTime)
-      if (audio_el?.buffered?.length) {
-        time_loaded_until = audio_el.buffered.end(0)
-      }
-    }
-  }
-
-  function seek_to_audio(time) {
-    if (!browser) {
-      // tbd on this
-      return
-    }
-    if (time > -1) {
-      time_slider_manager.set_val(time)
-      let audio_el = document?.querySelector(`#audio_${id}`)
-      if (audio_el) {
-        audio_el.currentTime = time
-        time_slider_manager.set_val(time)
-        if (audio_el?.buffered?.length) {
-          time_loaded_until = audio_el.buffered.end(0)
-        }
-        update_position_state()
-      }
-    }
-  }
-
-  function resize_image(src, callback) {
-    let img = new Image()
-    img.crossOrigin = "anonymous" // Request CORS permissions
-    img.onload = function () {
-      let width = img.width
-      let height = img.height
-      if (width > height) {
-        if (width > 128) {
-          height *= 128 / width
-          width = 128
-        }
-      } else {
-        if (height > 128) {
-          width *= 128 / height
-          height = 128
-        }
-      }
-      let canvas = document.createElement("canvas")
-      let ctx = canvas.getContext("2d")
-      canvas.width = width
-      canvas.height = height
-      ctx.drawImage(img, 0, 0, width, height)
-      callback(canvas.toDataURL())
-    }
-    img.src = src
-  }
-
-  let has_setup_media_session = $state(false)
-  function setup_media_session() {
-    let metadata = {
-      title: title,
-      artist: artist || "",
-      album: album,
-      artwork: [],
-    }
-    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 = [
-          {
-            src: resized_image_src,
-            sizes: "128x128", // maximum size is now 128x128
-            type: image_type,
-          },
-          // {
-          //   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,
-      })
-    }
-  }
-
-  function nav_seek_backward(details) {
-    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
-    seek_to_audio(Math.min(time_slider_manager?.val + skip_time, time_slider_manager?.max))
-  }
-
-  function toggle_play_pause() {
-    if (!browser) {
-      // tbd on this
-      return
-    }
-    let audio_el = document?.querySelector(`#audio_${id}`)
-    const is_playing = !audio_el ? false : !audio_el.paused && !audio_el.ended && audio_el.currentTime > 0
-    if (is_playing) {
-      pause_audio()
-    } else {
-      play_audio()
-    }
-  }
-
-  async function play_audio() {
-    if (!browser) {
-      // tbd on this
-      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 = "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()
-    }
-  }
-
-  function pause_audio() {
-    if (!browser) {
-      // tbd on this
-      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"
-    }
-  }
-
-  function set_is_loading(input) {
-    is_loading = !!input
-  }
-
-  function handle_seeking() {
-    is_loading = true
-  }
-  function handle_can_play() {
-    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)
-    type = config?.type ?? "audio/mpeg"
-    title = config?.title ?? null
-    artist = config?.artist ?? null
-    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
-    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",
-      is_loading: () => is_loading,
-      support_icon: () => play_pause_support_icon ?? "play",
-      on_click: () => toggle_play_pause(),
-    })
-    time_slider_manager = create_slider_manager({
-      min: 0,
-      max: null,
-      step: 1,
-      ml: 0.5,
-      mr: 0.5,
-      is_show_text: false,
-      is_short: true,
-      val: 0,
-      highlight_range_start_percent: () => time_highlight_range_start_percent,
-      highlight_range_end_percent: () => time_highlight_range_end_percent,
-      on_change: (input) => seek_to_audio(input),
-    })
-    settings_popover_manager = create_popover_manager({
-      header: "Settings",
-      type: "dropdown",
-      min_width: 100,
-      target_width: 200,
-      min_height: 100,
-      target_height: 200,
-      anchor_id: () => `button_${settings_button_manager?.id}`,
-    })
-    settings_button_manager = create_button_manager({
-      type: "soft",
-      support_icon: "three_dots",
-      icon_sw: 60,
-      is_icon_bg_tint: false,
-      is_uniform: true,
-      aria_label: "settings",
-      popover_target: () => `popover_${settings_popover_manager?.id}`,
-    })
-    volume_slider_manager = create_slider_manager({
-      label: "Volume",
-      min: 0,
-      max: 1,
-      step: 0.05,
-      is_show_text: true,
-      is_short: false,
-      val: 1,
-      on_change: (input) => handle_volume_change(input),
-    })
-    rate_slider_manager = create_slider_manager({
-      label: "Rate",
-      min: 0.5,
-      max: 3,
-      step: 0.05,
-      is_show_text: true,
-      is_short: false,
-      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)
-
-  return {
-    id,
-    get src() {
-      return src
-    },
-    get type() {
-      return type
-    },
-    get title() {
-      return title
-    },
-    get artist() {
-      return artist
-    },
-    get album() {
-      return album
-    },
-    get image_src() {
-      return image_src
-    },
-    get image_type() {
-      return image_type
-    },
-    get default_skip_time() {
-      return default_skip_time
-    },
-    get ui_type() {
-      return ui_type
-    },
-    get ml() {
-      return ml
-    },
-    get mr() {
-      return mr
-    },
-    get mt() {
-      return mt
-    },
-    get mb() {
-      return mb
-    },
-    get is_hide_image() {
-      return is_hide_image
-    },
-    get play_pause_button_manager() {
-      return play_pause_button_manager
-    },
-    get time_slider_manager() {
-      return time_slider_manager
-    },
-    get settings_popover_manager() {
-      return settings_popover_manager
-    },
-    get settings_button_manager() {
-      return settings_button_manager
-    },
-    get volume_slider_manager() {
-      return volume_slider_manager
-    },
-    get rate_slider_manager() {
-      return rate_slider_manager
-    },
-    get has_setup_media_session() {
-      return has_setup_media_session
-    },
-    get formatted_duration() {
-      return formatted_duration
-    },
-    get formatted_current_time() {
-      return formatted_current_time
-    },
-    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,
-    handle_time_update,
-    handle_rate_change,
-    handle_seeking,
-    handle_can_play,
-    seek_to_audio,
-    resize_image,
-    setup_media_session,
-    update_position_state,
-    nav_seek_backward,
-    nav_seek_forward,
-    toggle_play_pause,
-    play_audio,
-    pause_audio,
-    set_is_loading,
-  }
-}