timw4mail/film-exif
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Screw IPC, I'm going with websockets

Browse Source
This commit is contained in:
Timothy Warren 2018-04-12 21:57:16 -04:00
parent 95a52dd535
commit 5e90a0f0a8
12 changed files with 483 additions and 260 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
package.json
View File

@ -9,7 +9,10 @@
"inferno": "^5.0.1",
"inferno-bootstrap": "^5.0.0",
"inferno-dev-utils": "^5.3.0",
"inferno-router": "^5.0.1"
"inferno-router": "^5.0.1",
"isomorphic-ws": "^4.0.0",
"lodash": "^4.17.5",
"ws": "^5.1.1"
},
"devDependencies": {
"autoprefixer": "^8.2.0",
@ -19,6 +22,7 @@
"babel-loader": "^7.1.4",
"babel-preset-inferno-app": "^7.1.0",
"babel-runtime": "6.26.0",
"bootstrap": "^4",
"case-sensitive-paths-webpack-plugin": "^2.1.2",
"chalk": "2.3.2",
"css-loader": "^0.28.11",
@ -42,6 +46,7 @@
"html-webpack-plugin": "^3.2.0",
"husky": "^0.14.3",
"jest": "^22.4.3",
"jquery": "^3.3.1",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.3.0",
"postcss-loader": "^2.1.3",

107
public/css/app.css
View File

@ -44,3 +44,110 @@ bs-jumbotron {
}
/*! Ids */
/* -----------------------------------------------------------------------------
CSS loading icon
------------------------------------------------------------------------------*/
cssload-loader {
display: flex;
/* position: relative;
left: calc(50% - 50px); */
justify-content: center;
width: 100px;
height: 100px;
border-radius: 50%;
perspective: 780px;
margin: auto;
}
.cssload-inner {
position: absolute;
width: 100%;
height: 100%;
margin: auto;
box-sizing: border-box;
border-radius: 50%;
}
cssload-one {
left: 0%;
top: 0%;
animation: cssload-rotate-one 1.15s linear infinite;
border-bottom: 3px solid rgb(0,0,0);
}
cssload-two {
right: 0%;
top: 0%;
animation: cssload-rotate-two 1.15s linear infinite;
border-right: 3px solid rgb(0,0,0);
}
cssload-three {
right: 0%;
bottom: 0%;
animation: cssload-rotate-three 1.15s linear infinite;
border-top: 3px solid rgb(0,0,0);
}
@keyframes cssload-rotate-one {
0% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
}
}
@keyframes cssload-rotate-two {
0% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
}
100% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
}
}
@keyframes cssload-rotate-three {
0% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
}
}
/* ----------------------------------------------------------------------------
Loading overlay
-----------------------------------------------------------------------------*/
#loading-shadow {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
z-index: 500;
}
#loading-shadow loading-wrapper {
position: fixed;
z-index: 501;
top: 0;
left: 0;
width: 100%;
height: 100%;
display:flex;
align-items: center;
justify-content: center;
}
#loading-shadow loading-content {
position: relative;
color: #fff
}
loading-content .cssload-inner {
border-color: #fff
}

52
src/App.js
View File

