Merge pull request #21 from KadenBiel/nightly

v2 beta

package.json

@@ -18,7 +18,7 @@
     "dist:32": "yarn compile && electron-builder --win --ia32",
     "dist:64": "yarn compile && electron-builder --win --x64",
     "dist:linux": "yarn compile && electron-builder --linux --x64",
-    "publish": "yarn compile && electron-builder --win --x64 --ia32 --publish always ",
+    "deploy": "yarn compile && electron-builder build --win --x64 --ia32 --publish always",
     "publish:linux": "yarn compile && electron-builder --x64 --linux --publish always"
   },
   "devDependencies": {
@@ -54,16 +54,17 @@
     "minimist": "^1.2.5",
     "pretty-bytes": "^5.6.0",
     "react": "^17.0.2",
+    "react-color": "^2.19.3",
     "react-dom": "^17.0.1"
   },
   "bugs": {
     "url": "https://github.com/KadenBiel/DVD-TS/issues"
   },
   "homepage": "https://github.com/KadenBiel/DVD-TS#readme",
   "electronWebpack": {
-		"renderer": {
-			"webpackConfig": "webpack.renderer.config.js",
-			"webpackDllConfig": "webpack.renderer.config.js"
-		}
-	}
+    "renderer": {
+      "webpackConfig": "webpack.renderer.config.js",
+      "webpackDllConfig": "webpack.renderer.config.js"
+    }
+  }
 }

src/main/main.ts

@@ -65,8 +65,17 @@ function createWindow() { // Function for creating the window
 	});
 }
 
+function setDefaultSettings() {
+	var defColors = ['#0079fe','#0ed145','#ff7f27','#b83dba','#ec1c24','#fff200','#ff71ff','#ffffff'];
+	store.set('size', 54);
+	store.set('speed', 1);
+	store.set('colors', defColors);
+	store.set('askUpdate', true)
+}
+
 app.on('ready', () => { // Creates the mainWindow, sets the app menu and checks for updates when the app is ready
 	createWindow();
+	setDefaultSettings();
 	autoUpdater.checkForUpdates();
 });
 
