-
Notifications
You must be signed in to change notification settings - Fork 7
/
renderer.tsx
67 lines (63 loc) · 2.76 KB
/
renderer.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import "bootstrap/dist/css/bootstrap.min.css"
import React, { useState } from "react"
import ReactDom from "react-dom"
import TitleBar from "./components/TitleBar"
import VersionDialog from "./components/VersionDialog"
import VideoPlayer from "./components/VideoPlayer"
import ReverseDialog from "./components/ReverseDialog"
import ExportDialog from "./components/ExportDialog"
import LinkDialog from "./components/LinkDialog"
import FXDialog from "./components/FXDialog"
import ContextMenu from "./components/ContextMenu"
import "./index.less"
export const HoverContext = React.createContext<any>(null)
export const BrightnessContext = React.createContext<any>(null)
export const ContrastContext = React.createContext<any>(null)
export const HueContext = React.createContext<any>(null)
export const SaturationContext = React.createContext<any>(null)
export const LightnessContext = React.createContext<any>(null)
export const BlurContext = React.createContext<any>(null)
export const SharpenContext = React.createContext<any>(null)
export const PixelateContext = React.createContext<any>(null)
const App = () => {
const [hover, setHover] = useState(true)
const [brightness, setBrightness] = useState(100)
const [contrast, setContrast] = useState(100)
const [hue, setHue] = useState(180)
const [saturation, setSaturation] = useState(100)
const [lightness, setLightness] = useState(100)
const [blur, setBlur] = useState(0)
const [sharpen, setSharpen] = useState(0)
const [pixelate, setPixelate] = useState(1)
return (
<main className="app" onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
<PixelateContext.Provider value={{pixelate, setPixelate}}>
<BrightnessContext.Provider value={{brightness, setBrightness}}>
<ContrastContext.Provider value={{contrast, setContrast}}>
<HueContext.Provider value={{hue, setHue}}>
<SaturationContext.Provider value={{saturation, setSaturation}}>
<LightnessContext.Provider value={{lightness, setLightness}}>
<BlurContext.Provider value={{blur, setBlur}}>
<SharpenContext.Provider value={{sharpen, setSharpen}}>
<HoverContext.Provider value={{hover, setHover}}>
<TitleBar/>
<ContextMenu/>
<VersionDialog/>
<LinkDialog/>
<FXDialog/>
<ReverseDialog/>
<ExportDialog/>
<VideoPlayer/>
</HoverContext.Provider>
</SharpenContext.Provider>
</BlurContext.Provider>
</LightnessContext.Provider>
</SaturationContext.Provider>
</HueContext.Provider>
</ContrastContext.Provider>
</BrightnessContext.Provider>
</PixelateContext.Provider>
</main>
)
}
ReactDom.render(<App/>, document.getElementById("root"))