src/components/MenuBar.js

+import React, { useState } from 'react';
+import {Context} from '../context-provider';
+
+import '../styles/default/material-icons.css';
+import '../styles/MenuBar.css';
+
+import ArrowBack from '@material-ui/icons/ArrowBack';
+import ArrowForward from '@material-ui/icons/ArrowForward';
+import Refresh from '@material-ui/icons/Refresh';
+import Home from '@material-ui/icons/Home';
+import Folder from '@material-ui/icons/Folder';
+import MoreVert from '@material-ui/icons/MoreVert';
+import OpenInBrowser from '@material-ui/icons/OpenInBrowser';
+import Close from '@material-ui/icons/Close';
+import AccountCircle from '@material-ui/icons/AccountCircle';
+
+import LinearProgress from '@material-ui/core/LinearProgress';
+
+
+function MenuBar(){
+
+    /* COMPONENT */
+
+    const { appDispatch, browserState, browserDispatch, ocsApiState } = React.useContext(Context);
+
+    const [ backButtonActive, setBackButtonActive ] = useState(false);
+    const [ forwardButtonActive, setForwardButtonActive ] = useState(false);
+
+    React.useEffect(() => {  
+        
+        if (browserState.canGoBack === true) setBackButtonActive(true);
+        else setBackButtonActive(false);
+
+        if (browserState.canGoForward === true) setForwardButtonActive(true);
+        else setForwardButtonActive(false);
+    
+    },[browserState])
+
+    function onBackButtonClick(){
+        browserDispatch({type:'GO_BACK',goBack:true});
+    }
+
+    function onForwardButtonClick(){
+        browserDispatch({type:'GO_FORWARD',goForward:true});
+    }
+
+    function onRefreshButtonClick(){
+        browserDispatch({type:'REFRESH',refresh:true});
+    }
+
+    function onStopButtonClick(){
+        browserDispatch({type:'STOP_LOADING',stopLoading:true})
+    }
+
+    function onHomeButtonClick(){
+        browserDispatch({type:'GO_HOME',goHome:true});
+    }
+
+    function onCollectionsButtonClick(){
+        appDispatch({type:'SHOW_DIALOG',id:'collections'})
+    }
+
+    function onLoginButtonClick(){
+        browserDispatch({type:'LOAD_URL',newUrl:"https://www.pling.com/login",loadUrl:true});
+    }
+
+    /* /COMPONENT */
+
+    /* RENDER */
+
+    let backButtonDisplay;
+    if (backButtonActive === true){
+        backButtonDisplay = (
+            <button title="Back" onClick={onBackButtonClick}>
+                <i className="material-icons md-medium md-dark md-active"><ArrowBack/></i>
+            </button>
+        )
+    } else {
+        backButtonDisplay = (
+            <button title="Back">
+                <i className="material-icons md-medium md-dark md-inactive"><ArrowBack/></i>
+            </button>
+        )        
+    }
+
+    let forwardButtonDisplay;
+    if (forwardButtonActive === true){
+        forwardButtonDisplay = (
+            <button title="Forward" onClick={onForwardButtonClick}>
+                <i className="material-icons md-medium md-dark md-active"><ArrowForward/></i>
+            </button>
+        )
+    } else {
+        forwardButtonDisplay = (
+            <button title="Forward" disabled="">
+                <i className="material-icons md-medium md-dark md-inactive"><ArrowForward/></i>
+            </button>
+        )
+    }
+
+    let refreshButtonDisplay;
+    if (browserState.loading === false){
+        refreshButtonDisplay = (
+            <button title="Refresh" onClick={onRefreshButtonClick}>
+                <i className="material-icons md-medium md-dark md-active"><Refresh/></i>
+            </button>
+        )
+    } else {
+        refreshButtonDisplay = (
+            <button title="Stop" onClick={onStopButtonClick}>
+                <i className="material-icons md-medium md-dark md-active"><Close/></i>
+            </button>
+        )
+    }
+
+    /* /RENDER */
+
+    let downloadItemsCounterDisplay;
+    if (ocsApiState.downloadItems.length > 0){
+        const filteredDownloadItems = ocsApiState.downloadItems.filter((di) => di.status === "Downloading");
+        if (filteredDownloadItems.length > 0){
+            downloadItemsCounterDisplay = <span className="app-badge medium-emphasis">{filteredDownloadItems.length}</span>
+        }
+    }
+
+    return (
+        <nav id="menu-bar">
+            <ul id="main-menu">
+                <li>{backButtonDisplay}</li>  
+                <li>{forwardButtonDisplay}</li>
+                <li>{refreshButtonDisplay}</li>
+                <li>
+                    <button title="Home" onClick={onHomeButtonClick}>
+                        <i className="material-icons md-medium md-dark md-active">
+                            <Home/>
+                        </i>
+                    </button>
+                </li>
+                <li>                
+                    <button title="Collections" onClick={onCollectionsButtonClick}>
+                        <i className="material-icons md-medium md-dark md-active">
+                            <Folder/>
+                            {downloadItemsCounterDisplay}
+                        </i>
+                    </button>
+                </li>
+                <li id="omnibox-menu"><OmniBox/></li>
+                <li><UserMenu/></li>
+                <li>
+                    <button title="Login" onClick={onLoginButtonClick}>
+                        <i className="material-icons md-medium md-dark md-active">
+                            <AccountCircle/>
+                        </i>
+                    </button>
+                </li>
+            </ul>
+        </nav>
+    )
+}
+
+function OmniBox(){
+
+    const { appState, browserState, browserDispatch, ocsApiState } = React.useContext(Context);
+    const [ showOmniBox, setShowOmniBox ] = useState(false);
+
+    function toggleOmniBox(){
+        const newShowOmniBox = showOmniBox === false ? true : false;
+        setShowOmniBox(newShowOmniBox);
+    }
+
+    function setAppHomePage(domain){
+        const domainUrl = domain.url;
+        const domainTitle = domain.title;
+        localStorage.setItem('homePageUrl', domainUrl);
+        localStorage.setItem('homePageTitle', domainTitle);
+        setShowOmniBox(false);
+        browserDispatch({type:'LOAD_URL',newUrl:domain.url,loadUrl:true});
+    }
+
+    function onOpenInBrowserClick(){
+        console.log(browserState.url);
+        ocsApiState.ocsManagerApi.send('SystemHandler::openUrl', [browserState.url])
+    }
+
+    let linearProgressionDisplay;
+    if (browserState.loading === true) linearProgressionDisplay = <div id="progress-bar-container"><LinearProgress/></div>
+
+    const domainsListDisplay = appState.domains.map((d,index) => (
+        <li key={index}>
+            <button onClick={() => setAppHomePage(d)} className={d.homepage === true ? "active" : ""}>
+                {d.title}
+            </button>
+        </li>
+    ));
+
+    let omniboxCssClasses = "";
+    if (ocsApiState.downloadItems){
+        const filteredDownloadItems = ocsApiState.downloadItems.filter((di) => di.status === "Downloading");
+        if (filteredDownloadItems.length > 0) omniboxCssClasses += " download-active";
+    }
+
+    return (
+        <div id="omnibox-container">
+            <div id="omnibox" className={omniboxCssClasses}>
+                <div id="omnibox-wrapper">
+                    <div id="omnibox-content">
+                        <div></div>
+                        <h3 onClick={toggleOmniBox}>{browserState.title}</h3>
+                        <div id="open-in-browser-container">
+                            <button title="open in browser" onClick={() => onOpenInBrowserClick()}>
+                                <i className="material-icons md-small md-dark md-active"><OpenInBrowser/></i>
+                            </button>
+                        </div>
+                    </div>
+                    {linearProgressionDisplay}
+                </div>
+            </div>
+            <div id="omnibox-palette" className={"fade-in " + (showOmniBox === true ? "active" : "inactive")}>
+                <div className="palette-content">
+                    <h4><i className="material-icons md-small"><Home/></i> Choose Startpage</h4>
+                    <nav>
+                        <ul>
+                            {domainsListDisplay}
+                        </ul>
+                    </nav>
+                </div>
+            </div>
+            <div id="overlay"></div>
+        </div>
+    )
+}
+
+function UserMenu(){
+
+    const { appState, appDispatch, ocsApiState } = React.useContext(Context);
+    const { browserDispatch } = React.useContext(Context);
+    const [ showMenu, updateShowMenu ] = useState(false);
+
+    function onToggleMenuVisiblity(){
+        const newShowMenu = showMenu === true ? false : true;
+        updateShowMenu(newShowMenu);
+    }
+
+    function onReportBugClick(){
+        browserDispatch({type:'LOAD_URL',newUrl:appState.packageJson.bugs,loadUrl:true});
+        updateShowMenu(false);
+    }
+
+    function onCheckForUpdates(){
+        ocsApiState.ocsManagerApi.send('UpdateHandler::checkAppUpdate', []).then(function(res){
+            console.log(res)
+        });
+        updateShowMenu(false);
+    }
+
+    function onAboutClick(){
+        appDispatch({type:'SHOW_DIALOG',id:'about'});
+        updateShowMenu(false);
+    }
+
+    let userMenuDisplay, backgroundOverlayDisplay;
+    if (showMenu === true){
+        userMenuDisplay = (
+            <ul id="user-menu">
+                <li><a onClick={() => onReportBugClick()}>Report a Bug</a></li>
+                <li><a onClick={() => onCheckForUpdates()}>Check for Updates</a></li>
+                <li><a onClick={() => onAboutClick()}>About This App</a></li>
+            </ul>
+        );
+        backgroundOverlayDisplay = <div onClick={e => updateShowMenu(false)} className="background-overlay"></div>
+    }
+
+    return (
+        <div id="user-menu-container">
+            <button title="more operations..." onClick={onToggleMenuVisiblity}>
+                <i className="material-icons md-medium md-dark md-active">
+                    <MoreVert/>
+                </i>
+            </button>
+            {userMenuDisplay}
+            {backgroundOverlayDisplay}
+        </div>
+    )
+}
+
+export default MenuBar;

