Compare commits

...

43 Commits

Author SHA1 Message Date
xz-dev
86cb2edcfa fix: Improve edge transparency handling by modifying only the Alpha channel
In our testing, the method of exclusively processing the Alpha channel yielded the best results. This approach focuses on adjusting transparency while preserving the RGB color information, which prevents color distortion and maintains image detail. Key reasons for the improvement include:

- Protecting RGB from color alterations, avoiding color seepage and contamination.
- Precisely removing unwanted semi-transparency in the Alpha channel, eliminating white edges.
- Simplifying the process, reducing complexity, and minimizing risk of introducing new issues.

By targeting transparency issues directly in the Alpha channel, we achieve cleaner edges without compromising the image's color quality and detail.
2024-09-15 16:26:58 +08:00
xz-dev
a0ef9f84be perf: convert static animated WebP to PNG 2024-09-15 13:21:41 +08:00
xz-dev
a83bc15208 fix: keep webm transparency 2024-09-14 23:03:26 +08:00
xz-dev
8ce5be04fb perf: ignore imported resources 2024-09-14 16:44:32 +08:00
xz-dev
47a98ba81b perf: optimize gif via gifsicle 2024-07-17 11:18:08 +08:00
xz-dev
e38090e952 fix: fix webm duration via ffmpeg 2024-07-17 11:18:08 +08:00
xz-dev
a6b8c09379 fix: support animated sticker convert(RGBA) 2024-07-17 11:18:08 +08:00
xz-dev
be477874e3 feat: support animated(lottie) sticker 2024-07-17 11:18:08 +08:00
xz-dev
715f62af58 feat: support animated(webm) sticker 2024-07-17 11:18:02 +08:00
Tulir Asokan
333567f481 Convert gif width/height to numbers 2024-06-19 14:29:21 +03:00
Tulir Asokan
125d057e44 Remove animated sticker pack check 2024-06-19 13:55:00 +03:00
Tulir Asokan
e1038e7d1e Force proxying legacy federated downloads in giphy proxy 2024-06-19 12:30:14 +03:00
Tulir Asokan
850668a9f6 Update giphyproxy /version response 2024-06-19 12:21:04 +03:00
Tulir Asokan
804014f3b4 Add cats to giphy proxy 2024-06-19 12:02:52 +03:00
Tulir Asokan
5da539ad84 Add MSC3916-compatible giphy media repo proxy 2024-06-19 11:51:29 +03:00
Tulir Asokan
6332613e13 Don't try to use non-existent variables 2024-06-17 22:48:15 +03:00
Tulir Asokan
dbc3a9fbb8 Don't prompt for giphy api key by default 2024-06-05 13:02:34 +03:00
Tulir Asokan
47f17fde45 Add support for sending gifs via Giphy
Fixes #22
Closes #75

Co-authored-by: Nischay <hegdenischay@gmail.com>
2024-05-18 16:18:55 +03:00
Tulir Asokan
f59406a47a Add missing parameter to getting sticker sets. Fixes #51 2022-11-15 12:58:38 +02:00
Tulir Asokan
99ced8878a Merge remote-tracking branch 'salixor/feat/search-box' 2021-10-03 12:52:55 +03:00
Tulir Asokan
046779d102 Update some metadata 2021-10-03 12:45:37 +03:00
Tulir Asokan
ef844a0ff8 Update dependencies 2021-10-03 12:42:11 +03:00
Tulir Asokan
502d91fc75 Merge remote-tracking branch 'p1gp1g/dev' 2021-10-03 11:50:47 +03:00
Tulir Asokan
591137ccb3 Merge remote-tracking branch 'celogeek/fixes-ios-and-more' 2021-10-03 11:50:27 +03:00
Tulir Asokan
f29c165357 Merge remote-tracking branch 'aWeinzierl/fix-encoding' 2021-10-03 11:49:53 +03:00
S1m
7939793351 Remove parseQuery and use params 2021-09-30 08:52:41 +02:00
S1m
e0d895f22a Check packfile protocole scheme + rm semicolons 2021-09-20 08:58:20 +02:00
S1m
5d3c7d1e2f Allow using external index.json and stickerpack 2021-09-19 17:35:28 +02:00
Tulir Asokan
ec8eeeeaf5 Fix scrolling topbar on Firefox
(and possibly break it on other browsers)
2021-04-22 19:12:54 +03:00
Tulir Asokan
57fde6fcad Assume https if homeserver URL doesn't have protocol 2021-04-22 19:12:54 +03:00
celogeek
9443e79e97 fix display of packs with sticker-import --list 2021-02-07 17:52:55 +01:00
celogeek
85813b22e5 add missing msgtype = m.sticker
On iOS the message is sent twice, with a duplicate event_id.
It cause error on logs, in different places (synapse, mautrix, ...)

It required to fix the already existing json or reimport the stickers.

The "packs/scalar*" example already include this field, and it works.
2021-02-07 17:50:50 +01:00
Andreas Weinzierl
569d9815c6 remove redundant utf-8 setting 2021-01-28 00:06:58 +01:00
Andreas Weinzierl
0f7b678f57 Use utf8-encoding whenever JSON is processed 2021-01-27 23:31:33 +01:00
Andreas Weinzierl
b884a9c387 Set encoding to utf-8 when saving json file for stickerpack
Fixes UnicodeEncodeError with Windows 10 when trying to import sticker packs caused by the default encoding scheme in Windows
2021-01-27 22:09:15 +01:00
Tulir Asokan
ba0096275c Update README.md 2021-01-24 13:14:59 +02:00
Tulir Asokan
3916ade97b Merge pull request #26 from auscompgeek/patch-1
Show sticker body in hover tooltip
2021-01-20 23:58:00 +02:00
Tulir Asokan
dab2420cd4 Merge pull request #28 from SpiritCroc/fix-import
Rename import.py, since import is a keyword
2021-01-20 23:57:28 +02:00
SpiritCroc
601d2acc32 Rename import.py, since import is a keyword
from sticker.import import cmd
                 ^
SyntaxError: invalid syntax

Fixes https://github.com/maunium/stickerpicker/issues/27.
2021-01-19 17:12:06 +01:00
David Vo
21d4f5cce6 Show sticker body in hover tooltip 2020-12-30 19:56:31 +11:00
Kévin Cocchi
9350d5f27b Update sass style file 2020-12-17 09:31:29 +01:00
Kévin Cocchi
add27513fe Implement stickers search 2020-12-17 01:01:32 +01:00
Kévin Cocchi
66d5b90ea1 Re-format CSS for readability in PR 2020-12-17 01:00:22 +01:00
32 changed files with 1336 additions and 2297 deletions

15
.editorconfig Normal file
View File

@@ -0,0 +1,15 @@
root = true
[*]
indent_style = tab
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.{yaml,yml,sql,py,sass}]
indent_style = space
[*.sass]
indent_size = 2

2
.gitignore vendored
View File

