youwen5/jankboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: make notifications larger

Browse source
This commit is contained in:
Youwen Wu 2024-02-26 11:17:00 -08:00
parent 379795bb0c
commit f05a32d0d5
1 changed files with 61 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

122
client/src/lib/Notifications/notifications.ts
View file

@ -1,147 +1,147 @@
import { toast } from "svelte-french-toast";
import type { ToastOptions } from "svelte-french-toast";
import InfoIcon from "./InfoIcon.svelte";
import { Howl } from "howler";
import WarnIcon from "./WarnIcon.svelte";
import { toast } from 'svelte-french-toast'
import type { ToastOptions } from 'svelte-french-toast'
import InfoIcon from './InfoIcon.svelte'
import { Howl } from 'howler'
import WarnIcon from './WarnIcon.svelte'
interface NotificationOptions extends ToastOptions {
withAudio?: boolean;
src?: string;
onComplete?: () => void;
withAudio?: boolean
src?: string
onComplete?: () => void
}
// get colors from https://tailwindcss.com/docs/customizing-colors
export class Notifications {
private static readonly defaultDuration = 3000;
private static readonly defaultDuration = 3000
public static success(message: string, options?: NotificationOptions) {
if (options?.withAudio && !options.src)
throw new Error("No audio source provided");
throw new Error('No audio source provided')
const onComplete = () => {
if (options?.onComplete) options.onComplete();
};
if (options?.onComplete) options.onComplete()
}
const sendToast = (duration: number) => {
toast.success(message, {
style:
"padding: 25px; font-size: 1.5rem; background-color: #15803d; color: #fafafa; gap: 0.5rem; user-select: none;",
'padding: 25px; font-size: 1.5rem; background-color: #15803d; color: #fafafa; gap: 0.5rem; user-select: none; max-width: 70vw; margin-top: 30px;',
duration,
...options,
});
};
})
}
if (options?.withAudio && options?.src) {
let sound: Howl;
let sound: Howl
sound = new Howl({
src: [options.src],
preload: true,
autoplay: true,
onload: () => {
let duration = sound.duration() * 1000;
sendToast(duration);
setTimeout(onComplete, duration);
let duration = sound.duration() * 1000
sendToast(duration)
setTimeout(onComplete, duration)
},
});
})
} else {
sendToast(this.defaultDuration);
setTimeout(onComplete, this.defaultDuration);
sendToast(this.defaultDuration)
setTimeout(onComplete, this.defaultDuration)
}
}
public static error(message: string, options?: NotificationOptions) {
if (options?.withAudio && !options.src)
throw new Error("No audio source provided");
throw new Error('No audio source provided')
const onComplete = () => {
if (options?.onComplete) options.onComplete();
};
if (options?.onComplete) options.onComplete()
}
const sendToast = (duration: number) => {
toast.error(message, {
style:
"padding: 25px; font-size: 1.5rem; background-color: #dc2626; color: #fafafa; gap: 0.5rem; user-select: none;",
'padding: 25px; width-200px; font-size: 1.5rem; background-color: #dc2626; color: #fafafa; gap: 0.5rem; user-select: none; max-width: 70vw; margin-top: 30px;',
duration,
...options,
});
};
})
}
if (options?.withAudio && options?.src) {
let sound: Howl;
let sound: Howl
sound = new Howl({
src: [options.src],
preload: true,
autoplay: true,
onload: () => {
let duration = sound.duration() * 1000;
sendToast(duration);
setTimeout(onComplete, duration);
let duration = sound.duration() * 1000
sendToast(duration)
setTimeout(onComplete, duration)
},
});
})
} else {
sendToast(this.defaultDuration);
setTimeout(onComplete, this.defaultDuration);
sendToast(this.defaultDuration)
setTimeout(onComplete, this.defaultDuration)
}
}
public static info(message: string, options?: NotificationOptions) {
const onComplete = () => {
if (options?.onComplete) options.onComplete();
};
if (options?.onComplete) options.onComplete()
}
const sendToast = (duration: number) => {
toast(message, {
style:
"padding: 25px; font-size: 1.5rem; gap: 0.5rem; user-select: none;",
'padding: 25px; font-size: 1.5rem; gap: 0.5rem; user-select: none; max-width-600px; max-width: 70vw; margin-top: 30px;',
icon: InfoIcon,
duration,
...options,
});
};
})
}
if (options?.withAudio && options?.src) {
let sound: Howl;
let sound: Howl
sound = new Howl({
src: [options.src],
preload: true,
autoplay: true,
onload: () => {
let duration = sound.duration() * 1000;
sendToast(duration);
setTimeout(onComplete, duration);
let duration = sound.duration() * 1000
sendToast(duration)
setTimeout(onComplete, duration)
},
});
})
} else {
sendToast(this.defaultDuration);
setTimeout(onComplete, this.defaultDuration);
sendToast(this.defaultDuration)
setTimeout(onComplete, this.defaultDuration)
}
}
public static warn(message: string, options?: NotificationOptions) {
const onComplete = () => {
if (options?.onComplete) options.onComplete();
};
if (options?.onComplete) options.onComplete()
}
const sendToast = (duration: number) => {
toast(message, {
style:
"padding: 25px; font-size: 1.5rem; background-color: #f59e0b; color: #fafafa; gap: 0.5rem; user-select: none;",
'padding: 25px; font-size: 1.5rem; background-color: #f59e0b; color: #fafafa; gap: 0.5rem; user-select: none; max-width: 70vw; margin-top: 30px;',
icon: WarnIcon,
duration,
...options,
});
};
})
}
if (options?.withAudio && options?.src) {
let sound: Howl;
let sound: Howl
sound = new Howl({
src: [options.src],
preload: true,
autoplay: true,
onload: () => {
let duration = sound.duration() * 1000;
sendToast(duration);
setTimeout(onComplete, duration);
let duration = sound.duration() * 1000
sendToast(duration)
setTimeout(onComplete, duration)
},
});
})
} else {
sendToast(this.defaultDuration);
setTimeout(onComplete, this.defaultDuration);
sendToast(this.defaultDuration)
setTimeout(onComplete, this.defaultDuration)
}
}
public static playAudio(src: string, onComplete: () => void = () => {}) {
@ -150,8 +150,8 @@ export class Notifications {
preload: true,
autoplay: true,
onload: () => {
setTimeout(onComplete, 1000 * sound.duration());
setTimeout(onComplete, 1000 * sound.duration())
},
});
})
}
}