OctoSpaccHub/public/MatrixStickerHelper/index.html

<!DOCTYPE html>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>🃏️ [Matrix] Sticker Helper</title>

<script src="../../../SpaccDotWeb/SpaccDotWeb.Alt.js" module="SpaccDotWeb"></script>
<script src="//SpaccInc.gitlab.io/SpaccDotWeb/SpaccDotWeb.Alt.js" module="SpaccDotWeb"></script>
<link rel="stylesheet" href="./paper.min.css"/>

<!--
<script module="Meta">({
	Name: "🃏️ [Matrix] Sticker Helper",
})</script>
-->

<!--
TODO:
* more error handling and debug logging
** manage consistency between modal errors and messages in debug log (probably will need a SpaccDotWeb function for that)
* immediately show an image after uploading in the grid
* allow reordering, renaming, deleting stickers and packs
** maybe by default show the sticker packs in the same order in the list as the picker does, or at the very least commit them with recent stickers being at the beginning of the list
* import from line, import video telegram stickers, import video files, import files from URL
* save a linkback to a sticker pack in every single sticker optionally, allowing stickers to be copied, possibly from matrix.to URL
** set this and other options as persisting in the user account data
* fix sticker reimport protection not working?
* in a lot of places that only do HTTP(s), handle also mxc:// URLs
* open graph, PWA things (webmanifest, worker for offline support)
* fix stickers from file/Telegram in demo mode (we must store the data uri img srcs in RAM for viewing)
* UI improvements like blocking buttons in inconsistent states, adding more feedbacks for long operations
** more loading messages and overlays
** fix race conditions between actions like user going back while app is committing or loading packs (including commit button)
* compatibility build / add polyfills
* multilanguage?
* gif encoding without webserver (without ES import)
-->

<div id="Main" hidden="true">
	<div id="LayoutAccountSelect"></div>

	<div id="LayoutCollectionActions">
		<button name="back">🔙️ Go Back</button>
		<button name="commit">📝️ Commit Changes</button>
		<button name="commitFake" disabled="true">📝️ Can't commit changes in Demo Mode</button>
	</div>

	<div id="LayoutFeedback"></div>

	<div style="overflow: auto;">
		<div id="LayoutPacksList" class="margin-small" style="width: max-content;"></div>
	</div>

	<div class="margin-small" id="LayoutPackActions">
		<input name="packName" type="text" placeholder="Pack Name/Description" style="display: inline-block;" disabled/>
		<button name="packDelete" disabled title="Coming soon!">❌️ Delete Pack</button>
	</div>

	<div class="margin-small" id="LayoutPackGrid"></div>

	<details class="col border margin" id="LayoutCollectionOptions">
		<summary>
			<p>Options</p>
		</summary>
		<p>
			Reinitializing sticker data for your account will simply override
			the <code>stickerpicker</code> subfield in its <code>m.widgets</code> field.
		</p>
		<button name="reinit">💡️ Reinitialize sticker data as new</button>
		<details class="col border margin">
			<summary>
				<p>Advanced</p>
			</summary>
			<label>
				Sticker selector app URL
				<input name="pickerUrl" type="text"/>
			</label>
		</details>
	</details>
	
	<tgs-player style="display: none;" hidden="true"></tgs-player>
</div>

<p class="noscript">
	This application requires modern JavaScript and cutting-edge web standards.
</p>

<hr class="margin-large"/>

<p>
	🃏️ [Matrix] Sticker Helper <a name="version" title="Click to show changelog" href="javascript:;">WIP Version</a>,
	created with 💕️ and ☕️ by <a href="https://hub.octt.eu.org">OctoSpacc</a>.
	<br/>
	Made possible by <a href="https://github.com/maunium/stickerpicker" target="_blank">Maunium sticker picker</a>,
	brought to paper thanks to <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a>.
</p>

<p>
	<b>Note</b>: importing stickers from files/Telegram is currently experimental, and error handling isn't the best.
	Make sure that your Internet connection is stable when uploading/importing stickers, and be patient if it seems like the app does nothing for some time. Don't navigate around the app when stickers are loading or importing.
</p>

