Thanks for this nice effort!
I've installed the stickerpack widget and it works fine. It's just nog clear how to have multiple users use the same stickerpack "server"? How to configure that?
Thanks

Stickerpicker fails loading, if a pack has zero stickers:

Uncaught (in promise) TypeError: pack.stickers[0] is undefined
    NavBarItem https://ptphoenix.github.io/stickerpicker/web/src/index.js:339
    Preact 16
    _loadPacks https://ptphoenix.github.io/stickerpicker/web/src/index.js:179
    _loadPacks https://ptphoenix.github.io/stickerpicker/web/src/index.js:157
    componentDidMount https://ptphoenix.github.io/stickerpicker/web/src/index.js:190
    Preact 4
    <anonymous> https://ptphoenix.github.io/stickerpicker/web/src/index.js:363
index.js:339:1

<img src=${makeThumbnailURL(pack.stickers[0].url)}
					alt=${pack.stickers[0].body} class="visible" />

This caused also that the picker stop loading the remain packs.

I would recommend using the java script version of:

pack.stickers.first().unwrap_or("not_found.png")

However assuming that a pack is not empty is justify, but it should not effect the other stickerpacks.

the search box should be focused by default so you can start typing your search immediately

Your fix isn't working. Just replace the final line in import.py by something like this:

loop = asyncio.get_event_loop()
loop.run_until_complete(main())

It scrolls to the first pack visible in the horizontal scroll bar. Both on android and Web. Possibly related: selecting the second to last pack also selects the same first in line pack. (but it scrolls correctly)

It already has an access token, so may as well add an option to send the m.widgets account data too.

Hi,

Thanks for your amazing project !
It will help me lot and will be very useful.

I have a small issue. I read your wiki and used your demo url. All is working fine except one strange thing.

Steps to reproduce:

• follow wiki documentation
• restart Element Desktop app
• chose and post a sticker

Issue

Some "families" of stickers are working, some not.

• pusheen: 🔴 not working
• His Dark Materials: 🔴 not working
• Loading Artist: 🟢 working
• Rabbit: 🟢 working

Thanks!

The stickerpicker looks quite nice using light mode, but when using darkmode the text for the stickerpacks bleeds into the background and the top bar stays an oddly contrasted white. Might be good to consider just enforcing a white background or changing the text to white if the background is dark (though I'm not sure how feasible that is).

e.g. the feature comparison table but maybe also setup stuff and so on :)

I installed stickerpicker and it works well on android or element-web. However it can not scroll down on ipad element.

stickerpicker: uptodate.

element-ios: v1.5.1

Currently the wiki says:

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.

I experienced this as quite confusing, since I initially assumed web/ to be an URL path (not the subdirectory of the build result). Additionally Telethon session sounds like a reference to the sticker hosting itself (I guess, it is just part of the build process).

Maybe replace the above text with the following:

Serve the content of the web/ directory as the document root of a domain using your webserver of choice.

Maybe this would reduce confusion.

Something like Giphy could be integrated into the sticker picker to provide a better gif sending experience than the bots that can't do previews. Should be optional, since it requires connecting to an external service.

Shift + scroll already works, but that's much harder than just scrolling with the mouse wheel.

I want to remove a sticker pack from my homeserver, is that possible?

Hi,

i tried at a new folder and delete all the old stuff, but still i get the same error, with all packs i try.
Why the script think it is already uploaded, the packs folder is empty.
I am confused, what do i wrong?

(.venv) root@xxx:/var/lib/docker/volumes/docker_stickerpicker2/_data/stickerpicker# sticker-import https://t.me/addstickers/xxx
Reuploading XXX with 35 stickers and writing output to web/packs/xxx.json
Reuploading 5481252828116680717..Traceback (most recent call last):
  File "/var/lib/docker/volumes/docker_stickerpicker2/_data/stickerpicker/.venv/lib/python3.9/site-packages/sticker/stickerimport.py", line 85, in reupload_pack
    reuploaded_documents[document.id] = already_uploaded[document.id]
