Gaëtan Renaudeau
7 years ago
committed by
GitHub
GitHub
16 changed files with 304 additions and 523 deletions
@ -1,298 +0,0 @@ |
|||||
// @flow
|
|
||||
|
|
||||
/* eslint-disable import/no-named-as-default-member */ |
|
||||
|
|
||||
import React, { PureComponent } from 'react' |
|
||||
import { remote, ipcRenderer } from 'electron' |
|
||||
import { translate } from 'react-i18next' |
|
||||
import styled from 'styled-components' |
|
||||
import color from 'color' |
|
||||
import fs from 'fs' |
|
||||
import path from 'path' |
|
||||
|
|
||||
import takeRight from 'lodash/takeRight' |
|
||||
import last from 'lodash/last' |
|
||||
import reduce from 'lodash/fp/reduce' |
|
||||
import flow from 'lodash/fp/flow' |
|
||||
import filter from 'lodash/fp/filter' |
|
||||
import sortBy from 'lodash/fp/sortBy' |
|
||||
import chunk from 'lodash/chunk' |
|
||||
|
|
||||
import Chart from 'components/base/Chart' |
|
||||
import Box from 'components/base/Box' |
|
||||
import Bar from 'components/base/Bar' |
|
||||
import CopyToClipboard from 'components/base/CopyToClipboard' |
|
||||
|
|
||||
import staticPath from 'helpers/staticPath' |
|
||||
|
|
||||
import theme from 'styles/theme' |
|
||||
|
|
||||
const getLanguages = p => fs.readdirSync(p).filter(f => fs.statSync(path.join(p, f)).isDirectory()) |
|
||||
const languages = getLanguages(path.join(staticPath, '/i18n')) |
|
||||
|
|
||||
const mainWindow = remote.BrowserWindow.getAllWindows().find(w => w.name === 'MainWindow') |
|
||||
|
|
||||
type HslColor = { |
|
||||
color: Array<number>, |
|
||||
} |
|
||||
|
|
||||
type ColorType = { |
|
||||
name: string, |
|
||||
val: string, |
|
||||
isDark: boolean, |
|
||||
color: { |
|
||||
isDark: () => boolean, |
|
||||
hsl: () => HslColor, |
|
||||
}, |
|
||||
} |
|
||||
|
|
||||
type SimpleType = { |
|
||||
name: string, |
|
||||
val: string, |
|
||||
} |
|
||||
|
|
||||
const transform = flow( |
|
||||
reduce.convert({ cap: false })((acc, cur, key) => { |
|
||||
const c = color(cur) |
|
||||
return [ |
|
||||
...acc, |
|
||||
{ |
|
||||
name: key, |
|
||||
val: cur, |
|
||||
color: c, |
|
||||
isDark: c.isDark(), |
|
||||
}, |
|
||||
] |
|
||||
}, []), |
|
||||
filter(el => el.name !== 'transparent'), |
|
||||
sortBy(el => el.color.hsl().color[2]), |
|
||||
) |
|
||||
|
|
||||
const colors: Array<ColorType> = transform(theme.colors) |
|
||||
const spaces: Array<SimpleType> = theme.space.map((s, i) => ({ |
|
||||
name: s.toString(), |
|
||||
val: i.toString(), |
|
||||
})) |
|
||||
const fontSizes: Array<SimpleType> = theme.fontSizes.map((s, i) => ({ |
|
||||
name: s.toString(), |
|
||||
val: i.toString(), |
|
||||
})) |
|
||||
|
|
||||
const Container = styled(Box).attrs({ |
|
||||
bg: 'dark', |
|
||||
p: 5, |
|
||||
grow: true, |
|
||||
color: 'white', |
|
||||
fontSize: 3, |
|
||||
})`` |
|
||||
|
|
||||
const Title = styled(Box).attrs({ |
|
||||
color: 'white', |
|
||||
})` |
|
||||
text-transform: uppercase; |
|
||||
` |
|
||||
|
|
||||
const Items = styled(Box).attrs({ |
|
||||
horizontal: true, |
|
||||
flow: 4, |
|
||||
})`` |
|
||||
|
|
||||
const Item = styled(Box).attrs({ |
|
||||
alignItems: 'center', |
|
||||
bg: 'dark', |
|
||||
borderRadius: 1, |
|
||||
color: 'white', |
|
||||
justifyContent: 'center', |
|
||||
py: 2, |
|
||||
px: 4, |
|
||||
})` |
|
||||
border: 2px solid ${p => p.theme.colors.white}; |
|
||||
flex: 1; |
|
||||
overflow: hidden; |
|
||||
cursor: pointer; |
|
||||
` |
|
||||
|
|
||||
type State = { |
|
||||
cpuUsage: Object, |
|
||||
} |
|
||||
|
|
||||
class DevTools extends PureComponent<any, State> { |
|
||||
state = { |
|
||||
cpuUsage: {}, |
|
||||
} |
|
||||
|
|
||||
componentDidMount() { |
|
||||
ipcRenderer.on('msg', this.handleMessage) |
|
||||
} |
|
||||
|
|
||||
componentWillUnmount() { |
|
||||
ipcRenderer.removeListener('msg', this.handleMessage) |
|
||||
} |
|
||||
|
|
||||
handleMessage = (e: any, { type, data }: Object) => { |
|
||||
if (type === 'usage.cpu') { |
|
||||
this.setState(prev => ({ |
|
||||
cpuUsage: { |
|
||||
...prev.cpuUsage, |
|
||||
[data.name]: takeRight( |
|
||||
[ |
|
||||
...(prev.cpuUsage[data.name] || []), |
|
||||
{ |
|
||||
date: new Date().getTime().toString(), |
|
||||
value: parseFloat(data.value), |
|
||||
}, |
|
||||
], |
|
||||
10, |
|
||||
), |
|
||||
}, |
|
||||
})) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
handleChangeLanguage = lang => () => { |
|
||||
mainWindow.webContents.send('msg', { |
|
||||
type: 'application.changeLanguage', |
|
||||
data: lang, |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
handleStartSync = () => |
|
||||
mainWindow.webContents.send('msg', { |
|
||||
type: 'accounts.sync.start', |
|
||||
}) |
|
||||
|
|
||||
handleStopSync = () => |
|
||||
mainWindow.webContents.send('msg', { |
|
||||
type: 'accounts.sync.stop', |
|
||||
}) |
|
||||
|
|
||||
render() { |
|
||||
const { cpuUsage } = this.state |
|
||||
|
|
||||
return ( |
|
||||
<Container> |
|
||||
<Box grow flow={4}> |
|
||||
<Section title="Colors"> |
|
||||
{chunk(colors, 5).map((c, i) => ( |
|
||||
<Items |
|
||||
key={i} // eslint-disable-line react/no-array-index-key
|
|
||||
> |
|
||||
{c.map(color => ( |
|
||||
<CopyToClipboard |
|
||||
key={color.name} |
|
||||
data={color.name} |
|
||||
render={copy => <Color color={color} onClick={copy} />} |
|
||||
/> |
|
||||
))} |
|
||||
</Items> |
|
||||
))} |
|
||||
</Section> |
|
||||
<Section title="Space"> |
|
||||
{chunk(spaces, 5).map((s, i) => ( |
|
||||
<Items |
|
||||
key={i} // eslint-disable-line react/no-array-index-key
|
|
||||
> |
|
||||
{s.map(space => ( |
|
||||
<CopyToClipboard |
|
||||
key={space.val} |
|
||||
data={space.val} |
|
||||
render={copy => <Item onClick={copy}>{space.name}</Item>} |
|
||||
/> |
|
||||
))} |
|
||||
</Items> |
|
||||
))} |
|
||||
</Section> |
|
||||
<Section title="Font Sizes"> |
|
||||
{chunk(fontSizes, 5).map((f, i) => ( |
|
||||
<Items |
|
||||
key={i} // eslint-disable-line react/no-array-index-key
|
|
||||
> |
|
||||
{f.map(fontSize => ( |
|
||||
<CopyToClipboard |
|
||||
key={fontSize.val} |
|
||||
data={fontSize.val} |
|
||||
render={copy => <Item onClick={copy}>{fontSize.name}</Item>} |
|
||||
/> |
|
||||
))} |
|
||||
</Items> |
|
||||
))} |
|
||||
</Section> |
|
||||
<Bar size={2} color="white" /> |
|
||||
<Section title="Languages" horizontal> |
|
||||
{languages.map(lang => ( |
|
||||
<Item key={lang} onClick={this.handleChangeLanguage(lang)} style={{ flex: 0 }}> |
|
||||
{lang} |
|
||||
</Item> |
|
||||
))} |
|
||||
</Section> |
|
||||
<Bar size={2} color="white" /> |
|
||||
<Section title="Sync Accounts" horizontal> |
|
||||
<Item onClick={this.handleStartSync} style={{ flex: 0 }}> |
|
||||
Start |
|
||||
</Item> |
|
||||
<Item onClick={this.handleStopSync} style={{ flex: 0 }}> |
|
||||
Stop |
|
||||
</Item> |
|
||||
</Section> |
|
||||
<Bar size={2} color="white" /> |
|
||||
<Section title="CPU Usage"> |
|
||||
{chunk(Object.keys(cpuUsage).sort(), 2).map((l, i) => ( |
|
||||
<Items |
|
||||
key={i} // eslint-disable-line react/no-array-index-key
|
|
||||
> |
|
||||
{l.map(k => ( |
|
||||
<Box key={k} style={{ flex: 1 }}> |
|
||||
<Box horizontal alignItems="center" flow={2}> |
|
||||
<Box fontSize={1}>{last(cpuUsage[k]).value}%</Box> |
|
||||
<Box>{k}</Box> |
|
||||
</Box> |
|
||||
<Box> |
|
||||
<Chart |
|
||||
id={k} |
|
||||
data={cpuUsage[k]} |
|
||||
dateFormat="%Q" |
|
||||
color="#8884d8" |
|
||||
height={50} |
|
||||
hideAxis |
|
||||
isInteractive={false} |
|
||||
/> |
|
||||
</Box> |
|
||||
</Box> |
|
||||
))} |
|
||||
</Items> |
|
||||
))} |
|
||||
</Section> |
|
||||
</Box> |
|
||||
</Container> |
|
||||
) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
const Color = ({ onClick, color }: { onClick: Function, color: ColorType }) => ( |
|
||||
<Item bg={color.val} color={color.isDark ? 'white' : 'dark'} onClick={onClick}> |
|
||||
{color.name} |
|
||||
</Item> |
|
||||
) |
|
||||
|
|
||||
const Section = ({ |
|
||||
title, |
|
||||
children, |
|
||||
horizontal, |
|
||||
}: { |
|
||||
title: string, |
|
||||
children: any, |
|
||||
horizontal?: boolean, |
|
||||
}) => ( |
|
||||
<Box flow={2}> |
|
||||
<Title>{title}</Title> |
|
||||
<Box flow={4} horizontal={horizontal}> |
|
||||
{children} |
|
||||
</Box> |
|
||||
</Box> |
|
||||
) |
|
||||
|
|
||||
Section.defaultProps = { |
|
||||
horizontal: false, |
|
||||
} |
|
||||
|
|
||||
export default translate()(DevTools) |
|
||||
@ -0,0 +1,239 @@ |
|||||
|
// @flow
|
||||
|
|
||||
|
import React, { Component } from 'react' |
||||
|
import QrCode from 'qrcode-reader' |
||||
|
|
||||
|
export default class QRCodeCameraPickerCanvas extends Component< |
||||
|
{ |
||||
|
width: number, |
||||
|
height: number, |
||||
|
centerSize: number, |
||||
|
cameraBorderSize: number, |
||||
|
cameraBorderLength: number, |
||||
|
intervalCheck: number, |
||||
|
dpr: number, |
||||
|
onPick: string => void, |
||||
|
}, |
||||
|
{ |
||||
|
message: ?string, |
||||
|
}, |
||||
|
> { |
||||
|
static defaultProps = { |
||||
|
width: 260, |
||||
|
height: 185, |
||||
|
centerSize: 110, |
||||
|
cameraBorderSize: 4, |
||||
|
cameraBorderLength: 35, |
||||
|
intervalCheck: 250, |
||||
|
dpr: window.devicePixelRatio || 1, |
||||
|
} |
||||
|
|
||||
|
state = { |
||||
|
message: 'Please accept Camera permission', |
||||
|
} |
||||
|
|
||||
|
componentDidMount() { |
||||
|
let getUserMedia |
||||
|
let sum = 0 |
||||
|
const onkeyup = (e: *) => { |
||||
|
sum += e.which |
||||
|
if (sum === 439 && this.canvasSecond) { |
||||
|
this.canvasSecond.style.filter = 'hue-rotate(90deg)' |
||||
|
} |
||||
|
} |
||||
|
if (document) document.addEventListener('keyup', onkeyup) |
||||
|
this.unsubscribes.push(() => { |
||||
|
if (document) document.removeEventListener('keyup', onkeyup) |
||||
|
}) |
||||
|
const { navigator } = window |
||||
|
if (navigator.mediaDevices) { |
||||
|
const mediaDevices = navigator.mediaDevices |
||||
|
getUserMedia = opts => mediaDevices.getUserMedia(opts) |
||||
|
} else { |
||||
|
const f = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia |
||||
|
if (f) { |
||||
|
getUserMedia = opts => new Promise((res, rej) => f.call(navigator, opts, res, rej)) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
if (!getUserMedia) { |
||||
|
this.setState({ message: 'Incompatible browser' }) // eslint-disable-line
|
||||
|
} else { |
||||
|
const qr = new QrCode() |
||||
|
qr.callback = (err, value) => { |
||||
|
if (!err) { |
||||
|
this.props.onPick(value.result) |
||||
|
} |
||||
|
} |
||||
|
getUserMedia({ |
||||
|
video: { facingMode: 'environment' }, |
||||
|
}) |
||||
|
.then(stream => { |
||||
|
if (this.unmounted) return |
||||
|
this.setState({ message: null }) |
||||
|
let video = document.createElement('video') |
||||
|
video.setAttribute('playsinline', 'true') |
||||
|
video.setAttribute('autoplay', 'true') |
||||
|
video.srcObject = stream |
||||
|
video.load() |
||||
|
this.unsubscribes.push(() => { |
||||
|
if (video) { |
||||
|
video.pause() |
||||
|
video.srcObject = null |
||||
|
video = null |
||||
|
} |
||||
|
}) |
||||
|
video.onloadedmetadata = () => { |
||||
|
if (this.unmounted || !video) return |
||||
|
try { |
||||
|
video.play() |
||||
|
} catch (e) { |
||||
|
console.error(e) |
||||
|
} |
||||
|
let lastCheck = 0 |
||||
|
let raf |
||||
|
const loop = (t: number) => { |
||||
|
raf = requestAnimationFrame(loop) |
||||
|
const { ctxMain, ctxSecond } = this |
||||
|
if (!ctxMain || !ctxSecond || !video) return |
||||
|
const { |
||||
|
centerSize, |
||||
|
cameraBorderSize, |
||||
|
cameraBorderLength, |
||||
|
dpr, |
||||
|
intervalCheck, |
||||
|
} = this.props |
||||
|
const cs = centerSize * dpr |
||||
|
const cbs = cameraBorderSize * dpr |
||||
|
const cbl = cameraBorderLength * dpr |
||||
|
const { width, height } = ctxMain.canvas |
||||
|
ctxMain.drawImage(video, 0, 0, width, height) |
||||
|
|
||||
|
// draw second in the inner
|
||||
|
const x = Math.floor((width - cs) / 2 - cbs) |
||||
|
const y = Math.floor((height - cs) / 2 - cbs) |
||||
|
const w = cs + cbs * 2 |
||||
|
const h = cs + cbs * 2 |
||||
|
ctxSecond.beginPath() |
||||
|
ctxSecond.rect(x, y, w, h) |
||||
|
ctxSecond.clip() |
||||
|
ctxSecond.drawImage(ctxMain.canvas, 0, 0) |
||||
|
|
||||
|
// draw the camera borders
|
||||
|
ctxSecond.strokeStyle = '#fff' |
||||
|
ctxSecond.lineWidth = cbs |
||||
|
ctxSecond.beginPath() |
||||
|
ctxSecond.moveTo(x + cbl, y) |
||||
|
ctxSecond.lineTo(x, y) |
||||
|
ctxSecond.lineTo(x, y + cbl) |
||||
|
ctxSecond.stroke() |
||||
|
ctxSecond.beginPath() |
||||
|
ctxSecond.moveTo(x + cbl, y + h) |
||||
|
ctxSecond.lineTo(x, y + h) |
||||
|
ctxSecond.lineTo(x, y + h - cbl) |
||||
|
ctxSecond.stroke() |
||||
|
ctxSecond.beginPath() |
||||
|
ctxSecond.moveTo(x + w - cbl, y + h) |
||||
|
ctxSecond.lineTo(x + w, y + h) |
||||
|
ctxSecond.lineTo(x + w, y + h - cbl) |
||||
|
ctxSecond.stroke() |
||||
|
ctxSecond.beginPath() |
||||
|
ctxSecond.moveTo(x + w - cbl, y) |
||||
|
ctxSecond.lineTo(x + w, y) |
||||
|
ctxSecond.lineTo(x + w, y + cbl) |
||||
|
ctxSecond.stroke() |
||||
|
|
||||
|
if (t - lastCheck >= intervalCheck) { |
||||
|
lastCheck = t |
||||
|
qr.decode(ctxMain.getImageData(0, 0, width, height)) |
||||
|
} |
||||
|
} |
||||
|
raf = requestAnimationFrame(loop) |
||||
|
this.unsubscribes.push(() => cancelAnimationFrame(raf)) |
||||
|
} |
||||
|
}) |
||||
|
.catch(e => { |
||||
|
if (this.unmounted) return |
||||
|
this.setState({ |
||||
|
message: String(e.message || e), |
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
componentWillUnmount() { |
||||
|
this.unmounted = true |
||||
|
this.unsubscribes.forEach(f => f()) |
||||
|
} |
||||
|
|
||||
|
canvasMain: ?HTMLCanvasElement |
||||
|
ctxMain: ?CanvasRenderingContext2D |
||||
|
canvasSecond: ?HTMLCanvasElement |
||||
|
ctxSecond: ?CanvasRenderingContext2D |
||||
|
unsubscribes: Array<() => void> = [] |
||||
|
unmounted = false |
||||
|
|
||||
|
_onMainRef = (canvasMain: ?HTMLCanvasElement) => { |
||||
|
if (canvasMain === this.canvasMain) return |
||||
|
this.canvasMain = canvasMain |
||||
|
if (canvasMain) { |
||||
|
this.ctxMain = canvasMain.getContext('2d') |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
_onSecondRef = (canvasSecond: ?HTMLCanvasElement) => { |
||||
|
if (canvasSecond === this.canvasSecond) return |
||||
|
this.canvasSecond = canvasSecond |
||||
|
if (canvasSecond) { |
||||
|
this.ctxSecond = canvasSecond.getContext('2d') |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
render() { |
||||
|
const { width, height, dpr } = this.props |
||||
|
const { message } = this.state |
||||
|
const style = { |
||||
|
width, |
||||
|
height, |
||||
|
position: 'relative', |
||||
|
display: 'flex', |
||||
|
alignItems: 'center', |
||||
|
justifyContent: 'center', |
||||
|
background: '#eee', |
||||
|
color: '#666', |
||||
|
fontSize: `${(width / 30).toFixed(0)}px`, |
||||
|
overflow: 'hidden', |
||||
|
} |
||||
|
const mainStyle = { |
||||
|
width, |
||||
|
height, |
||||
|
position: 'absolute', |
||||
|
top: 0, |
||||
|
left: 0, |
||||
|
filter: 'brightness(80%) blur(6px)', |
||||
|
transform: 'scaleX(-1)', |
||||
|
} |
||||
|
const secondStyle = { |
||||
|
width, |
||||
|
height, |
||||
|
position: 'absolute', |
||||
|
top: 0, |
||||
|
left: 0, |
||||
|
transform: 'scaleX(-1)', |
||||
|
} |
||||
|
return message ? ( |
||||
|
<div style={style}> |
||||
|
<p>{message}</p> |
||||
|
</div> |
||||
|
) : ( |
||||
|
<div style={style}> |
||||
|
<canvas ref={this._onMainRef} style={mainStyle} width={dpr * width} height={dpr * height} /> |
||||
|
<canvas |
||||
|
ref={this._onSecondRef} |
||||
|
style={secondStyle} |
||||
|
width={dpr * width} |
||||
|
height={dpr * height} |
||||
|
/> |
||||
|
</div> |
||||
|
) |
||||
|
} |
||||
|
} |
||||
@ -1,29 +0,0 @@ |
|||||
// @flow
|
|
||||
|
|
||||
import React, { PureComponent } from 'react' |
|
||||
import styled from 'styled-components' |
|
||||
|
|
||||
import Box from 'components/base/Box' |
|
||||
import GrowScroll from 'components/base/GrowScroll' |
|
||||
|
|
||||
import DevTools from 'components/DevTools' |
|
||||
|
|
||||
const Container = styled(Box).attrs({ |
|
||||
grow: true, |
|
||||
})` |
|
||||
height: 100%; |
|
||||
` |
|
||||
|
|
||||
class Dev extends PureComponent<{}> { |
|
||||
render() { |
|
||||
return ( |
|
||||
<Container> |
|
||||
<GrowScroll> |
|
||||
<DevTools /> |
|
||||
</GrowScroll> |
|
||||
</Container> |
|
||||
) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
export default Dev |
|
||||
@ -1,43 +0,0 @@ |
|||||
const TIMEOUT_CPU_USAGE = 5e3 |
|
||||
|
|
||||
const wait = ms => new Promise(resolve => setTimeout(resolve, ms)) |
|
||||
|
|
||||
const cpuUsage = async (startTime, startUsage) => { |
|
||||
await wait(500) |
|
||||
|
|
||||
const newStartTime = process.hrtime() |
|
||||
const newStartUsage = process.cpuUsage() |
|
||||
|
|
||||
const elapTime = process.hrtime(startTime) |
|
||||
const elapUsage = process.cpuUsage(startUsage) |
|
||||
|
|
||||
startTime = newStartTime |
|
||||
startUsage = newStartUsage |
|
||||
|
|
||||
const elapTimeMS = elapTime[0] * 1e3 + elapTime[1] / 1e6 |
|
||||
|
|
||||
const elapUserMS = elapUsage.user / 1e3 |
|
||||
const elapSystMS = elapUsage.system / 1e3 |
|
||||
const cpuPercent = (100 * (elapUserMS + elapSystMS) / elapTimeMS).toFixed(1) |
|
||||
|
|
||||
return { |
|
||||
cpuPercent, |
|
||||
newStartTime: startTime, |
|
||||
newStartUsage: startUsage, |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
export default callback => { |
|
||||
const initCpuUsage = async (startTime, startUsage) => { |
|
||||
const { cpuPercent, newStartTime, newStartUsage } = await cpuUsage(startTime, startUsage) |
|
||||
|
|
||||
callback(cpuPercent) |
|
||||
|
|
||||
setTimeout(() => initCpuUsage(newStartTime, newStartUsage), TIMEOUT_CPU_USAGE) |
|
||||
} |
|
||||
|
|
||||
const startTime = process.hrtime() |
|
||||
const startUsage = process.cpuUsage() |
|
||||
|
|
||||
initCpuUsage(startTime, startUsage) |
|
||||
} |
|
||||
Loading…
Reference in new issue