<details class="col border margin">
	<summary>
		<p>Help and Information</p>
	</summary>
	<h3>What is [Matrix] Sticker Helper?</h3>
	<p>
		I created this app for the pursuit of an user-friendly way
		of managing sticker packs on <a href="https://matrix.org" target="_blank">Matrix</a>,
		that could also work well for other people,
		after finding the <code>maunium/stickerpicker</code> import procedure uncomfortable.
		<br/>
		Read more (and follow the development I guess?) at
		<a href="https://octospacc.altervista.org/?s=%22%23MatrixStickerHelper%22">octospacc.altervista.org/#MatrixStickerHelper</a>.
	</p>
	<h3>How can I add sticker packs to my collection?</h3>
	<p>
		To add new sticker packs to your collection, you can use the dedicated section, which offers 2 options. You can:
	</p>
	<ul>
		<li>
			Either leave the optional text field blank to create a brand-new pack, to be filled with stickers by importing media files;
		</li>
		<li>
			Or, to import packs from one of a few different supported sources, input an URL. Supported URLs are:
			<ul>
				<li>
					Those pointing to the JSON data file (in the format used by <code>maunium/stickerpicker</code>)
					of an already existing collection (<code>index.json</code>) or individual pack (shared by other users, or backed-up by you),
					assuming the file is fetchable with CORS restrictions.
					<br/>
					The URL must begin with <code>http://</code> or <code>https://</code>.
					For example, <code>https://maunium.net/stickers-demo/packs/pusheen02.json</code>.
				</li>
				<li>
					URLs of Telegram sticker packs, either Static (PNG/WebP) or Animated (TGS). Video stickers (WebM) will be supported in the future.
					(For the technical details, see <a href="https://core.telegram.org/stickers" target="_blank">https://core.telegram.org/stickers</a>.)
					<br/>
					The URL must be in the format "{optionally, <code>http://</code> or <code>https://</code>}<!--
					-->{<code>t.me</code> or <code>telegram.me</code>}<code>/addstickers/</code>{name of the pack}".
					For example, <code>t.me/addstickers/FishPuffer</code>.
				</li>
			</ul>
		</li>
		</ul>
	<p>
		Currently, you can import common picture files (JPEG, WebP, PNG, GIF) from your device's storage as stickers.
		Sooner, you will be able to also import media files from URL, as well as importing video files (like MP4) for automatic conversion into GIF.
		<br/>
		Importing stickers and packs from Matrix messages, or the LINE store, is planned for the more distant future.
	</p>
	<h3>Stickerpicker information</h3>
	<p>
		This project is not a substitute of <code>maunium/stickerpicker</code>,
		is not affiliated with it, and doesn't use any part of its code, but rather complements it.
		<br/>
		It sets that up as the sticker picker integration for your Matrix account if you don't have it already,
		and allows you to manage your sticker collection in a way that is fully compatible with it, but without the manual setup.
	</p>
	<h3>Open-source, licensing, security, collaboration</h3>
	<p>
		This app is open-source, and licensed under the
		<a href="https://www.gnu.org/licenses/agpl-3.0.html" target="_blank">GNU Affero General Public License Version 3</a>.
		To modify the app, or to check its code for security reasons, you can simply "View Page Source" in your browser.
		<br/>
		This project additionally relies on the following third-party libraries:
	</p>
	<ul>
		<li><a target="_blank" href="https://gitlab.com/SpaccInc/SpaccDotWeb">SpaccDotWeb</a></li>
		<li><a target="_blank" href="https://github.com/gram-js/gramjs">GramJS</a></li>
		<li><a target="_blank" href="https://github.com/LottieFiles/lottie-player">Lottie-Player</a></li>
		<li><a target="_blank" href="https://github.com/jamsinclair/gifski-wasm">gifski-wasm</a></li>
	</ul>
	<p>
		Additionally, if there is any issue you want to report, tip you want to give, or if you want to send a pull request,
		feel free to do so at the OctoSpacc Hub repository:
		<a href="https://gitlab.com/octospacc/octospacc.gitlab.io">https://gitlab.com/octospacc/octospacc.gitlab.io</a>
		(or contact me via Matrix, see below).
	</p>
	<h3>Other help</h3>
	<p>
		There is no one around to actually help here though... yet.
		Maybe join my Matrix space, if you need some support:
		<a href="https://matrix.to/#/#Spacc:matrix.org">https://matrix.to/#/#Spacc:matrix.org</a>.
	</p>
	<div id="LayoutChangelog">
		<h3>Changelog</h3>
		<p>[2024-01-09]</p>
		<ul>
			<li>Experimental guest/demo mode</li>
			<li>Minor bugfixes (including for Firefox compatibility, and Telegram) and UX improvements (including debug log)</li>
		</ul>
		<p>[2024-01-08]</p>
		<ul>
			<li>Importing Static and Animated sticker packs from Telegram URLs</li>
			<li>Minor bugfixes and UX improvements</li>
		</ul>
		<p>[2024-01-05]</p>
		<ul>
			<li>Uploading stickers from (multiple) local image files</li>
			<li>Deleting individual stickers from packs (+ bug hotfix)</li>
			<li>Various bugfixes and UX improvements</li>
		</ul>
		<p>[2024-01-04]</p>
		<ul>
			<li>Importing entire sticker collections from URL</li>
			<li>Fix stickers not loading from accounts already setup with stock stickerpicker</li>
			<li>Add help and changelog</li>
		</ul>
		<p>[2024-01-05]</p>
		<ul>
			<li>First release</li>
			<li>Account management (logging in, reading and writing data)</li>
			<li>Visualization of current account stickers</li>
			<li>Importing sticker packs from URL</li>
		</ul>
		</p>
	</div>
	<h3>Debug Log</h3>
	<textarea id="LayoutDebugLog" readonly="true" style="width: 100%;" rows="10"></textarea>
</details>

<script module="Main" type="module">
	const Spacc = SpaccDotWeb.AppInit();

	const State = {};
	const Defaults = {
		stickerSelectorUrl: "https://maunium.net/stickers-demo/",
		appIdentity: "org.eu.octt.MatrixStickerHelper",
		appInterface: "v1",
		wpPastebin: "https://octospacc.altervista.org",
		telegramTokens: [
			"17349:344583e45741c457fe1862106095a5eb",  // <https://github.com/telegramdesktop/tdesktop/blob/dev/Telegram/SourceFiles/config.h>
			"611335:d524b414d21f4d37f08684c1df41ac9c", // <https://github.com/telegramdesktop/tdesktop/blob/dev/.github/workflows/win.yml>
		],
		Strings: {
			mConfirmCommit: "Confirm committing account data?",
			mMustInit: "Your account must first be initialized to handle stickers.",
			mNotManaged: `
				Your account is set-up with a sticker picker, but it's not marked as being managed by this app.
				This could mean that you are currently using an incompatible sticker picker.
				<br/>
				You can try to continue anyway if you think it should work, otherwise you should reinitialize sticker data.
			`,
			mCreatePackHint: `
				Optionally include the URL of a sticker pack for Maunium (JSON format) or from Telegram to import it.
				Otherwise, leave the field empty to create a brand-new pack, importing your own media files as stickers.
			`,
			mLoginHint: `
				Please login with your Matrix account.
				<br/>
				(Your login details are processed locally and only sent to the homeserver you specified.)
			`,
		}
	};

	let SpaccConfig = localStorage.getItem('SpaccInc-Matrix-Config');
	SpaccConfig = (SpaccConfig ? JSON.parse(SpaccConfig) : {
		accounts: [],
	});
	SpaccConfig.Save = () => localStorage.setItem('SpaccInc-Matrix-Config', JSON.stringify(SpaccConfig));

	let AppConfig = localStorage.getItem(Defaults.appIdentity);
	AppConfig = (AppConfig ? JSON.parse(AppConfig) : {});
	AppConfig.Save = () => localStorage.setItem(Defaults.appIdentity, JSON.stringify(AppConfig));

	const Logger = (content, type) => {
		if (['f', 'feedback'].includes(type.toLowerCase())) {
			$`#LayoutFeedback`.innerHTML = `<p>${content}</p>`;
		}
		$`#LayoutDebugLog`.innerHTML += `[${type}] [${new Date().toISOString().split('.').slice(0, -1).join('.')}] ${content}\n`;
	}

	const ArrayRandom = (array) => array[~~(Math.random() * array.length)];

	const $ = (query, ...params) => (query
		? document.querySelector(Array.isArray(query)
			? (params.length > 0
				? params.map((a, i) => `${query[i]}${a}`).join('')
				: query.join(''))
			: query)
		: document);

	const LogFetch = (url, options) => {
		Logger(`Trying to fetch ${url}`, 'd');
		return fetch(url, options);
	}

	const GetMatrixUserTag = (account) => `@${account.username}:${account.homeserver.split('://')[1]}`;

	const GetMatrixMediaUrl = (mxcId, props) => (mxcId ? `${props?.homeserver || `https://${mxcId.split('mxc://')[1].split('/')[0]}`}/_matrix/media/r0/${props?.type || 'download'}/${mxcId.split('mxc://')[1]}` : undefined);

	//const GetHttpOrMatrixUrl = (url) => ;

	const IsUrlHttpOrS = (url) => {
		url = url.toLowerCase();
		if (url.startsWith('http://')) return 'http'
		else if (url.startsWith('https://')) return 'https'
		else return false
	};

	const SafeStripFileExtension = (name, extensions) => {
		const parts = name.split('.');
		return (parts.length === 1
			? name
			: (extensions.includes(parts.slice(-1)[0].toLowerCase())
				? parts.slice(0, -1)
				: parts
			).join('.')
		);
	};

	function ReadFileAsync (file, method='readAsDataURL') {
		return new Promise((resolve) => {
			const reader = new FileReader();
			reader.onload = (event) => {
				resolve(event.target.result);
			};
			reader[method](file);
		});
	}

	// <https://stackoverflow.com/questions/12710001/how-to-convert-uint8-array-to-base64-encoded-string/66046176#66046176>
	async function BufferToBase64 (buffer) {
		return await new Promise((resolve) => {
			const reader = new FileReader();
			reader.onload = () => resolve(reader.result);
			reader.readAsDataURL(new Blob([buffer]));
		});
	}

	// <https://stackoverflow.com/questions/45365571/convert-an-image-to-imagedata-uint8clampedarray/68319943#68319943>
	async function GetImageDataFromSource (source, sizeDivisor=1) {
		const image = Object.assign(new Image(), { src: source });
		await new Promise((resolve) => image.addEventListener('load', () => resolve()));
		const context = Object.assign(document.createElement('canvas'), {
			width: (image.width / sizeDivisor),
			height: (image.height / sizeDivisor),
		}).getContext('2d');
		context.imageSmoothingEnabled = false;
		context.drawImage(image, 0, 0, (image.width / sizeDivisor), (image.height / sizeDivisor));
		return context.getImageData(0, 0, (image.width / sizeDivisor), (image.height / sizeDivisor));
	}

	const ReadBufferOrBlob = async (data) => await (data instanceof Uint8Array ? await BufferToBase64 : ReadFileAsync)(data);

	function ResetLayouts () {
		$`#Main`.hidden = false;
		for (const id of ['LayoutFeedback', 'LayoutAccountSelect', 'LayoutPacksList', 'LayoutPackGrid']) {
			$`#${id}`.innerHTML = '';
		}
		for (const id of ['LayoutCollectionActions', 'LayoutPackActions', 'LayoutCollectionOptions']) {
			$`#${id}`.hidden = true;
		}
		for (const id of ['LayoutCollectionOptions']) {
			$`#${id}`.open = false;
		}
		SetCommittable(false);
	}

	function InitializeState () {
		for (const elem of document.querySelectorAll('.noscript')) {
			elem.remove();
		}
		$`#LayoutCollectionActions button[name="back"]`.onclick = () => DisplayAccountSelect();
		$`#LayoutCollectionOptions input[name="pickerUrl"]`.value = Defaults.stickerPickerUrl;
		$`#LayoutChangelog > h3`.remove();
		const changelogHtml = `<a style="visibility: hidden; position: absolute; top: 0;"></a>${$`#LayoutChangelog`.innerHTML}`;
		$`#LayoutChangelog`.remove();
		$`a[name="version"]`.innerHTML = `v${changelogHtml.split('[')[1].split(']')[0]}`;
		$`a[name="version"]`.onclick = async () => (await Spacc.ShowModal({ extraHTML: changelogHtml })).querySelector('a').scrollIntoView('a');
	}

	async function RequestAccountWidgetsData (postData) {
		const request = await fetch(`${State.account.homeserver}/_matrix/client/v3/user/${GetMatrixUserTag(State.account)}/account_data/m.widgets`, {
			method: (postData ? "PUT" : "GET"),
			headers: { Authorization: `Bearer ${State.account.token}` },
			body: JSON.stringify(postData),
		});
		const result = await request.json();
		if (request.status === 200) {
			return result;
		} else if (result.errcode === 'M_NOT_FOUND') {
			return {};
		} else {
			Spacc.ShowModal(`Error: ${JSON.stringify(result)}`);
		}
	}

	async function RequestMatrixUploadFile (fileData, fileMime) {
		if (!State.account) return {};
		const request = await fetch(`${State.account.homeserver}/_matrix/media/v3/upload`, {
			method: "POST",
			headers: { Authorization: `Bearer ${State.account.token}`, ...(fileMime && { "Content-Type": fileMime }) },
			body: fileData,
		});
		const result = await request.json();
		if (request.status === 200) {
			Logger(`Uploaded ${fileMime} data to ${result.content_uri}.`, 'd');
			return result;
		} else {
			Spacc.ShowModal(`Error: ${JSON.stringify(result)}`);
		}
	}

	const IsUrlTelegramSticker = (url) => {
		const [domain, path] = url.toLowerCase().split('://')[IsUrlHttpOrS(url) ? 1 : 0].split('/');
		return (['t.me', 'telegram.me'].includes(domain) && path === 'addstickers');
	};

	async function TryGetTelegramSession () {
		if (!window.telegram) {
			await Spacc.RequireScript('telegram.js');
		}
		try {
			Logger(`Initializing a Telegram session, please wait...`, 'f');
			const [apiId, apiToken] = ArrayRandom(Defaults.telegramTokens).split(':');
			const request = await fetch(`${Defaults.wpPastebin}/wp-content/uploads/octospacc/scripts/stuff.php?&Thing=SiteWpJsonCors&AccessToken=9ab6e20c&$Query=wp/v2/paste/958?password=${Defaults.wpPastebin}/paste/958/?ppt=4c7f6ed8f9f268e05bd7509bd22f578247567be02369dba2707383cdd20f26dd`);
			const result = await request.json();
			const token = atob(result.content.rendered.split(',')[1].split('"')[0]).split('\0').slice(-3)[0];
			const sessionString = new telegram.sessions.StringSession(AppConfig.lastTelegramSession);
			const client = new telegram.TelegramClient(sessionString, Number(apiId), apiToken, { connectionRetries: 5 });
			await client.start({ botAuthToken: token });
			AppConfig.lastTelegramSession = client.session.save();
			AppConfig.Save();
			await client.connect();
			State.telegramClient = client;
			return client;
		} catch (err) {
			Spacc.ShowModal(`Error trying to initialize a Telegram session: ${err}`);
		}
	}

	async function ConvertTgsToGif (stickerDocument, stickerBuffer) {
		await Spacc.RequireScript('tgs-player.js');
		if (!window.GifSkiEncoder) {
			const script = document.createElement('script');
			script.type = 'module';
			script.innerHTML = `
				import gifskiWasm from './gifskiWasm.mjs';
				window.GifSkiEncoder = gifskiWasm;
			`;
			document.body.appendChild(script);
		}
		while (!window.GifSkiEncoder) {
			await SpaccDotWeb.Sleep(50);
		}
		const renderedFrames = [];
		// reducing frames and dimensions since gifski is slow (TODO: make it user-customizable, and optionally provide a faster encoder)
		const sizeDivisor = 3;
		const framesDivisor = 3;
		const tgsPlayer = document.querySelector('tgs-player');
		tgsPlayer.load(await BufferToBase64(stickerBuffer));
		await new Promise((resolve) => tgsPlayer.addEventListener('ready', () => resolve()));
		for (let i=0; i<tgsPlayer._lottie.totalFrames; i+=framesDivisor) {
			tgsPlayer.seek(i);
			const svgFrame = tgsPlayer.snapshot(false);
			const renderedFrame = await GetImageDataFromSource(`data:image/svg+xml;base64,${btoa(svgFrame)}`, sizeDivisor);
			renderedFrames.push(renderedFrame);
		}
		return await GifSkiEncoder({
			frames: renderedFrames,
			width: (stickerDocument.attributes[0].originalArgs.w / sizeDivisor),
			height: (stickerDocument.attributes[0].originalArgs.h / sizeDivisor),
			fps: (tgsPlayer._lottie.frameRate / framesDivisor),
			quality: 60,
		});
	}

	function SetCommittable (status) {
		// TODO: make state consistent in other places to avoid resetting the buttons every time
		if (State.account) {
			$`#LayoutCollectionActions button[name="commit"]`.hidden = false;
			$`#LayoutCollectionActions button[name="commitFake"]`.hidden = true;
			$`#LayoutCollectionActions button[name="commit"]`.disabled = !status;
		} else {
			$`#LayoutCollectionActions button[name="commit"]`.hidden = true;
			$`#LayoutCollectionActions button[name="commitFake"]`.hidden = false;
		}
	}

	async function PreparePacksEditor (account) {
		if (account !== undefined) {
			State.account = account;
		}
		ResetLayouts();
		State.packsData = { homeserver_url: State.account?.homeserver, packs: [] };
		State.stickersData = [];
		if (account === null) {
			return DisplayPacksEditor();
		}
		$`#LayoutCollectionActions`.hidden = false;
		$`#LayoutCollectionOptions`.hidden = false;
		SetCommittable(false);
		$`#LayoutCollectionOptions button[name="reinit"]`.onclick = () => Spacc.ShowModal({
			label: Defaults.Strings.mConfirmCommit,
			action: () => ReinitStickersAccountData(),
		});
		Logger(`Fetching Matrix account data, please wait...`, 'f');
		State.widgetsData = await RequestAccountWidgetsData();
		if (State.widgetsData) {
			const pickerUrlFull = State.widgetsData?.stickerpicker?.content?.url;
			const isManaged = State.widgetsData?.stickerpicker?.content?.managedBy?.includes(`${Defaults.appIdentity}/${Defaults.appInterface}`);
			const packsUrl = (new URLSearchParams(pickerUrlFull?.split('?')[1])).get('config');
			if (pickerUrlFull) {
				$`#LayoutCollectionOptions input[name="pickerUrl"]`.value = pickerUrlFull.split('?')[0];
			}
			if (!isManaged || !State.widgetsData?.stickerpicker) {
				$`#LayoutCollectionOptions`.open = true;
				if (!State.widgetsData?.stickerpicker) {
					Logger(Defaults.Strings.mMustInit, 'f');
					// we always init sticker data from the default URL to avoid headaches
					$`#LayoutCollectionOptions input[name="pickerUrl"]`.value = '';
					$`#LayoutCollectionOptions input[name="pickerUrl"]`.disabled = true;
				} else
				if (!isManaged) {
					$`#LayoutFeedback`.innerHTML = `
						<p>${Defaults.Strings.mNotManaged}</p>
						<button name="continue">⏭️ Continue</button>
					`;
					$`#LayoutFeedback > button[name="continue"]`.onclick = () => {
						$`#LayoutCollectionOptions`.open = false;
						if (State.widgetsData?.stickerpicker?.content?.url && !packsUrl) {
							// assuming the user is probably coming from stock maunium/stickerpicker,
							// and we know that it loads data from a fixed URL when no config param is specified,
							// we can try loading that when a generic URL is present
							const packsUrlsPrefix = `${State.widgetsData?.stickerpicker?.content?.url.split('?')[0]}/packs/`;
							DisplayPacksEditor(`${packsUrlsPrefix}index.json`, packsUrlsPrefix);
							return;
						}
						DisplayPacksEditor(packsUrl);
					};
				}
			} else {
				DisplayPacksEditor(packsUrl);
			}
		} else {
			State.widgetsData = {};
		}
	}

	async function DisplayPacksEditor (packsUrl, packsUrlPrefix) {
		ResetLayouts();
		$`#LayoutCollectionActions`.hidden = false;
		$`#LayoutCollectionOptions`.hidden = false;
		$`#LayoutCollectionActions button[name="commit"]`.onclick = () => Spacc.ShowModal({
			label: Defaults.Strings.mConfirmCommit,
			action: () => CommitNewAccountStickersAndData(),
		});
		if (packsUrl) {
			try {
				const request = await LogFetch(packsUrl);
				if (request.status === 200) {
					State.packsData = await request.json();
				}
			} catch(err) {
				Spacc.ShowModal(`${err} ${packsUrl}`);
			}
		}
		if (packsUrlPrefix) {
			for (const packIndex in State.packsData.packs) {
				State.packsData.packs[packIndex] = `${packsUrlPrefix}${State.packsData.packs[packIndex]}`;
			}
		}
		const addButton = $().createElement('button');
		addButton.name = 'add';
		addButton.innerHTML = '➕️ Create/Import Pack';
		addButton.onclick = (event) => Spacc.ShowModal({ label: Defaults.Strings.mCreatePackHint, extraHTML: `
			<label>
				<input name="packUrl" type="text" placeholder="https://example.com/example.json, t.me/addstickers/Pack, ..."/>
			</label>
		`, action: (event, modalButton) => CreateNewPack(event, modalButton) });
		$`#LayoutPacksList`.appendChild(addButton);
		LoadStickerPacksList();
	}
	
	async function LoadStickerPacksList () {
		for (const packIndex in State.packsData.packs) {
			const packUrl = State.packsData.packs[packIndex];
			try {
				const request = await LogFetch(packUrl);
				const packData = await request.json();
				const packObject = { data: packData, index: packIndex, edited: false };
				State.stickersData.push(packObject);
				AddNewPackButton(packObject);
			} catch(err) {
				Spacc.ShowModal(`${err} ${packUrl}`);
			}
		}
	}
	
	async function CreateNewPack (event, modalButton, packUrl) {
		let packData = { stickers: [] };
		// if the user specified an URL, try downloading data from there
		packUrl ||= modalButton.parentElement.querySelector('input[name="packUrl"]').value;
		// TODO: warn if an existing pack is imported from that URL and let the user choose if to continue or cancel
		//if (packUrl && IsAnyPackImportedFrom(packUrl) && await Spacc.ShowModal({ label: Defaults.Strings.mAlreadyImported, action: () => 'continue', actionCancel: () => 'cancel' }) === 'continue') {
		//	return;
		//};
		if (packUrl && !IsUrlTelegramSticker(packUrl)) {
			try {
				const request = await LogFetch(packUrl);
				packData = await request.json();
				// imported JSON is an index, so we try to import all its packs
				if (packData.packs && !packData.stickers) {
					for (const pack of packData.packs) {
						const packUrlPrefix = (IsUrlHttpOrS(pack) ? '' : packUrl.split('/').slice(0, -1).join('/'));
						await CreateNewPack(null, null, `${packUrlPrefix}/${pack}`);
					}
					return;
				}
				SetCommittable(true);
			} catch(err) {
				Spacc.ShowModal(`${err} ${packUrl}`);
				return;
			}
		}
		packData[Defaults.appIdentity] = {
			...(packUrl && { importedFrom: packUrl }),
		};
		State.packsData.packs.push(null);
		const packObject = { data: packData, index: State.stickersData.length, edited: true };
		State.stickersData.push(packObject);
		if (packUrl && IsUrlTelegramSticker(packUrl)) {
			TryImportTelegramPack(packUrl, packObject);
		}
		AddNewPackButton(packObject, event, modalButton).click();
	}

	async function TryImportTelegramPack (packUrl, packObject) {
		const tgClient = (State.telegramClient || await TryGetTelegramSession());
		try {
			Logger(`Fetching Telegram sticker data...`, 'f');
			const packResult = await tgClient.invoke(
				new telegram.Api.messages.GetStickerSet({
					stickerset: new telegram.Api.InputStickerSetShortName({
						shortName: packUrl.split('/').slice(-1)[0],
					}),
					hash: 0,
				})
			);
			// TODO: write all important provenance information in pack and sticker meta like the manium importer does, after checking what's actually useful
			packObject.data = { ...packObject.data,
				title: packResult.set.title,
				// accessHash.value (👇️)
				// hash
				// id.value (👇️)
				// shortName
			};
			for (const stickerDocument of packResult.documents) {
				let mimeType = stickerDocument.mimeType;
				let stickerImage = await tgClient.downloadMedia(stickerDocument);
				// TODO: video stickers
				if (mimeType === 'application/x-tgsticker') {
					mimeType = 'image/gif';
					stickerImage = await ConvertTgsToGif(stickerDocument, stickerImage);
				}
				await TryAddStickerFromDataFile({
					file: stickerImage,
					mime: mimeType,
					size: parseInt(stickerDocument.size.value),
					dimensions: stickerDocument.attributes[0].originalArgs,
					text: stickerDocument.attributes[1].alt,
				}, packObject);
			}
		} catch(err) {
			Spacc.ShowModal(`Error trying to import stickers from Telegram: ${err}`);
		}
		$`#LayoutFeedback`.innerHTML = '';
	}

	function IsAnyPackImportedFrom (packUrl) {
		for (const pack of State.stickersData) {
			if (pack.data[Defaults.appIdentity].importedFrom === packUrl) {
				return true;
			}
		}
		return false;
	}
	
	function AddNewPackButton (packObject, event, modalButton) {
		for (const elem of $`#LayoutPacksList`.querySelectorAll('button')) {
			elem.disabled = false;
		}
		const packButton = MakeStickerPackButton(packObject);
		$`#LayoutPacksList`.insertBefore(packButton, $`#LayoutPacksList > button[name="add"]`.nextElementSibling);
		$`#LayoutPackActions`.hidden = true;
		$`#LayoutPackGrid`.innerHTML = '';
		return packButton;
	}

	function MakeStickerPackButton (packObject) {
		const packButton = $().createElement('button');
		packButton.innerHTML = `<img src="${GetMatrixMediaUrl(packObject.data.stickers[0]?.info?.thumbnail_url, { homeserver: State.packsData?.homeserver_url, type: 'thumbnail' }) || ''}?&height=64&width=64&method=scale"/>`;
		packButton.onclick = (event) => ShowStickerPack(event, packObject);
		return packButton;
	}

	function ShowStickerPack (event, packObject) {
		if (event) {
			const thisElem = (event.target.tagName.toLowerCase() === 'button' ? event.target : event.target.parentElement);
			for (const elem of thisElem.parentElement.querySelectorAll('button')) {
				elem.disabled = false;
			}
			thisElem.disabled = true;
		}
		$`#LayoutPackActions input[name="packName"]`.value = packObject.data.title;
		$`#LayoutPackActions button[name="packDelete"]`.onclick = () => {
		// TODO: this makes the commit button go usable even if the pack was just created and had no stickers... not important but would be a small UI improvement
			Spacc.ShowModal({ label: 'Are you sure to delete this pack?', action: () => {
				State.packsData.packs.splice(packObject.index, 1);
				State.stickersData.splice(packObject.index, 1);
				SetCommittable(true);
				//$`#LayoutPackGrid`.innerHTML = '';
			} });
		};
		$`#LayoutPackActions`.hidden = false;
		$`#LayoutPackGrid`.innerHTML = '';
		for (const stickerIndex in (packObject.data.stickers || [])) {
			const sticker = packObject.data.stickers[stickerIndex];
			const stickerElem = $().createElement('button');
			stickerElem.innerHTML = `<img src="${GetMatrixMediaUrl(sticker.info.thumbnail_url, { homeserver: State.packsData?.homeserver_url, type: 'thumbnail' }) || ''}?&height=128&width=128&method=scale"/>`;
			stickerElem.onclick = () => OnClickStickerButton(event, packObject, sticker, stickerIndex);
			$`#LayoutPackGrid`.appendChild(stickerElem);
		}
		const addButton = $().createElement('button');
		addButton.innerHTML = `
			➕️ Upload New Sticker(s)
			<input type=file hidden="true" multiple="true" accept="image/jpeg,image/gif,image/png,image/webp"/>
		`;
		addButton.querySelector('input[type="file"]').onchange = (event) => TryAddStickersFromLocalFiles(event, packObject);
		addButton.onclick = (event) => event.target.querySelector('input[type="file"]')?.click();
		// TODO: 
		$`#LayoutPackGrid`.appendChild(addButton);
	}

	async function OnClickStickerButton (showStickerPackEvent, packObject, sticker, stickerIndex) {
		const stickerModal = await Spacc.ShowModal({ extraHTML: `
			<img src="${GetMatrixMediaUrl(sticker.url, { homeserver: State.packsData?.homeserver_url, type: 'download' }) || ''}?&height=512&width=512&method=scale"/>
			<div class="margin-small">
				<input name="stickerName" type="text" placeholder="Sticker Name/Description" value="${sticker.body}" style="display: inline-block;" disabled/>
				<button name="stickerDelete">❌️ Delete Sticker</button>
			</div>
		` });
		stickerModal.querySelector('button[name="stickerDelete"]').onclick = () => Spacc.ShowModal({ label: 'Are you sure to delete this sticker?', action: () => {
			stickerModal.close();
			packObject.data.stickers.splice(stickerIndex, 1);
			packObject.edited = true;
			SetCommittable(true);
			ShowStickerPack(showStickerPackEvent, packObject);
		} });
	}

	async function TryUploadStickerMediaAndMakeObject (props) {
		const result = await RequestMatrixUploadFile(props.file, props.mime);
		if (result) {
			if (!props.dimensions) {
				const img = new Image();
				img.src = await ReadBufferOrBlob(props.file);
				await img.decode();
				props.dimensions = { w: img.width, h: img.height };
			}
			return {
				id: result.content_uri,
				url: result.content_uri,
				msgtype: "m.sticker",
				body: props.text,
				info: {
					w: props.dimensions.w,
					h: props.dimensions.h,
					size: props.size,
					mimetype: props.mime,
					thumbnail_url: result.content_uri,
					thumbnail_info: {
						w: props.dimensions.w,
						h: props.dimensions.h,
						size: props.size,
						mimetype: props.mime,
					},
				},
			};
		}
	}

	async function TryAddStickerFromDataFile (stickerProps, packObject) {
		const stickerData = await TryUploadStickerMediaAndMakeObject(stickerProps);
		if (stickerData) {
			//stickerData[Defaults.appIdentity] = {};
			const stickerElem = $().createElement('button');
			stickerElem.innerHTML = `<img src="${await ReadBufferOrBlob(stickerProps.file)}"/>`;
			stickerElem.onclick = () => OnClickStickerButton(null, packObject, stickerData, packObject.data.stickers.length);
			$`#LayoutPackGrid`.appendChild(stickerElem);
			packObject.data.stickers.push(stickerData);
			packObject.edited = true;
			SetCommittable(true);
		}
	}

	async function TryAddStickersFromLocalFiles (event, packObject) {
		let newPackStickers = [];
		for (const file of event.target.files) {
			const stickerData = await TryUploadStickerMediaAndMakeObject({
				file: file,
				size: file.size,
				mime: file.type,
				text: SafeStripFileExtension(file.name, ['jpeg', 'jpg', 'gif', 'png', 'webp']),
			});
			if (stickerData) {
				//stickerData[Defaults.appIdentity] = {};
				const globalStickerIndex = (packObject.data.stickers.length + newPackStickers.length);
				const stickerElem = $().createElement('button');
				stickerElem.innerHTML = `<img src="${await ReadFileAsync(file)}"/>`;
				stickerElem.onclick = () => OnClickStickerButton(null, packObject, stickerData, globalStickerIndex);
				$`#LayoutPackGrid`.insertBefore(stickerElem, event.target.parentElement);
				newPackStickers.push(stickerData);
			} else { // TODO fix this, I think it doesn't actually wait for user input and just continues execution
				const answer = await Spacc.ShowModal({
					label: 'File upload failed. What to do?',
					action: () => 'continue',
					actionCancel: () => 'cancel',
					labelSecondary: '🔄️ Retry', actionSecondary: () => 'retry',
				});
				if (answer === 'cancel') {
					newPackStickers = [];
					break;
				} else if (answer === 'retry') {
					// ... find out how to handle this
				} else if (answer === 'continue') {
					continue;
				}
			}
		}
		if (newPackStickers.length > 0) {
			packObject.data.stickers = [...packObject.data.stickers, ...newPackStickers];
			packObject.edited = true;
			SetCommittable(true);
		}
	}

	async function ReinitStickersAccountData () {
		State.packsData = { homeserver_url: State.account.homeserver, packs: [] };
		State.stickersData = [];
		State.widgetsData.stickerpicker = {
			content: {
				type: "m.stickerpicker",
				url: `${Defaults.stickerPickerUrl}?&config=&theme=$theme`,
				name: "Stickerpicker",
				managedBy: [
					`${Defaults.appIdentity}`,
					`${Defaults.appIdentity}/${Defaults.appInterface}`,
				],
			},
			sender: GetMatrixUserTag(State.account),
			state_key: "stickerpicker",
			type: "m.widget",
			id: "stickerpicker",
		};
		await RequestAccountWidgetsData(State.widgetsData);
		PreparePacksEditor();
	}

	async function CommitNewAccountStickersAndData () {
		SetCommittable(false);
		// upload new metadata for sticker packs which have been edited
		for (const packIndex in State.stickersData) {
			const pack = State.stickersData[packIndex];
			if (pack.edited && pack.data.stickers.length > 0) {
				const uploadResult = await RequestMatrixUploadFile(JSON.stringify(pack.data), 'application/json');
				State.packsData.packs[packIndex] = GetMatrixMediaUrl(uploadResult.content_uri);
			}
		}
		// remove empty sticker packs before committing, they break the picker
		for (const packIndex in State.stickersData) {
			if (State.stickersData[packIndex].data.stickers.length === 0) {
				State.stickersData[packIndex].data.stickers.splice(packIndex, 1);
				State.packsData.packs.splice(packIndex, 1);
			}
		}
		// finally upload new index file and update profile data
		const uploadResult = await RequestMatrixUploadFile(JSON.stringify(State.packsData), 'application/json');
		const packsUrlNew = GetMatrixMediaUrl(uploadResult.content_uri);
		State.widgetsData.stickerpicker.content.url = `${$`#LayoutCollectionOptions input[name="pickerUrl"]`.value}?&config=${packsUrlNew}&theme=$theme`;
		State.widgetsData.stickerpicker.content.managedBy = [
			`${Defaults.appIdentity}`,
			`${Defaults.appIdentity}/${Defaults.appInterface}`,
		];
		if (await RequestAccountWidgetsData(State.widgetsData)) {
			PreparePacksEditor();
		} else {
			SetCommittable(true);
		}
		
	}

	function DisplayAccountSelect () {
		ResetLayouts();
		for (const accountIndex in SpaccConfig.accounts) {
			const account = SpaccConfig.accounts[accountIndex];
			const accountButton = $().createElement('button');
			accountButton.style.width = 'calc(100% - 3em)';
			accountButton.innerHTML += `🐱️ ${GetMatrixUserTag(account)}`;
			accountButton.onclick = () => PreparePacksEditor(account);
			$`#LayoutAccountSelect`.appendChild(accountButton);
			const deleteButton = $().createElement('button');
			deleteButton.innerHTML += `❌️`;
			deleteButton.onclick = () => Spacc.ShowModal({ label: '❌️ Confirm remove account?', action: () => {
				SpaccConfig.accounts.splice(accountIndex, 1);
				SpaccConfig.Save();
				DisplayAccountSelect();
			} });
			$`#LayoutAccountSelect`.appendChild(deleteButton);
		}
		const addButton = $().createElement('button');
		addButton.innerHTML += '🆕️ Add new account';
		addButton.onclick = () => ShowLoginDialog();
		$`#LayoutAccountSelect`.appendChild(addButton);
		const demoButton = $().createElement('button');
		demoButton.innerHTML += '🎭️ Guest / Demo Mode';
		demoButton.onclick = () => PreparePacksEditor(null);
		$`#LayoutAccountSelect`.appendChild(demoButton);
	}

	async function ShowLoginDialog () {
		const modal = await Spacc.ShowModal({ label: Defaults.Strings.mLoginHint, extraHTML: `
			<label>
				Homeserver
				<input name="homeserver" type="url" placeholder="https://matrix.example.com" value="https://matrix.org"/>
			</label>
			<label>
				Username
				<input name="username" type="text" placeholder="AzureDiamond"/>
			</label>
			<label>
				Password
				<input name="password" type="password" placeholder="*******"/>
			</label>
			<label>
				Alternatively, import account via <code>access_token</code> instead
				<input name="useToken" type="checkbox"/>
			</label>
		`, action: (event, modalButton) => TryUserLogin(event, modalButton) });
		const buttonConfirm = modal.querySelector('button[name="confirm"]');
		buttonConfirm.disabled = true;
		for (const requiredElem of modal.querySelectorAll('input[type="url"], input[type="text"], input[type="password"]')) {
			for (const event of ['change', 'input', 'paste']) {
				requiredElem[`on${event}`] = () => {
					let allFilled = true;
					for (const requiredElem of modal.querySelectorAll('input[type="url"], input[type="text"], input[type="password"]')) {
						if (!requiredElem.value) {
							allFilled = false;
						}
					}
					buttonConfirm.disabled = !allFilled;
				};
			}
		}
	}

	async function TryUserLogin (event, modalButton) {
		const modal = modalButton.parentElement;
		const homeserver = modal.querySelector('input[name="homeserver"]').value;
		const username = modal.querySelector('input[name="username"]').value;
		const password = modal.querySelector('input[name="password"]').value;
		const loginData = {
			homeserver: homeserver,
			username: username,
		};
		if (modal.querySelector('input[name="useToken"]').checked) {
			loginData.token = password;
		} else {
			try {
				const response = await fetch(`${homeserver}/_matrix/client/v3/login`, {
					method: "POST",
					body: JSON.stringify({
						type: "m.login.password",
						identifier: {
							type: "m.id.user",
							user: username,
						},
						password: password,
					}),
				});
				const result = await response.json();
				if (response.status === 200) {
					loginData.token = result.access_token;
				} else {
					throw JSON.stringify(result);
				}
			} catch(err) {
				Spacc.ShowModal(`Error trying to get a session token: ${err}`);
				return;
			}
		}
		SpaccConfig.accounts.push(loginData);
		SpaccConfig.Save();
		DisplayAccountSelect();
	}

	function Main () {
		InitializeState();
		DisplayAccountSelect();
	}
	Main();
</script>

<style>
	:root {
		--margin: 8px;
	}

	* {
		box-sizing: border-box;
	}
	
	body, .ActionForm, .TableForm {
		margin: var(--margin);
		overflow-x: hidden;
	}
	
	details > summary > * {
		display: inline-block;
	}
	
	label > * {
		width: 100%;
	}

	#LayoutPacksList img {
		max-width: 64px;
	}

	#LayoutPackGrid img {
    	max-width: 128px;
	}
