more updates

src/webpage/channel.ts

@@ -1270,15 +1270,6 @@ class Channel extends SnowFlake {
 				}
 			});
 	}
-	/**
-	 * Please dont use this, its not implemented.
-	 * @deprecated
-	 * @todo
-	 **/
-	async grabArround(/* id: string */) {
-		//currently unused and no plans to use it yet
-		throw new Error("please don't call this, no one has implemented it :P");
-	}
 	async buildmessages() {
 		this.infinitefocus = false;
 		await this.tryfocusinfinate();

src/webpage/embed.ts

@@ -1,7 +1,7 @@
 import {Message} from "./message.js";
 import {MarkDown} from "./markdown.js";
 import {embedjson, invitejson} from "./jsontypes.js";
-import {getapiurls, getInstances} from "./utils/utils.js";
+import {getapiurls, getBulkUsers, getInstances, Specialuser} from "./utils/utils.js";
 import {Guild} from "./guild.js";
 import {I18n} from "./i18n.js";
 import {ImagesDisplay} from "./disimg.js";
@@ -17,12 +17,16 @@ class Embed {
 		this.json = json;
 	}
 	getType(json: embedjson) {
-		const instances = getInstances();
+		const users = Object.values(getBulkUsers().users) as Specialuser[];
+		const instances = getInstances()
+			?.map((_) => _.url)
+			.filter((_) => undefined !== _)
+			.concat(users.map((_) => _.serverurls.wellknown));
 		if (instances && json.type === "link" && json.url && URL.canParse(json.url)) {
 			const Url = new URL(json.url);
 			for (const instance of instances) {
-				if (instance.url && URL.canParse(instance.url)) {
-					const IUrl = new URL(instance.url);
+				if (instance && URL.canParse(instance)) {
+					const IUrl = new URL(instance);
 					const params = new URLSearchParams(Url.search);
 					let host: string;
 					if (params.has("instance")) {
@@ -38,7 +42,7 @@ class Embed {
 					if (IUrl.host === host) {
 						const code = Url.pathname.split("/")[Url.pathname.split("/").length - 1];
 						json.invite = {
-							url: instance.url,
+							url: instance,
 							code,
 						};
 						return "invite";

src/webpage/icons/soundMore.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 300"><g fill="red" stroke="red" stroke-linecap="round" stroke-linejoin="round" stroke-width="4.2"><circle cx="75" cy="55" r="32.9"/><circle cx="75" cy="155" r="32.9"/><circle cx="75" cy="255" r="32.9"/></g></svg>

src/webpage/media.ts

@@ -27,7 +27,7 @@ type mediaEvents =
 			type: "end";
 	  };
 
-function makePlayBox(mor: string | media, player: MediaPlayer) {
+function makePlayBox(mor: string | media, player: MediaPlayer, ctime = 0) {
 	const div = document.createElement("div");
 	div.classList.add("flexltr", "Mplayer");
 
@@ -46,15 +46,18 @@ function makePlayBox(mor: string | media, player: MediaPlayer) {
 	const bar = document.createElement("input");
 	bar.type = "range";
 	bar.disabled = true;
-	bar.value = "0";
+	bar.value = "" + ctime;
 	bar.min = "0";
 
 	const time = document.createElement("span");
 	time.textContent = "0:00/..:..";
 
+	const more = document.createElement("span");
+	more.classList.add("svg-soundMore", "svg-mediaSettings");
+
 	barDiv.append(bar, time);
 	vDiv.append(title, barDiv);
-	div.append(button, vDiv);
+	div.append(button, vDiv, more);
 	MediaPlayer.IdentifyFile(mor).then((thing) => {
 		let audio: HTMLAudioElement | undefined = undefined;
 
@@ -69,6 +72,7 @@ function makePlayBox(mor: string | media, player: MediaPlayer) {
 			const audioo = new Audio(mor.src);
 			audioo.load();
 			audioo.autoplay = true;
+			audioo.currentTime = ctime / 1000;
 			int = setInterval(() => {
 				if (button.classList.contains("svg-pause")) {
 					player.addUpdate(mor.src, {type: "playing", time: audioo.currentTime * 1000});
@@ -89,7 +93,7 @@ function makePlayBox(mor: string | media, player: MediaPlayer) {
 		}
 		button.onclick = () => {
 			if (!player.isPlaying(thing.src)) {
-				player.setToTopList(thing);
+				player.setToTopList(thing, +bar.value * 1000);
 			} else {
 				player.addUpdate(thing.src, {
 					type: "audio",
@@ -110,6 +114,9 @@ function makePlayBox(mor: string | media, player: MediaPlayer) {
 					audio.currentTime = cur.time / 1000;
 				}
 			}
+			if (cur.type == "audio" && cur.t == "skip") {
+				bar.value = "" + cur.time / 1000;
+			}
 			if (cur.type == "playing") {
 				regenTime(cur.time);
 				bar.value = "" + cur.time / 1000;
@@ -222,26 +229,26 @@ class MediaPlayer {
 		if (!med) return false;
 		return med.src === str;
 	}
-	setToTopList(audio: media) {
+	setToTopList(audio: media, time: number) {
 		const med = this.lists[this.cur];
 		if (med) {
 			this.addUpdate(med.src, {type: "end"});
 		}
 		this.lists.splice(this.cur, 0, audio);
-		this.regenPlayer();
+		this.regenPlayer(time);
 	}
 	end() {
 		if (this.curAudio) {
 			this.curAudio.remove();
 			this.cur++;
-			this.regenPlayer();
+			this.regenPlayer(0);
 		}
 	}
-	regenPlayer() {
+	regenPlayer(time: number) {
 		this.elm.innerHTML = "";
 		if (this.lists.length > this.cur) {
 			const audio = this.lists[this.cur];
-			this.elm.append((this.curAudio = makePlayBox(audio, this)));
+			this.elm.append((this.curAudio = makePlayBox(audio, this, time)));
 		}
 	}
 	static cache = new Map<string, media | Promise<media>>();

src/webpage/style.css

@@ -33,8 +33,14 @@ body {
 	border-radius: 3px;
 	background: var(--secondary-bg);
 	align-items: center;
-	*{
-		margin:2px;
+	flex-grow: 0;
+	flex-shrink: 0;
+	height: 52px;
+
+	* {
+		margin: 2px;
+		accent-color: var(--primary-text-soft);
+		flex-shrink: 1;
 	}
 	.flexttb {
 		display: flex;
@@ -84,7 +90,11 @@ body {
 	border: 0;
 }
 #player {
-	height: 128px;
+	flex-grow: 0;
+
+	input {
+		width: 100px;
+	}
 }
 #player:empty {
 	height: 0px;
@@ -307,6 +317,14 @@ textarea {
 	right: 4px;
 	cursor: pointer;
 }
+.svg-mediaSettings {
+	width: 15px;
+	height: 30px;
+	background: var(--primary-text);
+	cursor: pointer;
+	display: block;
+	mask-size: contain !important;
+}
 .svg-mediaButton {
 	width: 30px;
 	height: 30px;
@@ -315,6 +333,9 @@ textarea {
 	display: block;
 	mask-size: cover !important;
 }
+.svg-soundMore {
+	mask: url(/icons/soundMore.svg);
+}
 .svg-play {
 	mask: url(/icons/play.svg);
 }
@@ -2543,4 +2564,3 @@ fieldset input[type="radio"] {
 	right: 0.2in;
 	cursor: pointer;
 }
-