allow for custom notification sounds

src/webpage/channel.ts

@@ -1544,10 +1544,7 @@ class Channel extends SnowFlake {
 	}
 	notify(message: Message, deep = 0) {
 		if (this.localuser.play) {
-			const voice = this.localuser.play.audios.get(this.localuser.getNotificationSound());
-			if (voice) {
-				voice.play();
-			}
+			this.localuser.playSound();
 		}
 		if (!("Notification" in window)) {
 		} else if (Notification.permission === "granted") {

src/webpage/localuser.ts

@@ -1278,24 +1278,56 @@ class Localuser {
 				);
 			}
 			{
-				const sounds = AVoice.sounds;
+				const initArea = (index: number) => {
+					console.log(index === sounds.length - 1);
+					if (index === sounds.length - 1) {
+						const input = document.createElement("input");
+						input.type = "file";
+						input.accept = "audio/*";
+						input.addEventListener("change", () => {
+							if (input.files?.length === 1) {
+								const file = input.files[0];
+
+								let reader = new FileReader();
+								reader.onload = () => {
+									let dataUrl = reader.result;
+									if (typeof dataUrl !== "string") return;
+									this.perminfo.sound = {};
+									try {
+										this.perminfo.sound.cSound = dataUrl;
+										console.log(this.perminfo.sound.cSound);
+										this.playSound("custom");
+									} catch (_) {
+										alert(I18n.localuser.soundTooLarge());
+									}
+								};
+								reader.readAsDataURL(file);
+							}
+						});
+						area.append(input);
+					} else {
+						area.innerHTML = "";
+					}
+				};
+				const sounds = [...AVoice.sounds, I18n.localuser.customSound()];
+				const initIndex = sounds.indexOf(this.getNotificationSound());
 				tas
 					.addSelect(
 						I18n.getTranslation("localuser.notisound"),
-						(_) => {
-							this.setNotificationSound(sounds[_]);
+						(index) => {
+							this.setNotificationSound(sounds[index]);
 						},
 						sounds,
-						{defaultIndex: sounds.indexOf(this.getNotificationSound())},
+						{defaultIndex: initIndex},
 					)
-					.watchForChange((_) => {
-						if (this.play) {
-							const voice = this.play.audios.get(sounds[_]);
-							if (voice) {
-								voice.play();
-							}
-						}
+					.watchForChange((index) => {
+						initArea(index);
+						this.playSound(sounds[index]);
 					});
+
+				const area = document.createElement("div");
+				initArea(initIndex);
+				tas.addHTMLArea(area);
 			}
 
 			{
@@ -2300,6 +2332,18 @@ class Localuser {
 		userinfos.preferences.notisound = sound;
 		localStorage.setItem("userinfos", JSON.stringify(userinfos));
 	}
+	playSound(name = this.getNotificationSound()) {
+		if (this.play) {
+			const voice = this.play.audios.get(name);
+			if (voice) {
+				voice.play();
+			} else if (this.perminfo.sound && this.perminfo.sound.cSound) {
+				const audio = document.createElement("audio");
+				audio.src = this.perminfo.sound.cSound;
+				audio.play().catch();
+			}
+		}
+	}
 	getNotificationSound() {
 		const userinfos = getBulkInfo();
 		return userinfos.preferences.notisound;

src/webpage/user.ts

@@ -135,6 +135,7 @@ class User extends SnowFlake {
 				return;
 			}
 		}
+
 		await fetch(this.info.api + "/users/@me/channels", {
 			method: "POST",
 			body: JSON.stringify({recipients: [this.id]}),

src/webpage/utils/utils.ts

@@ -111,7 +111,12 @@ export class Specialuser {
 		return new Proxy(e, {
 			set: (target, p, newValue, receiver) => {
 				const bool = Reflect.set(target, p, newValue, receiver);
-				this.updateLocal();
+				try {
+					this.updateLocal();
+				} catch (_) {
+					Reflect.deleteProperty(target, p);
+					throw _;
+				}
 				return bool;
 			},
 			get: (target, p, receiver) => {

translations/en.json

@@ -259,6 +259,8 @@
 		"themesAndSounds": "Themes & Sounds",
 		"theme:": "Theme",
 		"notisound": "Notification sound:",
+		"customSound": "Custom Sound",
+		"soundTooLarge": "The sound you tried to upload was too large, try again",
 		"accentColor": "Accent color:",
 		"enableEVoice": "Enable experimental Voice support",
 		"VoiceWarning": "Are you sure you want to enable this? It's very experimental and is likely to cause issues. (this feature is for devs, please don't enable if you don't know what you're doing)",