mirror of
https://gitlab.com/octospacc/octospacc.gitlab.io
synced 2025-06-05 21:59:15 +02:00
Update MSH
This commit is contained in:
@@ -3,10 +3,6 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
<title>🃏️ [Matrix] Sticker Helper</title>
|
<title>🃏️ [Matrix] Sticker Helper</title>
|
||||||
|
|
||||||
<!--
|
|
||||||
<script src="../../../SpaccDotWeb/SpaccDotWeb.js" module="SpaccDotWeb"></script>
|
|
||||||
<script src="//SpaccInc.gitlab.io/SpaccDotWeb/SpaccDotWeb.js" module="SpaccDotWeb"></script>
|
|
||||||
-->
|
|
||||||
<script src="../../../SpaccDotWeb/SpaccDotWeb.Alt.js" module="SpaccDotWeb"></script>
|
<script src="../../../SpaccDotWeb/SpaccDotWeb.Alt.js" module="SpaccDotWeb"></script>
|
||||||
<script src="//SpaccInc.gitlab.io/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"/>
|
<link rel="stylesheet" href="./paper.min.css"/>
|
||||||
@@ -30,11 +26,10 @@ TODO:
|
|||||||
* fix sticker reimport protection not working?
|
* fix sticker reimport protection not working?
|
||||||
* in a lot of places that only do HTTP(s), handle also mxc:// URLs
|
* in a lot of places that only do HTTP(s), handle also mxc:// URLs
|
||||||
* open graph, PWA things (webmanifest, worker for offline support)
|
* open graph, PWA things (webmanifest, worker for offline support)
|
||||||
* guest/demo mode
|
* 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
|
* UI improvements like blocking buttons in inconsistent states, adding more feedbacks for long operations
|
||||||
** create and view sticker pack in gui immediately after started importing new stickers, not only after
|
|
||||||
** more loading messages and overlays
|
** more loading messages and overlays
|
||||||
** fix race conditions between actions like user going back while app is committing or loading packs
|
** fix race conditions between actions like user going back while app is committing or loading packs (including commit button)
|
||||||
* compatibility build / add polyfills
|
* compatibility build / add polyfills
|
||||||
* multilanguage?
|
* multilanguage?
|
||||||
* gif encoding without webserver (without ES import)
|
* gif encoding without webserver (without ES import)
|
||||||
@@ -46,7 +41,7 @@ TODO:
|
|||||||
<div id="LayoutCollectionActions">
|
<div id="LayoutCollectionActions">
|
||||||
<button name="back">🔙️ Go Back</button>
|
<button name="back">🔙️ Go Back</button>
|
||||||
<button name="commit">📝️ Commit Changes</button>
|
<button name="commit">📝️ Commit Changes</button>
|
||||||
<button name="commitFake" hidden>📝️ Can't commit changes in Demo Mode</button>
|
<button name="commitFake" disabled="true">📝️ Can't commit changes in Demo Mode</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="LayoutFeedback"></div>
|
<div id="LayoutFeedback"></div>
|
||||||
@@ -138,8 +133,8 @@ TODO:
|
|||||||
For example, <code>https://maunium.net/stickers-demo/packs/pusheen02.json</code>.
|
For example, <code>https://maunium.net/stickers-demo/packs/pusheen02.json</code>.
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
URLs of Telegram sticker packs, either Static (PNG/WebP) or Animated (TGS). Video stickers will be supported in the future.
|
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">https://core.telegram.org/stickers</a>.)
|
(For the technical details, see <a href="https://core.telegram.org/stickers" target="_blank">https://core.telegram.org/stickers</a>.)
|
||||||
<br/>
|
<br/>
|
||||||
The URL must be in the format "{optionally, <code>http://</code> or <code>https://</code>}<!--
|
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}".
|
-->{<code>t.me</code> or <code>telegram.me</code>}<code>/addstickers/</code>{name of the pack}".
|
||||||
@@ -190,6 +185,11 @@ TODO:
|
|||||||
</p>
|
</p>
|
||||||
<div id="LayoutChangelog">
|
<div id="LayoutChangelog">
|
||||||
<h3>Changelog</h3>
|
<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>
|
<p>[2024-01-08]</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Importing Static and Animated sticker packs from Telegram URLs</li>
|
<li>Importing Static and Animated sticker packs from Telegram URLs</li>
|
||||||
@@ -243,8 +243,8 @@ TODO:
|
|||||||
You can try to continue anyway if you think it should work, otherwise you should reinitialize sticker data.
|
You can try to continue anyway if you think it should work, otherwise you should reinitialize sticker data.
|
||||||
`,
|
`,
|
||||||
mCreatePackHint: `
|
mCreatePackHint: `
|
||||||
Optionally include the URL of a sticker pack in JSON format to import it.
|
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 media files as stickers.
|
Otherwise, leave the field empty to create a brand-new pack, importing your own media files as stickers.
|
||||||
`,
|
`,
|
||||||
mLoginHint: `
|
mLoginHint: `
|
||||||
Please login with your Matrix account.
|
Please login with your Matrix account.
|
||||||
@@ -254,19 +254,19 @@ TODO:
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
let Config = localStorage.getItem('SpaccInc-Matrix-Config');
|
let SpaccConfig = localStorage.getItem('SpaccInc-Matrix-Config');
|
||||||
if (Config) {
|
SpaccConfig = (SpaccConfig ? JSON.parse(SpaccConfig) : {
|
||||||
Config = JSON.parse(Config);
|
accounts: [],
|
||||||
} else {
|
});
|
||||||
Config = {
|
SpaccConfig.Save = () => localStorage.setItem('SpaccInc-Matrix-Config', JSON.stringify(SpaccConfig));
|
||||||
accounts: [],
|
|
||||||
};
|
let AppConfig = localStorage.getItem(Defaults.appIdentity);
|
||||||
}
|
AppConfig = (AppConfig ? JSON.parse(AppConfig) : {});
|
||||||
Config.Save = () => localStorage.setItem('SpaccInc-Matrix-Config', JSON.stringify(Config));
|
AppConfig.Save = () => localStorage.setItem(Defaults.appIdentity, JSON.stringify(AppConfig));
|
||||||
|
|
||||||
const Logger = (content, type) => {
|
const Logger = (content, type) => {
|
||||||
if (['f', 'feedback'].includes(type.toLowerCase())) {
|
if (['f', 'feedback'].includes(type.toLowerCase())) {
|
||||||
$`#LayoutFeedback`.innerHTML = content;
|
$`#LayoutFeedback`.innerHTML = `<p>${content}</p>`;
|
||||||
}
|
}
|
||||||
$`#LayoutDebugLog`.innerHTML += `[${type}] [${new Date().toISOString().split('.').slice(0, -1).join('.')}] ${content}\n`;
|
$`#LayoutDebugLog`.innerHTML += `[${type}] [${new Date().toISOString().split('.').slice(0, -1).join('.')}] ${content}\n`;
|
||||||
}
|
}
|
||||||
@@ -281,6 +281,11 @@ TODO:
|
|||||||
: query)
|
: query)
|
||||||
: document);
|
: 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 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 GetMatrixMediaUrl = (mxcId, props) => (mxcId ? `${props?.homeserver || `https://${mxcId.split('mxc://')[1].split('/')[0]}`}/_matrix/media/r0/${props?.type || 'download'}/${mxcId.split('mxc://')[1]}` : undefined);
|
||||||
@@ -356,6 +361,7 @@ TODO:
|
|||||||
for (const elem of document.querySelectorAll('.noscript')) {
|
for (const elem of document.querySelectorAll('.noscript')) {
|
||||||
elem.remove();
|
elem.remove();
|
||||||
}
|
}
|
||||||
|
SetCommittable(false);
|
||||||
$`#LayoutCollectionActions button[name="back"]`.onclick = () => DisplayAccountSelect();
|
$`#LayoutCollectionActions button[name="back"]`.onclick = () => DisplayAccountSelect();
|
||||||
$`#LayoutCollectionOptions input[name="pickerUrl"]`.value = Defaults.stickerPickerUrl;
|
$`#LayoutCollectionOptions input[name="pickerUrl"]`.value = Defaults.stickerPickerUrl;
|
||||||
$`#LayoutChangelog > h3`.remove();
|
$`#LayoutChangelog > h3`.remove();
|
||||||
@@ -382,6 +388,7 @@ TODO:
|
|||||||
}
|
}
|
||||||
|
|
||||||
async function RequestMatrixUploadFile (fileData, fileMime) {
|
async function RequestMatrixUploadFile (fileData, fileMime) {
|
||||||
|
if (!State.account) return {};
|
||||||
const request = await fetch(`${State.account.homeserver}/_matrix/media/v3/upload`, {
|
const request = await fetch(`${State.account.homeserver}/_matrix/media/v3/upload`, {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
headers: { Authorization: `Bearer ${State.account.token}`, ...(fileMime && { "Content-Type": fileMime }) },
|
headers: { Authorization: `Bearer ${State.account.token}`, ...(fileMime && { "Content-Type": fileMime }) },
|
||||||
@@ -389,8 +396,8 @@ TODO:
|
|||||||
});
|
});
|
||||||
const result = await request.json();
|
const result = await request.json();
|
||||||
if (request.status === 200) {
|
if (request.status === 200) {
|
||||||
return result;
|
|
||||||
Logger(`Uploaded ${fileMime} data to ${result.content_uri}.`, 'd');
|
Logger(`Uploaded ${fileMime} data to ${result.content_uri}.`, 'd');
|
||||||
|
return result;
|
||||||
} else {
|
} else {
|
||||||
Spacc.ShowModal(`Error: ${JSON.stringify(result)}`);
|
Spacc.ShowModal(`Error: ${JSON.stringify(result)}`);
|
||||||
}
|
}
|
||||||
@@ -411,11 +418,11 @@ TODO:
|
|||||||
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 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 result = await request.json();
|
||||||
const token = atob(result.content.rendered.split(',')[1].split('"')[0]).split('\0').slice(-3)[0];
|
const token = atob(result.content.rendered.split(',')[1].split('"')[0]).split('\0').slice(-3)[0];
|
||||||
const sessionString = new telegram.sessions.StringSession(Config.lastTelegramSession);
|
const sessionString = new telegram.sessions.StringSession(AppConfig.lastTelegramSession);
|
||||||
const client = new telegram.TelegramClient(sessionString, Number(apiId), apiToken, { connectionRetries: 5 });
|
const client = new telegram.TelegramClient(sessionString, Number(apiId), apiToken, { connectionRetries: 5 });
|
||||||
await client.start({ botAuthToken: token });
|
await client.start({ botAuthToken: token });
|
||||||
Config.lastTelegramSession = client.session.save();
|
AppConfig.lastTelegramSession = client.session.save();
|
||||||
Config.Save();
|
AppConfig.Save();
|
||||||
await client.connect();
|
await client.connect();
|
||||||
State.telegramClient = client;
|
State.telegramClient = client;
|
||||||
return client;
|
return client;
|
||||||
@@ -453,23 +460,38 @@ TODO:
|
|||||||
}
|
}
|
||||||
return await GifSkiEncoder({
|
return await GifSkiEncoder({
|
||||||
frames: renderedFrames,
|
frames: renderedFrames,
|
||||||
width: (512 / sizeDivisor),
|
width: (stickerDocument.attributes[0].originalArgs.w / sizeDivisor),
|
||||||
height: (512 / sizeDivisor),
|
height: (stickerDocument.attributes[0].originalArgs.h / sizeDivisor),
|
||||||
fps: (60 / framesDivisor),
|
fps: (tgsPlayer._lottie.frameRate / framesDivisor),
|
||||||
quality: 60,
|
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) {
|
async function PreparePacksEditor (account) {
|
||||||
if (account !== undefined) {
|
if (account) {
|
||||||
State.account = account;
|
State.account = account;
|
||||||
}
|
}
|
||||||
ResetLayouts();
|
ResetLayouts();
|
||||||
State.packsData = { homeserver_url: State.account.homeserver, packs: [] };
|
State.packsData = { homeserver_url: State.account?.homeserver, packs: [] };
|
||||||
State.stickersData = [];
|
State.stickersData = [];
|
||||||
|
if (account === null) {
|
||||||
|
return DisplayPacksEditor();
|
||||||
|
}
|
||||||
$`#LayoutCollectionActions`.hidden = false;
|
$`#LayoutCollectionActions`.hidden = false;
|
||||||
$`#LayoutCollectionOptions`.hidden = false;
|
$`#LayoutCollectionOptions`.hidden = false;
|
||||||
$`#LayoutCollectionActions button[name="commit"]`.disabled = true;
|
SetCommittable(false);
|
||||||
$`#LayoutCollectionOptions button[name="reinit"]`.onclick = () => Spacc.ShowModal({
|
$`#LayoutCollectionOptions button[name="reinit"]`.onclick = () => Spacc.ShowModal({
|
||||||
label: Defaults.Strings.mConfirmCommit,
|
label: Defaults.Strings.mConfirmCommit,
|
||||||
action: () => ReinitStickersAccountData(),
|
action: () => ReinitStickersAccountData(),
|
||||||
@@ -527,7 +549,7 @@ TODO:
|
|||||||
});
|
});
|
||||||
if (packsUrl) {
|
if (packsUrl) {
|
||||||
try {
|
try {
|
||||||
const request = await fetch(packsUrl);
|
const request = await LogFetch(packsUrl);
|
||||||
if (request.status === 200) {
|
if (request.status === 200) {
|
||||||
State.packsData = await request.json();
|
State.packsData = await request.json();
|
||||||
}
|
}
|
||||||
@@ -556,7 +578,7 @@ TODO:
|
|||||||
for (const packIndex in State.packsData.packs) {
|
for (const packIndex in State.packsData.packs) {
|
||||||
const packUrl = State.packsData.packs[packIndex];
|
const packUrl = State.packsData.packs[packIndex];
|
||||||
try {
|
try {
|
||||||
const request = await fetch(packUrl);
|
const request = await LogFetch(packUrl);
|
||||||
const packData = await request.json();
|
const packData = await request.json();
|
||||||
const packObject = { data: packData, index: packIndex, edited: false };
|
const packObject = { data: packData, index: packIndex, edited: false };
|
||||||
State.stickersData.push(packObject);
|
State.stickersData.push(packObject);
|
||||||
@@ -577,9 +599,9 @@ TODO:
|
|||||||
//};
|
//};
|
||||||
if (packUrl && !IsUrlTelegramSticker(packUrl)) {
|
if (packUrl && !IsUrlTelegramSticker(packUrl)) {
|
||||||
try {
|
try {
|
||||||
const request = await fetch(packUrl);
|
const request = await LogFetch(packUrl);
|
||||||
packData = await request.json();
|
packData = await request.json();
|
||||||
// import JSON is an index, so we try to import all its packs
|
// imported JSON is an index, so we try to import all its packs
|
||||||
if (packData.packs && !packData.stickers) {
|
if (packData.packs && !packData.stickers) {
|
||||||
for (const pack of packData.packs) {
|
for (const pack of packData.packs) {
|
||||||
const packUrlPrefix = (IsUrlHttpOrS(pack) ? '' : packUrl.split('/').slice(0, -1).join('/'));
|
const packUrlPrefix = (IsUrlHttpOrS(pack) ? '' : packUrl.split('/').slice(0, -1).join('/'));
|
||||||
@@ -587,7 +609,7 @@ TODO:
|
|||||||
}
|
}
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
$`#LayoutCollectionActions button[name="commit"]`.disabled = false;
|
SetCommittable(true);
|
||||||
} catch(err) {
|
} catch(err) {
|
||||||
Spacc.ShowModal(`${err} ${packUrl}`);
|
Spacc.ShowModal(`${err} ${packUrl}`);
|
||||||
return;
|
return;
|
||||||
@@ -600,42 +622,53 @@ TODO:
|
|||||||
const packObject = { data: packData, index: State.stickersData.length, edited: true };
|
const packObject = { data: packData, index: State.stickersData.length, edited: true };
|
||||||
State.stickersData.push(packObject);
|
State.stickersData.push(packObject);
|
||||||
if (packUrl && IsUrlTelegramSticker(packUrl)) {
|
if (packUrl && IsUrlTelegramSticker(packUrl)) {
|
||||||
const tgClient = (State.telegramClient || await TryGetTelegramSession());
|
TryImportTelegramPack(packUrl, packObject);
|
||||||
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,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
// TODO: write provenance information in sticker meta like the manium importer does
|
|
||||||
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 = '';
|
|
||||||
}
|
}
|
||||||
AddNewPackButton(packObject, event, modalButton);
|
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) {
|
function IsAnyPackImportedFrom (packUrl) {
|
||||||
for (const pack of State.stickersData) {
|
for (const pack of State.stickersData) {
|
||||||
if (pack.data[Defaults.appIdentity].importedFrom === packUrl) {
|
if (pack.data[Defaults.appIdentity].importedFrom === packUrl) {
|
||||||
@@ -653,6 +686,7 @@ TODO:
|
|||||||
$`#LayoutPacksList`.insertBefore(packButton, $`#LayoutPacksList > button[name="add"]`.nextElementSibling);
|
$`#LayoutPacksList`.insertBefore(packButton, $`#LayoutPacksList > button[name="add"]`.nextElementSibling);
|
||||||
$`#LayoutPackActions`.hidden = true;
|
$`#LayoutPackActions`.hidden = true;
|
||||||
$`#LayoutPackGrid`.innerHTML = '';
|
$`#LayoutPackGrid`.innerHTML = '';
|
||||||
|
return packButton;
|
||||||
}
|
}
|
||||||
|
|
||||||
function MakeStickerPackButton (packObject) {
|
function MakeStickerPackButton (packObject) {
|
||||||
@@ -676,7 +710,7 @@ TODO:
|
|||||||
Spacc.ShowModal({ label: 'Are you sure to delete this pack?', action: () => {
|
Spacc.ShowModal({ label: 'Are you sure to delete this pack?', action: () => {
|
||||||
State.packsData.packs.splice(packObject.index, 1);
|
State.packsData.packs.splice(packObject.index, 1);
|
||||||
State.stickersData.splice(packObject.index, 1);
|
State.stickersData.splice(packObject.index, 1);
|
||||||
$`#LayoutCollectionActions button[name="commit"]`.disabled = false;
|
SetCommittable(true);
|
||||||
//$`#LayoutPackGrid`.innerHTML = '';
|
//$`#LayoutPackGrid`.innerHTML = '';
|
||||||
} });
|
} });
|
||||||
};
|
};
|
||||||
@@ -709,11 +743,10 @@ TODO:
|
|||||||
</div>
|
</div>
|
||||||
` });
|
` });
|
||||||
stickerModal.querySelector('button[name="stickerDelete"]').onclick = () => Spacc.ShowModal({ label: 'Are you sure to delete this sticker?', action: () => {
|
stickerModal.querySelector('button[name="stickerDelete"]').onclick = () => Spacc.ShowModal({ label: 'Are you sure to delete this sticker?', action: () => {
|
||||||
//stickerElem.remove();
|
|
||||||
stickerModal.close();
|
stickerModal.close();
|
||||||
packObject.data.stickers.splice(stickerIndex, 1);
|
packObject.data.stickers.splice(stickerIndex, 1);
|
||||||
packObject.edited = true;
|
packObject.edited = true;
|
||||||
$`#LayoutCollectionActions button[name="commit"]`.disabled = false;
|
SetCommittable(true);
|
||||||
ShowStickerPack(showStickerPackEvent, packObject);
|
ShowStickerPack(showStickerPackEvent, packObject);
|
||||||
} });
|
} });
|
||||||
}
|
}
|
||||||
@@ -756,10 +789,10 @@ TODO:
|
|||||||
const stickerElem = $().createElement('button');
|
const stickerElem = $().createElement('button');
|
||||||
stickerElem.innerHTML = `<img src="${await ReadBufferOrBlob(stickerProps.file)}"/>`;
|
stickerElem.innerHTML = `<img src="${await ReadBufferOrBlob(stickerProps.file)}"/>`;
|
||||||
stickerElem.onclick = () => OnClickStickerButton(null, packObject, stickerData, packObject.data.stickers.length);
|
stickerElem.onclick = () => OnClickStickerButton(null, packObject, stickerData, packObject.data.stickers.length);
|
||||||
$`#LayoutPackGrid`.insertBefore(stickerElem, event.target.parentElement);
|
$`#LayoutPackGrid`.appendChild(stickerElem);
|
||||||
packObject.data.stickers.push(stickerData);
|
packObject.data.stickers.push(stickerData);
|
||||||
packObject.edited = true;
|
packObject.edited = true;
|
||||||
$`#LayoutCollectionActions button[name="commit"]`.disabled = false;
|
SetCommittable(true);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -800,7 +833,7 @@ TODO:
|
|||||||
if (newPackStickers.length > 0) {
|
if (newPackStickers.length > 0) {
|
||||||
packObject.data.stickers = [...packObject.data.stickers, ...newPackStickers];
|
packObject.data.stickers = [...packObject.data.stickers, ...newPackStickers];
|
||||||
packObject.edited = true;
|
packObject.edited = true;
|
||||||
$`#LayoutCollectionActions button[name="commit"]`.disabled = false;
|
SetCommittable(true);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -827,7 +860,7 @@ TODO:
|
|||||||
}
|
}
|
||||||
|
|
||||||
async function CommitNewAccountStickersAndData () {
|
async function CommitNewAccountStickersAndData () {
|
||||||
$`#LayoutCollectionActions button[name="commit"]`.disabled = true;
|
SetCommittable(false);
|
||||||
// upload new metadata for sticker packs which have been edited
|
// upload new metadata for sticker packs which have been edited
|
||||||
for (const packIndex in State.stickersData) {
|
for (const packIndex in State.stickersData) {
|
||||||
const pack = State.stickersData[packIndex];
|
const pack = State.stickersData[packIndex];
|
||||||
@@ -854,15 +887,15 @@ TODO:
|
|||||||
if (await RequestAccountWidgetsData(State.widgetsData)) {
|
if (await RequestAccountWidgetsData(State.widgetsData)) {
|
||||||
PreparePacksEditor();
|
PreparePacksEditor();
|
||||||
} else {
|
} else {
|
||||||
$`#LayoutCollectionActions button[name="commit"]`.disabled = false;
|
SetCommittable(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function DisplayAccountSelect () {
|
function DisplayAccountSelect () {
|
||||||
ResetLayouts();
|
ResetLayouts();
|
||||||
for (const accountIndex in Config.accounts) {
|
for (const accountIndex in SpaccConfig.accounts) {
|
||||||
const account = Config.accounts[accountIndex];
|
const account = SpaccConfig.accounts[accountIndex];
|
||||||
const accountButton = $().createElement('button');
|
const accountButton = $().createElement('button');
|
||||||
accountButton.style.width = 'calc(100% - 3em)';
|
accountButton.style.width = 'calc(100% - 3em)';
|
||||||
accountButton.innerHTML += `🐱️ ${GetMatrixUserTag(account)}`;
|
accountButton.innerHTML += `🐱️ ${GetMatrixUserTag(account)}`;
|
||||||
@@ -871,8 +904,8 @@ TODO:
|
|||||||
const deleteButton = $().createElement('button');
|
const deleteButton = $().createElement('button');
|
||||||
deleteButton.innerHTML += `❌️`;
|
deleteButton.innerHTML += `❌️`;
|
||||||
deleteButton.onclick = () => Spacc.ShowModal({ label: '❌️ Confirm remove account?', action: () => {
|
deleteButton.onclick = () => Spacc.ShowModal({ label: '❌️ Confirm remove account?', action: () => {
|
||||||
Config.accounts.splice(accountIndex, 1);
|
SpaccConfig.accounts.splice(accountIndex, 1);
|
||||||
Config.Save();
|
SpaccConfig.Save();
|
||||||
DisplayAccountSelect();
|
DisplayAccountSelect();
|
||||||
} });
|
} });
|
||||||
$`#LayoutAccountSelect`.appendChild(deleteButton);
|
$`#LayoutAccountSelect`.appendChild(deleteButton);
|
||||||
@@ -884,7 +917,7 @@ TODO:
|
|||||||
const demoButton = $().createElement('button');
|
const demoButton = $().createElement('button');
|
||||||
demoButton.innerHTML += '🎭️ Guest / Demo Mode';
|
demoButton.innerHTML += '🎭️ Guest / Demo Mode';
|
||||||
demoButton.onclick = () => PreparePacksEditor(null);
|
demoButton.onclick = () => PreparePacksEditor(null);
|
||||||
//$`#LayoutAccountSelect`.appendChild(demoButton);
|
$`#LayoutAccountSelect`.appendChild(demoButton);
|
||||||
}
|
}
|
||||||
|
|
||||||
async function ShowLoginDialog () {
|
async function ShowLoginDialog () {
|
||||||
@@ -958,8 +991,8 @@ TODO:
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Config.accounts.push(loginData);
|
SpaccConfig.accounts.push(loginData);
|
||||||
Config.Save();
|
SpaccConfig.Save();
|
||||||
DisplayAccountSelect();
|
DisplayAccountSelect();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user