@ -1,4 +1,8 @@
import * as _ from 'lodash';
import { Component } from 'inferno';
import { BrowserRouter, Link, NavLink } from 'inferno-router';
import WS from 'isomorphic-ws';
import { Loader } from './components';
import {
Container,
Nav,
@ -8,7 +12,50 @@ import {
} from './components/Bootstrap';
import { Routes } from './Routes';
export const App = () => (
export class App extends Component {
constructor (props) {
super(props);
this.state = {
webSocketLoaded: false,
};
_.bindAll(this, [
'onWebSocketOpen',
'onWebSocketClose',
]);
}
componentDidMount () {
window.clientWS = new WS('ws://localhost:65432/');
window.clientWS.addEventListener('open', this.onWebSocketOpen);
window.clientWS.addEventListener('message', console);
window.clientWS.addEventListener('close', this.onWebSocketClose);
}
componentWillUnmount () {
if (window.clientWS) {
window.clientWS.close();
}
}
onWebSocketOpen () {
this.setState({
webSocketLoaded: true,
});
window.clientWS.onmessage = console.info;
console.info(window.clientWS);
}
onWebSocketClose () {
console.log('WebSocket closed');
}
render () {
return (
<BrowserRouter>
<Container className="full-height" tag="bs-container">
<Navbar className="static-top" color="dark" dark expandable="sm">
@ -26,6 +73,9 @@ export const App = () => (
</Nav>
</Navbar>
<Routes />
<Loader title="Connecting to WebSocket" hidden={this.state.webSocketLoaded} />
</Container>
</BrowserRouter>
);
}
}

24
src/components/Loader.js Normal file
View File

@ -0,0 +1,24 @@
/**
* Overlay loader component
*
* @param {object} props
* @param {boolean} props.hidden
* @param {string} props.title
*/
export const Loader = (props) => {
return (
<section id="loading-shadow" hidden={props.hidden}>
<loading-wrapper>
<loading-content>
<h3>{props.title}</h3>
<br />
<cssload-loader>
<cssload-one className="cssload-inner" />
<cssload-two className="cssload-inner" />
<cssload-three className="cssload-inner" />
</cssload-loader>
</loading-content>
</loading-wrapper>
</section>
);
};

1
src/components/index.js
View File

@ -1,2 +1,3 @@
export * from './Bootstrap';
export * from './Form';
export * from './Loader';

5
src/electron/events.js
View File

@ -1,5 +0,0 @@
const { ipcMain } = require('electron');
ipcMain.on('dropped-files', () => {
});

1
src/electron/preload.js Normal file
View File

@ -0,0 +1 @@
window.ipcRenderer = require('electron').ipcRenderer;

12
src/electron/starter.js
View File

@ -4,6 +4,8 @@ const app = electron.app;
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow;
const WS = require('isomorphic-ws');
const path = require('path');
const url = require('url');
@ -31,9 +33,9 @@ const createWindow = () => {
});
mainWindow.loadURL(startUrl);
// Open the DevTools.
/* mainWindow.webContents.openDevTools({
mainWindow.webContents.openDevTools({
mode: 'bottom',
}); */
});
// Emitted when the window is closed.
mainWindow.on('closed', () => {
@ -66,6 +68,10 @@ app.on('activate', () => {
}
});
const wss = new WS.Server({
port: 65432,
});
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
require('./events');
require('./websocket-events')(wss);

13
src/electron/websocket-events.js Normal file
View File

@ -0,0 +1,13 @@
/**
* Websocket event handlers
*/
module.exports = (wss) => {
wss.on('open', ws => {
wss.send('server-log', 'Connected to client!');
wss.on('dropped-files', e => {
wss.send('recieved-dropped-files', e);
});
});
};

3
src/views/HomeView.js
View File

@ -8,6 +8,9 @@ function handleDrop (e) {
e.preventDefault();
e.stopPropagation();
// console.log(e.dataTransfer.files);
window.clientWS.send('dropped-files', e.dataTransfer.files);
for (const f of e.dataTransfer.files) {
console.log('Dragged files', f.path);
}

22
yarn.lock
View File

@ -1062,7 +1062,7 @@ babel-preset-jest@^22.4.3:
babel-register@^6.26.0:
version "6.26.0"
resolved "https://registry.npmjs.org/babel-register/-/babel-register-6.26.0.tgz#6ed021173e2fcb486d7acb45c6009a856f647071"
resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.26.0.tgz#6ed021173e2fcb486d7acb45c6009a856f647071"
dependencies:
babel-core "^6.26.0"
babel-runtime "^6.26.0"
@ -1238,6 +1238,10 @@ boom@5.x.x:
dependencies:
hoek "4.x.x"
bootstrap@^4:
version "4.1.0"
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.1.0.tgz#110b05c31a236d56dbc9adcda6dd16f53738a28a"
boxen@^1.2.1:
version "1.3.0"
resolved "https://registry.npmjs.org/boxen/-/boxen-1.3.0.tgz#55c6c39a8ba58d9c61ad22cd877532deb665a20b"
@ -4463,6 +4467,10 @@ isomorphic-fetch@^2.1.1:
node-fetch "^1.0.1"
whatwg-fetch ">=0.10.0"
isomorphic-ws@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/isomorphic-ws/-/isomorphic-ws-4.0.0.tgz#7b528b238c920eeb3f5fe429ac416df669ea4cba"
isstream@~0.1.2:
version "0.1.2"
resolved "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@ -4800,6 +4808,10 @@ jest@^22.4.3:
import-local "^1.0.0"
jest-cli "^22.4.3"
jquery@^3.3.1:
version "3.3.1"
resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca"
js-base64@^2.1.9:
version "2.4.3"
resolved "https://registry.npmjs.org/js-base64/-/js-base64-2.4.3.tgz#2e545ec2b0f2957f41356510205214e98fad6582"
@ -5102,7 +5114,7 @@ lodash.uniq@^4.5.0:
version "4.5.0"
resolved "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
"lodash@>=3.5 <5", lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.3.0:
"lodash@>=3.5 <5", lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.3.0:
version "4.17.5"
resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
@ -8175,6 +8187,12 @@ ws@^4.0.0:
async-limiter "~1.0.0"
safe-buffer "~5.1.0"
ws@^5.1.1:
version "5.1.1"
resolved "https://registry.yarnpkg.com/ws/-/ws-5.1.1.tgz#1d43704689711ac1942fd2f283e38f825c4b8b95"
dependencies:
async-limiter "~1.0.0"
xdg-basedir@^3.0.0:
version "3.0.0"
resolved "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-3.0.0.tgz#496b2cc109eca8dbacfe2dc72b603c17c5870ad4"