Browse Source

Provide a config for a homeserver with animated media support

pull/67/head
Kévin Cocchi 1 year ago
parent
commit
ce7cc9f7b0
No known key found for this signature in database GPG Key ID: E3F3FFBE2818518D
  1. 3
      packs/README.md
  2. 22
      web/src/index.js

3
packs/README.md

@ -9,7 +9,8 @@ array. The index.json file should look something like this:
```json ```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": [ "packs": [
"your_telegram_imported_pack.json", "your_telegram_imported_pack.json",
"another_telegram_imported_pack.json", "another_telegram_imported_pack.json",

22
web/src/index.js

@ -28,10 +28,19 @@ const params = new URLSearchParams(document.location.search)
if (params.has('config')) { if (params.has('config')) {
INDEX = params.get("config") INDEX = params.get("config")
} }
// This is updated from packs/index.json // This is updated from packs/index.json
let HOMESERVER_URL = "https://matrix-client.matrix.org" 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/r0/thumbnail/${mxc.substr(6)}?height=128&width=128&method=scale`
const makeThumbnailURL = (content) => {
const homeServerUrl = isAnimated(content) ? HOMESERVER_ANIMATED_URL : HOMESERVER_URL;
return `${homeServerUrl}/_matrix/media/r0/thumbnail/${content.url.substr(6)}?height=128&width=128&method=scale`;
};
// We need to detect iOS webkit because it has a bug related to scrolling non-fixed divs // 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 // This is also used to fix scrolling to sections on Element iOS
@ -164,6 +173,7 @@ class App extends Component {
} }
const indexData = await indexRes.json() const indexData = await indexRes.json()
HOMESERVER_URL = indexData.homeserver_url || HOMESERVER_URL HOMESERVER_URL = indexData.homeserver_url || HOMESERVER_URL
HOMESERVER_ANIMATED_URL = indexData.homeserver_animated_url || HOMESERVER_URL
// TODO only load pack metadata when scrolled into view? // TODO only load pack metadata when scrolled into view?
for (const packFile of indexData.packs) { for (const packFile of indexData.packs) {
let packRes let packRes
@ -336,7 +346,7 @@ const NavBarItem = ({ pack, iconOverride = null }) => html`
${iconOverride ? html` ${iconOverride ? html`
<span class="icon icon-${iconOverride}"/> <span class="icon icon-${iconOverride}"/>
` : html` ` : html`
<img src=${makeThumbnailURL(pack.stickers[0].url)}
<img src=${makeThumbnailURL(pack.stickers[0])}
alt=${pack.stickers[0].body} class="visible" /> alt=${pack.stickers[0].body} class="visible" />
`} `}
</div> </div>
@ -348,15 +358,15 @@ const Pack = ({ pack, send }) => html`
<h1>${pack.title}</h1> <h1>${pack.title}</h1>
<div class="sticker-list"> <div class="sticker-list">
${pack.stickers.map(sticker => html` ${pack.stickers.map(sticker => html`
<${Sticker} key=${sticker.id} content=${sticker} send=${send}/>
<${Sticker} key=${sticker.id} sticker=${sticker} send=${send}/>
`)} `)}
</div> </div>
</section> </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> </div>
` `

Loading…
Cancel
Save