Cache lowBandwidth setting to speed up BaseAvatar

Signed-off-by: Robin Townsend <robin@robin.town>
pull/21833/head
Robin Townsend 2021-06-06 23:08:47 -04:00
parent 903d4d252a
commit 1e574307d0
3 changed files with 17 additions and 4 deletions

View File

@ -182,6 +182,7 @@ export interface IState {
canReact: boolean; canReact: boolean;
canReply: boolean; canReply: boolean;
layout: Layout; layout: Layout;
lowBandwidth: boolean;
showReadReceipts: boolean; showReadReceipts: boolean;
showRedactions: boolean; showRedactions: boolean;
showJoinLeaves: boolean; showJoinLeaves: boolean;
@ -244,6 +245,7 @@ export default class RoomView extends React.Component<IProps, IState> {
canReact: false, canReact: false,
canReply: false, canReply: false,
layout: SettingsStore.getValue("layout"), layout: SettingsStore.getValue("layout"),
lowBandwidth: SettingsStore.getValue("lowBandwidth"),
showReadReceipts: true, showReadReceipts: true,
showRedactions: true, showRedactions: true,
showJoinLeaves: true, showJoinLeaves: true,
@ -279,6 +281,9 @@ export default class RoomView extends React.Component<IProps, IState> {
SettingsStore.watchSetting("layout", null, () => SettingsStore.watchSetting("layout", null, () =>
this.setState({ layout: SettingsStore.getValue("layout") }), this.setState({ layout: SettingsStore.getValue("layout") }),
), ),
SettingsStore.watchSetting("lowBandwidth", null, () =>
this.setState({ lowBandwidth: SettingsStore.getValue("lowBandwidth") }),
),
]; ];
} }

View File

@ -22,6 +22,7 @@ import classNames from 'classnames';
import * as AvatarLogic from '../../../Avatar'; import * as AvatarLogic from '../../../Avatar';
import SettingsStore from "../../../settings/SettingsStore"; import SettingsStore from "../../../settings/SettingsStore";
import AccessibleButton from '../elements/AccessibleButton'; import AccessibleButton from '../elements/AccessibleButton';
import RoomContext from "../../../contexts/RoomContext";
import MatrixClientContext from "../../../contexts/MatrixClientContext"; import MatrixClientContext from "../../../contexts/MatrixClientContext";
import {useEventEmitter} from "../../../hooks/useEventEmitter"; import {useEventEmitter} from "../../../hooks/useEventEmitter";
import {toPx} from "../../../utils/units"; import {toPx} from "../../../utils/units";
@ -44,12 +45,12 @@ interface IProps {
className?: string; className?: string;
} }
const calculateUrls = (url, urls) => { const calculateUrls = (url, urls, lowBandwidth) => {
// work out the full set of urls to try to load. This is formed like so: // work out the full set of urls to try to load. This is formed like so:
// imageUrls: [ props.url, ...props.urls ] // imageUrls: [ props.url, ...props.urls ]
let _urls = []; let _urls = [];
if (!SettingsStore.getValue("lowBandwidth")) { if (!lowBandwidth) {
_urls = urls || []; _urls = urls || [];
if (url) { if (url) {
@ -63,7 +64,13 @@ const calculateUrls = (url, urls) => {
}; };
const useImageUrl = ({url, urls}): [string, () => void] => { const useImageUrl = ({url, urls}): [string, () => void] => {
const [imageUrls, setUrls] = useState<string[]>(calculateUrls(url, urls)); // Since this is a hot code path and the settings store can be slow, we
// use the cached lowBandwidth value from the room context if it exists
const roomContext = useContext(RoomContext);
const lowBandwidth = roomContext ?
roomContext.lowBandwidth : SettingsStore.getValue("lowBandwidth");
const [imageUrls, setUrls] = useState<string[]>(calculateUrls(url, urls, lowBandwidth));
const [urlsIndex, setIndex] = useState<number>(0); const [urlsIndex, setIndex] = useState<number>(0);
const onError = useCallback(() => { const onError = useCallback(() => {
@ -71,7 +78,7 @@ const useImageUrl = ({url, urls}): [string, () => void] => {
}, []); }, []);
useEffect(() => { useEffect(() => {
setUrls(calculateUrls(url, urls)); setUrls(calculateUrls(url, urls, lowBandwidth));
setIndex(0); setIndex(0);
}, [url, JSON.stringify(urls)]); // eslint-disable-line react-hooks/exhaustive-deps }, [url, JSON.stringify(urls)]); // eslint-disable-line react-hooks/exhaustive-deps

View File

@ -40,6 +40,7 @@ const RoomContext = createContext<IState>({
canReact: false, canReact: false,
canReply: false, canReply: false,
layout: Layout.Group, layout: Layout.Group,
lowBandwidth: false,
showReadReceipts: true, showReadReceipts: true,
showRedactions: true, showRedactions: true,
showJoinLeaves: true, showJoinLeaves: true,