KeyError: 5481252828116680717

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "/var/lib/docker/volumes/docker_stickerpicker2/_data/stickerpicker/.venv/bin/sticker-import", line 8, in <module>
    sys.exit(cmd())
  File "/var/lib/docker/volumes/docker_stickerpicker2/_data/stickerpicker/.venv/lib/python3.9/site-packages/sticker/stickerimport.py", line 165, in cmd
    asyncio.get_event_loop().run_until_complete(main(parser.parse_args()))
  File "/usr/lib/python3.9/asyncio/base_events.py", line 642, in run_until_complete
    return future.result()
  File "/var/lib/docker/volumes/docker_stickerpicker2/_data/stickerpicker/.venv/lib/python3.9/site-packages/sticker/stickerimport.py", line 157, in main
    await reupload_pack(client, pack, args.output_dir)
  File "/var/lib/docker/volumes/docker_stickerpicker2/_data/stickerpicker/.venv/lib/python3.9/site-packages/sticker/stickerimport.py", line 88, in reupload_pack
    reuploaded_documents[document.id] = await reupload_document(client, document)
  File "/var/lib/docker/volumes/docker_stickerpicker2/_data/stickerpicker/.venv/lib/python3.9/site-packages/sticker/stickerimport.py", line 38, in reupload_document
    mxc = await matrix.upload(data, "image/png", f"{document.id}.png")
  File "/var/lib/docker/volumes/docker_stickerpicker2/_data/stickerpicker/.venv/lib/python3.9/site-packages/sticker/lib/matrix.py", line 90, in upload
    return (await resp.json())["content_uri"]
KeyError: 'content_uri'

When I creative sticker from telegram,
It shows:
Homeserver URL:
Access token:

Where can I find " Access token"?

Thanks

There should be a navigation bar that shows the first sticker in each pack and scrolls to that pack when clicked.

Optional dedicated search field at the stickerpack.json.

A dedicated search field would allow to add text, which can be searched for, without modifying the stickerbody and stickerid.

Hi,

since a few days i get the following error, if i try to import a pack.

Traceback (most recent call last):
  File "/usr/local/bin/sticker-import", line 8, in <module>
    sys.exit(cmd())
  File "/usr/local/lib/python3.9/site-packages/sticker/stickerimport.py", line 165, in cmd
    asyncio.get_event_loop().run_until_complete(main(parser.parse_args()))
  File "/usr/local/lib/python3.9/asyncio/base_events.py", line 647, in run_until_complete
    return future.result()
  File "/usr/local/lib/python3.9/site-packages/sticker/stickerimport.py", line 157, in main
    await reupload_pack(client, pack, args.output_dir)
  File "/usr/local/lib/python3.9/site-packages/sticker/stickerimport.py", line 59, in reupload_pack
    if pack.set.animated:
AttributeError: 'StickerSet' object has no attribute 'animated'

I thought maybe is was a problem with my new python version, so i put in a docker container with python3.9 but i get the same error. Has telegram change some infos in their packs?

Greetings Marian

• update package names
• improve documentation for Windows users
• add setup heading
• add hint for homeserver URL

Updated wiki: https://github.com/aWeinzierl/stickerpicker-1/wiki/Creating-packs

On dark mode the table at the readme is hard to read:

I would suggest using ✅ instead of ✔️. This should be easy to see on dark and light mode.

Currently the picker is just some static files, which means everyone has the same packs and they can only be configured server-side.

The project could include a simple web server which can serve different packs for different users, based on some identifier in the picker URL. Once that server exists, it could also have a bot or other interface that users can use to add packs to their own picker.

It shouldn't have any auth other than the unique ID in the URL, as widget authentication is a mess that's different on all platforms.

The same problem #27 occurs in sticker-pack

>>> sticker-pack kim

  File "<stdin>", line 1
    sticker-pack kim
                 ^^^
SyntaxError: invalid syntax