@@ -5,9 +5,11 @@
*.pyc
__pycache__
*.egg-info
build/
node_modules
web/lib/import-map.json
web/packs/*.json
*.session
/*.json

10
.gitlab-ci.yml Normal file
View File

@@ -0,0 +1,10 @@
build giphy proxy docker:
image: docker:stable
stage: build
before_script:
- docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY
script:
- docker build -t $CI_REGISTRY_IMAGE/giphyproxy:latest giphyproxy
- docker push $CI_REGISTRY_IMAGE/giphyproxy:latest
only:
- master

View File

@@ -11,8 +11,14 @@ For setup and usage instructions, please visit the [wiki](https://github.com/mau
* [Enabling the widget](https://github.com/maunium/stickerpicker/wiki/Enabling-the-widget)
* [Hosting on GitHub pages](https://github.com/maunium/stickerpicker/wiki/Hosting-on-GitHub-pages)
If you prefer video tutorials, [Brodie Robertson](https://www.youtube.com/c/BrodieRobertson) has made a great video on setting up the picker and creating some packs: https://youtu.be/Yz3H6KJTEI0.
## Comparison with other sticker pickers
* Scalar is the default integration manager in Element, which can't be self-hosted and only supports predefined sticker packs.
* [Dimension](https://github.com/turt2live/matrix-dimension) is an alternate integration manager. It can be self-hosted, but it's more difficult than Maunium sticker picker.
* Maunium sticker picker is just a sticker picker rather than a full integration manager. It's much simpler than integration managers, but currently has to be set up manually per-user.
| Feature | Scalar | Dimension | Maunium sticker picker |
|---------------------------------|--------|-----------|------------------------|
| Free software | ❌ | ✔️ | ✔️ |

16
giphyproxy/Dockerfile Normal file
View File

@@ -0,0 +1,16 @@
FROM golang:1-alpine AS builder
RUN apk add --no-cache ca-certificates
WORKDIR /build/giphyproxy
COPY . /build/giphyproxy
ENV CGO_ENABLED=0
RUN go build -o /usr/bin/giphyproxy
FROM scratch
COPY --from=builder /etc/ssl/certs/ca-certificates.crt /etc/ssl/certs/
COPY --from=builder /usr/bin/giphyproxy /usr/bin/giphyproxy
VOLUME /data
WORKDIR /data
CMD ["/usr/bin/giphyproxy"]

View File

@@ -0,0 +1,17 @@
# The server name to use for the custom mxc:// URIs.
# This server name will effectively be a real Matrix server, it just won't implement anything other than media.
# You must either set up .well-known delegation from this domain to this program, or proxy the domain directly to this program.
server_name: giphy.example.com
# Optionally a custom .well-known response. This defaults to `server_name:443` if empty.
well_known_response:
# The proxy will use MSC3860/MSC3916 media download redirects if the requester supports it.
# Optionally, you can force redirects and not allow proxying at all by setting this to false.
allow_proxy: false
# Matrix server signing key to make the federation tester pass, same format as synapse's .signing.key file.
# You can generate one using `giphyproxy -generate-key`.
server_key: CHANGE ME
# Hostname where the proxy should listen on
hostname: 0.0.0.0
# Port where the proxy should listen on
port: 8008

24
giphyproxy/go.mod Normal file
View File

@@ -0,0 +1,24 @@
module go.mau.fi/stickerpicker/giphyproxy
go 1.22.3
require (
go.mau.fi/util v0.5.0
gopkg.in/yaml.v3 v3.0.1
maunium.net/go/mautrix v0.19.0-beta.1.0.20240619092812-451658374280
)
require (
github.com/gorilla/mux v1.8.0 // indirect
github.com/mattn/go-colorable v0.1.13 // indirect
github.com/mattn/go-isatty v0.0.19 // indirect
github.com/rs/zerolog v1.33.0 // indirect
github.com/tidwall/gjson v1.17.1 // indirect
github.com/tidwall/match v1.1.1 // indirect
github.com/tidwall/pretty v1.2.0 // indirect
github.com/tidwall/sjson v1.2.5 // indirect
golang.org/x/crypto v0.24.0 // indirect
golang.org/x/exp v0.0.0-20240613232115-7f521ea00fb8 // indirect
golang.org/x/net v0.26.0 // indirect
golang.org/x/sys v0.21.0 // indirect
)

47
giphyproxy/go.sum Normal file
View File

@@ -0,0 +1,47 @@
github.com/coreos/go-systemd/v22 v22.5.0/go.mod h1:Y58oyj3AT4RCenI/lSvhwexgC+NSVTIJ3seZv2GcEnc=
github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
github.com/godbus/dbus/v5 v5.0.4/go.mod h1:xhWf0FNVPg57R7Z0UbKHbJfkEywrmjJnf7w5xrFpKfA=
github.com/gorilla/mux v1.8.0 h1:i40aqfkR1h2SlN9hojwV5ZA91wcXFOvkdNIeFDP5koI=
github.com/gorilla/mux v1.8.0/go.mod h1:DVbg23sWSpFRCP0SfiEN6jmj59UnW/n46BH5rLB71So=
github.com/mattn/go-colorable v0.1.13 h1:fFA4WZxdEF4tXPZVKMLwD8oUnCTTo08duU7wxecdEvA=
github.com/mattn/go-colorable v0.1.13/go.mod h1:7S9/ev0klgBDR4GtXTXX8a3vIGJpMovkB8vQcUbaXHg=
github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
github.com/mattn/go-isatty v0.0.19 h1:JITubQf0MOLdlGRuRq+jtsDlekdYPia9ZFsB8h/APPA=
github.com/mattn/go-isatty v0.0.19/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
github.com/pkg/errors v0.9.1/go.mod h1:bwawxfHBFNV+L2hUp1rHADufV3IMtnDRdf1r5NINEl0=
github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
github.com/rs/xid v1.5.0/go.mod h1:trrq9SKmegXys3aeAKXMUTdJsYXVwGY3RLcfgqegfbg=
github.com/rs/zerolog v1.33.0 h1:1cU2KZkvPxNyfgEmhHAz/1A9Bz+llsdYzklWFzgp0r8=
github.com/rs/zerolog v1.33.0/go.mod h1:/7mN4D5sKwJLZQ2b/znpjC3/GQWY/xaDXUM0kKWRHss=
github.com/stretchr/testify v1.9.0 h1:HtqpIVDClZ4nwg75+f6Lvsy/wHu+3BoSGCbBAcpTsTg=
github.com/stretchr/testify v1.9.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
github.com/tidwall/gjson v1.14.2/go.mod h1:/wbyibRr2FHMks5tjHJ5F8dMZh3AcwJEMf5vlfC0lxk=
github.com/tidwall/gjson v1.17.1 h1:wlYEnwqAHgzmhNUFfw7Xalt2JzQvsMx2Se4PcoFCT/U=
github.com/tidwall/gjson v1.17.1/go.mod h1:/wbyibRr2FHMks5tjHJ5F8dMZh3AcwJEMf5vlfC0lxk=
github.com/tidwall/match v1.1.1 h1:+Ho715JplO36QYgwN9PGYNhgZvoUSc9X2c80KVTi+GA=
github.com/tidwall/match v1.1.1/go.mod h1:eRSPERbgtNPcGhD8UCthc6PmLEQXEWd3PRB5JTxsfmM=
github.com/tidwall/pretty v1.2.0 h1:RWIZEg2iJ8/g6fDDYzMpobmaoGh5OLl4AXtGUGPcqCs=
github.com/tidwall/pretty v1.2.0/go.mod h1:ITEVvHYasfjBbM0u2Pg8T2nJnzm8xPwvNhhsoaGGjNU=
github.com/tidwall/sjson v1.2.5 h1:kLy8mja+1c9jlljvWTlSazM7cKDRfJuR/bOJhcY5NcY=
github.com/tidwall/sjson v1.2.5/go.mod h1:Fvgq9kS/6ociJEDnK0Fk1cpYF4FIW6ZF7LAe+6jwd28=
go.mau.fi/util v0.5.0 h1:8yELAl+1CDRrwGe9NUmREgVclSs26Z68pTWePHVxuDo=
go.mau.fi/util v0.5.0/go.mod h1:DsJzUrJAG53lCZnnYvq9/mOyLuPScWwYhvETiTrpdP4=
golang.org/x/crypto v0.24.0 h1:mnl8DM0o513X8fdIkmyFE/5hTYxbwYOjDS/+rK6qpRI=
golang.org/x/crypto v0.24.0/go.mod h1:Z1PMYSOR5nyMcyAVAIQSKCDwalqy85Aqn1x3Ws4L5DM=
golang.org/x/exp v0.0.0-20240613232115-7f521ea00fb8 h1:yixxcjnhBmY0nkL253HFVIm0JsFHwrHdT3Yh6szTnfY=
golang.org/x/exp v0.0.0-20240613232115-7f521ea00fb8/go.mod h1:jj3sYF3dwk5D+ghuXyeI3r5MFf+NT2An6/9dOA95KSI=
golang.org/x/net v0.26.0 h1:soB7SVo0PWrY4vPW/+ay0jKDNScG2X9wFeYlXIvJsOQ=
golang.org/x/net v0.26.0/go.mod h1:5YKkiSynbBIh3p6iOc/vibscux0x38BZDkn8sCUPxHE=
golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
golang.org/x/sys v0.12.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
golang.org/x/sys v0.21.0 h1:rF+pYz3DAGSQAxAu1CbC7catZg4ebC4UIeIhKxBZvws=
golang.org/x/sys v0.21.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405 h1:yhCVgyC4o1eVCa2tZl7eS0r+SDo693bJlVdllGtEeKM=
gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
maunium.net/go/mautrix v0.19.0-beta.1.0.20240619092812-451658374280 h1:+EHJF8h7obPow7kDnsmGoWN+bTCjHGxCKaH99MldZUI=
maunium.net/go/mautrix v0.19.0-beta.1.0.20240619092812-451658374280/go.mod h1:cxv1w6+syudmEpOewHYIQT9yO7TM5UOWmf6xEBVI4H4=

72
giphyproxy/main.go Normal file
View File

@@ -0,0 +1,72 @@
// maunium-stickerpicker - A fast and simple Matrix sticker picker widget.
// Copyright (C) 2024 Tulir Asokan
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU Affero General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU Affero General Public License for more details.
//
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>.
package main
import (
"context"
"flag"
"fmt"
"os"
"regexp"
"time"
"go.mau.fi/util/exerrors"
"gopkg.in/yaml.v3"
"maunium.net/go/mautrix/federation"
"maunium.net/go/mautrix/mediaproxy"
)
type Config struct {
mediaproxy.BasicConfig `yaml:",inline"`
mediaproxy.ServerConfig `yaml:",inline"`
}
var configPath = flag.String("config", "config.yaml", "config file path")
var generateServerKey = flag.Bool("generate-key", false, "generate a new server key and exit")
var giphyIDRegex = regexp.MustCompile(`^[a-zA-Z0-9-_]+$`)
func main() {
flag.Parse()
if *generateServerKey {
fmt.Println(federation.GenerateSigningKey().SynapseString())
} else {
cfgFile := exerrors.Must(os.ReadFile(*configPath))
var cfg Config
exerrors.PanicIfNotNil(yaml.Unmarshal(cfgFile, &cfg))
mp := exerrors.Must(mediaproxy.NewFromConfig(cfg.BasicConfig, getMedia))
mp.KeyServer.Version.Name = "maunium-stickerpicker giphy proxy"
mp.ForceProxyLegacyFederation = true
exerrors.PanicIfNotNil(mp.Listen(cfg.ServerConfig))
}
}
func getMedia(_ context.Context, id string) (response mediaproxy.GetMediaResponse, err error) {
// This is not related to giphy, but random cats are always fun
if id == "cat" {
return &mediaproxy.GetMediaResponseURL{
URL: "https://cataas.com/cat",
ExpiresAt: time.Now(),
}, nil
}
if !giphyIDRegex.MatchString(id) {
return nil, mediaproxy.ErrInvalidMediaIDSyntax
}
return &mediaproxy.GetMediaResponseURL{
URL: fmt.Sprintf("https://i.giphy.com/%s.webp", id),
}, nil
}

View File

@@ -4,3 +4,4 @@ pillow
telethon
cryptg
python-magic
lottie[all]

View File

@@ -45,9 +45,10 @@ setuptools.setup(
"Programming Language :: Python :: 3.6",
"Programming Language :: Python :: 3.7",
"Programming Language :: Python :: 3.8",
"Programming Language :: Python :: 3.9",
],
entry_points={"console_scripts": [
"sticker-import=sticker.import:cmd",
"sticker-import=sticker.stickerimport:cmd",
"sticker-pack=sticker.pack:cmd",
]},
)

View File

@@ -42,6 +42,7 @@ if TYPE_CHECKING:
url: str
info: MediaInfo
id: str
msgtype: str
else:
MediaInfo = None
StickerInfo = None
@@ -59,12 +60,14 @@ async def load_config(path: str) -> None:
homeserver_url = input("Homeserver URL: ")
access_token = input("Access token: ")
whoami_url = URL(homeserver_url) / "_matrix" / "client" / "r0" / "account" / "whoami"
if whoami_url.scheme not in ("https", "http"):
whoami_url = whoami_url.with_scheme("https")
user_id = await whoami(whoami_url, access_token)
with open(path, "w") as config_file:
json.dump({
"homeserver": homeserver_url,
"user_id": user_id,
"access_token": access_token
"access_token": access_token,
}, config_file)
print(f"Wrote config to {path}")

View File

@@ -13,20 +13,205 @@
#
# You should have received a copy of the GNU Affero General Public License
# along with this program. If not, see <https://www.gnu.org/licenses/>.
from functools import partial
from io import BytesIO
import numpy as np
import os.path
import subprocess
import json
import tempfile
import mimetypes
from PIL import Image
try:
import magic
except ImportError:
print("[Warning] Magic is not installed, using file extensions to guess mime types")
magic = None
from PIL import Image, ImageSequence, ImageFilter
from . import matrix
open_utf8 = partial(open, encoding='UTF-8')
def convert_image(data: bytes) -> (bytes, int, int):
image: Image.Image = Image.open(BytesIO(data)).convert("RGBA")
def guess_mime(data: bytes) -> str:
mime = None
if magic:
try:
return magic.Magic(mime=True).from_buffer(data)
except Exception:
pass
else:
with tempfile.NamedTemporaryFile() as temp:
temp.write(data)
temp.close()
mime, _ = mimetypes.guess_type(temp.name)
return mime or "image/png"
def _video_to_webp(data: bytes) -> bytes:
mime = guess_mime(data)
ext = mimetypes.guess_extension(mime)
with tempfile.NamedTemporaryFile(suffix=ext) as video:
video.write(data)
video.flush()
with tempfile.NamedTemporaryFile(suffix=".webp") as webp:
print(".", end="", flush=True)
ffmpeg_encoder_args = []
if mime == "video/webm":
encode = subprocess.run(["ffprobe", "-v", "error", "-select_streams", "v:0", "-show_entries", "stream=codec_name", "-of", "default=nokey=1:noprint_wrappers=1", video.name], capture_output=True, text=True).stdout.strip()
ffmpeg_encoder = None
if encode == "vp8":
ffmpeg_encoder = "libvpx"
elif encode == "vp9":
ffmpeg_encoder = "libvpx-vp9"
if ffmpeg_encoder:
ffmpeg_encoder_args = ["-c:v", ffmpeg_encoder]
result = subprocess.run(["ffmpeg", "-y", "-threads", "auto", *ffmpeg_encoder_args, "-i", video.name, "-lossless", "1", webp.name],
capture_output=True)
if result.returncode != 0:
raise RuntimeError(f"Run ffmpeg failed with code {result.returncode}, Error occurred:\n{result.stderr}")
webp.seek(0)
return webp.read()
def video_to_webp(data: bytes) -> bytes:
mime = guess_mime(data)
ext = mimetypes.guess_extension(mime)
# run ffmpeg to fix duration
with tempfile.NamedTemporaryFile(suffix=ext) as temp:
temp.write(data)
temp.flush()
with tempfile.NamedTemporaryFile(suffix=ext) as temp_fixed:
print(".", end="", flush=True)
result = subprocess.run(["ffmpeg", "-y", "-threads", "auto", "-i", temp.name, "-codec", "copy", temp_fixed.name],
capture_output=True)
if result.returncode != 0:
raise RuntimeError(f"Run ffmpeg failed with code {result.returncode}, Error occurred:\n{result.stderr}")
temp_fixed.seek(0)
data = temp_fixed.read()
return _video_to_webp(data)
def process_frame(frame):
"""
Process GIF frame, repair edges, ensure no white or semi-transparent pixels, while keeping color information intact.
"""
frame = frame.convert('RGBA')
# Decompose Alpha channel
alpha = frame.getchannel('A')
# Process Alpha channel with threshold, remove semi-transparent pixels
# Threshold can be adjusted as needed (0-255), 128 is the middle value
threshold = 128
alpha = alpha.point(lambda x: 255 if x >= threshold else 0)
# Process Alpha channel with MinFilter, remove edge noise
alpha = alpha.filter(ImageFilter.MinFilter(3))
# Process Alpha channel with MaxFilter, repair edges
alpha = alpha.filter(ImageFilter.MaxFilter(3))
# Apply processed Alpha channel back to image
frame.putalpha(alpha)
return frame
def webp_to_others(data: bytes, mimetype: str) -> bytes:
with tempfile.NamedTemporaryFile(suffix=".webp") as webp:
webp.write(data)
webp.flush()
ext = mimetypes.guess_extension(mimetype)
with tempfile.NamedTemporaryFile(suffix=ext) as img:
print(".", end="", flush=True)
im = Image.open(webp.name)
im.info.pop('background', None)
if mimetype == "image/gif":
frames = []
duration = []
for frame in ImageSequence.Iterator(im):
frame = process_frame(frame)
frames.append(frame)
duration.append(frame.info.get('duration', 100))
frames[0].save(img.name, save_all=True, lossless=True, quality=100, method=6,
append_images=frames[1:], loop=0, duration=duration, disposal=2)
else:
im.save(img.name, save_all=True, lossless=True, quality=100, method=6)
img.seek(0)
return img.read()
def is_uniform_animated_webp(data: bytes) -> bool:
img = Image.open(BytesIO(data))
if img.n_frames <= 1:
return False
first_frame = np.array(img)
for frame_number in range(1, img.n_frames):
img.seek(frame_number)
current_frame = np.array(img)
if not np.array_equal(first_frame, current_frame):
return False
return True
def webp_to_gif_or_png(data: bytes) -> bytes:
# check if the webp is animated
image: Image.Image = Image.open(BytesIO(data))
is_animated = getattr(image, "is_animated", False)
if is_animated and not is_uniform_animated_webp(data):
return webp_to_others(data, "image/gif")
else:
# convert to png
return webp_to_others(data, "image/png")
def opermize_gif(data: bytes) -> bytes:
with tempfile.NamedTemporaryFile() as gif:
gif.write(data)
gif.flush()
# use gifsicle to optimize gif
result = subprocess.run(["gifsicle", "--batch", "--optimize=3", "--colors=256", gif.name],
capture_output=True)
if result.returncode != 0:
raise RuntimeError(f"Run gifsicle failed with code {result.returncode}, Error occurred:\n{result.stderr}")
gif.seek(0)
return gif.read()
def _convert_image(data: bytes, mimetype: str) -> (bytes, int, int):
image: Image.Image = Image.open(BytesIO(data))
new_file = BytesIO()
image.save(new_file, "png")
w, h = image.size
# Determine if the image is a GIF
is_animated = getattr(image, "is_animated", False)
if is_animated:
frames = [frame.convert("RGBA") for frame in ImageSequence.Iterator(image)]
# Save the new GIF
frames[0].save(
new_file,
format='GIF',
save_all=True,
append_images=frames[1:],
loop=image.info.get('loop', 0), # Default loop to 0 if not present
duration=image.info.get('duration', 100), # Set a default duration if not present
disposal=image.info.get('disposal', 2) # Default to disposal method 2 (restore to background)
)
# Get the size of the first frame to determine resizing
w, h = frames[0].size
else:
suffix = mimetypes.guess_extension(mimetype)
if suffix:
suffix = suffix[1:]
image = image.convert("RGBA")
image.save(new_file, format=suffix)
w, h = image.size
if w > 256 or h > 256:
# Set the width and height to lower values so clients wouldn't show them as huge images
if w > h:
@@ -38,10 +223,61 @@ def convert_image(data: bytes) -> (bytes, int, int):
return new_file.getvalue(), w, h
def _convert_sticker(data: bytes) -> (bytes, str, int, int):
mimetype = guess_mime(data)
if mimetype.startswith("video/"):
data = video_to_webp(data)
print(".", end="", flush=True)
elif mimetype.startswith("application/gzip"):
print(".", end="", flush=True)
# unzip file
import gzip
with gzip.open(BytesIO(data), "rb") as f:
data = f.read()
mimetype = guess_mime(data)
suffix = mimetypes.guess_extension(mimetype)
with tempfile.NamedTemporaryFile(suffix=suffix) as temp:
temp.write(data)
with tempfile.NamedTemporaryFile(suffix=".webp") as gif:
# run lottie_convert.py input output
print(".", end="", flush=True)
import subprocess
cmd = ["lottie_convert.py", temp.name, gif.name]
result = subprocess.run(cmd, capture_output=True, text=True)
retcode = result.returncode
if retcode != 0:
raise RuntimeError(f"Run {cmd} failed with code {retcode}, Error occurred:\n{result.stderr}")
gif.seek(0)
data = gif.read()
mimetype = guess_mime(data)
if mimetype == "image/webp":
data = webp_to_gif_or_png(data)
mimetype = guess_mime(data)
rlt = _convert_image(data, mimetype)
data = rlt[0]
if mimetype == "image/gif":
print(".", end="", flush=True)
data = opermize_gif(data)
return data, mimetype, rlt[1], rlt[2]
def convert_sticker(data: bytes) -> (bytes, str, int, int):
try:
return _convert_sticker(data)
except Exception as e:
mimetype = guess_mime(data)
print(f"Error converting image, mimetype: {mimetype}")
ext = mimetypes.guess_extension(mimetype)
with tempfile.NamedTemporaryFile(delete=False, suffix=ext) as temp:
temp.write(data)
print(f"Saved to {temp.name}")
raise e
def add_to_index(name: str, output_dir: str) -> None:
index_path = os.path.join(output_dir, "index.json")
try:
with open(index_path) as index_file:
with open_utf8(index_path) as index_file:
index_data = json.load(index_file)
except (FileNotFoundError, json.JSONDecodeError):
index_data = {"packs": []}
@@ -49,13 +285,13 @@ def add_to_index(name: str, output_dir: str) -> None:
index_data["homeserver_url"] = matrix.homeserver_url
if name not in index_data["packs"]:
index_data["packs"].append(name)
with open(index_path, "w") as index_file:
with open_utf8(index_path, "w") as index_file:
json.dump(index_data, index_file, indent=" ")
print(f"Added {name} to {index_path}")
def make_sticker(mxc: str, width: int, height: int, size: int,
body: str = "") -> matrix.StickerInfo:
mimetype: str, body: str = "") -> matrix.StickerInfo:
return {
"body": body,
"url": mxc,
@@ -63,7 +299,7 @@ def make_sticker(mxc: str, width: int, height: int, size: int,
"w": width,
"h": height,
"size": size,
"mimetype": "image/png",
"mimetype": mimetype,
# Element iOS compatibility hack
"thumbnail_url": mxc,
@@ -71,7 +307,8 @@ def make_sticker(mxc: str, width: int, height: int, size: int,
"w": width,
"h": height,
"size": size,
"mimetype": "image/png",
"mimetype": mimetype,
},
},
"msgtype": "m.sticker",
}

View File

@@ -77,11 +77,11 @@ async def upload_sticker(file: str, directory: str, old_stickers: Dict[str, matr
}
print(f".. using existing upload")
else:
image_data, width, height = util.convert_image(image_data)
image_data, mimetype, width, height = util.convert_sticker(image_data)
print(".", end="", flush=True)
mxc = await matrix.upload(image_data, "image/png", file)
mxc = await matrix.upload(image_data, mimetype, file)
print(".", end="", flush=True)
sticker = util.make_sticker(mxc, width, height, len(image_data), name)
sticker = util.make_sticker(mxc, width, height, len(image_data), mimetype, name)
sticker["id"] = sticker_id
print(" uploaded", flush=True)
return sticker
@@ -93,7 +93,7 @@ async def main(args: argparse.Namespace) -> None:
dirname = os.path.basename(os.path.abspath(args.path))
meta_path = os.path.join(args.path, "pack.json")
try:
with open(meta_path) as pack_file:
with util.open_utf8(meta_path) as pack_file:
pack = json.load(pack_file)
print(f"Loaded existing pack meta from {meta_path}")
except FileNotFoundError:
@@ -112,14 +112,14 @@ async def main(args: argparse.Namespace) -> None:
if sticker:
pack["stickers"].append(sticker)
with open(meta_path, "w") as pack_file:
with util.open_utf8(meta_path, "w") as pack_file:
json.dump(pack, pack_file)
print(f"Wrote pack to {meta_path}")
if args.add_to_index:
picker_file_name = f"{pack['id']}.json"
picker_pack_path = os.path.join(args.add_to_index, picker_file_name)
with open(picker_pack_path, "w") as pack_file:
with util.open_utf8(picker_pack_path, "w") as pack_file:
json.dump(pack, pack_file)
print(f"Copied pack to {picker_pack_path}")
util.add_to_index(picker_file_name, args.add_to_index)

View File

@@ -19,12 +19,12 @@ import json
index_path = "../web/packs/index.json"
try:
with open(index_path) as index_file:
with util.open_utf8(index_path) as index_file:
index_data = json.load(index_file)
except (FileNotFoundError, json.JSONDecodeError):
index_data = {"packs": []}
with open(sys.argv[-1]) as file:
with util.open_utf8(sys.argv[-1]) as file:
data = json.load(file)
for pack in data["assets"]:
@@ -45,12 +45,12 @@ for pack in data["assets"]:
}
filename = f"scalar-{pack['name'].replace(' ', '_')}.json"
pack_path = f"web/packs/{filename}"
with open(pack_path, "w") as pack_file:
with util.open_utf8(pack_path, "w") as pack_file:
json.dump(pack_data, pack_file)
print(f"Wrote {title} to {pack_path}")
if filename not in index_data["packs"]:
index_data["packs"].append(filename)
with open(index_path, "w") as index_file:
with util.open_utf8(index_path, "w") as index_file:
json.dump(index_data, index_file, indent=" ")
print(f"Updated {index_path}")

View File

@@ -33,11 +33,11 @@ async def reupload_document(client: TelegramClient, document: Document) -> matri
print(f"Reuploading {document.id}", end="", flush=True)
data = await client.download_media(document, file=bytes)
print(".", end="", flush=True)
data, width, height = util.convert_image(data)
data, mimetype, width, height = util.convert_sticker(data)
print(".", end="", flush=True)
mxc = await matrix.upload(data, "image/png", f"{document.id}.png")
mxc = await matrix.upload(data, mimetype, f"{document.id}.png")
print(".", flush=True)
return util.make_sticker(mxc, width, height, len(data))
return util.make_sticker(mxc, width, height, len(data), mimetype)
def add_meta(document: Document, info: matrix.StickerInfo, pack: StickerSetFull) -> None:
@@ -56,10 +56,6 @@ def add_meta(document: Document, info: matrix.StickerInfo, pack: StickerSetFull)
async def reupload_pack(client: TelegramClient, pack: StickerSetFull, output_dir: str) -> None:
if pack.set.animated:
print("Animated stickerpacks are currently not supported")
return
pack_path = os.path.join(output_dir, f"{pack.set.short_name}.json")
try:
os.mkdir(os.path.dirname(pack_path))
@@ -71,7 +67,7 @@ async def reupload_pack(client: TelegramClient, pack: StickerSetFull, output_dir
already_uploaded = {}
try:
with open(pack_path) as pack_file:
with util.open_utf8(pack_path) as pack_file:
existing_pack = json.load(pack_file)
already_uploaded = {int(sticker["net.maunium.telegram.sticker"]["id"]): sticker
for sticker in existing_pack["stickers"]}
@@ -99,7 +95,7 @@ async def reupload_pack(client: TelegramClient, pack: StickerSetFull, output_dir
doc["body"] = sticker.emoticon
doc["net.maunium.telegram.sticker"]["emoticons"].append(sticker.emoticon)
with open(pack_path, "w") as pack_file:
with util.open_utf8(pack_path, "w") as pack_file:
json.dump({
"title": pack.set.title,
"id": f"tg-{pack.set.id}",
@@ -138,11 +134,12 @@ async def main(args: argparse.Namespace) -> None:
if args.list:
stickers: AllStickers = await client(GetAllStickersRequest(hash=0))
index = 1
width = len(str(stickers.sets))
width = len(str(len(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})")
index += 1
elif args.pack[0]:
input_packs = []
for pack_url in args.pack[0]:
@@ -152,7 +149,7 @@ async def main(args: argparse.Namespace) -> None:
return
input_packs.append(InputStickerSetShortName(short_name=match.group(1)))
for input_pack in input_packs:
pack: StickerSetFull = await client(GetStickerSetRequest(input_pack))
pack: StickerSetFull = await client(GetStickerSetRequest(input_pack, hash=0))
await reupload_pack(client, pack, args.output_dir)
else:
parser.print_help()

23
web/esinstall.js Normal file
View File

@@ -0,0 +1,23 @@
const { install, printStats } = require("esinstall")
install(
[{
specifier: "htm/preact",
all: false,
default: false,
namespace: false,
named: ["html", "render", "Component"],
}],
{
dest: "./lib",
sourceMap: false,
treeshake: true,
verbose: true,
}
).then(data => {
const oldPrefix = "web_modules/"
const newPrefix = "lib/"
const spaces = " ".repeat(oldPrefix.length - newPrefix.length)
console.log("Installation complete")
console.log(printStats(data.stats).replace(oldPrefix, newPrefix + spaces))
})

View File

@@ -1,22 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
<title>Maunium sticker picker</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
<title>Maunium sticker picker</title>
<link rel="modulepreload" href="src/widget-api.js"/>
<link rel="modulepreload" href="src/frequently-used.js"/>
<link rel="modulepreload" href="src/spinner.js"/>
<link rel="modulepreload" href="lib/htm/preact.js"/>
<link rel="preload" href="packs/index.json" as="fetch" type="application/json" crossorigin/>
<link rel="modulepreload" href="src/widget-api.js"/>
<link rel="modulepreload" href="src/frequently-used.js"/>
<link rel="modulepreload" href="src/spinner.js"/>
<link rel="modulepreload" href="src/giphy.js"/>
<link rel="modulepreload" href="lib/htm/preact.js"/>
<link rel="preload" href="packs/index.json" as="fetch" type="application/json" crossorigin/>
<link rel="stylesheet" href="style/index.css"/>
<link rel="stylesheet" href="style/spinner.css"/>
<script src="src/index.js" type="module"></script>
<script nomodule>document.body.innerText = "This sticker picker requires modern JavaScript"</script>
<link rel="stylesheet" href="style/index.css"/>
<link rel="stylesheet" href="style/spinner.css"/>
<script src="src/index.js" type="module"></script>
<script nomodule>document.body.innerText = "This sticker picker requires modern JavaScript"</script>
</head>
<body>
<noscript>This sticker picker requires JavaScript</noscript>
<noscript>This sticker picker requires JavaScript</noscript>
</body>
</html>

File diff suppressed because one or more lines are too long

View File

@@ -4,28 +4,16 @@
"description": "A fast and simple Matrix sticker picker widget",
"repository": "https://github.com/maunium/stickerpicker",
"author": "Tulir Asokan <tulir@maunium.net>",
"license": "MPL-2.0",
"license": "AGPL-3.0-or-later",
"private": true,
"scripts": {
"snowpack": "snowpack",
"sass": "node-sass -o style style/*.sass --output-style compressed"
},
"snowpack": {
"install": [
"htm/preact"
],
"installOptions": {
"sourceMap": false,
"dest": "lib",
"treeshake": true
}
"esinstall": "node ./esinstall.js",
"sass": "sass --no-source-map --style=compressed style/"
},
"dependencies": {
"htm": "^3.0.4",
"preact": "^10.4.8",
"snowpack": "^2.10.3"
},
"devDependencies": {
"node-sass": "^4.14.1"
"esinstall": "^1.1.7",
"htm": "^3.1.0",
"preact": "^10.5.14",
"sass": "^1.42.1"
}
}

55
web/res/giphy-dark.svg Normal file
View File

@@ -0,0 +1,55 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
height="534"
width="427.20001"
viewBox="0 0 27.990145 35"
version="1.1"
id="svg24"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs28" />
<g
fill="none"
fill-rule="evenodd"
id="g22"
transform="translate(-0.02883895)">
<path
d="M 4,4 H 24 V 31 H 4 Z"
fill="#000000"
id="path2"
style="fill:#ffffff;fill-opacity:1" />
<g
fill-rule="nonzero"
id="g16">
<path
d="M 0,3 H 4 V 32 H 0 Z"
fill="#04ff8e"
id="path4" />
<path
d="m 24,11 h 4 v 21 h -4 z"
fill="#8e2eff"
id="path6" />
<path
d="m 0,31 h 28 v 4 H 0 Z"
fill="#00c5ff"
id="path8" />
<path
d="M 0,0 H 16 V 4 H 0 Z"
fill="#fff152"
id="path10" />
<path
d="M 24,8 V 4 H 20 V 0 H 16 V 12 H 28 V 8"
fill="#ff5b5b"
id="path12" />
<path
d="m 24,16 v -4 h 4"
fill="#551c99"
id="path14" />
</g>
<path
d="M 16,0 V 4 H 12"
fill="#999131"
id="path18" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

54
web/res/giphy-light.svg Normal file
View File

@@ -0,0 +1,54 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
height="534"
width="427.20001"
viewBox="0 0 27.990145 35"
version="1.1"
id="svg24"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs28" />
<g
fill="none"
fill-rule="evenodd"
id="g22"
transform="translate(-0.02883895)">
<path
d="M 4,4 H 24 V 31 H 4 Z"
fill="#000000"
id="path2" />
<g
fill-rule="nonzero"
id="g16">
<path
d="M 0,3 H 4 V 32 H 0 Z"
fill="#04ff8e"
id="path4" />
<path
d="m 24,11 h 4 v 21 h -4 z"
fill="#8e2eff"
id="path6" />
<path
d="m 0,31 h 28 v 4 H 0 Z"
fill="#00c5ff"
id="path8" />
<path
d="M 0,0 H 16 V 4 H 0 Z"
fill="#fff152"
id="path10" />
<path
d="M 24,8 V 4 H 20 V 0 H 16 V 12 H 28 V 8"
fill="#ff5b5b"
id="path12" />
<path
d="m 24,16 v -4 h 4"
fill="#551c99"
id="path14" />
</g>
<path
d="M 16,0 V 4 H 12"
fill="#999131"
id="path18" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.6 KiB

1
web/res/search.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9.145 18.29c-5.042 0-9.145-4.102-9.145-9.145s4.103-9.145 9.145-9.145 9.145 4.103 9.145 9.145-4.102 9.145-9.145 9.145zm0-15.167c-3.321 0-6.022 2.702-6.022 6.022s2.702 6.022 6.022 6.022 6.023-2.702 6.023-6.022-2.702-6.022-6.023-6.022zm9.263 12.443c-.817 1.176-1.852 2.188-3.046 2.981l5.452 5.453 3.014-3.013-5.42-5.421z"/></svg>

After

Width:  |  Height:  |  Size: 419 B

107
web/src/giphy.js Normal file
View File

@@ -0,0 +1,107 @@
import {Component, html} from "../lib/htm/preact.js";
import * as widgetAPI from "./widget-api.js";
import {SearchBox} from "./search-box.js";
const GIPHY_SEARCH_DEBOUNCE = 1000
let GIPHY_API_KEY = "HQku8974Uq5MZn3MZns46kXn2R4GDm75"
let GIPHY_MXC_PREFIX = "mxc://giphy.mau.dev/"
export function giphyIsEnabled() {
return GIPHY_API_KEY !== ""
}
export function setGiphyAPIKey(apiKey, mxcPrefix) {
GIPHY_API_KEY = apiKey
if (mxcPrefix) {
GIPHY_MXC_PREFIX = mxcPrefix
}
}
export class GiphySearchTab extends Component {
constructor(props) {
super(props)
this.state = {
searchTerm: "",
gifs: [],
loading: false,
error: null,
}
this.handleGifClick = this.handleGifClick.bind(this)
this.searchKeyUp = this.searchKeyUp.bind(this)
this.updateGifSearchQuery = this.updateGifSearchQuery.bind(this)
this.searchTimeout = null
}
async makeGifSearchRequest() {
try {
const resp = await fetch(`https://api.giphy.com/v1/gifs/search?q=${this.state.searchTerm}&api_key=${GIPHY_API_KEY}`)
// TODO handle error responses properly?
const data = await resp.json()
if (data.data.length === 0) {
this.setState({gifs: [], error: "No results"})
} else {
this.setState({gifs: data.data, error: null})
}
} catch (error) {
this.setState({error})
}
}
componentWillUnmount() {
clearTimeout(this.searchTimeout)
}
searchKeyUp(event) {
if (event.key === "Enter") {
clearTimeout(this.searchTimeout)
this.makeGifSearchRequest()
}
}
updateGifSearchQuery(event) {
this.setState({searchTerm: event.target.value})
clearTimeout(this.searchTimeout)
this.searchTimeout = setTimeout(() => this.makeGifSearchRequest(), GIPHY_SEARCH_DEBOUNCE)
}
handleGifClick(gif) {
widgetAPI.sendSticker({
"body": gif.title,
"info": {
"h": +gif.images.original.height,
"w": +gif.images.original.width,
"size": +gif.images.original.size,
"mimetype": "image/webp",
},
"msgtype": "m.image",
"url": GIPHY_MXC_PREFIX + gif.id,
"id": gif.id,
"filename": gif.id + ".webp",
})
}
render() {
// TODO display loading state?
return html`
<${SearchBox} onInput=${this.updateGifSearchQuery} onKeyUp=${this.searchKeyUp} value=${this.state.searchTerm} placeholder="Find GIFs"/>
<div class="pack-list">
<section class="stickerpack" id="pack-giphy">
<div class="error">
${this.state.error}
</div>
<div class="sticker-list">
${this.state.gifs.map((gif) => html`
<div class="sticker" onClick=${() => this.handleGifClick(gif)} data-gif-id=${gif.id}>
<img src=${gif.images.fixed_height.url} alt=${gif.title} class="visible" data=/>
</div>
`)}
</div>
<div class="footer powered-by-giphy">
<img src="./res/powered-by-giphy.png" alt="Powered by GIPHY"/>
</div>
</section>
</div>
`
}
}

View File

@@ -13,36 +13,48 @@
//
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>.
import { html, render, Component } from "../lib/htm/preact.js"
import { Spinner } from "./spinner.js"
import {html, render, Component} from "../lib/htm/preact.js"
import {Spinner} from "./spinner.js"
import {SearchBox} from "./search-box.js"
import {giphyIsEnabled, GiphySearchTab, setGiphyAPIKey} from "./giphy.js"
import * as widgetAPI from "./widget-api.js"
import * as frequent from "./frequently-used.js"
// 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"
let INDEX = `${PACKS_BASE_URL}/index.json`
const params = new URLSearchParams(document.location.search)
if (params.has('config')) {
INDEX = params.get("config")
}
// 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`
const makeThumbnailURL = mxc => `${HOMESERVER_URL}/_matrix/media/v3/thumbnail/${mxc.slice(6)}?height=128&width=128&method=scale`
// We need to detect iOS webkit because it has a bug related to scrolling non-fixed divs
// This is also used to fix scrolling to sections on Element iOS
const isMobileSafari = navigator.userAgent.match(/(iPod|iPhone|iPad)/) && navigator.userAgent.match(/AppleWebKit/)
export const parseQuery = str => Object.fromEntries(
str.split("&")
.map(part => part.split("="))
.map(([key, value = ""]) => [key, value]))
const supportedThemes = ["light", "dark", "black"]
const defaultState = {
packs: [],
filtering: {
searchTerm: "",
packs: [],
},
}
class App extends Component {
constructor(props) {
super(props)
this.defaultTheme = parseQuery(location.search.substr(1)).theme
this.defaultTheme = params.get("theme")
this.state = {
packs: [],
viewingGifs: false,
packs: defaultState.packs,
loading: true,
error: null,
stickersPerRow: parseInt(localStorage.mauStickersPerRow || "4"),
@@ -53,6 +65,7 @@ class App extends Component {
stickerIDs: frequent.get(),
stickers: [],
},
filtering: defaultState.filtering,
}
if (!supportedThemes.includes(this.state.theme)) {
this.state.theme = "light"
@@ -65,6 +78,7 @@ class App extends Component {
this.imageObserver = null
this.packListRef = null
this.navRef = null
this.searchStickers = this.searchStickers.bind(this)
this.sendSticker = this.sendSticker.bind(this)
this.navScroll = this.navScroll.bind(this)
this.reloadPacks = this.reloadPacks.bind(this)
@@ -89,6 +103,28 @@ class App extends Component {
localStorage.mauFrequentlyUsedStickerCache = JSON.stringify(stickers.map(sticker => [sticker.id, sticker]))
}
searchStickers(e) {
const sanitizeString = s => s.toLowerCase().trim()
const searchTerm = sanitizeString(e.target.value)
const allPacks = [this.state.frequentlyUsed, ...this.state.packs]
const packsWithFilteredStickers = allPacks.map(pack => ({
...pack,
stickers: pack.stickers.filter(sticker =>
sanitizeString(sticker.body).includes(searchTerm) ||
sanitizeString(sticker.id).includes(searchTerm)
),
}))
this.setState({
filtering: {
...this.state.filtering,
searchTerm,
packs: packsWithFilteredStickers.filter(({stickers}) => !!stickers.length),
},
})
}
setStickersPerRow(val) {
localStorage.mauStickersPerRow = val
document.documentElement.style.setProperty("--stickers-per-row", localStorage.mauStickersPerRow)
@@ -101,23 +137,26 @@ class App extends Component {
setTheme(theme) {
if (theme === "default") {
delete localStorage.mauStickerThemeOverride
this.setState({ theme: this.defaultTheme })
this.setState({theme: this.defaultTheme})
} else {
localStorage.mauStickerThemeOverride = theme
this.setState({ theme: theme })
this.setState({theme: theme})
}
}
reloadPacks() {
this.imageObserver.disconnect()
this.sectionObserver.disconnect()
this.setState({ packs: [] })
this.setState({
packs: defaultState.packs,
filtering: defaultState.filtering,
})
this._loadPacks(true)
}
_loadPacks(disableCache = false) {
const cache = disableCache ? "no-cache" : undefined
fetch(`${PACKS_BASE_URL}/index.json`, { cache }).then(async indexRes => {
fetch(INDEX, {cache}).then(async indexRes => {
if (indexRes.status >= 400) {
this.setState({
loading: false,
@@ -127,9 +166,17 @@ class App extends Component {
}
const indexData = await indexRes.json()
HOMESERVER_URL = indexData.homeserver_url || HOMESERVER_URL
if (indexData.giphy_api_key !== undefined) {
setGiphyAPIKey(indexData.giphy_api_key, indexData.giphy_mxc_prefix)
}
// TODO only load pack metadata when scrolled into view?
for (const packFile of indexData.packs) {
const packRes = await fetch(`${PACKS_BASE_URL}/${packFile}`, { cache })
let packRes
if (packFile.startsWith("https://") || packFile.startsWith("http://")) {
packRes = await fetch(packFile, {cache})
} else {
packRes = await fetch(`${PACKS_BASE_URL}/${packFile}`, {cache})
}
const packData = await packRes.json()
for (const sticker of packData.stickers) {
this.stickersByID.set(sticker.id, sticker)
@@ -140,7 +187,7 @@ class App extends Component {
})
}
this.updateFrequentlyUsed()
}, error => this.setState({ loading: false, error }))
}, error => this.setState({loading: false, error}))
}
componentDidMount() {
@@ -172,6 +219,9 @@ class App extends Component {
let maxXElem = null
for (const entry of intersections) {
const packID = entry.target.getAttribute("data-pack-id")
if (!packID) {
continue
}
const navElement = document.getElementById(`nav-${packID}`)
if (entry.isIntersecting) {
navElement.classList.add("visible")
@@ -188,9 +238,9 @@ class App extends Component {
}
}
if (minXElem !== null) {
minXElem.scrollIntoView({ inline: "start" })
minXElem.scrollIntoView({inline: "start"})
} else if (maxXElem !== null) {
maxXElem.scrollIntoView({ inline: "end" })
maxXElem.scrollIntoView({inline: "end"})
}
}
@@ -220,37 +270,72 @@ class App extends Component {
}
navScroll(evt) {
this.navRef.scrollLeft += evt.deltaY * 12
this.navRef.scrollLeft += evt.deltaY
}
render() {
const theme = `theme-${this.state.theme}`
const filterActive = !!this.state.filtering.searchTerm
const packs = filterActive
? this.state.filtering.packs
: [this.state.frequentlyUsed, ...this.state.packs]
if (this.state.loading) {
return html`<main class="spinner ${theme}"><${Spinner} size=${80} green /></main>`
return html`
<main class="spinner ${theme}">
<${Spinner} size=${80} green/>
</main>
`
} else if (this.state.error) {
return html`<main class="error ${theme}">
<h1>Failed to load packs</h1>
<p>${this.state.error}</p>
</main>`
return html`
<main class="error ${theme}">
<h1>Failed to load packs</h1>
<p>${this.state.error}</p>
</main>
`
} else if (this.state.packs.length === 0) {
return html`<main class="empty ${theme}"><h1>No packs found 😿</h1></main>`
return html`
<main class="empty ${theme}"><h1>No packs found 😿</h1></main>
`
}
return html`<main class="has-content ${theme}">
<nav onWheel=${this.navScroll} ref=${elem => this.navRef = elem}>
<${NavBarItem} pack=${this.state.frequentlyUsed} iconOverride="recent" />
${this.state.packs.map(pack => html`<${NavBarItem} id=${pack.id} pack=${pack}/>`)}
<${NavBarItem} pack=${{ id: "settings", title: "Settings" }} iconOverride="settings" />
</nav>
<div class="pack-list ${isMobileSafari ? "ios-safari-hack" : ""}" ref=${elem => this.packListRef = elem}>
<${Pack} pack=${this.state.frequentlyUsed} send=${this.sendSticker} />
${this.state.packs.map(pack => html`<${Pack} id=${pack.id} pack=${pack} send=${this.sendSticker} />`)}
<${Settings} app=${this}/>
</div>
</main>`
const onClickOverride = this.state.viewingGifs
? (evt, packID) => {
evt.preventDefault()
this.setState({viewingGifs: false}, () => {
scrollToSection(null, packID)
})
} : null
const switchToGiphy = () => this.setState({viewingGifs: true, filtering: defaultState.filtering})
return html`
<main class="has-content ${theme}">
<nav onWheel=${this.navScroll} ref=${elem => this.navRef = elem}>
${giphyIsEnabled() && html`
<${NavBarItem} pack=${{id: "giphy", title: "GIPHY"}} iconOverride="giphy" onClickOverride=${switchToGiphy} extraClass=${this.state.viewingGifs ? "visible" : ""}/>
`}
<${NavBarItem} pack=${this.state.frequentlyUsed} iconOverride="recent" onClickOverride=${onClickOverride}/>
${this.state.packs.map(pack => html`<${NavBarItem} id=${pack.id} pack=${pack} onClickOverride=${onClickOverride}/>`)}
<${NavBarItem} pack=${{id: "settings", title: "Settings"}} iconOverride="settings" onClickOverride=${onClickOverride}/>
</nav>
${this.state.viewingGifs ? html`
<${GiphySearchTab}/>
` : html`
<${SearchBox} onInput=${this.searchStickers} value=${this.state.filtering.searchTerm ?? ""}/>
<div class="pack-list ${isMobileSafari ? "ios-safari-hack" : ""}" ref=${(elem) => (this.packListRef = elem)}>
${filterActive && packs.length === 0
? html`<div class="search-empty"><h1>No stickers match your search</h1></div>`
: null}
${packs.map((pack) => html`<${Pack} id=${pack.id} pack=${pack} send=${this.sendSticker}/>`)}
<${Settings} app=${this}/>
</div>
`}
</main>`
}
}
const Settings = ({ app }) => html`
const Settings = ({app}) => html`
<section class="stickerpack settings" id="pack-settings" data-pack-id="settings">
<h1>Settings</h1>
<div class="settings-list">
@@ -259,7 +344,7 @@ const Settings = ({ app }) => html`
<label for="stickers-per-row">Stickers per row: ${app.state.stickersPerRow}</label>
<input type="range" min=2 max=10 id="stickers-per-row" id="stickers-per-row"
value=${app.state.stickersPerRow}
onInput=${evt => app.setStickersPerRow(evt.target.value)} />
onInput=${evt => app.setStickersPerRow(evt.target.value)}/>
</div>
<div>
<label for="theme">Theme: </label>
@@ -278,13 +363,15 @@ const Settings = ({ app }) => html`
// open the link in the browser instead of just scrolling there, so we need to scroll manually:
const scrollToSection = (evt, id) => {
const pack = document.getElementById(`pack-${id}`)
pack.scrollIntoView({ block: "start", behavior: "instant" })
evt.preventDefault()
if (pack) {
pack.scrollIntoView({block: "start", behavior: "instant"})
}
evt?.preventDefault()
}
const NavBarItem = ({ pack, iconOverride = null }) => html`
<a href="#pack-${pack.id}" id="nav-${pack.id}" data-pack-id=${pack.id} title=${pack.title}
onClick=${isMobileSafari ? (evt => scrollToSection(evt, pack.id)) : undefined}>
const NavBarItem = ({pack, iconOverride = null, onClickOverride = null, extraClass = null}) => html`
<a href="#pack-${pack.id}" id="nav-${pack.id}" data-pack-id=${pack.id} title=${pack.title} class="${extraClass}"
onClick=${onClickOverride ? (evt => onClickOverride(evt, pack.id)) : (isMobileSafari ? (evt => scrollToSection(evt, pack.id)) : undefined)}>
<div class="sticker">
${iconOverride ? html`
<span class="icon icon-${iconOverride}"/>
@@ -296,7 +383,7 @@ const NavBarItem = ({ pack, iconOverride = null }) => html`
</a>
`
const Pack = ({ pack, send }) => html`
const Pack = ({pack, send}) => html`
<section class="stickerpack" id="pack-${pack.id}" data-pack-id=${pack.id}>
<h1>${pack.title}</h1>
<div class="sticker-list">
@@ -307,10 +394,10 @@ const Pack = ({ pack, send }) => html`
</section>
`
const Sticker = ({ content, send }) => html`
const Sticker = ({content, send}) => html`
<div class="sticker" onClick=${send} data-sticker-id=${content.id}>
<img data-src=${makeThumbnailURL(content.url)} alt=${content.body} />
<img data-src=${makeThumbnailURL(content.url)} alt=${content.body} title=${content.body}/>
</div>
`
render(html`<${App} />`, document.body)
render(html`<${App}/>`, document.body)

26
web/src/search-box.js Normal file
View File

@@ -0,0 +1,26 @@
// maunium-stickerpicker - A fast and simple Matrix sticker picker widget.
// Copyright (C) 2020 Tulir Asokan
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU Affero General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU Affero General Public License for more details.
//
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>.
import {html} from "../lib/htm/preact.js"
export const SearchBox = ({onInput, onKeyUp, value, placeholder = 'Find stickers'}) => {
const component = html`
<div class="search-box">
<input type="text" placeholder=${placeholder} value=${value} onInput=${onInput} onKeyUp=${onKeyUp}/>
<span class="icon icon-search"/>
</div>
`
return component
}

View File

@@ -60,8 +60,9 @@ export function sendSticker(content) {
const widgetData = {
...data,
description: content.body,
file: `${content.id}.png`,
file: content.filename ?? `${content.id}.png`,
}
delete widgetData.content.filename
// Element iOS explodes if there are extra fields present
delete widgetData.content["net.maunium.telegram.sticker"]

View File

@@ -1 +1 @@
*{font-family:sans-serif}body{margin:0}h1{font-size:1rem}:root{--stickers-per-row: 4;--sticker-size: calc(100vw / var(--stickers-per-row))}main{color:var(--text-color)}main.spinner{margin-top:5rem}main.error,main.empty{margin:2rem}main.empty{text-align:center}main.has-content{position:fixed;top:0;left:0;right:0;bottom:0;display:grid;grid-template-rows:calc(12vw + 2px) auto}main.theme-light{--highlight-color: #eee;--text-color: black;background-color:white}main.theme-dark{--highlight-color: #444;--text-color: white;background-color:#22262e}main.theme-black{--highlight-color: #222;--text-color: white;background-color:black}.icon{width:100%;height:100%;background-color:var(--text-color);mask-size:contain;-webkit-mask-size:contain;mask-image:var(--icon-image);-webkit-mask-image:var(--icon-image)}.icon.icon-settings{--icon-image: url(../res/settings.svg)}.icon.icon-recent{--icon-image: url(../res/recent.svg)}nav{display:flex;overflow-x:auto}nav>a{border-bottom:2px solid transparent}nav>a.visible{border-bottom-color:green}nav>a>div.sticker{width:12vw;height:12vw}div.pack-list,nav{scrollbar-width:none}div.pack-list::-webkit-scrollbar,nav::-webkit-scrollbar{display:none}div.pack-list{overflow-y:auto}div.pack-list.ios-safari-hack{position:fixed;top:calc(12vw + 2px);bottom:0;left:0;right:0;-webkit-overflow-scrolling:touch}section.stickerpack{margin-top:.75rem}section.stickerpack>div.sticker-list{display:flex;flex-wrap:wrap}section.stickerpack>h1{margin:0 0 0 .75rem}div.sticker{display:flex;padding:4px;cursor:pointer;position:relative;width:var(--sticker-size);height:var(--sticker-size);box-sizing:border-box}div.sticker:hover{background-color:var(--highlight-color)}div.sticker>img{display:none;width:100%;object-fit:contain}div.sticker>img.visible{display:initial}div.sticker>.icon{width:70%;height:70%;margin:15%}div.settings-list{display:flex;flex-direction:column}div.settings-list>*{margin:.5rem}div.settings-list button{padding:.5rem;border-radius:.25rem}div.settings-list input{width:100%}
*{font-family:sans-serif}body{margin:0}h1{font-size:1rem}:root{--stickers-per-row: 4;--sticker-size: calc(100vw / var(--stickers-per-row))}main{color:var(--text-color)}main.spinner{margin-top:5rem}main.error,main.empty{margin:2rem}main.empty{text-align:center}main.has-content{position:fixed;top:0;left:0;right:0;bottom:0;display:grid;grid-template-rows:calc(12vw + 2px) min-content auto}main.theme-light{--highlight-color: #eee;--search-box-color: var(--highlight-color);--text-color: black;background-color:#fff}main.theme-dark{--highlight-color: #444;--search-box-color: #383e4b;--text-color: white;background-color:#22262e}main.theme-dark .icon.icon-giphy{background-image:url(../res/giphy-dark.svg)}main.theme-black{--highlight-color: #222;--search-box-color: var(--highlight-color);--text-color: white;background-color:#000}main.theme-black .icon.icon-giphy{background-image:url(../res/giphy-dark.svg)}div.powered-by-giphy{padding:1rem}div.powered-by-giphy>img{width:100%}.icon{width:100%;height:100%;background-color:var(--text-color);mask-size:contain;-webkit-mask-size:contain;mask-image:var(--icon-image);-webkit-mask-image:var(--icon-image)}.icon.icon-settings{--icon-image: url(../res/settings.svg)}.icon.icon-recent{--icon-image: url(../res/recent.svg)}.icon.icon.icon-search{--icon-image: url(../res/search.svg)}.icon.icon.icon-giphy{background:center/contain no-repeat url(../res/giphy-light.svg);mask:unset}nav{display:flex;overflow-x:auto}nav>a{border-bottom:2px solid rgba(0,0,0,0)}nav>a.visible{border-bottom-color:green}nav>a>div.sticker{width:12vw;height:12vw}div.pack-list,nav{scrollbar-width:none}div.pack-list::-webkit-scrollbar,nav::-webkit-scrollbar{display:none}div.pack-list{overflow-y:auto}div.pack-list.ios-safari-hack{position:fixed;top:calc(calc(12vw + 2px) + calc(2 * 0.7rem + 2 * 0.5rem + 1rem));bottom:0;left:0;right:0;-webkit-overflow-scrolling:touch}div.search-empty{margin:1.2rem;text-align:center}section.stickerpack{margin-top:.75rem}section.stickerpack>div.sticker-list{display:flex;flex-wrap:wrap}section.stickerpack>h1{margin:0 0 0 .75rem}section.stickerpack#pack-giphy{display:flex;justify-content:space-between;flex-direction:column;min-height:100%}div.sticker{display:flex;padding:4px;cursor:pointer;position:relative;width:var(--sticker-size);height:var(--sticker-size);box-sizing:border-box}div.sticker:hover{background-color:var(--highlight-color)}div.sticker>img{display:none;width:100%;object-fit:contain}div.sticker>img.visible{display:initial}div.sticker>.icon{width:70%;height:70%;margin:15%}div.search-box{position:relative;display:flex}div.search-box>input[type=text]{flex-grow:1;background-color:var(--search-box-color);outline:none;border:none;border-radius:.25rem;height:1rem;padding:.7rem;padding-right:calc(1rem + 0.7rem);margin:.5rem;font-size:1rem;color:var(--text-color)}div.search-box>span.icon{display:flex;position:absolute;top:calc(50% - 1rem/2);right:1rem;width:1rem;height:1rem;box-sizing:border-box}div.settings-list{display:flex;flex-direction:column}div.settings-list>*{margin:.5rem}div.settings-list button{padding:.5rem;border-radius:.25rem}div.settings-list input{width:100%}

View File

@@ -32,6 +32,12 @@ $nav-bottom-highlight: 2px
$nav-height: calc(#{$nav-sticker-size} + #{$nav-bottom-highlight})
$nav-height-inverse: calc(-#{$nav-sticker-size} - #{$nav-bottom-highlight})
$search-box-icon-size: 1rem
$search-box-input-height: 1rem
$search-box-input-padding: .7rem
$search-box-input-margin: .5rem
$search-box-height: calc(2 * #{$search-box-input-padding} + 2 * #{$search-box-input-margin} + #{$search-box-input-height})
main
color: var(--text-color)
@@ -50,25 +56,38 @@ main
left: 0
right: 0
bottom: 0
display: grid
grid-template-rows: $nav-height auto
grid-template-rows: $nav-height min-content auto
main.theme-light
--highlight-color: #eee
--search-box-color: var(--highlight-color)
--text-color: black
background-color: white
main.theme-dark
--highlight-color: #444
--search-box-color: #383e4b
--text-color: white
background-color: #22262e
.icon.icon-giphy
background-image: url(../res/giphy-dark.svg)
main.theme-black
--highlight-color: #222
--search-box-color: var(--highlight-color)
--text-color: white
background-color: black
.icon.icon-giphy
background-image: url(../res/giphy-dark.svg)
div.powered-by-giphy
padding: 1rem
> img
width: 100%
.icon
width: 100%
height: 100%
@@ -84,6 +103,13 @@ main.theme-black
&.icon-recent
--icon-image: url(../res/recent.svg)
&.icon.icon-search
--icon-image: url(../res/search.svg)
&.icon.icon-giphy
background: center / contain no-repeat url(../res/giphy-light.svg)
mask: unset
nav
display: flex
overflow-x: auto
@@ -109,12 +135,16 @@ div.pack-list
div.pack-list.ios-safari-hack
position: fixed
top: $nav-height
top: calc(#{$nav-height} + #{$search-box-height})
bottom: 0
left: 0
right: 0
-webkit-overflow-scrolling: touch
div.search-empty
margin: 1.2rem
text-align: center
section.stickerpack
margin-top: .75rem
@@ -125,6 +155,12 @@ section.stickerpack
> h1
margin: 0 0 0 .75rem
section.stickerpack#pack-giphy
display: flex
justify-content: space-between
flex-direction: column
min-height: 100%
div.sticker
display: flex
padding: 4px
@@ -150,6 +186,32 @@ div.sticker
height: 70%
margin: 15%
div.search-box
position: relative
display: flex
>input[type="text"]
flex-grow: 1
background-color: var(--search-box-color)
outline: none
border: none
border-radius: .25rem
height: $search-box-input-height
padding: $search-box-input-padding
padding-right: calc(#{$search-box-icon-size} + #{$search-box-input-padding})
margin: $search-box-input-margin
font-size: 1rem
color: var(--text-color)
>span.icon
display: flex
position: absolute
top: calc(50% - #{$search-box-icon-size} / 2)
right: $search-box-icon-size
width: $search-box-icon-size
height: $search-box-icon-size
box-sizing: border-box
div.settings-list
display: flex
flex-direction: column

View File

@@ -1 +1 @@
.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.green>.sk-chase-dot:before{background-color:#00C853}.sk-chase>.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>.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>.sk-chase-dot:nth-child(1){animation-delay:-1.1s}.sk-chase>.sk-chase-dot:nth-child(2){animation-delay:-1.0s}.sk-chase>.sk-chase-dot:nth-child(3){animation-delay:-0.9s}.sk-chase>.sk-chase-dot:nth-child(4){animation-delay:-0.8s}.sk-chase>.sk-chase-dot:nth-child(5){animation-delay:-0.7s}.sk-chase>.sk-chase-dot:nth-child(6){animation-delay:-0.6s}.sk-chase>.sk-chase-dot:nth-child(1):before{animation-delay:-1.1s}.sk-chase>.sk-chase-dot:nth-child(2):before{animation-delay:-1.0s}.sk-chase>.sk-chase-dot:nth-child(3):before{animation-delay:-0.9s}.sk-chase>.sk-chase-dot:nth-child(4):before{animation-delay:-0.8s}.sk-chase>.sk-chase-dot:nth-child(5):before{animation-delay:-0.7s}.sk-chase>.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)}}
.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.green>.sk-chase-dot:before{background-color:#00c853}.sk-chase>.sk-chase-dot{width:100%;height:100%;position:absolute;left:0;top:0;animation:sk-chase-dot 2s infinite ease-in-out both}.sk-chase>.sk-chase-dot:before{content:"";display:block;width:25%;height:25%;border-radius:100%;animation:sk-chase-dot-before 2s infinite ease-in-out both;background-color:#fff}.sk-chase>.sk-chase-dot:nth-child(1){animation-delay:-1.1s}.sk-chase>.sk-chase-dot:nth-child(2){animation-delay:-1s}.sk-chase>.sk-chase-dot:nth-child(3){animation-delay:-0.9s}.sk-chase>.sk-chase-dot:nth-child(4){animation-delay:-0.8s}.sk-chase>.sk-chase-dot:nth-child(5){animation-delay:-0.7s}.sk-chase>.sk-chase-dot:nth-child(6){animation-delay:-0.6s}.sk-chase>.sk-chase-dot:nth-child(1):before{animation-delay:-1.1s}.sk-chase>.sk-chase-dot:nth-child(2):before{animation-delay:-1s}.sk-chase>.sk-chase-dot:nth-child(3):before{animation-delay:-0.9s}.sk-chase>.sk-chase-dot:nth-child(4):before{animation-delay:-0.8s}.sk-chase>.sk-chase-dot:nth-child(5):before{animation-delay:-0.7s}.sk-chase>.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)}}

File diff suppressed because it is too large Load Diff