enh: upload audio

This commit is contained in:
Timothy Jaeryang Baek 2025-05-04 18:26:33 +04:00
parent 62366ad020
commit d8e9b000e3
4 changed files with 69 additions and 3 deletions

View File

@ -0,0 +1,19 @@
<script lang="ts">
export let className = 'size-4';
export let strokeWidth = '1.5';
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width={strokeWidth}
stroke="currentColor"
class={className}
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5"
/>
</svg>

View File

@ -0,0 +1,19 @@
<script lang="ts">
export let className = 'size-4';
export let strokeWidth = '1.5';
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width={strokeWidth}
stroke="currentColor"
class={className}
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m6.75 12-3-3m0 0-3 3m3-3v6m-1.5-15H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
/>
</svg>

View File

@ -445,6 +445,21 @@
recording = true;
}}
onUpload={async () => {
const input = document.createElement('input');
input.type = 'file';
input.accept = 'audio/*';
input.multiple = false;
input.click();
input.onchange = async (e) => {
const files = e.target.files;
if (files && files.length > 0) {
await uploadFileHandler(files[0]);
}
};
}}
>
<button
class="cursor-pointer p-2.5 flex rounded-full border border-gray-50 dark:border-none dark:bg-gray-850 hover:bg-gray-50 dark:hover:bg-gray-800 transition shadow-xl"

View File

@ -4,12 +4,11 @@
import { showSettings, activeUserIds, USAGE_POOL, mobile, showSidebar, user } from '$lib/stores';
import { fade, slide } from 'svelte/transition';
import { userSignOut } from '$lib/apis/auths';
import Tooltip from '$lib/components/common/Tooltip.svelte';
import ArchiveBox from '$lib/components/icons/ArchiveBox.svelte';
import Mic from '../icons/Mic.svelte';
import CursorArrowRays from '../icons/CursorArrowRays.svelte';
import DocumentArrowUp from '../icons/DocumentArrowUp.svelte';
import CloudArrowUp from '../icons/CloudArrowUp.svelte';
const i18n = getContext('i18n');
@ -18,6 +17,7 @@
export let onRecord = () => {};
export let onCaptureAudio = () => {};
export let onUpload = () => {};
const dispatch = createEventDispatcher();
</script>
@ -65,6 +65,19 @@
</div>
<div class=" self-center truncate">{$i18n.t('Capture Audio')}</div>
</button>
<button
class="flex rounded-md py-2 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
on:click={() => {
onUpload();
show = false;
}}
>
<div class=" self-center mr-2">
<CloudArrowUp className="size-5" strokeWidth="1.5" />
</div>
<div class=" self-center truncate">{$i18n.t('Upload Audio')}</div>
</button>
</DropdownMenu.Content>
</slot>
</DropdownMenu.Root>