sveltekit-ui 1.1.17 → 1.1.19

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

@@ -0,0 +1,463 @@
+import { browser } from "$app/environment"
+import { create_button_manager } from "../Button/index.svelte.js"
+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"
+
+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 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 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),
+    })
+  }
+
+  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
+    },
+    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,
+  }
+}

package/dist/Components/AudioEditor/index.svelte

@@ -0,0 +1,252 @@
+<script>
+  import Popover from "../Popover/index.svelte"
+  import Button from "../Button/index.svelte"
+  import InfoBox from "../InfoBox/index.svelte"
+  import HorizScrollBox from "../HorizScrollBox/index.svelte"
+  import LabeledItem from "../LabeledItem/index.svelte"
+  import Spacer from "../Spacer/index.svelte"
+  import Audio from "../Audio/index.svelte"
+  import FileInput from "../FileInput/index.svelte"
+  import TextInput from "../TextInput/index.svelte"
+  import Dropdown from "../Dropdown/index.svelte"
+  import StoragePicker from "../StoragePicker/index.svelte"
+
+  let { manager, extra_buttons } = $props()
+</script>
+
+{#snippet audio_input()}
+  <div style="padding-bottom: 20rem;">
+    {#if manager?.account?.id}
+      <p style="margin-bottom: 1rem;">
+        Generated files will be saved to {manager?.account?.name} ({manager?.account?.id})'s temporary storage
+      </p>
+    {:else}
+      <p>No account being used</p>
+    {/if}
+    <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
+      <Button manager={manager?.clear_button_manager} />
+      <div>
+        <Button manager={manager?.seed_from_input_popover_button_manager} />
+        <Popover manager={manager?.seed_from_input_popover_manager}>
+          {#snippet content()}
+            <StoragePicker manager={manager?.seed_audio_storage_picker_manager} />
+          {/snippet}
+        </Popover>
+      </div>
+      {#if extra_buttons}
+        {@render extra_buttons()}
+      {/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}
+      <p>
+        This should take around {manager?.text_to_audio_time_in_minutes} minutes.
+      </p>
+    {/if}
+    <InfoBox message={manager?.error_message} mt={0.5} mb={0.5} />
+    {#if manager?.generated_audio_file_obj}
+      <div class="card" style="margin: 1rem 0;">
+        <h3>Generated Audio</h3>
+        <p>type: {manager?.generated_audio_file_obj?.type}</p>
+        <p>file name: {manager?.generated_audio_file_obj?.file_name}</p>
+        <p>size: {manager?.generated_audio_file_obj?.size_kb}KB</p>
+        <p style="font-size: 1.2rem; color: var(--g10-t); margin-bottom: 1rem">
+          Note: Currently, our interface does not support extracting cover images directly from the metadata of audio
+          sources. We may add this feature in the future. At present, displaying images in the Audio component requires
+          a separate image URL. However, if a cover image is embedded in the audio file's metadata, it can still be
+          viewed in other applications, such as Apple Finder.
+        </p>
+        <Audio manager={manager?.audio_manager} />
+        <div style="display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem;">
+          <Button manager={manager?.clear_generated_audio_button_manager} />
+          <Button manager={manager?.download_audio_file_button_manager} />
+          <Button manager={manager?.finish_button_manager} />
+        </div>
+      </div>
+    {/if}
+    <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"}
+      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}
+            <Button manager={manager?.use_text_to_audio_button_manager} />
+            <Button manager={manager?.select_file_from_storage_button_manager} />
+          {/if}
+        </div>
+        <StoragePicker manager={manager?.audio_storage_picker_manager} />
+      {:else}
+        <Button manager={manager?.use_mp3_file_button_manager} />
+        <TextInput manager={manager?.text_to_audio_text_input_manager} />
+      {/if}
+    </LabeledItem>
+    {#if manager?.is_text_to_audio}
+      <LabeledItem
+        label="Voice"
+        content_min_width={35}
+        content_max_width={60}
+        mt={1}
+        is_disabled={manager?.title_text_input_manager?.is_disabled}
+      >
+        {#if Array.isArray(manager?.voice_options) && manager?.voice_options.length > 0}
+          <div style="display: flex; gap: 1rem;">
+            <div>
+              <p>{manager?.voice_options.find((h) => h?.id == (manager?.voice_id ?? "alloy"))?.name ?? "-"}</p>
+              <Button manager={manager?.edit_voice_button_manager} />
+            </div>
+            <Audio
+              manager={manager?.voice_options.find((h) => h?.id == (manager?.voice_id ?? "alloy"))?.audio_manager}
+            />
+          </div>
+          <Popover manager={manager?.edit_voice_popover_manager}>
+            {#snippet content()}
+              <div>
+                {#each manager?.voice_options as voice, i}
+                  <div style="padding: 1rem;">
+                    <div style="display: flex; justify-content: space-between; gap: 1rem;">
+                      <p>{voice?.name}{voice?.id == "alloy" ? "(default)" : ""}</p>
+                      {#if Array.isArray(voice?.labels) && voice.labels.length > 0}
+                        <HorizScrollBox>
+                          <div style="display: flex; gap: .5rem;">
+                            {#each voice?.labels as label}
+                              <div
+                                style="border: 1px solid var(--shadow5-t); border-radius: .5rem; padding: .2rem .4rem"
+                              >
+                                <p style="font-size: 1.4rem; white-space: nowrap;">{label}</p>
+                              </div>
+                            {/each}
+                          </div>
+                        </HorizScrollBox>
+                      {/if}
+                    </div>
+                    <div style="display: flex; justify-content: space-between; margin-top: .5rem;">
+                      <Audio manager={voice?.audio_manager} />
+                      <Button manager={voice?.select_button_manager} />
+                    </div>
+                  </div>
+                  {#if i < manager?.voice_options.length - 1}
+                    <Spacer />
+                  {/if}
+                {/each}
+              </div>
+            {/snippet}
+          </Popover>
+        {:else}
+          No voice options found
+        {/if}
+      </LabeledItem>
+    {/if}
+    <LabeledItem
+      is_disabled={manager?.is_loading_generate_audio || manager?.is_disabled}
+      label="File Name"
+      mt={1}
+      content_min_width={35}
+      content_max_width={60}
+    >
+      <TextInput manager={manager?.file_name_text_input_manager} />
+    </LabeledItem>
+    <Spacer mt={1} />
+    <h3 style="margin: 0; margin-top: 1rem; font-size: 1.6rem;">Metatags (optional)</h3>
+    <LabeledItem
+      label="Title"
+      content_min_width={35}
+      content_max_width={60}
+      mt={1}
+      is_disabled={manager?.title_text_input_manager?.is_disabled}
+    >
+      <TextInput manager={manager?.title_text_input_manager} />
+    </LabeledItem>
+    <LabeledItem
+      label="Album Title"
+      content_min_width={35}
+      content_max_width={60}
+      mt={1}
+      is_disabled={manager?.album_title_text_input_manager?.is_disabled}
+    >
+      <TextInput manager={manager?.album_title_text_input_manager} />
+    </LabeledItem>
+    <LabeledItem
+      label="Cover Image"
+      content_min_width={35}
+      content_max_width={60}
+      mt={1}
+      is_disabled={manager?.image_storage_picker_manager?.is_disabled}
+    >
+      <StoragePicker manager={manager?.image_storage_picker_manager} />
+      <TextInput manager={manager?.image_description_text_input_manager} />
+    </LabeledItem>
+    <LabeledItem
+      label="Artist"
+      content_min_width={35}
+      content_max_width={60}
+      mt={1}
+      is_disabled={manager?.artist_text_input_manager?.is_disabled}
+    >
+      <TextInput manager={manager?.artist_text_input_manager} />
+    </LabeledItem>
+    <LabeledItem
+      label="Lyrics"
+      content_min_width={35}
+      content_max_width={60}
+      mt={1}
+      is_disabled={manager?.lyrics_text_input_manager?.is_disabled}
+    >
+      <TextInput manager={manager?.lyrics_text_input_manager} />
+    </LabeledItem>
+    <LabeledItem
+      label="Release Year"
+      content_min_width={35}
+      content_max_width={60}
+      mt={1}
+      is_disabled={manager?.release_year_text_input_manager?.is_disabled}
+    >
+      <TextInput manager={manager?.release_year_text_input_manager} />
+    </LabeledItem>
+    <LabeledItem
+      label="Language"
+      content_min_width={35}
+      content_max_width={60}
+      mt={1}
+      is_disabled={manager?.language_dropdown_manager?.is_disabled}
+    >
+      <Dropdown manager={manager?.language_dropdown_manager} />
+    </LabeledItem>
+    <Spacer mt={1} mb={1} />
+    <p style="font-size: 1.4rem; color: var(--g8-t); margin-bottom: .5rem;">Additional Metatags</p>
+    <Dropdown manager={manager?.additional_metatags_dropdown_manager} />
+    {#if Array.isArray(manager?.additional_tag_keys_ordered) && manager?.additional_tag_keys_ordered.length > 0}
+      {#each manager?.additional_tag_keys_ordered as tag_key}
+        <LabeledItem
+          is_disabled={manager?.is_loading_generate_audio || manager?.is_disabled}
+          label={manager?.additional_tags_input_prepped?.[tag_key]?.name}
+          mt={1}
+          content_min_width={35}
+          content_max_width={60}
+        >
+          {#if manager?.additional_tags_input_prepped?.[tag_key]?.key == "tbd"}
+            <!-- tbd -->
+          {:else}
+            <TextInput manager={manager?.additional_tags_input_prepped?.[tag_key]?.text_input_manager} />
+          {/if}
+        </LabeledItem>
+      {/each}
+    {/if}
+  </div>
+{/snippet}
+
+{#if !manager?.is_popover}
+  {@render audio_input()}
+{:else}
+  <Popover manager={manager.popover_manager}>
+    {#snippet content()}
+      <div>
+        {@render audio_input()}
+      </div>
+    {/snippet}
+  </Popover>
+{/if}