</style>
-												Add WIP MatrixStickerHelper to save some code

											
										
										
											2024-01-01 14:42:50 +01:00
+								<!DOCTYPE html>
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+								<meta charset="utf-8"/>
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+								<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+								<title>🃏️ [Matrix] Sticker Helper</title>
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+								<script src="../../../SpaccDotWeb/SpaccDotWeb.Alt.js" module="SpaccDotWeb"></script>
 								<script src="//SpaccInc.gitlab.io/SpaccDotWeb/SpaccDotWeb.Alt.js" module="SpaccDotWeb"></script>
 								<link rel="stylesheet" href="./paper.min.css"/>
-												Add WIP MatrixStickerHelper to save some code

											
										
										
											2024-01-01 14:42:50 +01:00
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+								<!--
 								<script module="Meta">({
 									Name: "🃏️ [Matrix] Sticker Helper",
 								})</script>
 								-->
 								<!--
 								TODO:
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+								* more error handling and debug logging
 								** manage consistency between modal errors and messages in debug log (probably will need a SpaccDotWeb function for that)
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+								* immediately show an image after uploading in the grid
-												Update MatrixStickerPicker, index, add README links

											
										
										
											2024-01-04 01:58:42 +01:00
+								* allow reordering, renaming, deleting stickers and packs
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+								** maybe by default show the sticker packs in the same order in the list as the picker does, or at the very least commit them with recent stickers being at the beginning of the list
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+								* import from line, import video telegram stickers, import video files, import files from URL
-												Update MatrixStickerPicker, index, add README links

											
										
										
											2024-01-04 01:58:42 +01:00
