Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2025-02-03 00:46:19 +01:00
Code Issues Projects Releases Packages Wiki Activity

web/DownloadButton: slight refactor

Browse source
This commit is contained in:
dumbmoron 2024-07-23 10:09:42 +00:00
parent 2d7d4cf091
commit 61e47b38d1
No known key found for this signature in database
2 changed files with 35 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
web/src/components/save/buttons/DownloadButton.svelte
View file

@ -9,11 +9,10 @@
import type { DialogInfo } from "$lib/types/dialog"; import type { DialogInfo } from "$lib/types/dialog";
export let url: string; export let url: string;
export let isDisabled = false; export let disabled = false;
$: buttonText = ">>"; $: buttonText = ">>";
$: buttonAltText = $t("a11y.save.download"); $: buttonAltText = $t("a11y.save.download");
$: isDisabled = false;
let defaultErrorPopup: DialogInfo = { let defaultErrorPopup: DialogInfo = {
id: "save-error", id: "save-error",
@ -28,37 +27,37 @@
], ],
}; };
const changeDownloadButton = (state: string) => { type DownloadButtonState = "idle" | "think" | "check" | "done" | "error";
isDisabled = true;
switch (state) { const changeDownloadButton = (state: DownloadButtonState) => {
case "think": disabled = state !== 'idle';
buttonText = "...";
buttonAltText = $t("a11y.save.downloadThink"); buttonText = ({
break; idle: ">>",
case "check": think: "...",
buttonText = "..?"; check: "..?",
buttonAltText = $t("a11y.save.downloadCheck"); done: ">>>",
break; error: "!!"
case "done": })[state];
buttonText = ">>>";
buttonAltText = $t("a11y.save.downloadDone"); buttonAltText = $t(
break; ({
case "error": idle: "a11y.save.download",
buttonText = "!!"; think: "a11y.save.downloadThink",
buttonAltText = $t("a11y.save.downloadError"); check: "a11y.save.downloadCheck",
break; done: "a11y.save.downloadDone",
error: "a11y.save.downloadError",
})[state]
);
// states that don't wait for anything, and thus can
// transition back to idle after some period of time.
const final: DownloadButtonState[] = ['done', 'error'];
if (final.includes(state)) {
setTimeout(() => changeDownloadButton("idle"), 2500);
} }
}; };
const restoreDownloadButton = () => {
setTimeout(() => {
buttonText = ">>";
isDisabled = false;
buttonAltText = $t("a11y.save.download");
}, 2500);
};
// alerts are temporary, we don't have an error popup yet >_<
export const download = async (link: string) => { export const download = async (link: string) => {
changeDownloadButton("think"); changeDownloadButton("think");
@ -66,7 +65,6 @@
if (!response) { if (!response) {
changeDownloadButton("error"); changeDownloadButton("error");
restoreDownloadButton();
return createDialog({ return createDialog({
...defaultErrorPopup, ...defaultErrorPopup,
@ -76,7 +74,6 @@
if (response.status === "error" || response.status === "rate-limit") { if (response.status === "error" || response.status === "rate-limit") {
changeDownloadButton("error"); changeDownloadButton("error");
restoreDownloadButton();
return createDialog({ return createDialog({
...defaultErrorPopup, ...defaultErrorPopup,
@ -86,7 +83,6 @@
if (response.status === "redirect") { if (response.status === "redirect") {
changeDownloadButton("done"); changeDownloadButton("done");
restoreDownloadButton();
return downloadFile(response.url); return downloadFile(response.url);
} }
@ -98,12 +94,10 @@
if (probeResult === 200) { if (probeResult === 200) {
changeDownloadButton("done"); changeDownloadButton("done");
restoreDownloadButton();
return downloadFile(response.url); return downloadFile(response.url);
} else { } else {
changeDownloadButton("error"); changeDownloadButton("error");
restoreDownloadButton();
return createDialog({ return createDialog({
...defaultErrorPopup, ...defaultErrorPopup,
@ -114,9 +108,7 @@
if (response.status === "picker") { if (response.status === "picker") {
changeDownloadButton("done"); changeDownloadButton("done");
restoreDownloadButton(); const buttons = [
let pickerButtons = [
{ {
text: $t("dialog.button.done"), text: $t("dialog.button.done"),
main: true, main: true,
@ -126,7 +118,7 @@
if (response.audio) { if (response.audio) {
const pickerAudio = response.audio; const pickerAudio = response.audio;
pickerButtons.unshift({ buttons.unshift({
text: $t("dialog.button.downloadAudio"), text: $t("dialog.button.downloadAudio"),
main: false, main: false,
action: () => { action: () => {
@ -139,12 +131,11 @@
id: "download-picker", id: "download-picker",
type: "picker", type: "picker",
items: response.picker, items: response.picker,
buttons: pickerButtons, buttons,
}); });
} }
changeDownloadButton("error"); changeDownloadButton("error");
restoreDownloadButton();
return createDialog({ return createDialog({
...defaultErrorPopup, ...defaultErrorPopup,
@ -155,7 +146,7 @@
<button <button
id="download-button" id="download-button"
disabled={isDisabled} {disabled}
on:click={() => download(url)} on:click={() => download(url)}
aria-label={buttonAltText} aria-label={buttonAltText}
> >

4
web/src/lib/types/dialog.ts
View file

@ -20,7 +20,7 @@ type Dialog = {
buttons?: DialogButton[], buttons?: DialogButton[],
}; };
export type SmallDialog = Dialog & { type SmallDialog = Dialog & {
type: "small", type: "small",
meowbalt?: MeowbaltEmotions, meowbalt?: MeowbaltEmotions,
icon?: SmallDialogIcons, icon?: SmallDialogIcons,
@ -29,7 +29,7 @@ export type SmallDialog = Dialog & {
bodySubText?: string, bodySubText?: string,
}; };
export type PickerDialog = Dialog & { type PickerDialog = Dialog & {
type: "picker", type: "picker",
items?: DialogPickerItem[], items?: DialogPickerItem[],
}; };