sveltekit-ui 1.0.0

package/dist/Components/AudioEditor/index.svelte

@@ -0,0 +1,253 @@
+<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 TimeInput from "../TimeInput/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}