You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

88 lines
3.6 KiB

4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
  1. # Maunium sticker picker
  2. A fast and simple Matrix sticker picker widget. Tested on Element Web, Android & iOS.
  3. ## Discussion
  4. Matrix room: [`#stickerpicker:maunium.net`](https://matrix.to/#/#stickerpicker:maunium.net)
  5. ## Utility commands
  6. In addition to the sticker picker widget itself, this project includes some
  7. utility scripts you can use to import and create sticker packs.
  8. To get started, install the dependencies for using the commands:
  9. 0. Make sure you have Python 3.6 or higher.
  10. 1. (Optional) Set up a virtual environment.
  11. 1. Create with `virtualenv -p python3 .venv`
  12. 2. Activate with `source .venv/bin/activate`
  13. 2. Install the utility commands and their dependencies with `pip install .`
  14. ### Importing packs from Telegram
  15. To import packs from Telegram, simply run `sticker-import <pack urls...>` with
  16. one or more t.me/addstickers/... URLs.
  17. If you want to list the URLs of all your saved packs, use `sticker-import --list`.
  18. This requires logging in with your account instead of a bot token.
  19. Notes:
  20. * On the first run, it'll prompt you to log in to Matrix and Telegram.
  21. * The Matrix URL and access token are stored in `config.json` by default.
  22. * The Telethon session data is stored in `sticker-import.session` by default.
  23. * By default, the pack data will be written to `web/packs/`.
  24. * You can pass as many pack URLs as you want.
  25. * You can re-run the command with the same URLs to update packs.
  26. ### Creating your own packs
  27. 1. Create a directory with your sticker images.
  28. * The file name (excluding extension) will be used as the caption.
  29. * The directory name will be used as the pack name/ID.
  30. * If you want the stickers to appear in a specific order, prefix them with `<number>-`,
  31. e.g. `01-Cat.png`. The number and dash won't be included in the caption.
  32. 2. Run `sticker-pack <pack directory>`.
  33. * If you want to override the pack displayname, pass `--title <custom title>`.
  34. 3. Copy `<pack directory>/pack.json` to `web/packs/your-pack-name.json`.
  35. 4. Add `your-pack-name.json` to the list in `web/packs/index.json`.
  36. ## Enabling the sticker widget
  37. 1. Serve everything under `web/` using your webserver of choice. Make sure not to serve the
  38. top-level data, as `config.json` and the Telethon session file contain sensitive data.
  39. 2. Using `/devtools` in Element Web, edit the `m.widgets` account data event to have the following content:
  40. ```json
  41. {
  42. "stickerpicker": {
  43. "content": {
  44. "type": "m.stickerpicker",
  45. "url": "https://your.sticker.picker.url/?theme=$theme",
  46. "name": "Stickerpicker",
  47. "data": {}
  48. },
  49. "sender": "@you:picker.url",
  50. "state_key": "stickerpicker",
  51. "type": "m.widget",
  52. "id": "stickerpicker"
  53. }
  54. }
  55. ```
  56. If you do not yet have a `m.widgets` event, simply create it with that content.
  57. You can also [use the client-server API directly][1] instead of using Element Web.
  58. The `theme=$theme` query parameter will make the widget conform to Element's theme automatically.
  59. You can also use `light`, `dark` or `black` instead of `$theme` to always use a specific theme.
  60. You can use https://maunium.net/stickers-demo/ as the URL to try out the picker
  61. without hosting the files yourself.
  62. 3. Open the sticker picker and enjoy the fast sticker picking experience.
  63. [1]: https://matrix.org/docs/spec/client_server/latest#put-matrix-client-r0-user-userid-account-data-type
  64. ## Preview
  65. ### Element Web
  66. ![Element Web](preview-element-web.png)
  67. ### Element Android
  68. ![Element Android](preview-element-android.png)
  69. ### Element iOS (dark theme)
  70. ![Element iOS](preview-element-ios.png)