|
1 | 1 | <script lang="ts"> |
2 | | - import { t } from 'svelte-i18n-lingui'; |
| 2 | + import {t} from 'svelte-i18n-lingui'; |
3 | 3 | import Button from '../ui/button/button.svelte'; |
4 | 4 | import Waveform from './wavesurfer/waveform.svelte'; |
5 | 5 | import type WaveSurfer from 'wavesurfer.js'; |
6 | 6 | import {formatDigitalDuration} from '../ui/format/format-duration'; |
7 | 7 | import DevContent from '$lib/layout/DevContent.svelte'; |
8 | 8 | import {Label} from '../ui/label'; |
| 9 | + import {FFmpegApi} from './ffmpeg'; |
| 10 | + import Loading from '$lib/components/Loading.svelte'; |
| 11 | + import {resource, watch} from 'runed'; |
| 12 | + import {onDestroy} from 'svelte'; |
9 | 13 |
|
10 | 14 | type Props = { |
11 | | - audio: Blob; |
12 | | - name: string |
| 15 | + audio: File; |
| 16 | + finalAudio: File | undefined; |
13 | 17 | onDiscard: () => void; |
14 | 18 | }; |
15 | 19 |
|
16 | | - let { audio, name, onDiscard }: Props = $props(); |
| 20 | + let { |
| 21 | + audio, |
| 22 | + finalAudio = $bindable(undefined), |
| 23 | + onDiscard |
| 24 | + }: Props = $props(); |
17 | 25 |
|
18 | 26 | let audioApi = $state<WaveSurfer>(); |
19 | 27 | let playing = $state(false); |
20 | 28 | let duration = $state<number | null>(null); |
21 | | - const mb = $derived((audio.size / 1024 / 1024).toFixed(2)); |
22 | | - const formatedDuration = $derived(duration ? formatDigitalDuration({ seconds: duration }) : 'unknown'); |
| 29 | + const mb = $derived(!finalAudio ? '0' : (finalAudio.size / 1024 / 1024).toFixed(2)); |
| 30 | + const formattedDuration = $derived(duration ? formatDigitalDuration({seconds: duration}) : 'unknown'); |
| 31 | + let ffmpegApi: FFmpegApi | undefined; |
23 | 32 |
|
| 33 | + let ffmpegFile = resource(() => audio, async (audio, _, {signal}) => { |
| 34 | + ffmpegApi ??= await FFmpegApi.create(); |
| 35 | + return await ffmpegApi.toFFmpegFile(audio, AbortSignal.any([signal, abortController.signal])); |
| 36 | + }); |
| 37 | +
|
| 38 | + let flacFile = resource(() => [ffmpegFile.current], async ([file], _, {signal}) => { |
| 39 | + if (!file) return; |
| 40 | + ffmpegApi ??= await FFmpegApi.create(); |
| 41 | + return await ffmpegApi.convertToFlac(file, AbortSignal.any([signal, abortController.signal])); |
| 42 | + }); |
| 43 | +
|
| 44 | + let readFile = resource(() => [flacFile.current], async ([file], _, {signal}) => { |
| 45 | + if (!file) return; |
| 46 | + ffmpegApi ??= await FFmpegApi.create(); |
| 47 | + return await ffmpegApi.readFile(file, AbortSignal.any([signal, abortController.signal])); |
| 48 | + }); |
| 49 | +
|
| 50 | + watch(() => [readFile.current, readFile.loading] as const, ([file, loading]) => { |
| 51 | + if (loading || !file) { |
| 52 | + finalAudio = undefined; |
| 53 | + } else { |
| 54 | + finalAudio = file; |
| 55 | + } |
| 56 | + }); |
| 57 | +
|
| 58 | + const loading = $derived(ffmpegFile.loading || flacFile.loading || readFile.loading); |
| 59 | + const error = $derived((ffmpegFile.error || flacFile.error || readFile.error)?.toString()); |
| 60 | +
|
| 61 | + const abortController = new AbortController(); |
| 62 | + onDestroy(() => { |
| 63 | + abortController.abort(); |
| 64 | + ffmpegApi?.terminate(); |
| 65 | + }); |
| 66 | +
|
| 67 | + function downloadAudio() { |
| 68 | + if (!finalAudio) throw new Error('No audio to download'); |
| 69 | + const url = URL.createObjectURL(finalAudio); |
| 70 | + try { |
| 71 | + const a = document.createElement('a'); |
| 72 | + a.href = url; |
| 73 | + a.download = `${finalAudio.name}`; |
| 74 | + a.click(); |
| 75 | + } finally { |
| 76 | + URL.revokeObjectURL(url); |
| 77 | + } |
| 78 | + } |
24 | 79 | </script> |
25 | 80 |
|
26 | 81 | <div class="flex flex-col gap-4 items-center justify-center"> |
| 82 | + {#if loading || !finalAudio} |
| 83 | + <Loading class="self-center justify-self-center size-16"/> |
| 84 | + {:else} |
27 | 85 | <span class="inline-grid grid-cols-[auto_auto_1rem_auto_auto] gap-2 items-baseline"> |
28 | | - <Label class="justify-self-end">{$t`Length:`}</Label> <span>{$t`${formatedDuration}`}</span> |
| 86 | + <Label class="justify-self-end">{$t`Length:`}</Label> <span>{$t`${formattedDuration}`}</span> |
29 | 87 | <span></span> |
30 | 88 | <Label class="justify-self-end">{$t`Size:`}</Label> <span>{$t`${mb} MB`}</span> |
31 | | - {#if name} |
| 89 | + {#if finalAudio.name} |
32 | 90 | <Label class="justify-self-end">{$t`File name:`}</Label> |
33 | | - <span class="col-span-4">{$t`${name}`}</span> |
| 91 | + <span class="col-span-4">{$t`${finalAudio.name}`}</span> |
34 | 92 | {/if} |
35 | 93 | <DevContent> |
36 | 94 | <Label class="justify-self-end">{$t`Type:`}</Label> |
37 | | - <span class="col-span-4">{$t`${audio.type}`}</span> |
| 95 | + <span class="col-span-4">{$t`${finalAudio.type}`}</span> |
38 | 96 | </DevContent> |
39 | 97 | </span> |
40 | | - <!-- contain-inline-size prevents wavesurfer from freaking out inside a grid --> |
41 | | - <!-- pb-8 ensures the timeline is in the bounds of the container --> |
42 | | - <div class="w-full grow max-h-32 pb-3 contain-inline-size border-y"> |
43 | | - <Waveform {audio} bind:playing bind:audioApi bind:duration showTimeline autoplay class="size-full" /> |
44 | | - </div> |
45 | | - <div class="flex gap-2"> |
46 | | - <Button variant="secondary" icon="i-mdi-close" onclick={onDiscard} disabled={!audio}>{$t`Discard`}</Button> |
47 | | - <Button |
48 | | - icon={playing ? 'i-mdi-pause' : 'i-mdi-play'} |
49 | | - onclick={() => (playing ? audioApi?.pause() : audioApi?.play())} |
50 | | - disabled={!audioApi} |
51 | | - size="icon" |
52 | | - /> |
53 | | - </div> |
| 98 | + <!-- contain-size prevents wavesurfer from freaking out inside a grid |
| 99 | + contain-inline-size would improve the height reactivity of the waveform, but |
| 100 | + results in the waveform sometimes change its height unexpectedly --> |
| 101 | + <!-- pb-8 ensures the timeline is in the bounds of the container --> |
| 102 | + <div class="w-full grow max-h-32 pb-3 contain-size border-y"> |
| 103 | + <Waveform audio={finalAudio} bind:playing bind:audioApi bind:duration showTimeline autoplay class="size-full"/> |
| 104 | + </div> |
| 105 | + <div class="flex gap-2"> |
| 106 | + <Button onclick={() => downloadAudio()} disabled={!finalAudio} variant="secondary" icon="i-mdi-download">{$t`Download`}</Button> |
| 107 | + <Button variant="secondary" icon="i-mdi-close" onclick={onDiscard} disabled={!audio}>{$t`Discard`}</Button> |
| 108 | + <Button |
| 109 | + icon={playing ? 'i-mdi-pause' : 'i-mdi-play'} |
| 110 | + onclick={() => (playing ? audioApi?.pause() : audioApi?.play())} |
| 111 | + disabled={!audioApi} |
| 112 | + size="icon" |
| 113 | + /> |
| 114 | + </div> |
| 115 | + {/if} |
| 116 | + {#if error} |
| 117 | + <p class="text-destructive">{error}</p> |
| 118 | + {/if} |
54 | 119 | </div> |
0 commit comments