src/components/WebView.js

+const electron = window.require('electron');
+const ipcRenderer = electron.ipcRenderer;
+
+import React, {useState} from 'react';
+import {Context} from '../context-provider';
+
+function WebView(props){
+
+    const { appState, appDispatch, browserState, browserDispatch, ocsApiState } = React.useContext(Context);
+    const [ webviewEl, setWebviewEl ] = useState();
+    const [ showWebviewMask, setShowWebviewMask ] = useState(true);
+
+    React.useEffect(() => { initWebView(browserState.url); },[])
+
+    React.useEffect(() => {
+        if (typeof webviewEl !== undefined) props.onSetWebviewEl(webviewEl);
+    },[webviewEl])
+
+    React.useEffect(() => {
+        if (browserState.goBack === true){
+            browserDispatch({type:'GO_BACK',goBack:false})
+            webviewEl.goBack();
+            setShowWebviewMask(true);
+        }
+    },[browserState.goBack])
+
+    React.useEffect(() => {
+        if (browserState.goForward === true){            
+            browserDispatch({type:'GO_FORWARD',goForward:false})
+            webviewEl.goForward();
+        }
+    },[browserState.goForward])
+
+    React.useEffect(() => {
+        if (browserState.goHome === true){
+            browserDispatch({type:'GO_HOME', goHome:false})
+            webviewEl.loadURL('https://www.pling.com');
+        }
+    },[browserState.goHome])
+
+    React.useEffect(() => {
+        if (browserState.refresh === true){
+            browserDispatch({type:'REFRESH', refresh:false})
+            webviewEl.loadURL(browserState.url);        
+        }
+    },[browserState.refresh])
+
+    React.useEffect(() => {
+        if (browserState.loadUrl === true){
+            browserDispatch({type:'LOAD_URL', loadUrl:false})
+            webviewEl.loadURL(browserState.newUrl);
+        }
+    },[browserState.loadUrl])
+
+    React.useEffect(() => {
+        if (browserState.stopLoading === true){
+            browserDispatch({type:'STOP_LOADING',stopLoading:false});
+            webviewEl.stop();
+        }
+    },[browserState.stopLoading])
+
+    function initWebView(url){
+
+        const webview = document.createElement('webview');
+        webview.setAttribute('src', url);
+        webview.setAttribute('id',"webview-frame");
+
+        webview.addEventListener('did-start-loading', () => {
+            browserDispatch({type:'SET_LOADING',loading:true})
+        });
+
+        webview.addEventListener('did-stop-loading', () => {
+            browserDispatch({type:'SET_LOADING',loading:false});
+            if (appState.dialog.show === true) appDispatch({type:'HIDE_DIALOG'});
+
+            const webViewInitiScript = 
+            `var metaheader = document.querySelector('#metaheader'); 
+            if (metaheader){ metaheader.parentNode.removeChild(metaheader); }
+            var odMetaHeader = document.querySelector('opendesktop-metaheader'); 
+            if (odMetaHeader){ odMetaHeader.parentNode.removeChild(odMetaHeader);} 
+            var gitLabNavBar = document.querySelector('header.navbar-gitlab');
+            if (gitLabNavBar){ gitLabNavBar.style.top = 0;}
+            var forumsNavBar = document.querySelector('header.d-header');
+            if (forumsNavBar){ forumsNavBar.style.top = 0;}
+            var body = document.querySelector('body');
+            body.style.paddingTop = 0;`;
+
+            webview.getWebContents().executeJavaScript( webViewInitiScript , false, (result) => {
+                setShowWebviewMask(false);
+            });
+        });
+
+        webview.addEventListener('dom-ready', (event) => {
+            browserDispatch({
+                type:'SET_PAGE',
+                url:webview.getURL(),
+                title:webview.getTitle(),
+                canGoBack:webview.canGoBack(),
+                canGoForward:webview.canGoForward()
+            });
+            webview.send('ipc-message');
+        });
+
+        webview.addEventListener('new-window', (event) => {
+            console.log('new window');
+            /*if (event.url.startsWith('http://') || event.url.startsWith('https://')) {
+                this.dispatch('ocsManager_openUrl', {url: event.url});
+            }*/
+        });
+
+        webview.addEventListener('will-navigate', (event) => {
+            console.log('webview element: will navigate');
+            // See also "will-navigate" event handling in main.js
+            if (event.url.startsWith('ocs://') || event.url.startsWith('ocss://')) {
+                console.log('if event.url starts with ocs://')    
+                const info = detectOcsApiInfo(webview.getURL());
+                console.log('info:');
+                console.log(info);
+                console.log('ocs manager - send: item handler::getItemByOcsUrl');
+                ocsApiState.ocsManagerApi.send('ItemHandler::getItemByOcsUrl', [event.url, info.providerKey, info.contentId]);
+            }
+        });
+
+        webview.addEventListener('ipc-message', (event) => {
+            console.log('ipc message');
+        });
+
+        document.querySelector('#webview-container').appendChild(webview);
+        setWebviewEl(webview);
+    }
+
+    function detectOcsApiInfo(url) {
+        // Detect provider key and content id from page url
+        // https://www.opendesktop.org/s/Gnome/p/123456789/?key=val#hash
+        //
+        // providerKey = https://www.opendesktop.org/ocs/v1/
+        // contentId = 123456789
+        const info = {
+            providerKey: '',
+            contentId: ''
+        };
+        const matches = url.match(/(https?:\/\/[^/]+).*\/p\/([^/?#]+)/);
+        if (matches) {
+            info.providerKey = `${matches[1]}/ocs/v1/`;
+            info.contentId = matches[2];
+        }
+        return info;
+    }
+
+    let webviewMaskDisplay;
+    if (showWebviewMask === true){
+        webviewMaskDisplay = <div id="webview-mask"></div>
+    }
+
+    return (
+        <div id="webview-wrapper">
+            <div id="webview-container"></div>
+            {webviewMaskDisplay}
+        </div>
+    )
+}
+  
+  export default WebView;
\ No newline at end of file

src/configs/application.json

+{
+    "defaults": {
+        "startPage": "https://www.pling.com/",
+        "windowBounds": {
+            "x": 0,
+            "y": 0,
+            "width": 1024,
+            "height": 768
+        }
+    },
+    "domains":[
+        {"url":"https://www.pling.com/","title":"pling.com"},
+        {"url":"https://www.appimagehub.com/","title":"Appimagehub.com"},
+        {"url":"https://store.kde.org/","title":"KDE"},
+        {"url":"https://www.pling.com/s/Artwork","title":"Artwork"}, 
+        {"url":"https://www.pling.com/s/Gnome","title":"Gnpome"},
+        {"url":"https://www.pling.com/s/Comics","title":"Comics"},
+        {"url":"https://www.pling.com/s/XFCE","title":"XFCE"},
+        {"url":"https://www.pling.com/s/Videos","title":"Videos"}
+    ],
+    "updateCheckAfter": 86400000, "//": "milliseconds"
+}
\ No newline at end of file

src/configs/ocs-manager.json

+{
+    "bin": "ocs-manager",
+    "port": 0
+}

src/context-provider.js

+import React from 'react';
+
+import AppReducer, { AppReducerInitialState } from './reducers/appReducer';
+import BrowserReducer, {BrowserReducerInitialState} from './reducers/browserReducer';
+import OcsApiReducer, {OcsApiReducerInitialState} from './reducers/ocsApiReducer';
+
+export const Context = React.createContext();
+const Provider = Context.Provider;
+
+const StoreContextProvider = (props) => {
+    const [ appState, appDispatch ] = React.useReducer(AppReducer,AppReducerInitialState);
+    const [ browserState, browserDispatch ] = React.useReducer(BrowserReducer,BrowserReducerInitialState);
+    const [ ocsApiState, ocsApiDispatch ] = React.useReducer(OcsApiReducer,OcsApiReducerInitialState);
+
+    return (
+        <Provider {...props} value={{
+            appState,appDispatch,
+            browserState,browserDispatch,
+            ocsApiState,ocsApiDispatch
+        }}/>
+    )
+}
+
+export default StoreContextProvider;
\ No newline at end of file

src/electron-starter.js

+const fs = require('fs');
+const {spawn} = require('child_process');
+
+const {app, BrowserWindow, ipcMain} = require('electron');
+const ElectronStore = require('electron-store');
+const request = require('request');
+
+// Set configs dir
+app.setPath("userData", app.getPath("appData") + "/OCS-Store")
+
+const appPackage = require('../package.json');
+const appConfig = require('./configs/application.json');
+const ocsManagerConfig = require('./configs/ocs-manager.json');
+
+const isDebugMode = process.argv.includes('--debug');
+const previewpicDirectory = `${app.getPath('userData')}/previewpic`;
+const windowIcon = `${__dirname}/images/app-icons/pling-store.png`;
+const indexFileUrl = `file://${__dirname}/../build/index.html`;
+const appConfigStoreStorage = 'application';
+
+let mainWindow = null;
+let ocsManager = null;
+let ocsManagerUrl = '';
+
+async function startOcsManager() {
+    return new Promise((resolve) => {
+        const resolveOcsManagerUrl = (data) => {
+            const matches = data.toString().match(/Websocket server started at: "(wss?:\/\/.+)"/);
+            if (matches) {
+                ocsManagerUrl = matches[1];
+                resolve(true);
+            }
+        };
+
+        ocsManager = spawn(ocsManagerConfig.bin, ['-p', ocsManagerConfig.port, '--appFile', process.env.APPIMAGE]);
+
+        ocsManager.stdout.on('data', (data) => {
+            console.log(`[${ocsManagerConfig.bin}] ${data}`);
+            if (!ocsManagerUrl) {
+                resolveOcsManagerUrl(data);
+            }
+        });
+
+        ocsManager.stderr.on('data', (data) => {
+            console.error(`[${ocsManagerConfig.bin}] ${data}`);
+            if (!ocsManagerUrl) {
+                resolveOcsManagerUrl(data);
+            }
+        });
+
+        ocsManager.on('close', (code) => {
+            console.log(`${ocsManagerConfig.bin} exited with code ${code}`);
+        });
+
+        ocsManager.on('error', () => {
+            console.error(`Failed to start ${ocsManagerConfig.bin}`);
+            resolve(false);
+        });
+    });
+}
+
+function stopOcsManager() {
+    if (ocsManager) {
+        ocsManager.kill();
+        ocsManagerUrl = '';
+    }
+}
+
+function createWindow() {
+    const appConfigStore = new ElectronStore({
+        name: appConfigStoreStorage,
+        defaults: appConfig.defaults
+    });
+
+    const windowBounds = appConfigStore.get('windowBounds');
+
+    mainWindow = new BrowserWindow({
+        title: appPackage.productName,
+        icon: windowIcon,
+        x: windowBounds.x,
+        y: windowBounds.y,
+        width: windowBounds.width,
+        height: windowBounds.height,
+        webPreferences: {
+            nodeIntegration: true
+        }
+    });
+
+    if (!isDebugMode) {
+        mainWindow.setMenu(null);
+    }
+
+    mainWindow.loadURL(indexFileUrl);
+    mainWindow.maximize();
+    
+    mainWindow.on('close', () => {
+        const appConfigStore = new ElectronStore({name: appConfigStoreStorage});
+        appConfigStore.set('windowBounds', mainWindow.getBounds());
+    });
+
+    mainWindow.on('closed', () => {
+        mainWindow = null;
+    });
+
+    if (isDebugMode) {
+        mainWindow.webContents.openDevTools();
+    }
+}
+
+function isFile(path) {
+    try {
+        const stats = fs.statSync(path);
+        return stats.isFile();
+    } catch (error) {
+        console.error(error);
+        return false;
+    }
+}
+
+function isDirectory(path) {
+    try {
+        const stats = fs.statSync(path);
+        return stats.isDirectory();
+    } catch (error) {
+        console.error(error);
+        return false;
+    }
+}
+
+function btoa(string) {
+    const buffer = (string instanceof Buffer) ? string : Buffer.from(string.toString(), 'binary');
+    return buffer.toString('base64');
+}
+
+//function atob(string) {
+//    return Buffer.from(string, 'base64').toString('binary');
+//}
+
+function previewpicFilename(itemKey) {
+    // "itemKey" will be URL to product file
+    return btoa(itemKey).slice(-255);
+}
+
+function downloadPreviewpic(itemKey, url) {
+    if (!isDirectory(previewpicDirectory)) {
+        fs.mkdirSync(previewpicDirectory);
+    }
+    const path = `${previewpicDirectory}/${previewpicFilename(itemKey)}`;
+    request.get(url).on('error', (error) => {
+        console.error(error);
+    }).pipe(fs.createWriteStream(path));
+}
+
+function removePreviewpic(itemKey) {
+    const path = `${previewpicDirectory}/${previewpicFilename(itemKey)}`;
+    if (isFile(path)) {
+        fs.unlinkSync(path);
+    }
+}
+
+app.on('ready', async () => {
+    if (await startOcsManager()) {
+        createWindow();
+    } else {
+        app.quit();
+    }
+});
+
+app.on('quit', () => {
+    stopOcsManager();
+});
+
+app.on('window-all-closed', () => {
+    if (process.platform !== 'darwin') {
+        app.quit();
+    }
+});
+
+app.on('activate', () => {
+    if (mainWindow === null) {
+        createWindow();
+    }
+});
+
+app.on('web-contents-created', (event, webContents) => {
+    if (webContents.getType() === 'webview') {
+        webContents.on('will-navigate', (event, url) => {
+            if (url.startsWith('ocs://') || url.startsWith('ocss://')) {
+                // Cancel ocs protocol navigation
+                event.preventDefault();
+            }
+        });
+    }
+});
+
+ipcMain.on('app', (event, key) => {
+    const data = {
+        package: appPackage,
+        config: appConfig,
+        isDebugMode: isDebugMode
+    };
+    event.returnValue = key ? data[key] : data;
+});
+
+ipcMain.on('ocs-manager', (event, key) => {
+    const data = {
+        config: ocsManagerConfig,
+        url: ocsManagerUrl
+    };
+    event.returnValue = key ? data[key] : data;
+});
+
+ipcMain.on('store', (event, key, value) => {
+    const appConfigStore = new ElectronStore({name: appConfigStoreStorage});
+    if (key && value) {
+        appConfigStore.set(key, value);
+    }
+    event.returnValue = key ? appConfigStore.get(key) : appConfigStore.store;
+});
+
+ipcMain.on('previewpic', (event, kind, itemKey, url) => {
+    if (kind === 'directory') {
+        event.returnValue = previewpicDirectory;
+    } else if (kind === 'path' && itemKey) {
+        event.returnValue = `${previewpicDirectory}/${previewpicFilename(itemKey)}`;
+    } else if (kind === 'download' && itemKey && url) {
+        downloadPreviewpic(itemKey, url);
+        event.returnValue = undefined;
+    } else if (kind === 'remove' && itemKey) {
+        removePreviewpic(itemKey);
+        event.returnValue = undefined;
+    } else {
+        event.returnValue = false;
+    }
+});

src/electron-wait-react.js

+const net = require('net');
+const port = process.env.PORT ? (process.env.PORT - 100) : 3000;
+
+process.env.ELECTRON_START_URL = `http://localhost:${port}`;
+
+const client = new net.Socket();
+
+let startedElectron = false;
+const tryConnection = () => client.connect({port: port}, () => {
+        client.end();
+        if(!startedElectron) {
+            console.log('starting electron');
+            startedElectron = true;
+            const exec = require('child_process').exec;
+            const electron = exec('npm run electron');
+            electron.stdout.on("data", function(data) {
+                console.log("stdout: " + data.toString());
+            });
+        }
+    }
+);
+
+tryConnection();
+
+client.on('error', (error) => {
+    setTimeout(tryConnection, 1000);
+});
+

src/helpers/AppHelpers.js

+export function ConvertByteToHumanReadable(byte) {
+    byte = parseFloat(byte);
+
+    const kb = 1024;
+    const mb = 1024 * kb;
+    const gb = 1024 * mb;
+    const tb = 1024 * gb;
+    const pb = 1024 * tb;
+    const eb = 1024 * pb;
+    const zb = 1024 * eb;
+    const yb = 1024 * zb;
+
+    let text = '';
+    if (byte < kb) {
+        text = `${byte.toFixed(0)} B`;
+    }
+    else if (byte < mb) {
+        text = `${(byte / kb).toFixed(2)} KB`;
+    }
+    else if (byte < gb) {
+        text = `${(byte / mb).toFixed(2)} MB`;
+    }
+    else if (byte < tb) {
+        text = `${(byte / gb).toFixed(2)} GB`;
+    }
+    else if (byte < pb) {
+        text = `${(byte / tb).toFixed(2)} TB`;
+    }
+    else if (byte < eb) {
+        text = `${(byte / pb).toFixed(2)} PB`;
+    }
+    else if (byte < zb) {
+        text = `${(byte / eb).toFixed(2)} EB`;
+    }
+    else if (byte < yb) {
+        text = `${(byte / zb).toFixed(2)} ZB`;
+    }
+    else if (byte >= yb) {
+        text = `${(byte / yb).toFixed(2)} YB`;
+    }
+    return text;
+}
\ No newline at end of file

src/images/icon.css

+.icon-ocs-store {
+    background-image: url(app-icons/pling-store.svg);
+}

src/index.js

+import React from 'react';
+import ReactDOM from 'react-dom';
+import StoreContextProvider from './context-provider';
+import App from './components/App';
+import './styles/Index.css';
+
+
+function AppWrapper(){
+  return (
+    <StoreContextProvider>
+      <App/>
+    </StoreContextProvider>
+  )
+}
+
+ReactDOM.render(
+  <AppWrapper />,
+  document.getElementById('root')
+);

src/reducers/appReducer.js

+export const AppReducerInitialState = {
+    loading:true,
+    domains:null,
+    packageJson:null,
+    dialog:{
+        id:'loading',
+        show:true
+    }
+}
+
+function AppReducer(state,action){
+    switch(action.type){
+        case 'SET_LOADING':{
+            return { ...state, loading:action.value}
+        }        
+        case 'SET_DOMAINS': {
+            return { ...state, domains:action.domains}
+        }
+        case 'SET_PACKAGE_JSON': {
+            return { ...state, packageJson:action.packageJson}
+        }
+        case 'SHOW_DIALOG':{
+            const dialog = { show:true, id:action.id}
+            return { ...state, dialog}
+        }
+        case 'HIDE_DIALOG':{
+            const dialog = { ... state.dialog, show:false }
+            return { ...state, dialog:dialog}
+        }
+        default: {
+            return state;
+        }
+    }
+}
+
+export default AppReducer;
\ No newline at end of file

src/reducers/browserReducer.js

+export const BrowserReducerInitialState = {
+    loading:true,
+    url:null,
+    title:null,
+    canGoBack:false,
+    canGoForward:false,
+    goBack:false,
+    goForward:false,
+    refresh:false
+}
+
+function BrowserReducer(state,action){
+    switch(action.type){
+        case 'SET_PAGE': {
+            return { ...state, url:action.url, title:action.title, canGoBack:action.canGoBack, canGoForward:action.canGoForward }
+        }
+        case 'SET_LOADING': {
+            return { ...state, loading:action.loading }
+        }
+        case 'GO_BACK': {
+            return { ...state, goBack:action.goBack }
+        }
+        case 'GO_FORWARD': {
+            return { ...state, goForward:action.goForward }
+        }
+        case 'GO_HOME': {
+            return { ...state, goHome:action.goHome }
+        }
+        case 'REFRESH': {
+            return { ...state, refresh:action.refresh }
+        }
+        case 'LOAD_URL':{
+            if (action.loadUrl === true){
+                return { ...state, loadUrl:true, newUrl:action.newUrl }
+            } else {
+                return { ...state, loadUrl:false}
+            }
+        }
+        case 'STOP_LOADING':{
+            return { ...state, loadUrl: false, stopLoading:action.stopLoading}
+        }
+        default:{
+            return state;
+        }
+    }
+}
+
+export default BrowserReducer;
\ No newline at end of file

src/reducers/ocsApiReducer.js

+const electron = window.require('electron');
+const ipcRenderer = electron.ipcRenderer;
+
+export const OcsApiReducerInitialState = {
+    loading:true,
+    installTypes:[],
+    installedItems:[],
+    installedItemTypes:[],
+    updateItems:[],
+    downloadItems:[]
+}
+
+function OcsApiReducer(state,action){
+    switch(action.type){
+        case 'SET_API':{
+            return { ...state, ocsManagerApi:action.ocsManagerApi,loading:false}
+        }
+        case 'SET_INSTALL_TYPES':{
+            return { ...state, installTypes:action.installTypes}
+        }
+        case 'SET_INSTALLED_ITEMS':{
+            const installedItems = Object.keys(action.installedItems).map((k) => action.installedItems[k]);
+            let installedItemTypes = [];
+            installedItems.forEach(function(item,index){
+                const installedItemType = item.install_type;
+                if (installedItemTypes.indexOf(installedItemType) === -1) installedItemTypes.push(installedItemType);
+            });
+            return { ...state, installedItems:installedItems, installedItemTypes:installedItemTypes }
+        }
+        case 'SET_DOWNLOAD_ITEM':{
+            const item = { ...action.item,status:'Downloading' }
+            console.log(item);
+            const downloadItems = [ ...state.downloadItems, item ]
+            return { ...state, downloadItems:downloadItems}
+        }
+        case 'UPDATE_ITEM_DOWNLOAD_PROGRESS':{
+            const downloadItemIndex = state.downloadItems.findIndex((item) => item.url === action.itemUrl);
+            const newDownloadItem = { ...state.downloadItems[downloadItemIndex] }
+            if (action.bytesRecieved) newDownloadItem.bytesRecieved = action.bytesRecieved;
+            if (action.bytesTotal) newDownloadItem.bytesTotal = action.bytesTotal
+            if (action.status) newDownloadItem.status = action.status;
+            const downloadItems = [
+                ...state.downloadItems.slice(0,downloadItemIndex),
+                newDownloadItem,
+                ...state.downloadItems.slice(downloadItemIndex + 1, state.downloadItems.length)
+            ];
+            return { ...state, downloadItems:downloadItems }
+        }
+        case 'SET_UPDATE_CHECK':{
+            return { ...state, updateCheckedAt:action.updateCheckedAt,updateCheckAfter:action.updateCheckAfter}
+        }
+        default: {
+            return state;
+        }
+    }
+}
+
+export default OcsApiReducer;
\ No newline at end of file

src/styles/App.css

+#main {
+  width: 100%;
+  height: 100%;
+  padding-top: 40px;
+  position: relative;
+}
+#main #webview-wrapper {
+  height: 100%;
+  width: 100%;
+}
+#main #webview-container {
+  height: 100%;
+  width: 100%;
+}
+#main #webview-container webview {
+  height: 100%;
+}
+#main #webview-mask {
+  background-color: #fff;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 40px;
+  left: 0;
+}

src/styles/App.less

+#main {
+    width:100%;
+    height: 100%;
+    padding-top:40px;
+    position: relative;
+
+    #webview-wrapper {
+        height:100%;
+        width:100%;
+    }
+
+    #webview-container {
+        height: 100%;
+        width: 100%;
+   
+        webview {
+            height: 100%;
+        }
+    }
+
+    #webview-mask {
+        background-color: #fff;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 40px;
+        left: 0;
+    }
+
+}
\ No newline at end of file