From 81caaa2ebed066f80939b04f565b307ec0dd2d61 Mon Sep 17 00:00:00 2001 From: Tulir Asokan Date: Thu, 10 Sep 2020 16:12:09 +0300 Subject: Split web things into subdirectories --- web/src/index.js | 235 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 235 insertions(+) create mode 100644 web/src/index.js (limited to 'web/src/index.js') diff --git a/web/src/index.js b/web/src/index.js new file mode 100644 index 0000000..815f321 --- /dev/null +++ b/web/src/index.js @@ -0,0 +1,235 @@ +// Copyright (c) 2020 Tulir Asokan +// +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at http://mozilla.org/MPL/2.0/. +import { html, render, Component } from "../lib/htm/preact.js" +import { Spinner } from "./spinner.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" +// 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` + +// 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/) + +class App extends Component { + constructor(props) { + super(props) + this.state = { + packs: [], + loading: true, + error: null, + frequentlyUsed: { + id: "frequently-used", + title: "Frequently used", + stickerIDs: frequent.get(), + stickers: [], + }, + } + this.stickersByID = new Map(JSON.parse(localStorage.mauFrequentlyUsedStickerCache || "[]")) + this.state.frequentlyUsed.stickers = this._getStickersByID(this.state.frequentlyUsed.stickerIDs) + this.imageObserver = null + this.packListRef = null + this.navRef = null + this.sendSticker = this.sendSticker.bind(this) + this.navScroll = this.navScroll.bind(this) + this.reloadPacks = this.reloadPacks.bind(this) + } + + _getStickersByID(ids) { + return ids.map(id => this.stickersByID.get(id)).filter(sticker => !!sticker) + } + + updateFrequentlyUsed() { + const stickerIDs = frequent.get() + const stickers = this._getStickersByID(stickerIDs) + this.setState({ + frequentlyUsed: { + ...this.state.frequentlyUsed, + stickerIDs, + stickers, + }, + }) + localStorage.mauFrequentlyUsedStickerCache = JSON.stringify(stickers.map(sticker => [sticker.id, sticker])) + } + + reloadPacks() { + this.imageObserver.disconnect() + this.sectionObserver.disconnect() + this.setState({ packs: [] }) + this._loadPacks(true) + } + + _loadPacks(disableCache = false) { + const cache = disableCache ? "no-cache" : undefined + fetch(`${PACKS_BASE_URL}/index.json`, { cache }).then(async indexRes => { + if (indexRes.status >= 400) { + this.setState({ + loading: false, + error: indexRes.status !== 404 ? indexRes.statusText : null, + }) + return + } + const indexData = await indexRes.json() + HOMESERVER_URL = indexData.homeserver_url || HOMESERVER_URL + // TODO only load pack metadata when scrolled into view? + for (const packFile of indexData.packs) { + const 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) + } + this.setState({ + packs: [...this.state.packs, packData], + loading: false, + }) + } + this.updateFrequentlyUsed() + }, error => this.setState({ loading: false, error })) + } + + componentDidMount() { + this._loadPacks() + this.imageObserver = new IntersectionObserver(this.observeImageIntersections, { + rootMargin: "100px", + }) + this.sectionObserver = new IntersectionObserver(this.observeSectionIntersections) + } + + observeImageIntersections(intersections) { + for (const entry of intersections) { + const img = entry.target.children.item(0) + if (entry.isIntersecting) { + img.setAttribute("src", img.getAttribute("data-src")) + img.classList.add("visible") + } else { + img.removeAttribute("src") + img.classList.remove("visible") + } + } + } + + observeSectionIntersections(intersections) { + for (const entry of intersections) { + const packID = entry.target.getAttribute("data-pack-id") + const navElement = document.getElementById(`nav-${packID}`) + if (entry.isIntersecting) { + navElement.classList.add("visible") + } else { + navElement.classList.remove("visible") + } + } + } + + componentDidUpdate() { + if (this.packListRef === null) { + return + } + for (const elem of this.packListRef.getElementsByClassName("sticker")) { + this.imageObserver.observe(elem) + } + for (const elem of this.packListRef.children) { + this.sectionObserver.observe(elem) + } + } + + componentWillUnmount() { + this.imageObserver.disconnect() + this.sectionObserver.disconnect() + } + + sendSticker(evt) { + const id = evt.currentTarget.getAttribute("data-sticker-id") + const sticker = this.stickersByID.get(id) + frequent.add(id) + this.updateFrequentlyUsed() + widgetAPI.sendSticker(sticker) + } + + navScroll(evt) { + this.navRef.scrollLeft += evt.deltaY * 12 + } + + render() { + if (this.state.loading) { + return html`
<${Spinner} size=${80} green />
` + } else if (this.state.error) { + return html`
+

Failed to load packs

+

${this.state.error}

+
` + } else if (this.state.packs.length === 0) { + return html`

No packs found 😿

` + } + return html`
+ +
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}/> +
+
` + } +} + +const Settings = ({ app }) => html` +
+

Settings

+
+ +
+
+` + +// By default we just let the browser handle scrolling to sections, but webviews on Element iOS +// 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() +} + +const NavBarItem = ({ pack, iconOverride = null, altOverride = null }) => html` + scrollToSection(evt, pack.id)) : undefined}> +
+ ${iconOverride ? html` + ${altOverride} + ` : html` + ${pack.stickers[0].body} + `} +
+ +` + +const Pack = ({ pack, send }) => html` +
+

${pack.title}

+
+ ${pack.stickers.map(sticker => html` + <${Sticker} key=${sticker.id} content=${sticker} send=${send}/> + `)} +
+
+` + +const Sticker = ({ content, send }) => html` +
+ ${content.body} +
+` + +render(html`<${App} />`, document.body) -- cgit v1.2.3