@@ -147,9 +156,16 @@ ipcMain.on(IpcRendererMessages.SAVE_SETTINGS, (event, settings) => { // Saves th
 
 ipcMain.on(IpcRendererMessages.CLEAR_SETTINGS, () => { // For debugging, resets settings to defaults
 	store.clear();
+	setDefaultSettings()
 });
 
-ipcMain.on(IpcMessages.QUIT_DVD, () => { // Closes the app
+ipcMain.on(IpcMessages.QUIT_DVD, () => {
+	try {
+		mainWindow?.close();
+		mainWindow?.destroy();
+	} catch {
+		/* empty */
+	}
 	app.quit();
 });
 

src/renderer/App.tsx

@@ -16,9 +16,9 @@ import {
 	ThemeProvider
 } from '@material-ui/core';
 import prettyBytes from 'pretty-bytes';
-//import { ISettings } from '../common/ISettings';
+import './css/index.css';
+import dvd from './dvd';
 import { 
-	//IpcMessages,
 	IpcRendererMessages,
 	AutoUpdaterState,
 	IpcMessages
@@ -38,16 +38,23 @@ ipcRenderer.send(IpcRendererMessages.GET_SETTINGS)
 ipcRenderer.on(IpcRendererMessages.RETURN_SETTINGS, (event, settings) => {
     ipcRenderer.removeAllListeners(IpcRendererMessages.RETURN_SETTINGS);
     askUpdate = settings.askUpdate
+	var h = 54;
+    var w = Math.round(h/(2/3));
+    var dS = 2;
+    var colors = ['#0079fe','#0ed145','#ff7f27','#b83dba','#ec1c24','#fff200','#ff71ff','#ffffff'];
+    dvd(w,h,dS,colors);
 });
 
 const useStyles = makeStyles(() => ({
 	root: {
 		position: 'absolute',
-		width: '100vw',
+		width: '100%',
 		height: theme.spacing(3),
 		backgroundColor: '#1d1a23',
 		top: 0,
 		WebkitAppRegion: 'drag',
+		padding: '0px',
+		margin: '0px'
 	},
 	title: {
 		width: '100%',
@@ -65,7 +72,7 @@ const useStyles = makeStyles(() => ({
 		top: 0,
 	},
 	canvas: {
-		width:'100%',
+		width:'100vw',
 		height: '100vh'
 	}
 }));
@@ -96,7 +103,6 @@ const TitleBar: React.FC<TitleBarProps> = function ({ settingsOpen, setSettingsO
 				style={{ right: 0 }}
 				onClick={() => {
 					ipcRenderer.send(IpcMessages.QUIT_DVD);
-					console.log('close app')
 				}}
 			>
 				<CloseIcon htmlColor='#777' />
@@ -180,10 +186,7 @@ export default function App(): JSX.Element  {
 				)}
 			</Dialog>
             <div id='cDiv' className={classes.canvas}>
-                <canvas id='c'>
-                    <img src='../../assets/dvd.png' id='dvd' />
-                    <script src='./dvd.ts'></script>
-                </canvas>
+				{/* container for DVD canvas */}
             </div>
 		</ThemeProvider>
 	);

src/renderer/Settings.tsx

@@ -1,30 +1,24 @@
 import React from 'react';
 import makeStyles from '@material-ui/core/styles/makeStyles';
+import withStyles from '@material-ui/core/styles/withStyles';
 import Box from '@material-ui/core/Box';
 import Typography from '@material-ui/core/Typography';
 import ChevronLeft from '@material-ui/icons/ArrowBack';
 import IconButton from '@material-ui/core/IconButton';
+import MuiDivider from '@material-ui/core/Divider';
+//import { SliderPicker } from 'react-color';
 import { ipcRenderer } from 'electron';
 import { IpcRendererMessages } from '../common/ipc-messages';
+import { Checkbox, FormControlLabel, Slider, Button} from '@material-ui/core';
+import { store, setDefaultSettings, newColor, remColor, colorChange } from './settingHelper';
 
 interface StyleInput {
 	open: boolean;
 }
 
-let dvdSpeed, size, colors, askUpdate;
-
-ipcRenderer.send(IpcRendererMessages.GET_SETTINGS)
-ipcRenderer.on(IpcRendererMessages.RETURN_SETTINGS, (event, settings) => {
-    ipcRenderer.removeAllListeners(IpcRendererMessages.RETURN_SETTINGS);
-    size = settings.size;
-	dvdSpeed = settings.dvdSpeed;
-    colors = settings.colors;
-	askUpdate = settings.askUpdate
-});
-
 const useStyles = makeStyles((theme) => ({
 	root: {
-		width: '100vw',
+		width: '100%',
 		height: `calc(100vh - ${theme.spacing(3)}px)`,
 		background: '#171717ad',
 		backdropFilter: 'blur(4px)',
@@ -45,7 +39,7 @@ const useStyles = makeStyles((theme) => ({
 		height: 40,
 	},
 	scroll: {
-		paddingTop: theme.spacing(1),
+		paddingTop: 0,
 		paddingLeft: theme.spacing(2),
 		paddingRight: theme.spacing(2),
 		overflowY: 'auto',
@@ -54,7 +48,7 @@ const useStyles = makeStyles((theme) => ({
 		justifyContent: 'start',
 		alignItems: 'center',
 		paddingBottom: theme.spacing(7),
-		height: `calc(100vh - 40px - ${theme.spacing(7 + 3 + 3)}px)`,
+		height: '100%',
 	},
 	shortcutField: {
 		marginTop: theme.spacing(1),
@@ -81,25 +75,51 @@ const useStyles = makeStyles((theme) => ({
 	},
 	formLabel: {
 		width: '100%',
-		borderTop: '1px solid #313135',
+		textAlign: 'center',
+		fontSize: '16pt'
+	},
+	controlLabel: {
+		width: '100%',
 		marginRight: '0px',
-		// paddingBottom:'5px'
+		fontSize: '14pt'
 	},
+	slider: {
+		width: '75vw'
+	},
+	formContainer: {
+		width: 'auto',
+		height: 'auto',
+		justifyContent: 'start',
+		alignItems: 'center'
+	},
+	button: {
+		WebkitAppRegion: 'no-drag',
+		marginLeft: '25%',
+		float: 'left'
+	},
+	buttonContainer: {
+		width: '100vw',
+		float: 'none'
+	}
 }));
 
-/*const Divider = withStyles((theme) => ({
+const Divider = withStyles((theme) => ({
 	root: {
 		width: '100%',
 		marginTop: theme.spacing(2),
 		marginBottom: theme.spacing(2),
 	},
-}))(MuiDivider);*/
+}))(MuiDivider);
 
 export interface SettingsProps {
 	open: boolean;
 	onClose: () => void
 };
 
+function valueText(value: number) {
+	return `${value}°C`;
+}
+
 const Settings: React.FC<SettingsProps> = function ({ open, onClose }: SettingsProps) {
 	const classes = useStyles({ open });
 	return (
@@ -110,18 +130,106 @@ const Settings: React.FC<SettingsProps> = function ({ open, onClose }: SettingsP
 					size="small"
 					onClick={() => {
 						onClose();
+						colorChange();
 						ipcRenderer.send(IpcRendererMessages.SAVE_SETTINGS, {
-							size: size,
-							dvdSpeed: dvdSpeed,
-							colors: colors,
-							askUpdate: askUpdate
+							size: store.get('size'),
+							dvdSpeed: store.get('speed'),
+							colors: store.get('colors'),
+							askUpdate: store.get('askUpdate')
 						})
 					}}
 				>
 					<ChevronLeft htmlColor="#777" />
 				</IconButton>
 				<Typography variant="h6">Settings</Typography>
 			</div>
+			<div className={classes.scroll}>
+				<div className={classes.formContainer}>
+					<Typography className={classes.formLabel} id="discrete-slider1" gutterBottom>
+						Speed
+					</Typography>
+					<Slider
+						className={classes.slider}
+						defaultValue={1}
+						value={store.get('speed')}
+						getAriaValueText={valueText}
+						aria-labelledby="discrete-slider1"
+						valueLabelDisplay="auto"
+						step={1}
+						marks
+						min={1}
+						max={20}
+					/>
+				</div>
+				<Divider/>
+				<div className={classes.formContainer}>
+					<Typography className={classes.formLabel} id="discrete-slider2" gutterBottom>
+						Size
+					</Typography>
+					<Slider
+						className={classes.slider}
+						defaultValue={54}
+						value={store.get('size')}
+						getAriaValueText={valueText}
+						aria-labelledby="discrete-slider1"
+						valueLabelDisplay="auto"
+						step={1}
+						marks
+						min={1}
+						max={150}
+					/>
+				</div>
+				<Divider/>
+				<div className={classes.formContainer}>
+					<Typography className={classes.formLabel} id="colors">
+						Colors
+					</Typography>
+					<div id="colorDiv">
+						{ /* container for color pickers */}
+					</div>
+					<div className={classes.buttonContainer}>
+						<Button
+							className={classes.button}
+							onClick={() => newColor()}
+							variant={'contained'}
+						>
+							New Color
+						</Button>
+						<Button
+							className={classes.button}
+							onClick={() => remColor()}
+							variant={'contained'}
+						>
+							Remove Color
+						</Button>
+					</div>
+				</div>
+				<Divider />
+				<div className={classes.formContainer}>
+					<Typography className={classes.formLabel}>
+						General
+					</Typography>
+					<FormControlLabel
+						className={classes.controlLabel}
+						label='Ask Before Updating'
+						checked={store.get('askUpdate')}
+						onChange={(_, checked: boolean) => {
+							store.set('askUpdate', checked)
+						}}
+						control={<Checkbox/>}
+					/>
+				</div>
+				<Divider />
+				<div>
+					<Button
+						variant="contained"
+						color="secondary"
+						onClick={() => setDefaultSettings()}
+						>
+							Reset To Defaults
+					</Button>
+				</div>
+			</div>
 		</Box>
 	);
 };