pezkuwichain/pezkuwi-ui
1
0
Fork 0
mirror of https://github.com/pezkuwichain/pezkuwi-ui.git synced 2026-06-20 03:31:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

Bump QR display timeouts (adjust after looping) (#237)

Browse Source 
* Bump QR display timeouts (adjust after looping)

* timerId to state
This commit is contained in:
Jaco Greeff
2019-11-10 16:45:01 +01:00
committed by GitHub
parent 3173b7dfc1
commit 6066d0e6f4
1 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-qr/src/Display.tsx
+12 -5
View File
@@ -20,11 +20,13 @@ interface State {
frames: Uint8Array[]; frames: Uint8Array[];
frameIdx: number; frameIdx: number;
image: string | null; image: string | null;
timerDelay: number;
timerId: number | null; timerId: number | null;
valueHash: string | null; valueHash: string | null;
} }
const FRAME_DELAY = 2100; const FRAME_DELAY = 2500;
const TIMER_INC = 500;
function getDataUrl (value: Uint8Array): string { function getDataUrl (value: Uint8Array): string {
const qr = qrcode(0, 'M'); const qr = qrcode(0, 'M');
@@ -43,6 +45,7 @@ class Display extends React.PureComponent<Props, State> {
frames: [], frames: [],
frameIdx: 0, frameIdx: 0,
image: null, image: null,
timerDelay: FRAME_DELAY,
timerId: null, timerId: null,
valueHash: null valueHash: null
}; };
@@ -69,7 +72,7 @@ class Display extends React.PureComponent<Props, State> {
public componentDidMount (): void { public componentDidMount (): void {
this.setState({ this.setState({
timerId: window.setInterval(this.nextFrame, FRAME_DELAY) timerId: window.setTimeout(this.nextFrame, FRAME_DELAY)
}); });
} }
@@ -77,7 +80,7 @@ class Display extends React.PureComponent<Props, State> {
const { timerId } = this.state; const { timerId } = this.state;
if (timerId) { if (timerId) {
clearInterval(timerId); clearTimeout(timerId);
} }
} }
@@ -105,7 +108,7 @@ class Display extends React.PureComponent<Props, State> {
} }
private nextFrame = (): void => { private nextFrame = (): void => {
const { frames, frameIdx } = this.state; const { frames, frameIdx, timerDelay } = this.state;
if (!frames || frames.length <= 1) { if (!frames || frames.length <= 1) {
return; return;
@@ -114,13 +117,17 @@ class Display extends React.PureComponent<Props, State> {
const nextIdx = frameIdx === frames.length - 1 const nextIdx = frameIdx === frames.length - 1
? 0 ? 0
: frameIdx + 1; : frameIdx + 1;
const nextDelay = timerDelay + ((nextIdx === 0) ? TIMER_INC : 0);
const timerId = setTimeout(this.nextFrame, nextDelay);
// only encode the frames on demand, not above as part of the // only encode the frames on demand, not above as part of the
// state derivation - in the case of large payloads, this should // state derivation - in the case of large payloads, this should
// be slightly more responsive on initial load // be slightly more responsive on initial load
this.setState({ this.setState({
frameIdx: nextIdx, frameIdx: nextIdx,
image: getDataUrl(frames[nextIdx]) image: getDataUrl(frames[nextIdx]),
timerId,
timerDelay: nextDelay
}); });
} }
} }