I did a successful packaging test two days ago, but I can't remember the user permission relationship used, the problem may be related to this

There should be a way to include a link to a license in sticker pack metadata, and that link should be rendered somewhere in a very tiny font.

Seems to be an environment variable issue

amnesia ❯ git init .
Reinitialized existing Git repository in [ Truncated ]
                                                             
amnesia ❯ pip install .
Processing  [ Truncated ]\stickerpicker
  Preparing metadata (setup.py) ... error
  error: subprocess-exited-with-error

  × python setup.py egg_info did not run successfully.
  │ exit code: 1
  ╰─> [10 lines of output]
      Traceback (most recent call last):
        File "<string>", line 2, in <module>
        File "<pip-setuptools-caller>", line 34, in <module>
        File " [ Truncated ]\stickerpicker\setup.py", line 3, in <module>
          from sticker.get_version import git_tag, git_revision, version, linkified_version
        File " [ Truncated ]\stickerpicker\sticker\get_version.py", line 9, in <module>

Specifically:

          "HOME": os.environ["HOME"],
        File " [ Truncated ]\Python\Python310\lib\os.py", line 680, in __getitem__
          raise KeyError(key) from None
      KeyError: 'HOME'
      [end of output]

Although setting %HOME%=anything has no effect on this error.

There should be a built-in way to reload packs from the server for users of Element Desktop (and possibly other clients that don't have any way to reload the picker)

One of my users doesn't get the stickers working in element-web. He added the correct m.widgets json (see below), cleared cache and reloaded, logged out and back in to element-web, uses the same element-web instance as i do (so x-frame-options and similar should be ok), but just gets the bunny saying he hasn't enabled any packs. what else could we check?

synapse=# select * from account_data where user_id='@Redacted:asra.gr' and account_data_type='m.widgets';
        user_id        | account_data_type | stream_id |                                                                                                                                  content                                                                                                                                   | instance_name 
-----------------------+-------------------+-----------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+---------------
 @Redacted:asra.gr | m.widgets         |   3535283 | {"type":"m.widgets","content":{"stickerpicker":{"content":{"type":"m.stickerpicker","url":"https://sticker.asra.gr/?theme=$theme","name":"Stickerpicker","data":{}},"sender":"@Redacted:asra.gr","state_key":"stickerpicker","type":"m.widget","id":"stickerpicker"}}} | 
(1 row)

Would be a nice-to-have feature from telegram, especially on mobile.

There should be a way to search for stickers by the body field`

Both Element Web and Android seem to keep localStorage for the sticker picker, so it should be possible to remember the IDs of most frequently used stickers and show them at the top.

the 🔍️ should turn into ❌ when you type, which you can click to clear the field

Running sticker-import gives me an error:

File "/home/user/Documents/stickerpicker/.venv/bin/sticker-import", line 5
    from sticker.import import cmd
                 ^
SyntaxError: invalid syntax

Python version: 3.9.1

the sticker picker search field should clear automatically after sending the sticker you searched for

On iOS 15.7.8, iPhone 6s.

Theme is set to "default".

Got:

Expected:

To prevent accidentally sending the wrong sticker on touch screens, clicking a sticker should show a popup with the sticker and a send button.

Lottie files can be converted using https://github.com/sot-tech/LottieConverter like mautrix-telegram does. Probably need to convert to gif to make it work, even though that's not such a nice format

Hi! I've forked this repo and followed Brodie's video and the repo docs. I hosted the web dir on https://pimatrixconduit.xyz/stickerpicker/ and on https://gabrielseibel1.github.io/stickerpicker/web/, per instructions, on github pages.

I added one "included" pack, created a pack myself , and imported a pack from telegram. It worked fine.

My problem is that the stickers are not imported to element after the event is sent and the client is restarted. Also, the above pages don't show any stickers, just a green loading spinner.

Could this be a bug, or am I missing something?

Thanks,
Gabriel

When index.json's packs list starts with the scalar packs, the non-scalar packs don't appear on the website. After shifting the scalar entries to the bottom of the list, everything appears as expected.

Instead of only using Telegram Packs, also provide a link to download a pack.

Add Telegram-source or Link-to-Download-the-Pack to 'body' for implement them in own Sticker Packs.

Hi I created the static page as described and added the widget but in the desktop apps only the background loads.
I think the error might not be me because in the mobile app everything works as intended.
(I am using dracula theme in the desktop app but disabling it did not help)
To make sure the problem is not in my desktop installations you could try the stickers from .

Right now there's no way to see the associated emoji/body text/whatever that's usually called, to a sticker except for sending it somewhere. Or at least I couldn't find one.

The navbar should probably automatically scroll so that the packs visible in the picker are always visible in the navbar

In addition to telegram import, there should be some easy way to create new sticker packs.

Somewhat related to #7

I imported several packages from Telegram. Seems all good and well. Using the following URL: https://danger89.github.io/stickerpicker/web/?theme=$theme

Used that URL to send the m.widgets event, looks also to pop-up fine in Element Desktop Client.

However, if I want to sent a sticker. It sends the selected sticker 4x!! What is going on here..

Regards,

Melroy van den Berg

In addition to frequently used stickers, the user should be able to mark stickers as favorite so they show up at the top regardless of how much they're used

It's completely plausible that this is an issue with the android app, but since there is a working screenshot of this working on element android i'll start here.

It's rather self explanatory, i know i set everything up correctly because i'm pointing to https://maunium.net/stickers-demo/ , and because it works on element desktop. It also does not work on element web.

It only seems to work on Element Desktop for me.

While importing any stickerpack i got this

Reuploading 1179969546484711763..Traceback (most recent call last):
  File "/home/lagemeet/stickerpicker/.venv/lib/python3.7/site-packages/sticker/stickerimport.py", line 85, in reupload_pack
    reuploaded_documents[document.id] = already_uploaded[document.id]
KeyError: 1179969546484711763

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "/home/lagemeet/stickerpicker/.venv/bin/sticker-import", line 8, in <module>
    sys.exit(cmd())
  File "/home/lagemeet/stickerpicker/.venv/lib/python3.7/site-packages/sticker/stickerimport.py", line 164, in cmd
    asyncio.get_event_loop().run_until_complete(main(parser.parse_args()))
  File "/usr/lib/python3.7/asyncio/base_events.py", line 584, in run_until_complete
    return future.result()
  File "/home/lagemeet/stickerpicker/.venv/lib/python3.7/site-packages/sticker/stickerimport.py", line 156, in main
    await reupload_pack(client, pack, args.output_dir)
  File "/home/lagemeet/stickerpicker/.venv/lib/python3.7/site-packages/sticker/stickerimport.py", line 88, in reupload_pack
    reuploaded_documents[document.id] = await reupload_document(client, document)
  File "/home/lagemeet/stickerpicker/.venv/lib/python3.7/site-packages/sticker/stickerimport.py", line 38, in reupload_document
    mxc = await matrix.upload(data, "image/png", f"{document.id}.png")
  File "/home/lagemeet/stickerpicker/.venv/lib/python3.7/site-packages/sticker/lib/matrix.py", line 89, in upload
    return (await resp.json())["content_uri"]
KeyError: 'content_uri'

There are multiple problems in the widget on Element iOS and (mobile) Safari in general

• Picker doesn't load (fixed by 47f3d3f)
• Picking sticker fails to send (fixed by 6e6aad0)
• Scrolling sticker list doesn't work (fixed by de072dc)
• Clicking on navbar opens picker in browser (fixed by eb6967f)

All stickerpack I does use have only emojis deposited.
If I did search a emoji it all packs with the emoji are showed.

But if I enter as example "disappointed" in the search, no sticker packs are showed. The search should also displayed sticker with emoji 😞.
Tipping emojis is usually not supported by the keyboard, especially on the pc.