Repository: gradio-app/gradio
File: js/audio/static/StaticAudio.svelte (Svelte)

Code before:
	export let show_label = true;
	export let buttons: (string | CustomButtonType)[] | null = null;
	export let on_custom_button_click: ((id: number) => void) | null = null;
	export let i18n: I18nFormatter;
	export let waveform_settings: Record<string, any> = {};
	export let waveform_options: WaveformOptions = {
		show_recording_waveform: true
	};
	export let editable = true;
	export let loop: boolean;
	export let display_icon_button_wrapper_top_corner = false;
	export let minimal = false;
	export let playback_position = 0;

	const dispatch = createEventDispatcher<{
		change: FileData;
		play: undefined;
		pause: undefined;
		end: undefined;
		stop: undefined;
	}>();

	$: value && dispatch("change", value);

	$: buttons_to_render =
		buttons && typeof buttons === "object" ? buttons : ["download", "share"];
</script>

<BlockLabel
	{show_label}
	Icon={Music}
	float={false}
	label={label || i18n("audio.audio")}
/>

{#if value !== null}
	{#if minimal}
		<MinimalAudioPlayer {value} label={label || i18n("audio.audio")} {loop} />
	{:else}
		<IconButtonWrapper
			display_top_corner={display_icon_button_wrapper_top_corner}
			buttons={buttons_to_render}
			{on_custom_button_click}
		>
			{#if buttons_to_render.some((btn) => typeof btn === "string" && btn === "download")}
				<DownloadLink
					href={value.is_stream
						? value.url?.replace("playlist.m3u8", "playlist-file")
						: value.url}
					download={value.orig_name || value.path}
				>

Review comment (suggestion):
As part of https://github.com/gradio-app/gradio/pull/12539, I made it so that the "buttons" prop returned from the frontend is always a list (for the `Audio` component, the default returned list is ["download", "share"]). So this kind of logic should no longer be needed, you can just render the set of buttons in `buttons`  directly. 


Code after:
	export let show_label = true;
	export let buttons: (string | CustomButtonType)[] = [];
	export let on_custom_button_click: ((id: number) => void) | null = null;
	export let i18n: I18nFormatter;
	export let waveform_settings: Record<string, any> = {};
	export let waveform_options: WaveformOptions = {
		show_recording_waveform: true
	};
	export let editable = true;
	export let loop: boolean;
	export let display_icon_button_wrapper_top_corner = false;
	export let minimal = false;
	export let playback_position = 0;

	const dispatch = createEventDispatcher<{
		change: FileData;
		play: undefined;
		pause: undefined;
		end: undefined;
		stop: undefined;
	}>();

	$: value && dispatch("change", value);
</script>

<BlockLabel
	{show_label}
	Icon={Music}
	float={false}
	label={label || i18n("audio.audio")}
/>

{#if value !== null}
	{#if minimal}
		<MinimalAudioPlayer {value} label={label || i18n("audio.audio")} {loop} />
	{:else}
		<IconButtonWrapper
			display_top_corner={display_icon_button_wrapper_top_corner}
			{buttons}
			{on_custom_button_click}
		>
			{#if buttons.some((btn) => typeof btn === "string" && btn === "download")}
				<DownloadLink
					href={value.is_stream
						? value.url?.replace("playlist.m3u8", "playlist-file")
						: value.url}
					download={value.orig_name || value.path}
				>
					<IconButton Icon={Download} label={i18n("common.download")} />
				</DownloadLink>
			{/if}