+								* save a linkback to a sticker pack in every single sticker optionally, allowing stickers to be copied, possibly from matrix.to URL
 								** set this and other options as persisting in the user account data
 								* fix sticker reimport protection not working?
 								* in a lot of places that only do HTTP(s), handle also mxc:// URLs
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+								* open graph, PWA things (webmanifest, worker for offline support)
-												Update MSH

											
										
										
											2024-01-09 02:06:08 +01:00
+								* fix stickers from file/Telegram in demo mode (we must store the data uri img srcs in RAM for viewing)
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+								* UI improvements like blocking buttons in inconsistent states, adding more feedbacks for long operations
 								** more loading messages and overlays
-												Update MSH

											
										
										
											2024-01-09 02:06:08 +01:00
+								** fix race conditions between actions like user going back while app is committing or loading packs (including commit button)
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+								* compatibility build / add polyfills
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+								* multilanguage?
 								* gif encoding without webserver (without ES import)
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+								-->
-												More progress

											
										
										
											2024-01-03 00:31:15 +01:00
+								<div id="Main" hidden="true">
 									<div id="LayoutAccountSelect"></div>
 									<div id="LayoutCollectionActions">
 										<button name="back">🔙️ Go Back</button>
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+										<button name="commit">📝️ Commit Changes</button>
-												Update MSH

											
										
										
											2024-01-09 02:06:08 +01:00
+										<button name="commitFake" disabled="true">📝️ Can't commit changes in Demo Mode</button>
-												More progress

											
										
										
											2024-01-03 00:31:15 +01:00
+									</div>
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+									<div id="LayoutFeedback"></div>
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+									<div style="overflow: auto;">
 										<div id="LayoutPacksList" class="margin-small" style="width: max-content;"></div>
 									</div>
 									<div class="margin-small" id="LayoutPackActions">
 										<input name="packName" type="text" placeholder="Pack Name/Description" style="display: inline-block;" disabled/>
 										<button name="packDelete" disabled title="Coming soon!">❌️ Delete Pack</button>
 									</div>
 									<div class="margin-small" id="LayoutPackGrid"></div>
-												More progress

											
										
										
											2024-01-03 00:31:15 +01:00
 									<details class="col border margin" id="LayoutCollectionOptions">
 										<summary>
 											<p>Options</p>
 										</summary>
 										<p>
 											Reinitializing sticker data for your account will simply override
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+											the <code>stickerpicker</code> subfield in its <code>m.widgets</code> field.
-												More progress

											
										
										
											2024-01-03 00:31:15 +01:00
+										</p>
 										<button name="reinit">💡️ Reinitialize sticker data as new</button>
 										<details class="col border margin">
 											<summary>
 												<p>Advanced</p>
 											</summary>
 											<label>
 												Sticker selector app URL
 												<input name="pickerUrl" type="text"/>
 											</label>
 										</details>
 									</details>
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
 									<tgs-player style="display: none;" hidden="true"></tgs-player>
-												More progress

											
										
										
											2024-01-03 00:31:15 +01:00
+								</div>
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+								<p class="noscript">
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+									This application requires modern JavaScript and cutting-edge web standards.
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+								</p>
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+								<hr class="margin-large"/>
-												More progress

											
										
										
											2024-01-03 00:31:15 +01:00
 								<p>
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+									🃏️ [Matrix] Sticker Helper <a name="version" title="Click to show changelog" href="javascript:;">WIP Version</a>,
 									created with 💕️ and ☕️ by <a href="https://hub.octt.eu.org">OctoSpacc</a>.
-												More progress

											
										
										
											2024-01-03 00:31:15 +01:00
+									<br/>
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+									Made possible by <a href="https://github.com/maunium/stickerpicker" target="_blank">Maunium sticker picker</a>,
 									brought to paper thanks to <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a>.
-												More progress

											
										
										
											2024-01-03 00:31:15 +01:00
+								</p>
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+								<p>
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+									<b>Note</b>: importing stickers from files/Telegram is currently experimental, and error handling isn't the best.
-												Hotfixes

											
										
										
											2024-01-09 02:11:19 +01:00
+									Make sure that your Internet connection is stable when uploading/importing stickers, and be patient if it seems like the app does nothing for some time. Don't navigate around the app when stickers are loading or importing.
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+								</p>
-												More progress

											
										
										
											2024-01-03 00:31:15 +01:00
+								<details class="col border margin">
 									<summary>
-												Update MatrixStickerPicker, index, add README links

											
										
										
											2024-01-04 01:58:42 +01:00
+										<p>Help and Information</p>
-												More progress

											
										
										
											2024-01-03 00:31:15 +01:00
+									</summary>
-												Update MatrixStickerPicker, index, add README links

											
										
										
											2024-01-04 01:58:42 +01:00
+									<h3>What is [Matrix] Sticker Helper?</h3>
-												More progress

											
										
										
											2024-01-03 00:31:15 +01:00
+									<p>
-												Update MatrixStickerPicker, index, add README links

											
										
										
											2024-01-04 01:58:42 +01:00
+										I created this app for the pursuit of an user-friendly way
 										of managing sticker packs on <a href="https://matrix.org" target="_blank">Matrix</a>,
 										that could also work well for other people,
 										after finding the <code>maunium/stickerpicker</code> import procedure uncomfortable.
 										<br/>
 										Read more (and follow the development I guess?) at
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+										<a href="https://octospacc.altervista.org/?s=%22%23MatrixStickerHelper%22">octospacc.altervista.org/#MatrixStickerHelper</a>.
-												Update MatrixStickerPicker, index, add README links

											
										
										
											2024-01-04 01:58:42 +01:00
