From f245eb78157f9f8c58543c05a99b57d54b4d1ae1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?K=C3=A9vin=20Cocchi?= <kevin.cocchi@gmail.com>
Date: Tue, 12 Sep 2023 13:22:10 +0200
Subject: [PATCH] Provide a config for a homeserver with animated media support
---
packs/README.md | 3 ++-
web/src/index.js | 22 ++++++++++++++++------
2 files changed, 18 insertions(+), 7 deletions(-)
diff --git a/packs/README.md b/packs/README.md
index 46b4ab5..7b28be1 100644
--- a/packs/README.md
+++ b/packs/README.md
@@ -9,7 +9,8 @@ array. The index.json file should look something like this:
```json
{
- "homeserver_url": "https://example.com",
+ "homeserver_url": "https://example.com", // required
+ "homeserver_animated_url": "https://example.com", // optional : the URL of a webserver which provides a media repo with animated media support
"packs": [
"your_telegram_imported_pack.json",
"another_telegram_imported_pack.json",
diff --git a/web/src/index.js b/web/src/index.js
index 273ad7e..ce996f5 100644
--- a/web/src/index.js
+++ b/web/src/index.js
@@ -29,10 +29,19 @@ 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"
+let HOMESERVER_ANIMATED_URL = HOMESERVER_URL
+
+const isAnimated = (content) => {
+ return content.info["mimetype"] === "image/gif";
+};
-const makeThumbnailURL = mxc => `${HOMESERVER_URL}/_matrix/media/v3/thumbnail/${mxc.slice(6)}?height=128&width=128&method=scale`
+const makeThumbnailURL = (content) => {
+ const homeServerUrl = isAnimated(content) ? HOMESERVER_ANIMATED_URL : HOMESERVER_URL;
+ return `${homeServerUrl}/_matrix/media/v3/thumbnail/${content.url.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
@@ -166,6 +175,7 @@ class App extends Component {
}
const indexData = await indexRes.json()
HOMESERVER_URL = indexData.homeserver_url || HOMESERVER_URL
+ HOMESERVER_ANIMATED_URL = indexData.homeserver_animated_url || HOMESERVER_URL
if (indexData.giphy_api_key !== undefined) {
setGiphyAPIKey(indexData.giphy_api_key, indexData.giphy_mxc_prefix)
}
@@ -376,7 +386,7 @@ const NavBarItem = ({pack, iconOverride = null, onClickOverride = null, extraCla
${iconOverride ? html`
<span class="icon icon-${iconOverride}"/>
` : html`
- <img src=${makeThumbnailURL(pack.stickers[0].url)}
+ <img src=${makeThumbnailURL(pack.stickers[0])}
alt=${pack.stickers[0].body} class="visible" />
`}
</div>
@@ -388,15 +398,15 @@ const Pack = ({pack, send}) => html`
<h1>${pack.title}</h1>
<div class="sticker-list">
${pack.stickers.map(sticker => html`
- <${Sticker} key=${sticker.id} content=${sticker} send=${send}/>
+ <${Sticker} key=${sticker.id} sticker=${sticker} send=${send}/>
`)}
</div>
</section>
`
-const Sticker = ({content, send}) => html`
- <div class="sticker" onClick=${send} data-sticker-id=${content.id}>
- <img data-src=${makeThumbnailURL(content.url)} alt=${content.body} title=${content.body}/>
+const Sticker = ({ sticker, send }) => html`
+ <div class="sticker" onClick=${send} data-sticker-id=${sticker.id}>
+ <img data-src=${makeThumbnailURL(sticker)} alt=${sticker.body} title=${sticker.body} />
</div>
`
--
GitLab