diff options
| -rw-r--r-- | .gitignore | 11 | ||||
| -rw-r--r-- | LICENSE | 374 | ||||
| -rw-r--r-- | README.md | 47 | ||||
| -rw-r--r-- | example-config.json | 4 | ||||
| -rw-r--r-- | import.py | 194 | ||||
| -rw-r--r-- | requirements.txt | 5 | ||||
| -rw-r--r-- | web/index.css | 64 | ||||
| -rw-r--r-- | web/index.html | 14 | ||||
| -rw-r--r-- | web/index.js | 175 | ||||
| -rw-r--r-- | web/spinner.css | 64 |
10 files changed, 952 insertions, 0 deletions
diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..6daf470 --- /dev/null +++ b/.gitignore @@ -0,0 +1,11 @@ +/.idea + +/.venv +/env +*.pyc +__pycache__ + +*.session +*.json +!example-config.json +*.bak @@ -0,0 +1,374 @@ +Mozilla Public License Version 2.0 +================================== + +1. Definitions +-------------- + +1.1. "Contributor" + means each individual or legal entity that creates, contributes to + the creation of, or owns Covered Software. + +1.2. "Contributor Version" + means the combination of the Contributions of others (if any) used + by a Contributor and that particular Contributor's Contribution. + +1.3. "Contribution" + means Covered Software of a particular Contributor. + +1.4. "Covered Software" + means Source Code Form to which the initial Contributor has attached + the notice in Exhibit A, the Executable Form of such Source Code + Form, and Modifications of such Source Code Form, in each case + including portions thereof. + +1.5. "Incompatible With Secondary Licenses" + means + + (a) that the initial Contributor has attached the notice described + in Exhibit B to the Covered Software; or + + (b) that the Covered Software was made available under the terms of + version 1.1 or earlier of the License, but not also under the + terms of a Secondary License. + +1.6. "Executable Form" + means any form of the work other than Source Code Form. + +1.7. "Larger Work" + means a work that combines Covered Software with other material, in + a separate file or files, that is not Covered Software. + +1.8. "License" + means this document. + +1.9. "Licensable" + means having the right to grant, to the maximum extent possible, + whether at the time of the initial grant or subsequently, any and + all of the rights conveyed by this License. + +1.10. "Modifications" + means any of the following: + + (a) any file in Source Code Form that results from an addition to, + deletion from, or modification of the contents of Covered + Software; or + + (b) any new file in Source Code Form that contains any Covered + Software. + +1.11. "Patent Claims" of a Contributor + means any patent claim(s), including without limitation, method, + process, and apparatus claims, in any patent Licensable by such + Contributor that would be infringed, but for the grant of the + License, by the making, using, selling, offering for sale, having + made, import, or transfer of either its Contributions or its + Contributor Version. + +1.12. "Secondary License" + means either the GNU General Public License, Version 2.0, the GNU + Lesser General Public License, Version 2.1, the GNU Affero General + Public License, Version 3.0, or any later versions of those + licenses. + +1.13. "Source Code Form" + means the form of the work preferred for making modifications. + +1.14. "You" (or "Your") + means an individual or a legal entity exercising rights under this + License. For legal entities, "You" includes any entity that + controls, is controlled by, or is under common control with You. For + purposes of this definition, "control" means (a) the power, direct + or indirect, to cause the direction or management of such entity, + whether by contract or otherwise, or (b) ownership of more than + fifty percent (50%) of the outstanding shares or beneficial + ownership of such entity. + +2. License Grants and Conditions +-------------------------------- + +2.1. Grants + +Each Contributor hereby grants You a world-wide, royalty-free, +non-exclusive license: + +(a) under intellectual property rights (other than patent or trademark) + Licensable by such Contributor to use, reproduce, make available, + modify, display, perform, distribute, and otherwise exploit its + Contributions, either on an unmodified basis, with Modifications, or + as part of a Larger Work; and + +(b) under Patent Claims of such Contributor to make, use, sell, offer + for sale, have made, import, and otherwise transfer either its + Contributions or its Contributor Version. + +2.2. Effective Date + +The licenses granted in Section 2.1 with respect to any Contribution +become effective for each Contribution on the date the Contributor first +distributes such Contribution. + +2.3. Limitations on Grant Scope + +The licenses granted in this Section 2 are the only rights granted under +this License. No additional rights or licenses will be implied from the +distribution or licensing of Covered Software under this License. +Notwithstanding Section 2.1(b) above, no patent license is granted by a +Contributor: + +(a) for any code that a Contributor has removed from Covered Software; + or + +(b) for infringements caused by: (i) Your and any other third party's + modifications of Covered Software, or (ii) the combination of its + Contributions with other software (except as part of its Contributor + Version); or + +(c) under Patent Claims infringed by Covered Software in the absence of + its Contributions. + +This License does not grant any rights in the trademarks, service marks, +or logos of any Contributor (except as may be necessary to comply with +the notice requirements in Section 3.4). + +2.4. Subsequent Licenses + +No Contributor makes additional grants as a result of Your choice to +distribute the Covered Software under a subsequent version of this +License (see Section 10.2) or under the terms of a Secondary License (if +permitted under the terms of Section 3.3). + +2.5. Representation + +Each Contributor represents that the Contributor believes its +Contributions are its original creation(s) or it has sufficient rights +to grant the rights to its Contributions conveyed by this License. + +2.6. Fair Use + +This License is not intended to limit any rights You have under +applicable copyright doctrines of fair use, fair dealing, or other +equivalents. + +2.7. Conditions + +Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted +in Section 2.1. + +3. Responsibilities +------------------- + +3.1. Distribution of Source Form + +All distribution of Covered Software in Source Code Form, including any +Modifications that You create or to which You contribute, must be under +the terms of this License. You must inform recipients that the Source +Code Form of the Covered Software is governed by the terms of this +License, and how they can obtain a copy of this License. You may not +attempt to alter or restrict the recipients' rights in the Source Code +Form. + +3.2. Distribution of Executable Form + +If You distribute Covered Software in Executable Form then: + +(a) such Covered Software must also be made available in Source Code + Form, as described in Section 3.1, and You must inform recipients of + the Executable Form how they can obtain a copy of such Source Code + Form by reasonable means in a timely manner, at a charge no more + than the cost of distribution to the recipient; and + +(b) You may distribute such Executable Form under the terms of this + License, or sublicense it under different terms, provided that the + license for the Executable Form does not attempt to limit or alter + the recipients' rights in the Source Code Form under this License. + +3.3. Distribution of a Larger Work + +You may create and distribute a Larger Work under terms of Your choice, +provided that You also comply with the requirements of this License for +the Covered Software. If the Larger Work is a combination of Covered +Software with a work governed by one or more Secondary Licenses, and the +Covered Software is not Incompatible With Secondary Licenses, this +License permits You to additionally distribute such Covered Software +under the terms of such Secondary License(s), so that the recipient of +the Larger Work may, at their option, further distribute the Covered +Software under the terms of either this License or such Secondary +License(s). + +3.4. Notices + +You may not remove or alter the substance of any license notices +(including copyright notices, patent notices, disclaimers of warranty, +or limitations of liability) contained within the Source Code Form of +the Covered Software, except that You may alter any license notices to +the extent required to remedy known factual inaccuracies. + +3.5. Application of Additional Terms + +You may choose to offer, and to charge a fee for, warranty, support, +indemnity or liability obligations to one or more recipients of Covered +Software. However, You may do so only on Your own behalf, and not on +behalf of any Contributor. You must make it absolutely clear that any +such warranty, support, indemnity, or liability obligation is offered by +You alone, and You hereby agree to indemnify every Contributor for any +liability incurred by such Contributor as a result of warranty, support, +indemnity or liability terms You offer. You may include additional +disclaimers of warranty and limitations of liability specific to any +jurisdiction. + +4. Inability to Comply Due to Statute or Regulation +--------------------------------------------------- + +If it is impossible for You to comply with any of the terms of this +License with respect to some or all of the Covered Software due to +statute, judicial order, or regulation then You must: (a) comply with +the terms of this License to the maximum extent possible; and (b) +describe the limitations and the code they affect. Such description must +be placed in a text file included with all distributions of the Covered +Software under this License. Except to the extent prohibited by statute +or regulation, such description must be sufficiently detailed for a +recipient of ordinary skill to be able to understand it. + +5. Termination +-------------- + +5.1. The rights granted under this License will terminate automatically +if You fail to comply with any of its terms. However, if You become +compliant, then the rights granted under this License from a particular +Contributor are reinstated (a) provisionally, unless and until such +Contributor explicitly and finally terminates Your grants, and (b) on an +ongoing basis, if such Contributor fails to notify You of the +non-compliance by some reasonable means prior to 60 days after You have +come back into compliance. Moreover, Your grants from a particular +Contributor are reinstated on an ongoing basis if such Contributor +notifies You of the non-compliance by some reasonable means, this is the +first time You have received notice of non-compliance with this License +from such Contributor, and You become compliant prior to 30 days after +Your receipt of the notice. + +5.2. If You initiate litigation against any entity by asserting a patent +infringement claim (excluding declaratory judgment actions, +counter-claims, and cross-claims) alleging that a Contributor Version +directly or indirectly infringes any patent, then the rights granted to +You by any and all Contributors for the Covered Software under Section +2.1 of this License shall terminate. + +5.3. In the event of termination under Sections 5.1 or 5.2 above, all +end user license agreements (excluding distributors and resellers) which +have been validly granted by You or Your distributors under this License +prior to termination shall survive termination. + +************************************************************************ +* * +* 6. Disclaimer of Warranty * +* ------------------------- * +* * +* Covered Software is provided under this License on an "as is" * +* basis, without warranty of any kind, either expressed, implied, or * +* statutory, including, without limitation, warranties that the * +* Covered Software is free of defects, merchantable, fit for a * +* particular purpose or non-infringing. The entire risk as to the * +* quality and performance of the Covered Software is with You. * +* Should any Covered Software prove defective in any respect, You * +* (not any Contributor) assume the cost of any necessary servicing, * +* repair, or correction. This disclaimer of warranty constitutes an * +* essential part of this License. No use of any Covered Software is * +* authorized under this License except under this disclaimer. * +* * +************************************************************************ + +************************************************************************ +* * +* 7. Limitation of Liability * +* -------------------------- * +* * +* Under no circumstances and under no legal theory, whether tort * +* (including negligence), contract, or otherwise, shall any * +* Contributor, or anyone who distributes Covered Software as * +* permitted above, be liable to You for any direct, indirect, * +* special, incidental, or consequential damages of any character * +* including, without limitation, damages for lost profits, loss of * +* goodwill, work stoppage, computer failure or malfunction, or any * +* and all other commercial damages or losses, even if such party * +* shall have been informed of the possibility of such damages. This * +* limitation of liability shall not apply to liability for death or * +* personal injury resulting from such party's negligence to the * +* extent applicable law prohibits such limitation. Some * +* jurisdictions do not allow the exclusion or limitation of * +* incidental or consequential damages, so this exclusion and * +* limitation may not apply to You. * +* * +************************************************************************ + +8. Litigation +------------- + +Any litigation relating to this License may be brought only in the +courts of a jurisdiction where the defendant maintains its principal +place of business and such litigation shall be governed by laws of that +jurisdiction, without reference to its conflict-of-law provisions. +Nothing in this Section shall prevent a party's ability to bring +cross-claims or counter-claims. + +9. Miscellaneous +---------------- + +This License represents the complete agreement concerning the subject +matter hereof. If any provision of this License is held to be +unenforceable, such provision shall be reformed only to the extent +necessary to make it enforceable. Any law or regulation which provides +that the language of a contract shall be construed against the drafter +shall not be used to construe this License against a Contributor. + +10. Versions of the License +--------------------------- + +10.1. New Versions + +Mozilla Foundation is the license steward. Except as provided in Section +10.3, no one other than the license steward has the right to modify or +publish new versions of this License. Each version will be given a +distinguishing version number. + +10.2. Effect of New Versions + +You may distribute the Covered Software under the terms of the version +of the License under which You originally received the Covered Software, +or under the terms of any subsequent version published by the license +steward. + +10.3. Modified Versions + +If you create software not governed by this License, and you want to +create a new license for such software, you may create and use a +modified version of this License if you rename the license and remove +any references to the name of the license steward (except to note that +such modified license differs from this License). + +10.4. Distributing Source Code Form that is Incompatible With Secondary +Licenses + +If You choose to distribute Source Code Form that is Incompatible With +Secondary Licenses under the terms of this version of the License, the +notice described in Exhibit B of this License must be attached. + +Exhibit A - Source Code Form License Notice +------------------------------------------- + + This Source Code Form is subject to the terms of the Mozilla Public + License, v. 2.0. If a copy of the MPL was not distributed with this + file, You can obtain one at http://mozilla.org/MPL/2.0/. + +If it is not possible or desirable to put the notice in a particular +file, then You may include the notice in a location (such as a LICENSE +file in a relevant directory) where a recipient would be likely to look +for such a notice. + +You may add additional accurate notices of copyright ownership. + +Exhibit B - "Incompatible With Secondary Licenses" Notice +--------------------------------------------------------- + + This Source Code Form is "Incompatible With Secondary Licenses", as + defined by the Mozilla Public License, v. 2.0. + diff --git a/README.md b/README.md new file mode 100644 index 0000000..668f008 --- /dev/null +++ b/README.md @@ -0,0 +1,47 @@ +# Maunium sticker picker +A fast and simple Matrix sticker picker widget. Tested on Element Web & Android. + +## Importing packs from Telegram +1. (Optional) Set up a virtual environment. + 1. Create with `virtualenv -p python3 .` + 2. Activate with `source ./bin/activate` +2. Install dependencies with `pip install -r requirements.txt` +3. Copy `example-config.json` to `config.json` and set your homeserver URL and access token + (used for uploading stickers to Matrix). +4. Run `python3 import.py <pack urls...>` + * On the first run, it'll prompt you to log in with a bot token or a telegram account. + The session data is stored in `sticker-import.session` by default. + * By default, the pack data will be written to `web/packs/`. + * You can pass as many pack URLs as you want. + * You can re-run the command with the same URLs to update packs. + +If you want to list the URLs of all your saved packs, use `python3 import.py --list`. +This requires logging in with your account instead of a bot token. + +## Enabling the sticker widget +1. Serve everything under `web/` using your webserver of choice. Make sure not to serve the + top-level data, as `config.json` and the Telethon session file contain sensitive data. +2. Using `/devtools` in Element Web, edit the `m.widgets` account data event to have the following content: + + ```json + { + "stickerpicker": { + "content": { + "type": "m.stickerpicker", + "url": "https://your.sticker.picker.url/index.html", + "name": "Stickerpicker", + "data": {} + }, + "sender": "@you:picker.url", + "state_key": "stickerpicker", + "type": "m.widget", + "id": "stickerpicker" + } + } + ``` + + If you do not yet have a `m.widgets` event, simply create it with that content. + You can also [use the client-server API directly][1] instead of using Element Web. +3. Open the sticker picker and enjoy the fast sticker picking experience. + +[1]: https://matrix.org/docs/spec/client_server/latest#put-matrix-client-r0-user-userid-account-data-type diff --git a/example-config.json b/example-config.json new file mode 100644 index 0000000..af53451 --- /dev/null +++ b/example-config.json @@ -0,0 +1,4 @@ +{ + "homeserver": "https://example.com", + "access_token": "foo" +} diff --git a/import.py b/import.py new file mode 100644 index 0000000..36eaf5f --- /dev/null +++ b/import.py @@ -0,0 +1,194 @@ +# Copyright (c) 2020 Tulir Asokan +# +# This Source Code Form is subject to the terms of the Mozilla Public +# License, v. 2.0. If a copy of the MPL was not distributed with this +# file, You can obtain one at http://mozilla.org/MPL/2.0/. +from typing import Dict, TypedDict +from io import BytesIO +import argparse +import os.path +import asyncio +import json +import re + +from aiohttp import ClientSession +from yarl import URL +from PIL import Image + +from telethon import TelegramClient +from telethon.tl.functions.messages import GetAllStickersRequest, GetStickerSetRequest +from telethon.tl.types.messages import AllStickers +from telethon.tl.types import InputStickerSetShortName, Document +from telethon.tl.types.messages import StickerSet as StickerSetFull + +parser = argparse.ArgumentParser() +parser.add_argument("--list", help="List your saved sticker packs", action="store_true") +parser.add_argument("--session", help="Telethon session file name", default="sticker-import") +parser.add_argument("--config", help="Path to JSON file with Matrix homeserver and access_token", + type=str, default="config.json") +parser.add_argument("--output-dir", help="Directory to write packs to", default="web/packs/", + type=str) +parser.add_argument("pack", help="Sticker pack URLs to import", action="append", nargs="*") +args = parser.parse_args() + +with open(args.config) as config_file: + config = json.load(config_file) + homeserver_url = config["homeserver"] + upload_url = URL(homeserver_url) / "_matrix" / "media" / "r0" / "upload" + access_token = config["access_token"] + + +async def upload(data: bytes, mimetype: str, filename: str) -> str: + url = upload_url.with_query({"filename": filename}) + headers = {"Content-Type": mimetype, "Authorization": f"Bearer {access_token}"} + async with ClientSession() as sess, sess.post(url, data=data, headers=headers) as resp: + return (await resp.json())["content_uri"] + + +class MatrixMediaInfo(TypedDict): + w: int + h: int + size: int + mimetype: str + + +class MatrixStickerInfo(TypedDict, total=False): + body: str + url: str + info: MatrixMediaInfo + + +def convert_image(data: bytes) -> (bytes, int, int): + image: Image.Image = Image.open(BytesIO(data)).convert("RGBA") + image.thumbnail((256, 256), Image.ANTIALIAS) + new_file = BytesIO() + image.save(new_file, "png") + w, h = image.size + return new_file.getvalue(), w, h + + +async def reupload_document(client: TelegramClient, document: Document) -> MatrixStickerInfo: + print(f"Reuploading {document.id}", end="", flush=True) + data = await client.download_media(document, file=bytes) + print(".", end="", flush=True) + data, width, height = convert_image(data) + print(".", end="", flush=True) + mxc = await upload(data, "image/png", f"{document.id}.png") + print(".", flush=True) + return { + "body": "", + "url": mxc, + "info": { + "w": width, + "h": height, + "size": len(data), + "mimetype": "image/png", + }, + } + + +def add_to_index(name: str) -> None: + index_path = os.path.join(args.output_dir, "index.json") + try: + with open(index_path) as index_file: + index_data = json.load(index_file) + except (FileNotFoundError, json.JSONDecodeError): + index_data = {"packs": [], "homeserver_url": homeserver_url} + if name not in index_data["packs"]: + index_data["packs"].append(name) + with open(index_path, "w") as index_file: + json.dump(index_data, index_file, indent=" ") + print(f"Added {name} to {index_path}") + + +async def reupload_pack(client: TelegramClient, pack: StickerSetFull) -> None: + if pack.set.animated: + print("Animated stickerpacks are currently not supported") + return + + pack_path = os.path.join(args.output_dir, f"{pack.set.short_name}.json") + try: + os.mkdir(os.path.dirname(pack_path)) + except FileExistsError: + pass + + print(f"Reuploading {pack.set.title} with {pack.set.count} stickers " + f"and writing output to {pack_path}") + + already_uploaded = {} + try: + with open(pack_path) as pack_file: + existing_pack = json.load(pack_file) + already_uploaded = {sticker["net.maunium.telegram.sticker"]["id"]: sticker + for sticker in existing_pack["stickers"]} + print(f"Found {len(already_uploaded)} already reuploaded stickers") + except FileNotFoundError: + pass + + reuploaded_documents: Dict[int, MatrixStickerInfo] = {} + for document in pack.documents: + try: + reuploaded_documents[document.id] = already_uploaded[document.id] + print(f"Skipped reuploading {document.id}") + except KeyError: + reuploaded_documents[document.id] = await reupload_document(client, document) + + for sticker in pack.packs: + for document_id in sticker.documents: + doc = reuploaded_documents[document_id] + doc["body"] = sticker.emoticon + doc["net.maunium.telegram.sticker"] = { + "pack": { + "id": pack.set.id, + "short_name": pack.set.short_name, + }, + "id": document_id, + "emoticon": sticker.emoticon, + } + + with open(pack_path, "w") as pack_file: + json.dump({ + "title": pack.set.title, + "short_name": pack.set.short_name, + "id": pack.set.id, + "hash": pack.set.hash, + "stickers": list(reuploaded_documents.values()), + }, pack_file, ensure_ascii=False) + + add_to_index(os.path.basename(pack_path)) + + +pack_url_regex = re.compile(r"^(?:(?:https?://)?(?:t|telegram)\.(?:me|dog)/addstickers/)?" + r"([A-Za-z0-9-_]+)" + r"(?:\.json)?$") + + +async def main(): + client = TelegramClient(args.session, 298751, "cb676d6bae20553c9996996a8f52b4d7") + await client.start() + + if args.list: + stickers: AllStickers = await client(GetAllStickersRequest(hash=0)) + index = 1 + width = len(str(stickers.sets)) + print("Your saved sticker packs:") + for saved_pack in stickers.sets: + print(f"{index:>{width}}. {saved_pack.title} " + f"(t.me/addstickers/{saved_pack.short_name})") + elif args.pack[0]: + input_packs = [] + for pack_url in args.pack[0]: + match = pack_url_regex.match(pack_url) + if not match: + print(f"'{pack_url}' doesn't look like a sticker pack URL") + return + input_packs.append(InputStickerSetShortName(short_name=match.group(1))) + for input_pack in input_packs: + pack: StickerSetFull = await client(GetStickerSetRequest(input_pack)) + await reupload_pack(client, pack) + print(f"Saved {pack.set.title} as {pack.set.short_name}.json") + else: + parser.print_help() + + +asyncio.run(main()) diff --git a/requirements.txt b/requirements.txt new file mode 100644 index 0000000..ca16357 --- /dev/null +++ b/requirements.txt @@ -0,0 +1,5 @@ +aiohttp +yarl +pillow +telethon +cryptg diff --git a/web/index.css b/web/index.css new file mode 100644 index 0000000..1ff2fc4 --- /dev/null +++ b/web/index.css @@ -0,0 +1,64 @@ +/* +Copyright (c) 2020 Tulir Asokan + +This Source Code Form is subject to the terms of the Mozilla Public +License, v. 2.0. If a copy of the MPL was not distributed with this +file, You can obtain one at http://mozilla.org/MPL/2.0/. +*/ + +* { + font-family: sans-serif; +} + +html { + scrollbar-width: none; +} + +body { + margin: 0; +} + +.main:not(.pack-list) { + margin: 2rem; +} + +.main.empty { + text-align: center; +} + +.stickerpack > .sticker-list { + display: flex; + flex-wrap: wrap; +} + +.stickerpack > h1 { + margin: .75rem; +} + +.sticker { + display: flex; + padding: 4px; + cursor: pointer; + position: relative; + width: 25vw; + height: 25vw; + box-sizing: border-box; +} + +.sticker:hover { + background-color: #eee; +} + +.sticker > img { + display: none; + width: 100%; + object-fit: contain; +} + +.sticker > img.visible { + display: initial; +} + +h1 { + font-size: 1rem; +} diff --git a/web/index.html b/web/index.html new file mode 100644 index 0000000..66ebff4 --- /dev/null +++ b/web/index.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> + <title>Maunium sticker picker</title> + <link rel="stylesheet" href="index.css"/> + <link rel="stylesheet" href="spinner.css"/> +</head> +<body> + <noscript>This sticker picker requires JavaScript</noscript> + <script src="index.js" type="module"></script> +</body> +</html> diff --git a/web/index.js b/web/index.js new file mode 100644 index 0000000..4c0dab5 --- /dev/null +++ b/web/index.js @@ -0,0 +1,175 @@ +// Copyright (c) 2020 Tulir Asokan +// +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at http://mozilla.org/MPL/2.0/. +import { html, render, Component } from "https://unpkg.com/htm/preact/index.mjs?module" + +// The base URL for fetching packs. The app will first fetch ${PACK_BASE_URL}/index.json, +// then ${PACK_BASE_URL}/${packFile} for each packFile in the packs object of the index.json file. +const PACKS_BASE_URL = "packs" +// This is updated from packs/index.json +let HOMESERVER_URL = "https://matrix-client.matrix.org" + +const makeThumbnailURL = mxc => `${HOMESERVER_URL}/_matrix/media/r0/thumbnail/${mxc.substr(6)}?height=128&width=128&method=scale` + +class App extends Component { + constructor(props) { + super(props) + this.state = { + packs: [], + loading: true, + error: null, + } + this.observer = null + } + + observeIntersection = intersections => { + for (const entry of intersections) { + const img = entry.target.children.item(0) + if (entry.isIntersecting) { + img.setAttribute("src", img.getAttribute("data-src")) + img.classList.add("visible") + } else { + img.removeAttribute("src") + img.classList.remove("visible") + } + } + } + + componentDidMount() { + fetch(`${PACKS_BASE_URL}/index.json`).then(async indexRes => { + if (indexRes.status >= 400) { + this.setState({ + loading: false, + error: indexRes.status !== 404 ? indexRes.statusText : null, + }) + return + } + const indexData = await indexRes.json() + HOMESERVER_URL = indexData.homeserver_url || HOMESERVER_URL + // TODO only load pack metadata when scrolled into view? + for (const packFile of indexData.packs) { + const packRes = await fetch(`${PACKS_BASE_URL}/${packFile}`) + const packData = await packRes.json() + this.setState({ + packs: [...this.state.packs, packData], + loading: false, + }) + } + }, error => this.setState({ loading: false, error })) + this.observer = new IntersectionObserver(this.observeIntersection, { + rootMargin: "100px", + threshold: 0, + }) + } + + componentDidUpdate() { + for (const elem of document.getElementsByClassName("sticker")) { + this.observer.observe(elem) + } + } + + componentWillUnmount() { + this.observer.disconnect() + } + + render() { + if (this.state.loading) { + return html`<div class="main spinner"><${Spinner} size=${80} green /></div>` + } else if (this.state.error) { + return html`<div class="main error"> + <h1>Failed to load packs</h1> + <p>${this.state.error}</p> + </div>` + } else if (this.state.packs.length === 0) { + return html`<div class="main empty"><h1>No packs found :(</h1></div>` + } + return html`<div class="main pack-list"> + ${this.state.packs.map(pack => html`<${Pack} id=${pack.id} ...${pack}/>`)} + </div>` + } +} + +const Spinner = ({ size = 40, noCenter = false, noMargin = false, green = false }) => { + let margin = 0 + if (!isNaN(+size)) { + size = +size + margin = noMargin ? 0 : `${Math.round(size / 6)}px` + size = `${size}px` + } + const noInnerMargin = !noCenter || !margin + const comp = html` + <div style="width: ${size}; height: ${size}; margin: ${noInnerMargin ? 0 : margin} 0;" + class="sk-chase ${green && "green"}"> + <div class="sk-chase-dot" /> + <div class="sk-chase-dot" /> + <div class="sk-chase-dot" /> + <div class="sk-chase-dot" /> + <div class="sk-chase-dot" /> + <div class="sk-chase-dot" /> + </div> + ` + if (!noCenter) { + return html`<div style="margin: ${margin} 0;" class="sk-center-wrapper">${comp}</div>` + } + return comp +} + +const Pack = ({ title, stickers }) => html`<div class="stickerpack"> + <h1>${title}</h1> + <div class="sticker-list"> + ${stickers.map(sticker => html` + <${Sticker} key=${sticker["net.maunium.telegram.sticker"].id} content=${sticker}/> + `)} + </div> +</div>` + +const Sticker = ({ content }) => html`<div class="sticker" onClick=${() => sendSticker(content)}> + <img data-src=${makeThumbnailURL(content.url)} alt=${content.body} /> +</div>` + +function sendSticker(content) { + window.parent.postMessage({ + api: "fromWidget", + action: "m.sticker", + requestId: `sticker-${Date.now()}`, + widgetId, + data: { + name: content.body, + content, + }, + }, "*") +} + +let widgetId = null + +window.onmessage = event => { + if (!window.parent || !event.data) { + return + } + + const request = event.data + if (!request.requestId || !request.widgetId || !request.action || request.api !== "toWidget") { + return + } + + if (widgetId) { + if (widgetId !== request.widgetId) { + return + } + } else { + widgetId = request.widgetId + } + + window.parent.postMessage({ + ...request, + response: request.action === "capabilities" ? { + capabilities: ["m.sticker"], + } : { + error: { message: "Action not supported" }, + }, + }, event.origin) +} + +render(html`<${App} />`, document.body) diff --git a/web/spinner.css b/web/spinner.css new file mode 100644 index 0000000..dcf6832 --- /dev/null +++ b/web/spinner.css @@ -0,0 +1,64 @@ +/* Chase spinner from https://tobiasahlin.com/spinkit/. MIT license */ +.sk-center-wrapper { + width: 100%; + display: flex; + justify-content: space-around; +} + +.sk-chase { + position: relative; + animation: sk-chase 2.5s infinite linear both; +} + +.sk-chase-dot { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + animation: sk-chase-dot 2.0s infinite ease-in-out both; +} + +.sk-chase-dot:before { + content: ''; + display: block; + width: 25%; + height: 25%; + border-radius: 100%; + animation: sk-chase-dot-before 2.0s infinite ease-in-out both; + background-color: #FFF; +} + +.sk-chase.green > .sk-chase-dot:before { + background-color: #00C853; +} + +.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; } +.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; } +.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; } +.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; } +.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; } +.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; } +.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; } +.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; } +.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; } +.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; } +.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; } +.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; } + +@keyframes sk-chase { + 100% { transform: rotate(360deg); } +} + +@keyframes sk-chase-dot { + 80%, 100% { transform: rotate(360deg); } +} + +@keyframes sk-chase-dot-before { + 50% { + transform: scale(0.4); + } + 100%, 0% { + transform: scale(1.0); + } +} |