+									</p>
 									<h3>How can I add sticker packs to my collection?</h3>
 									<p>
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+										To add new sticker packs to your collection, you can use the dedicated section, which offers 2 options. You can:
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+									</p>
 									<ul>
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+										<li>
 											Either leave the optional text field blank to create a brand-new pack, to be filled with stickers by importing media files;
 										</li>
 										<li>
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+											Or, to import packs from one of a few different supported sources, input an URL. Supported URLs are:
 											<ul>
 												<li>
 													Those pointing to the JSON data file (in the format used by <code>maunium/stickerpicker</code>)
 													of an already existing collection (<code>index.json</code>) or individual pack (shared by other users, or backed-up by you),
 													assuming the file is fetchable with CORS restrictions.
 													<br/>
 													The URL must begin with <code>http://</code> or <code>https://</code>.
 													For example, <code>https://maunium.net/stickers-demo/packs/pusheen02.json</code>.
 												</li>
 												<li>
-												Update MSH

											
										
										
											2024-01-09 02:06:08 +01:00
+													URLs of Telegram sticker packs, either Static (PNG/WebP) or Animated (TGS). Video stickers (WebM) will be supported in the future.
 													(For the technical details, see <a href="https://core.telegram.org/stickers" target="_blank">https://core.telegram.org/stickers</a>.)
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+													<br/>
 													The URL must be in the format "{optionally, <code>http://</code> or <code>https://</code>}<!--
 													-->{<code>t.me</code> or <code>telegram.me</code>}<code>/addstickers/</code>{name of the pack}".
 													For example, <code>t.me/addstickers/FishPuffer</code>.
 												</li>
 											</ul>
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+										</li>
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+										</ul>
 									<p>
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+										Currently, you can import common picture files (JPEG, WebP, PNG, GIF) from your device's storage as stickers.
 										Sooner, you will be able to also import media files from URL, as well as importing video files (like MP4) for automatic conversion into GIF.
-												Update MatrixStickerPicker, index, add README links

											
										
										
											2024-01-04 01:58:42 +01:00
+										<br/>
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+										Importing stickers and packs from Matrix messages, or the LINE store, is planned for the more distant future.
-												Update MatrixStickerPicker, index, add README links

											
										
										
											2024-01-04 01:58:42 +01:00
+									</p>
 									<h3>Stickerpicker information</h3>
 									<p>
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+										This project is not a substitute of <code>maunium/stickerpicker</code>,
 										is not affiliated with it, and doesn't use any part of its code, but rather complements it.
 										<br/>
-												Update MatrixStickerPicker, index, add README links

											
										
										
											2024-01-04 01:58:42 +01:00
+										It sets that up as the sticker picker integration for your Matrix account if you don't have it already,
 										and allows you to manage your sticker collection in a way that is fully compatible with it, but without the manual setup.
 									</p>
 									<h3>Open-source, licensing, security, collaboration</h3>
 									<p>
 										This app is open-source, and licensed under the
 										<a href="https://www.gnu.org/licenses/agpl-3.0.html" target="_blank">GNU Affero General Public License Version 3</a>.
 										To modify the app, or to check its code for security reasons, you can simply "View Page Source" in your browser.
 										<br/>
 										This project additionally relies on the following third-party libraries:
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+									</p>
 									<ul>
 										<li><a target="_blank" href="https://gitlab.com/SpaccInc/SpaccDotWeb">SpaccDotWeb</a></li>
 										<li><a target="_blank" href="https://github.com/gram-js/gramjs">GramJS</a></li>
 										<li><a target="_blank" href="https://github.com/LottieFiles/lottie-player">Lottie-Player</a></li>
 										<li><a target="_blank" href="https://github.com/jamsinclair/gifski-wasm">gifski-wasm</a></li>
 									</ul>
 									<p>
 										Additionally, if there is any issue you want to report, tip you want to give, or if you want to send a pull request,
-												Update MatrixStickerPicker, index, add README links

											
										
										
											2024-01-04 01:58:42 +01:00
+										feel free to do so at the OctoSpacc Hub repository:
 										<a href="https://gitlab.com/octospacc/octospacc.gitlab.io">https://gitlab.com/octospacc/octospacc.gitlab.io</a>
 										(or contact me via Matrix, see below).
 									</p>
 									<h3>Other help</h3>
 									<p>
 										There is no one around to actually help here though... yet.
 										Maybe join my Matrix space, if you need some support:
 										<a href="https://matrix.to/#/#Spacc:matrix.org">https://matrix.to/#/#Spacc:matrix.org</a>.
-												More progress

											
										
										
											2024-01-03 00:31:15 +01:00
+									</p>
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+									<div id="LayoutChangelog">
 										<h3>Changelog</h3>
-												Update MSH

											
										
										
											2024-01-09 02:06:08 +01:00
+										<p>[2024-01-09]</p>
 										<ul>
 											<li>Experimental guest/demo mode</li>
 											<li>Minor bugfixes (including for Firefox compatibility, and Telegram) and UX improvements (including debug log)</li>
 										</ul>
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+										<p>[2024-01-08]</p>
 										<ul>
 											<li>Importing Static and Animated sticker packs from Telegram URLs</li>
 											<li>Minor bugfixes and UX improvements</li>
 										</ul>
 										<p>[2024-01-05]</p>
 										<ul>
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+											<li>Uploading stickers from (multiple) local image files</li>
-												Hotfix MatrixStickerHelper

											
										
										
											2024-01-06 00:23:21 +01:00
+											<li>Deleting individual stickers from packs (+ bug hotfix)</li>
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+											<li>Various bugfixes and UX improvements</li>
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+										</ul>
 										<p>[2024-01-04]</p>
 										<ul>
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+											<li>Importing entire sticker collections from URL</li>
 											<li>Fix stickers not loading from accounts already setup with stock stickerpicker</li>
 											<li>Add help and changelog</li>
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+										</ul>
 										<p>[2024-01-05]</p>
 										<ul>
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+											<li>First release</li>
 											<li>Account management (logging in, reading and writing data)</li>
 											<li>Visualization of current account stickers</li>
 											<li>Importing sticker packs from URL</li>
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+										</ul>
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+										</p>
 									</div>
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+									<h3>Debug Log</h3>
 									<textarea id="LayoutDebugLog" readonly="true" style="width: 100%;" rows="10"></textarea>
-												More progress

											
										
										
											2024-01-03 00:31:15 +01:00
+								</details>
-												Add WIP MatrixStickerHelper to save some code

											
										
										
											2024-01-01 14:42:50 +01:00
+								<script module="Main" type="module">
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+									const Spacc = SpaccDotWeb.AppInit();
-												Add WIP MatrixStickerHelper to save some code

											
										
										
											2024-01-01 14:42:50 +01:00
 									const State = {};
 									const Defaults = {
-												Broken and needs a more ortodox restructuring, saving WIP

											
										
										
											2024-01-01 19:11:18 +01:00
+										stickerSelectorUrl: "https://maunium.net/stickers-demo/",
-												Add WIP MatrixStickerHelper to save some code

											
										
										
											2024-01-01 14:42:50 +01:00
+										appIdentity: "org.eu.octt.MatrixStickerHelper",
 										appInterface: "v1",
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+										wpPastebin: "https://octospacc.altervista.org",
 										telegramTokens: [
 											"17349:344583e45741c457fe1862106095a5eb",  // <https://github.com/telegramdesktop/tdesktop/blob/dev/Telegram/SourceFiles/config.h>
 											"611335:d524b414d21f4d37f08684c1df41ac9c", // <https://github.com/telegramdesktop/tdesktop/blob/dev/.github/workflows/win.yml>
 										],
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+										Strings: {
-												More progress

											
										
										
											2024-01-03 00:31:15 +01:00
+											mConfirmCommit: "Confirm committing account data?",
 											mMustInit: "Your account must first be initialized to handle stickers.",
 											mNotManaged: `
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+												Your account is set-up with a sticker picker, but it's not marked as being managed by this app.
 												This could mean that you are currently using an incompatible sticker picker.
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+												<br/>
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+												You can try to continue anyway if you think it should work, otherwise you should reinitialize sticker data.
 											`,
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+											mCreatePackHint: `
-												Update MSH

											
										
										
											2024-01-09 02:06:08 +01:00
+												Optionally include the URL of a sticker pack for Maunium (JSON format) or from Telegram to import it.
 												Otherwise, leave the field empty to create a brand-new pack, importing your own media files as stickers.
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+											`,
 											mLoginHint: `
-												Update MatrixStickerPicker, index, add README links

											
										
										
											2024-01-04 01:58:42 +01:00
+												Please login with your Matrix account.
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+												<br/>
 												(Your login details are processed locally and only sent to the homeserver you specified.)
 											`,
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+										}
-												Add WIP MatrixStickerHelper to save some code

											
										
										
											2024-01-01 14:42:50 +01:00
+									};
-												Update MSH

											
										
										
											2024-01-09 02:06:08 +01:00
+									let SpaccConfig = localStorage.getItem('SpaccInc-Matrix-Config');
 									SpaccConfig = (SpaccConfig ? JSON.parse(SpaccConfig) : {
 										accounts: [],
 									});
 									SpaccConfig.Save = () => localStorage.setItem('SpaccInc-Matrix-Config', JSON.stringify(SpaccConfig));
 									let AppConfig = localStorage.getItem(Defaults.appIdentity);
 									AppConfig = (AppConfig ? JSON.parse(AppConfig) : {});
 									AppConfig.Save = () => localStorage.setItem(Defaults.appIdentity, JSON.stringify(AppConfig));
-												Add WIP MatrixStickerHelper to save some code

											
										
										
											2024-01-01 14:42:50 +01:00
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+									const Logger = (content, type) => {
 										if (['f', 'feedback'].includes(type.toLowerCase())) {
-												Update MSH

											
										
										
											2024-01-09 02:06:08 +01:00
+											$`#LayoutFeedback`.innerHTML = `<p>${content}</p>`;
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+										}
 										$`#LayoutDebugLog`.innerHTML += `[${type}] [${new Date().toISOString().split('.').slice(0, -1).join('.')}] ${content}\n`;
 									}
 									const ArrayRandom = (array) => array[~~(Math.random() * array.length)];
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+									const $ = (query, ...params) => (query
 										? document.querySelector(Array.isArray(query)
 											? (params.length > 0
 												? params.map((a, i) => `${query[i]}${a}`).join('')
 												: query.join(''))
 											: query)
 										: document);
-												Add WIP MatrixStickerHelper to save some code

											
										
										
											2024-01-01 14:42:50 +01:00
-												Update MSH

											
										
										
											2024-01-09 02:06:08 +01:00
+									const LogFetch = (url, options) => {
 										Logger(`Trying to fetch ${url}`, 'd');
 										return fetch(url, options);
 									}
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+									const GetMatrixUserTag = (account) => `@${account.username}:${account.homeserver.split('://')[1]}`;
-												Broken and needs a more ortodox restructuring, saving WIP

											
										
										
											2024-01-01 19:11:18 +01:00
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+									const GetMatrixMediaUrl = (mxcId, props) => (mxcId ? `${props?.homeserver || `https://${mxcId.split('mxc://')[1].split('/')[0]}`}/_matrix/media/r0/${props?.type || 'download'}/${mxcId.split('mxc://')[1]}` : undefined);
-												Broken and needs a more ortodox restructuring, saving WIP

											
										
										
											2024-01-01 19:11:18 +01:00
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+									//const GetHttpOrMatrixUrl = (url) => ;
 									const IsUrlHttpOrS = (url) => {
 										url = url.toLowerCase();
 										if (url.startsWith('http://')) return 'http'
 										else if (url.startsWith('https://')) return 'https'
 										else return false
 									};
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+									const SafeStripFileExtension = (name, extensions) => {
 										const parts = name.split('.');
 										return (parts.length === 1
 											? name
 											: (extensions.includes(parts.slice(-1)[0].toLowerCase())
 												? parts.slice(0, -1)
 												: parts
 											).join('.')
 										);
 									};
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+									function ReadFileAsync (file, method='readAsDataURL') {
 										return new Promise((resolve) => {
 											const reader = new FileReader();
 											reader.onload = (event) => {
 												resolve(event.target.result);
 											};
 											reader[method](file);
 										});
 									}
 									// <https://stackoverflow.com/questions/12710001/how-to-convert-uint8-array-to-base64-encoded-string/66046176#66046176>
 									async function BufferToBase64 (buffer) {
 										return await new Promise((resolve) => {
 											const reader = new FileReader();
 											reader.onload = () => resolve(reader.result);
 											reader.readAsDataURL(new Blob([buffer]));
 										});
 									}
 									// <https://stackoverflow.com/questions/45365571/convert-an-image-to-imagedata-uint8clampedarray/68319943#68319943>
 									async function GetImageDataFromSource (source, sizeDivisor=1) {
 										const image = Object.assign(new Image(), { src: source });
 										await new Promise((resolve) => image.addEventListener('load', () => resolve()));
 										const context = Object.assign(document.createElement('canvas'), {
 											width: (image.width / sizeDivisor),
 											height: (image.height / sizeDivisor),
 										}).getContext('2d');
 										context.imageSmoothingEnabled = false;
 										context.drawImage(image, 0, 0, (image.width / sizeDivisor), (image.height / sizeDivisor));
 										return context.getImageData(0, 0, (image.width / sizeDivisor), (image.height / sizeDivisor));
 									}
 									const ReadBufferOrBlob = async (data) => await (data instanceof Uint8Array ? await BufferToBase64 : ReadFileAsync)(data);
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+									function ResetLayouts () {
 										$`#Main`.hidden = false;
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+										for (const id of ['LayoutFeedback', 'LayoutAccountSelect', 'LayoutPacksList', 'LayoutPackGrid']) {
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+											$`#${id}`.innerHTML = '';
 										}
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+										for (const id of ['LayoutCollectionActions', 'LayoutPackActions', 'LayoutCollectionOptions']) {
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+											$`#${id}`.hidden = true;
 										}
 										for (const id of ['LayoutCollectionOptions']) {
 											$`#${id}`.open = false;
 										}
-												Hotfixes

											
										
										
											2024-01-09 02:11:19 +01:00
+										SetCommittable(false);
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+									}
-												Broken and needs a more ortodox restructuring, saving WIP

											
										
										
											2024-01-01 19:11:18 +01:00
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+									function InitializeState () {
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+										for (const elem of document.querySelectorAll('.noscript')) {
 											elem.remove();
 										}
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+										$`#LayoutCollectionActions button[name="back"]`.onclick = () => DisplayAccountSelect();
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+										$`#LayoutCollectionOptions input[name="pickerUrl"]`.value = Defaults.stickerPickerUrl;
 										$`#LayoutChangelog > h3`.remove();
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+										const changelogHtml = `<a style="visibility: hidden; position: absolute; top: 0;"></a>${$`#LayoutChangelog`.innerHTML}`;
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+										$`#LayoutChangelog`.remove();
 										$`a[name="version"]`.innerHTML = `v${changelogHtml.split('[')[1].split(']')[0]}`;
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+										$`a[name="version"]`.onclick = async () => (await Spacc.ShowModal({ extraHTML: changelogHtml })).querySelector('a').scrollIntoView('a');
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+									}
-												Broken and needs a more ortodox restructuring, saving WIP

											
										
										
											2024-01-01 19:11:18 +01:00
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+									async function RequestAccountWidgetsData (postData) {
 										const request = await fetch(`${State.account.homeserver}/_matrix/client/v3/user/${GetMatrixUserTag(State.account)}/account_data/m.widgets`, {
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+											method: (postData ? "PUT" : "GET"),
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+											headers: { Authorization: `Bearer ${State.account.token}` },
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+											body: JSON.stringify(postData),
 										});
 										const result = await request.json();
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+										if (request.status === 200) {
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+											return result;
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+										} else if (result.errcode === 'M_NOT_FOUND') {
 											return {};
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+										} else {
 											Spacc.ShowModal(`Error: ${JSON.stringify(result)}`);
 										}
-												Add WIP MatrixStickerHelper to save some code

											
										
										
											2024-01-01 14:42:50 +01:00
+									}
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+									async function RequestMatrixUploadFile (fileData, fileMime) {
-												Update MSH

											
										
										
											2024-01-09 02:06:08 +01:00
+										if (!State.account) return {};
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+										const request = await fetch(`${State.account.homeserver}/_matrix/media/v3/upload`, {
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+											method: "POST",
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+											headers: { Authorization: `Bearer ${State.account.token}`, ...(fileMime && { "Content-Type": fileMime }) },
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+											body: fileData,
 										});
 										const result = await request.json();
 										if (request.status === 200) {
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+											Logger(`Uploaded ${fileMime} data to ${result.content_uri}.`, 'd');
-												Update MSH

											
										
										
											2024-01-09 02:06:08 +01:00
+											return result;
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+										} else {
 											Spacc.ShowModal(`Error: ${JSON.stringify(result)}`);
 										}
 									}
-												Broken and needs a more ortodox restructuring, saving WIP

											
										
										
											2024-01-01 19:11:18 +01:00
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+									const IsUrlTelegramSticker = (url) => {
 										const [domain, path] = url.toLowerCase().split('://')[IsUrlHttpOrS(url) ? 1 : 0].split('/');
 										return (['t.me', 'telegram.me'].includes(domain) && path === 'addstickers');
 									};
 									async function TryGetTelegramSession () {
 										if (!window.telegram) {
 											await Spacc.RequireScript('telegram.js');
 										}
 										try {
 											Logger(`Initializing a Telegram session, please wait...`, 'f');
 											const [apiId, apiToken] = ArrayRandom(Defaults.telegramTokens).split(':');
 											const request = await fetch(`${Defaults.wpPastebin}/wp-content/uploads/octospacc/scripts/stuff.php?&Thing=SiteWpJsonCors&AccessToken=9ab6e20c&$Query=wp/v2/paste/958?password=${Defaults.wpPastebin}/paste/958/?ppt=4c7f6ed8f9f268e05bd7509bd22f578247567be02369dba2707383cdd20f26dd`);
 											const result = await request.json();
 											const token = atob(result.content.rendered.split(',')[1].split('"')[0]).split('\0').slice(-3)[0];
-												Update MSH

											
										
										
											2024-01-09 02:06:08 +01:00
+											const sessionString = new telegram.sessions.StringSession(AppConfig.lastTelegramSession);
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+											const client = new telegram.TelegramClient(sessionString, Number(apiId), apiToken, { connectionRetries: 5 });
 											await client.start({ botAuthToken: token });
-												Update MSH

											
										
										
											2024-01-09 02:06:08 +01:00
+											AppConfig.lastTelegramSession = client.session.save();
 											AppConfig.Save();
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+											await client.connect();
 											State.telegramClient = client;
 											return client;
 										} catch (err) {
 											Spacc.ShowModal(`Error trying to initialize a Telegram session: ${err}`);
 										}
 									}
 									async function ConvertTgsToGif (stickerDocument, stickerBuffer) {
 										await Spacc.RequireScript('tgs-player.js');
 										if (!window.GifSkiEncoder) {
 											const script = document.createElement('script');
 											script.type = 'module';
 											script.innerHTML = `
 												import gifskiWasm from './gifskiWasm.mjs';
 												window.GifSkiEncoder = gifskiWasm;
 											`;
 											document.body.appendChild(script);
 										}
 										while (!window.GifSkiEncoder) {
 											await SpaccDotWeb.Sleep(50);
 										}
 										const renderedFrames = [];
 										// reducing frames and dimensions since gifski is slow (TODO: make it user-customizable, and optionally provide a faster encoder)
 										const sizeDivisor = 3;
 										const framesDivisor = 3;
 										const tgsPlayer = document.querySelector('tgs-player');
 										tgsPlayer.load(await BufferToBase64(stickerBuffer));
 										await new Promise((resolve) => tgsPlayer.addEventListener('ready', () => resolve()));
 										for (let i=0; i<tgsPlayer._lottie.totalFrames; i+=framesDivisor) {
 											tgsPlayer.seek(i);
 											const svgFrame = tgsPlayer.snapshot(false);
 											const renderedFrame = await GetImageDataFromSource(`data:image/svg+xml;base64,${btoa(svgFrame)}`, sizeDivisor);
 											renderedFrames.push(renderedFrame);
 										}
 										return await GifSkiEncoder({
 											frames: renderedFrames,
-												Update MSH

											
										
										
											2024-01-09 02:06:08 +01:00
+											width: (stickerDocument.attributes[0].originalArgs.w / sizeDivisor),
 											height: (stickerDocument.attributes[0].originalArgs.h / sizeDivisor),
 											fps: (tgsPlayer._lottie.frameRate / framesDivisor),
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+											quality: 60,
 										});
 									}
-												Update MSH

											
										
										
											2024-01-09 02:06:08 +01:00
+									function SetCommittable (status) {
 										// TODO: make state consistent in other places to avoid resetting the buttons every time
 										if (State.account) {
 											$`#LayoutCollectionActions button[name="commit"]`.hidden = false;
 											$`#LayoutCollectionActions button[name="commitFake"]`.hidden = true;
 											$`#LayoutCollectionActions button[name="commit"]`.disabled = !status;
 										} else {
 											$`#LayoutCollectionActions button[name="commit"]`.hidden = true;
 											$`#LayoutCollectionActions button[name="commitFake"]`.hidden = false;
 										}
 									}
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+									async function PreparePacksEditor (account) {
-												Hotfixes

											
										
										
											2024-01-09 02:11:19 +01:00
+										if (account !== undefined) {
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+											State.account = account;
 										}
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+										ResetLayouts();
-												Update MSH

											
										
										
											2024-01-09 02:06:08 +01:00
+										State.packsData = { homeserver_url: State.account?.homeserver, packs: [] };
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+										State.stickersData = [];
-												Update MSH

											
										
										
											2024-01-09 02:06:08 +01:00
+										if (account === null) {
 											return DisplayPacksEditor();
 										}
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+										$`#LayoutCollectionActions`.hidden = false;
 										$`#LayoutCollectionOptions`.hidden = false;
-												Update MSH

											
										
										
											2024-01-09 02:06:08 +01:00
+										SetCommittable(false);
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+										$`#LayoutCollectionOptions button[name="reinit"]`.onclick = () => Spacc.ShowModal({
 											label: Defaults.Strings.mConfirmCommit,
 											action: () => ReinitStickersAccountData(),
 										});
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+										Logger(`Fetching Matrix account data, please wait...`, 'f');
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+										State.widgetsData = await RequestAccountWidgetsData();
 										if (State.widgetsData) {
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+											const pickerUrlFull = State.widgetsData?.stickerpicker?.content?.url;
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+											const isManaged = State.widgetsData?.stickerpicker?.content?.managedBy?.includes(`${Defaults.appIdentity}/${Defaults.appInterface}`);
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+											const packsUrl = (new URLSearchParams(pickerUrlFull?.split('?')[1])).get('config');
 											if (pickerUrlFull) {
 												$`#LayoutCollectionOptions input[name="pickerUrl"]`.value = pickerUrlFull.split('?')[0];
 											}
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+											if (!isManaged || !State.widgetsData?.stickerpicker) {
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+												$`#LayoutCollectionOptions`.open = true;
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+												if (!State.widgetsData?.stickerpicker) {
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+													Logger(Defaults.Strings.mMustInit, 'f');
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+													// we always init sticker data from the default URL to avoid headaches
 													$`#LayoutCollectionOptions input[name="pickerUrl"]`.value = '';
 													$`#LayoutCollectionOptions input[name="pickerUrl"]`.disabled = true;
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+												} else
 												if (!isManaged) {
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+													$`#LayoutFeedback`.innerHTML = `
-												More progress

											
										
										
											2024-01-03 00:31:15 +01:00
+														<p>${Defaults.Strings.mNotManaged}</p>
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+														<button name="continue">⏭️ Continue</button>
 													`;
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+													$`#LayoutFeedback > button[name="continue"]`.onclick = () => {
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+														$`#LayoutCollectionOptions`.open = false;
-												Update MatrixStickerPicker, index, add README links

											
										
										
											2024-01-04 01:58:42 +01:00
+														if (State.widgetsData?.stickerpicker?.content?.url && !packsUrl) {
 															// assuming the user is probably coming from stock maunium/stickerpicker,
 															// and we know that it loads data from a fixed URL when no config param is specified,
 															// we can try loading that when a generic URL is present
 															const packsUrlsPrefix = `${State.widgetsData?.stickerpicker?.content?.url.split('?')[0]}/packs/`;
 															DisplayPacksEditor(`${packsUrlsPrefix}index.json`, packsUrlsPrefix);
 															return;
 														}
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+														DisplayPacksEditor(packsUrl);
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+													};
 												}
 											} else {
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+												DisplayPacksEditor(packsUrl);
-												Broken and needs a more ortodox restructuring, saving WIP

											
										
										
											2024-01-01 19:11:18 +01:00
+											}
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+										} else {
 											State.widgetsData = {};
-												Broken and needs a more ortodox restructuring, saving WIP

											
										
										
											2024-01-01 19:11:18 +01:00
+										}
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+									}
-												More progress

											
										
										
											2024-01-03 00:31:15 +01:00
-												Update MatrixStickerPicker, index, add README links

											
										
										
											2024-01-04 01:58:42 +01:00
+									async function DisplayPacksEditor (packsUrl, packsUrlPrefix) {
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+										ResetLayouts();
 										$`#LayoutCollectionActions`.hidden = false;
 										$`#LayoutCollectionOptions`.hidden = false;
-												More progress

											
										
										
											2024-01-03 00:31:15 +01:00
+										$`#LayoutCollectionActions button[name="commit"]`.onclick = () => Spacc.ShowModal({
 											label: Defaults.Strings.mConfirmCommit,
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+											action: () => CommitNewAccountStickersAndData(),
-												More progress

											
										
										
											2024-01-03 00:31:15 +01:00
+										});
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+										if (packsUrl) {
-												More progress

											
										
										
											2024-01-03 00:31:15 +01:00
+											try {
-												Update MSH

											
										
										
											2024-01-09 02:06:08 +01:00
+												const request = await LogFetch(packsUrl);
-												More progress

											
										
										
											2024-01-03 00:31:15 +01:00
+												if (request.status === 200) {
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+													State.packsData = await request.json();
-												More progress

											
										
										
											2024-01-03 00:31:15 +01:00
+												}
 											} catch(err) {
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+												Spacc.ShowModal(`${err} ${packsUrl}`);
-												More progress

											
										
										
											2024-01-03 00:31:15 +01:00
+											}
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+										}
-												Update MatrixStickerPicker, index, add README links

											
										
										
											2024-01-04 01:58:42 +01:00
+										if (packsUrlPrefix) {
 											for (const packIndex in State.packsData.packs) {
 												State.packsData.packs[packIndex] = `${packsUrlPrefix}${State.packsData.packs[packIndex]}`;
 											}
 										}
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+										const addButton = $().createElement('button');
 										addButton.name = 'add';
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+										addButton.innerHTML = '➕️ Create/Import Pack';
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+										addButton.onclick = (event) => Spacc.ShowModal({ label: Defaults.Strings.mCreatePackHint, extraHTML: `
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+											<label>
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+												<input name="packUrl" type="text" placeholder="https://example.com/example.json, t.me/addstickers/Pack, ..."/>
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+											</label>
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+										`, action: (event, modalButton) => CreateNewPack(event, modalButton) });
 										$`#LayoutPacksList`.appendChild(addButton);
 										LoadStickerPacksList();
 									}
 									async function LoadStickerPacksList () {
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+										for (const packIndex in State.packsData.packs) {
 											const packUrl = State.packsData.packs[packIndex];
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+											try {
-												Update MSH

											
										
										
											2024-01-09 02:06:08 +01:00
+												const request = await LogFetch(packUrl);
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+												const packData = await request.json();
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+												const packObject = { data: packData, index: packIndex, edited: false };
 												State.stickersData.push(packObject);
 												AddNewPackButton(packObject);
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+											} catch(err) {
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+												Spacc.ShowModal(`${err} ${packUrl}`);
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+											}
 										}
 									}
-												Update MatrixStickerPicker, index, add README links

											
										
										
											2024-01-04 01:58:42 +01:00
+									async function CreateNewPack (event, modalButton, packUrl) {
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+										let packData = { stickers: [] };
 										// if the user specified an URL, try downloading data from there
-												Update MatrixStickerPicker, index, add README links

											
										
										
											2024-01-04 01:58:42 +01:00
+										packUrl ||= modalButton.parentElement.querySelector('input[name="packUrl"]').value;
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+										// TODO: warn if an existing pack is imported from that URL and let the user choose if to continue or cancel
 										//if (packUrl && IsAnyPackImportedFrom(packUrl) && await Spacc.ShowModal({ label: Defaults.Strings.mAlreadyImported, action: () => 'continue', actionCancel: () => 'cancel' }) === 'continue') {
 										//	return;
 										//};
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+										if (packUrl && !IsUrlTelegramSticker(packUrl)) {
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+											try {
-												Update MSH

											
										
										
											2024-01-09 02:06:08 +01:00
+												const request = await LogFetch(packUrl);
-												More progress

											
										
										
											2024-01-03 00:31:15 +01:00
+												packData = await request.json();
-												Update MSH

											
										
										
											2024-01-09 02:06:08 +01:00
+												// imported JSON is an index, so we try to import all its packs
-												Update MatrixStickerPicker, index, add README links

											
										
										
											2024-01-04 01:58:42 +01:00
+												if (packData.packs && !packData.stickers) {
 													for (const pack of packData.packs) {
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+														const packUrlPrefix = (IsUrlHttpOrS(pack) ? '' : packUrl.split('/').slice(0, -1).join('/'));
-												Update MatrixStickerPicker, index, add README links

											
										
										
											2024-01-04 01:58:42 +01:00
+														await CreateNewPack(null, null, `${packUrlPrefix}/${pack}`);
 													}
 													return;
 												}
-												Update MSH

											
										
										
											2024-01-09 02:06:08 +01:00
+												SetCommittable(true);
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+											} catch(err) {
 												Spacc.ShowModal(`${err} ${packUrl}`);
 												return;
-												More progress

											
										
										
											2024-01-03 00:31:15 +01:00
+											}
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+										}
 										packData[Defaults.appIdentity] = {
 											...(packUrl && { importedFrom: packUrl }),
 										};
 										State.packsData.packs.push(null);
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+										const packObject = { data: packData, index: State.stickersData.length, edited: true };
 										State.stickersData.push(packObject);
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+										if (packUrl && IsUrlTelegramSticker(packUrl)) {
-												Update MSH

											
										
										
											2024-01-09 02:06:08 +01:00
+											TryImportTelegramPack(packUrl, packObject);
 										}
 										AddNewPackButton(packObject, event, modalButton).click();
 									}
 									async function TryImportTelegramPack (packUrl, packObject) {
 										const tgClient = (State.telegramClient || await TryGetTelegramSession());
 										try {
 											Logger(`Fetching Telegram sticker data...`, 'f');
 											const packResult = await tgClient.invoke(
 												new telegram.Api.messages.GetStickerSet({
 													stickerset: new telegram.Api.InputStickerSetShortName({
 														shortName: packUrl.split('/').slice(-1)[0],
 													}),
 													hash: 0,
 												})
 											);
 											// TODO: write all important provenance information in pack and sticker meta like the manium importer does, after checking what's actually useful
 											packObject.data = { ...packObject.data,
 												title: packResult.set.title,
 												// accessHash.value (👇️)
 												// hash
 												// id.value (👇️)
 												// shortName
 											};
 											for (const stickerDocument of packResult.documents) {
 												let mimeType = stickerDocument.mimeType;
 												let stickerImage = await tgClient.downloadMedia(stickerDocument);
 												// TODO: video stickers
 												if (mimeType === 'application/x-tgsticker') {
 													mimeType = 'image/gif';
 													stickerImage = await ConvertTgsToGif(stickerDocument, stickerImage);
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+												}
-												Update MSH

											
										
										
											2024-01-09 02:06:08 +01:00
+												await TryAddStickerFromDataFile({
 													file: stickerImage,
 													mime: mimeType,
 													size: parseInt(stickerDocument.size.value),
 													dimensions: stickerDocument.attributes[0].originalArgs,
 													text: stickerDocument.attributes[1].alt,
 												}, packObject);
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+											}
-												Update MSH

											
										
										
											2024-01-09 02:06:08 +01:00
+										} catch(err) {
 											Spacc.ShowModal(`Error trying to import stickers from Telegram: ${err}`);
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+										}
-												Update MSH

											
										
										
											2024-01-09 02:06:08 +01:00
+										$`#LayoutFeedback`.innerHTML = '';
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+									}
-												Update MSH

											
										
										
											2024-01-09 02:06:08 +01:00
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+									function IsAnyPackImportedFrom (packUrl) {
 										for (const pack of State.stickersData) {
 											if (pack.data[Defaults.appIdentity].importedFrom === packUrl) {
 												return true;
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+											}
 										}
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+										return false;
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+									}
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+									function AddNewPackButton (packObject, event, modalButton) {
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+										for (const elem of $`#LayoutPacksList`.querySelectorAll('button')) {
 											elem.disabled = false;
 										}
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+										const packButton = MakeStickerPackButton(packObject);
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+										$`#LayoutPacksList`.insertBefore(packButton, $`#LayoutPacksList > button[name="add"]`.nextElementSibling);
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+										$`#LayoutPackActions`.hidden = true;
 										$`#LayoutPackGrid`.innerHTML = '';
-												Update MSH

											
										
										
											2024-01-09 02:06:08 +01:00
+										return packButton;
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+									}
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+									function MakeStickerPackButton (packObject) {
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+										const packButton = $().createElement('button');
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+										packButton.innerHTML = `<img src="${GetMatrixMediaUrl(packObject.data.stickers[0]?.info?.thumbnail_url, { homeserver: State.packsData?.homeserver_url, type: 'thumbnail' }) || ''}?&height=64&width=64&method=scale"/>`;
 										packButton.onclick = (event) => ShowStickerPack(event, packObject);
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+										return packButton;
 									}
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+									function ShowStickerPack (event, packObject) {
-												Hotfix MatrixStickerHelper

											
										
										
											2024-01-06 00:23:21 +01:00
+										if (event) {
 											const thisElem = (event.target.tagName.toLowerCase() === 'button' ? event.target : event.target.parentElement);
 											for (const elem of thisElem.parentElement.querySelectorAll('button')) {
 												elem.disabled = false;
 											}
 											thisElem.disabled = true;
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+										}
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+										$`#LayoutPackActions input[name="packName"]`.value = packObject.data.title;
 										$`#LayoutPackActions button[name="packDelete"]`.onclick = () => {
 										// TODO: this makes the commit button go usable even if the pack was just created and had no stickers... not important but would be a small UI improvement
 											Spacc.ShowModal({ label: 'Are you sure to delete this pack?', action: () => {
 												State.packsData.packs.splice(packObject.index, 1);
 												State.stickersData.splice(packObject.index, 1);
-												Update MSH

											
										
										
											2024-01-09 02:06:08 +01:00
+												SetCommittable(true);
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+												//$`#LayoutPackGrid`.innerHTML = '';
 											} });
 										};
 										$`#LayoutPackActions`.hidden = false;
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+										$`#LayoutPackGrid`.innerHTML = '';
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+										for (const stickerIndex in (packObject.data.stickers || [])) {
 											const sticker = packObject.data.stickers[stickerIndex];
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+											const stickerElem = $().createElement('button');
 											stickerElem.innerHTML = `<img src="${GetMatrixMediaUrl(sticker.info.thumbnail_url, { homeserver: State.packsData?.homeserver_url, type: 'thumbnail' }) || ''}?&height=128&width=128&method=scale"/>`;
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+											stickerElem.onclick = () => OnClickStickerButton(event, packObject, sticker, stickerIndex);
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+											$`#LayoutPackGrid`.appendChild(stickerElem);
 										}
 										const addButton = $().createElement('button');
 										addButton.innerHTML = `
 											➕️ Upload New Sticker(s)
 											<input type=file hidden="true" multiple="true" accept="image/jpeg,image/gif,image/png,image/webp"/>
 										`;
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+										addButton.querySelector('input[type="file"]').onchange = (event) => TryAddStickersFromLocalFiles(event, packObject);
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+										addButton.onclick = (event) => event.target.querySelector('input[type="file"]')?.click();
 										// TODO:
 										$`#LayoutPackGrid`.appendChild(addButton);
 									}
 									async function OnClickStickerButton (showStickerPackEvent, packObject, sticker, stickerIndex) {
 										const stickerModal = await Spacc.ShowModal({ extraHTML: `
 											<img src="${GetMatrixMediaUrl(sticker.url, { homeserver: State.packsData?.homeserver_url, type: 'download' }) || ''}?&height=512&width=512&method=scale"/>
 											<div class="margin-small">
 												<input name="stickerName" type="text" placeholder="Sticker Name/Description" value="${sticker.body}" style="display: inline-block;" disabled/>
 												<button name="stickerDelete">❌️ Delete Sticker</button>
 											</div>
 										` });
 										stickerModal.querySelector('button[name="stickerDelete"]').onclick = () => Spacc.ShowModal({ label: 'Are you sure to delete this sticker?', action: () => {
 											stickerModal.close();
 											packObject.data.stickers.splice(stickerIndex, 1);
 											packObject.edited = true;
-												Update MSH

											
										
										
											2024-01-09 02:06:08 +01:00
+											SetCommittable(true);
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+											ShowStickerPack(showStickerPackEvent, packObject);
 										} });
 									}
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+									async function TryUploadStickerMediaAndMakeObject (props) {
 										const result = await RequestMatrixUploadFile(props.file, props.mime);
 										if (result) {
 											if (!props.dimensions) {
 												const img = new Image();
 												img.src = await ReadBufferOrBlob(props.file);
 												await img.decode();
 												props.dimensions = { w: img.width, h: img.height };
 											}
 											return {
 												id: result.content_uri,
 												url: result.content_uri,
 												msgtype: "m.sticker",
 												body: props.text,
 												info: {
 													w: props.dimensions.w,
 													h: props.dimensions.h,
 													size: props.size,
 													mimetype: props.mime,
 													thumbnail_url: result.content_uri,
 													thumbnail_info: {
 														w: props.dimensions.w,
 														h: props.dimensions.h,
 														size: props.size,
 														mimetype: props.mime,
 													},
 												},
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+											};
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+										}
 									}
 									async function TryAddStickerFromDataFile (stickerProps, packObject) {
 										const stickerData = await TryUploadStickerMediaAndMakeObject(stickerProps);
 										if (stickerData) {
 											//stickerData[Defaults.appIdentity] = {};
 											const stickerElem = $().createElement('button');
 											stickerElem.innerHTML = `<img src="${await ReadBufferOrBlob(stickerProps.file)}"/>`;
 											stickerElem.onclick = () => OnClickStickerButton(null, packObject, stickerData, packObject.data.stickers.length);
-												Update MSH

											
										
										
											2024-01-09 02:06:08 +01:00
+											$`#LayoutPackGrid`.appendChild(stickerElem);
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+											packObject.data.stickers.push(stickerData);
 											packObject.edited = true;
-												Update MSH

											
										
										
											2024-01-09 02:06:08 +01:00
+											SetCommittable(true);
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+										}
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+									}
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+									async function TryAddStickersFromLocalFiles (event, packObject) {
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+										let newPackStickers = [];
 										for (const file of event.target.files) {
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+											const stickerData = await TryUploadStickerMediaAndMakeObject({
 												file: file,
 												size: file.size,
 												mime: file.type,
 												text: SafeStripFileExtension(file.name, ['jpeg', 'jpg', 'gif', 'png', 'webp']),
 											});
 											if (stickerData) {
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+												//stickerData[Defaults.appIdentity] = {};
-												Hotfix MatrixStickerHelper

											
										
										
											2024-01-06 00:23:21 +01:00
+												const globalStickerIndex = (packObject.data.stickers.length + newPackStickers.length);
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+												const stickerElem = $().createElement('button');
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+												stickerElem.innerHTML = `<img src="${await ReadFileAsync(file)}"/>`;
-												Hotfix MatrixStickerHelper

											
										
										
											2024-01-06 00:23:21 +01:00
+												stickerElem.onclick = () => OnClickStickerButton(null, packObject, stickerData, globalStickerIndex);
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+												$`#LayoutPackGrid`.insertBefore(stickerElem, event.target.parentElement);
 												newPackStickers.push(stickerData);
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+											} else { // TODO fix this, I think it doesn't actually wait for user input and just continues execution
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+												const answer = await Spacc.ShowModal({
 													label: 'File upload failed. What to do?',
 													action: () => 'continue',
 													actionCancel: () => 'cancel',
 													labelSecondary: '🔄️ Retry', actionSecondary: () => 'retry',
 												});
 												if (answer === 'cancel') {
 													newPackStickers = [];
 													break;
 												} else if (answer === 'retry') {
 													// ... find out how to handle this
 												} else if (answer === 'continue') {
 													continue;
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+												}
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+											}
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+										}
 										if (newPackStickers.length > 0) {
 											packObject.data.stickers = [...packObject.data.stickers, ...newPackStickers];
 											packObject.edited = true;
-												Update MSH

											
										
										
											2024-01-09 02:06:08 +01:00
+											SetCommittable(true);
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+										}
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+									}
 									async function ReinitStickersAccountData () {
 										State.packsData = { homeserver_url: State.account.homeserver, packs: [] };
 										State.stickersData = [];
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+										State.widgetsData.stickerpicker = {
 											content: {
 												type: "m.stickerpicker",
 												url: `${Defaults.stickerPickerUrl}?&config=&theme=$theme`,
 												name: "Stickerpicker",
 												managedBy: [
 													`${Defaults.appIdentity}`,
 													`${Defaults.appIdentity}/${Defaults.appInterface}`,
 												],
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+											},
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+											sender: GetMatrixUserTag(State.account),
 											state_key: "stickerpicker",
 											type: "m.widget",
 											id: "stickerpicker",
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+										};
 										await RequestAccountWidgetsData(State.widgetsData);
 										PreparePacksEditor();
 									}
 									async function CommitNewAccountStickersAndData () {
-												Update MSH

											
										
										
											2024-01-09 02:06:08 +01:00
+										SetCommittable(false);
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+										// upload new metadata for sticker packs which have been edited
 										for (const packIndex in State.stickersData) {
 											const pack = State.stickersData[packIndex];
 											if (pack.edited && pack.data.stickers.length > 0) {
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+												const uploadResult = await RequestMatrixUploadFile(JSON.stringify(pack.data), 'application/json');
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+												State.packsData.packs[packIndex] = GetMatrixMediaUrl(uploadResult.content_uri);
 											}
-												More progress

											
										
										
											2024-01-03 00:31:15 +01:00
+										}
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+										// remove empty sticker packs before committing, they break the picker
 										for (const packIndex in State.stickersData) {
 											if (State.stickersData[packIndex].data.stickers.length === 0) {
 												State.stickersData[packIndex].data.stickers.splice(packIndex, 1);
 												State.packsData.packs.splice(packIndex, 1);
 											}
-												More progress

											
										
										
											2024-01-03 00:31:15 +01:00
+										}
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+										// finally upload new index file and update profile data
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+										const uploadResult = await RequestMatrixUploadFile(JSON.stringify(State.packsData), 'application/json');
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+										const packsUrlNew = GetMatrixMediaUrl(uploadResult.content_uri);
 										State.widgetsData.stickerpicker.content.url = `${$`#LayoutCollectionOptions input[name="pickerUrl"]`.value}?&config=${packsUrlNew}&theme=$theme`;
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+										State.widgetsData.stickerpicker.content.managedBy = [
 											`${Defaults.appIdentity}`,
 											`${Defaults.appIdentity}/${Defaults.appInterface}`,
 										];
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+										if (await RequestAccountWidgetsData(State.widgetsData)) {
 											PreparePacksEditor();
 										} else {
-												Update MSH

											
										
										
											2024-01-09 02:06:08 +01:00
+											SetCommittable(true);
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+										}
-												More progress

											
										
										
											2024-01-03 00:31:15 +01:00
+									}
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+									function DisplayAccountSelect () {
 										ResetLayouts();
-												Update MSH

											
										
										
											2024-01-09 02:06:08 +01:00
+										for (const accountIndex in SpaccConfig.accounts) {
 											const account = SpaccConfig.accounts[accountIndex];
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+											const accountButton = $().createElement('button');
 											accountButton.style.width = 'calc(100% - 3em)';
 											accountButton.innerHTML += `🐱️ ${GetMatrixUserTag(account)}`;
 											accountButton.onclick = () => PreparePacksEditor(account);
 											$`#LayoutAccountSelect`.appendChild(accountButton);
 											const deleteButton = $().createElement('button');
 											deleteButton.innerHTML += `❌️`;
 											deleteButton.onclick = () => Spacc.ShowModal({ label: '❌️ Confirm remove account?', action: () => {
-												Update MSH

											
										
										
											2024-01-09 02:06:08 +01:00
+												SpaccConfig.accounts.splice(accountIndex, 1);
 												SpaccConfig.Save();
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+												DisplayAccountSelect();
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+											} });
 											$`#LayoutAccountSelect`.appendChild(deleteButton);
 										}
 										const addButton = $().createElement('button');
 										addButton.innerHTML += '🆕️ Add new account';
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+										addButton.onclick = () => ShowLoginDialog();
 										$`#LayoutAccountSelect`.appendChild(addButton);
-												Update MatrixStickerHelper

											
										
										
											2024-01-08 22:15:40 +01:00
+										const demoButton = $().createElement('button');
 										demoButton.innerHTML += '🎭️ Guest / Demo Mode';
 										demoButton.onclick = () => PreparePacksEditor(null);
-												Update MSH

											
										
										
											2024-01-09 02:06:08 +01:00
+										$`#LayoutAccountSelect`.appendChild(demoButton);
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+									}
 									async function ShowLoginDialog () {
 										const modal = await Spacc.ShowModal({ label: Defaults.Strings.mLoginHint, extraHTML: `
 											<label>
 												Homeserver
 												<input name="homeserver" type="url" placeholder="https://matrix.example.com" value="https://matrix.org"/>
 											</label>
 											<label>
 												Username
 												<input name="username" type="text" placeholder="AzureDiamond"/>
 											</label>
 											<label>
 												Password
 												<input name="password" type="password" placeholder="*******"/>
 											</label>
 											<label>
 												Alternatively, import account via <code>access_token</code> instead
 												<input name="useToken" type="checkbox"/>
 											</label>
 										`, action: (event, modalButton) => TryUserLogin(event, modalButton) });
 										const buttonConfirm = modal.querySelector('button[name="confirm"]');
 										buttonConfirm.disabled = true;
 										for (const requiredElem of modal.querySelectorAll('input[type="url"], input[type="text"], input[type="password"]')) {
 											for (const event of ['change', 'input', 'paste']) {
 												requiredElem[`on${event}`] = () => {
 													let allFilled = true;
 													for (const requiredElem of modal.querySelectorAll('input[type="url"], input[type="text"], input[type="password"]')) {
 														if (!requiredElem.value) {
 															allFilled = false;
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+														}
 													}
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+													buttonConfirm.disabled = !allFilled;
 												};
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+											}
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+										}
 									}
 									async function TryUserLogin (event, modalButton) {
 										const modal = modalButton.parentElement;
 										const homeserver = modal.querySelector('input[name="homeserver"]').value;
 										const username = modal.querySelector('input[name="username"]').value;
 										const password = modal.querySelector('input[name="password"]').value;
 										const loginData = {
 											homeserver: homeserver,
 											username: username,
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+										};
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+										if (modal.querySelector('input[name="useToken"]').checked) {
 											loginData.token = password;
 										} else {
 											try {
 												const response = await fetch(`${homeserver}/_matrix/client/v3/login`, {
 													method: "POST",
 													body: JSON.stringify({
 														type: "m.login.password",
 														identifier: {
 															type: "m.id.user",
 															user: username,
 														},
 														password: password,
 													}),
 												});
 												const result = await response.json();
 												if (response.status === 200) {
 													loginData.token = result.access_token;
 												} else {
 													throw JSON.stringify(result);
 												}
 											} catch(err) {
 												Spacc.ShowModal(`Error trying to get a session token: ${err}`);
 												return;
 											}
 										}
-												Update MSH

											
										
										
											2024-01-09 02:06:08 +01:00
+										SpaccConfig.accounts.push(loginData);
 										SpaccConfig.Save();
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
+										DisplayAccountSelect();
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+									}
-												Broken and needs a more ortodox restructuring, saving WIP

											
										
										
											2024-01-01 19:11:18 +01:00
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+									function Main () {
 										InitializeState();
 										DisplayAccountSelect();
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+									}
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+									Main();
-												Add WIP MatrixStickerHelper to save some code

											
										
										
											2024-01-01 14:42:50 +01:00
+								</script>
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
 								<style>
 									:root {
 										--margin: 8px;
 									}
 									* {
 										box-sizing: border-box;
 									}
 									body, .ActionForm, .TableForm {
 										margin: var(--margin);
 										overflow-x: hidden;
 									}
 									details > summary > * {
 										display: inline-block;
 									}
-												Update MatrixStickerHelper, add local fonts

											
										
										
											2024-01-05 23:57:30 +01:00
 									label > * {
 										width: 100%;
 									}
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+									#LayoutPacksList img {
 										max-width: 64px;
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+									}
-												Update MatrixStickerHelper, 1st working version allowing import packs via JSON

											
										
										
											2024-01-03 19:11:14 +01:00
+									#LayoutPackGrid img {
 								    	max-width: 128px;
-												Redid app in vanilla JS, still not fully working, just saving code

											
										
										
											2024-01-02 19:23:14 +01:00
+									}
 								</style>