Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Provide a config for a homeserver with animated media support #67

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Provide a config for a homeserver with animated media support #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion packs/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
22 changes: 16 additions & 6 deletions web/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,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/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
// This is also used to fix scrolling to sections on Element iOS
Expand Down Expand Up @@ -164,6 +173,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
// TODO only load pack metadata when scrolled into view?
for (const packFile of indexData.packs) {
let packRes
Expand Down Expand Up @@ -336,7 +346,7 @@ const NavBarItem = ({ pack, iconOverride = null }) => html`
${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>
Expand All @@ -348,15 +358,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>
`

Expand Down