electron wrapper

.gitignore

@@ -22,3 +22,20 @@ node_modules
 server/config/reddit.coffee
 server/config/keys
 src/coffee/config.coffee
+
+#
+# Electron
+#
+!electron/build
+.DS_Store
+Thumbs.db
+*.autogenerated
+electron/dist
+electron/coverage
+
+# ignore everything in 'app' folder what had been generated from 'src' folder
+electron/app/stylesheets
+electron/app/app.js
+electron/app/background.js
+electron/app/env.json
+electron/app/**/*.map

electron/.travis.yml

@@ -0,0 +1,24 @@
+os:
+  - linux
+  - osx
+
+branches:
+  only:
+    - master
+
+env:
+  - NODE_VERSION="6.3.0"
+
+before_script:
+ - chmod +x ./scripts/travis-build.sh
+
+script: ./scripts/travis-build.sh
+
+cache:
+  directories:
+    - node_modules
+
+notifications:
+  email:
+    on_success: never
+    on_failure: change

electron/README.md

@@ -0,0 +1,20 @@
+# Reddit Music Player Electron Application
+
+For more info, check out:
+
+* [electron](http://electron.atom.io/)
+* [electron-boilerplate](https://github.com/szwacz/electron-boilerplate)
+
+# Quick start
+
+```
+cd redditmusicplayer/electron
+npm install
+npm start
+```
+
+# Build a production app / installer
+
+```
+npm run release
+```

electron/app/helpers/context_menu.js

@@ -0,0 +1,59 @@
+// This gives you default context menu (cut, copy, paste)
+// in all input fields and textareas across your app.
+
+(function () {
+    'use strict';
+
+    var remote = require('electron').remote;
+    var Menu = remote.Menu;
+    var MenuItem = remote.MenuItem;
+
+    var isAnyTextSelected = function () {
+        return window.getSelection().toString() !== '';
+    };
+
+    var cut = new MenuItem({
+        label: "Cut",
+        click: function () {
+            document.execCommand("cut");
+        }
+    });
+
+    var copy = new MenuItem({
+        label: "Copy",
+        click: function () {
+            document.execCommand("copy");
+        }
+    });
+
+    var paste = new MenuItem({
+        label: "Paste",
+        click: function () {
+            document.execCommand("paste");
+        }
+    });
+
+    var normalMenu = new Menu();
+    normalMenu.append(copy);
+
+    var textEditingMenu = new Menu();
+    textEditingMenu.append(cut);
+    textEditingMenu.append(copy);
+    textEditingMenu.append(paste);
+
+    document.addEventListener('contextmenu', function (e) {
+        switch (e.target.nodeName) {
+            case 'TEXTAREA':
+            case 'INPUT':
+                e.preventDefault();
+                textEditingMenu.popup(remote.getCurrentWindow());
+                break;
+            default:
+                if (isAnyTextSelected()) {
+                    e.preventDefault();
+                    normalMenu.popup(remote.getCurrentWindow());
+                }
+        }
+    }, false);
+
+}());

electron/app/helpers/external_links.js

@@ -0,0 +1,44 @@
+// Convenient way for opening links in external browser, not in the app.
+// Useful especially if you have a lot of links to deal with.
+//
+// Usage:
+//
+// Every link with class ".js-external-link" will be opened in external browser.
+// <a class="js-external-link" href="http://google.com">google</a>
+//
+// The same behaviour for many links can be achieved by adding
+// this class to any parent tag of an anchor tag.
+// <p class="js-external-link">
+//    <a href="http://google.com">google</a>
+//    <a href="http://bing.com">bing</a>
+// </p>
+
+(function () {
+    'use strict';
+
+    var shell = require('electron').shell;
+
+    var supportExternalLinks = function (e) {
+        var href;
+        var isExternal = false;
+
+        var checkDomElement = function (element) {
+            if (element.nodeName === 'A') {
+                href = element.getAttribute('href');
+            }
+            if (element.classList.contains('js-external-link')) {
+                isExternal = true;
+            }
+            if (href && isExternal) {
+                shell.openExternal(href);
+                e.preventDefault();
+            } else if (element.parentElement) {
+                checkDomElement(element.parentElement);
+            }
+        };
+
+        checkDomElement(e.target);
+    };
+
+    document.addEventListener('click', supportExternalLinks, false);
+}());

electron/appveyor.yml

@@ -0,0 +1,26 @@
+build: off
+
+os: unstable
+
+branches:
+  only:
+    - master
+
+skip_tags: true
+
+environment:
+  nodejs_version: "6.3.0"
+
+cache:
+  - node_modules -> package.json
+
+install:
+  - ps: Install-Product node $env:nodejs_version
+  - npm install npm
+  - .\node_modules\.bin\npm install
+
+test_script:
+  - node --version
+  - .\node_modules\.bin\npm --version
+  - .\node_modules\.bin\npm test
+  - .\node_modules\.bin\npm run e2e

electron/config/env_development.json

@@ -0,0 +1,4 @@
+{
+  "name": "development",
+  "description": "Add here any environment specific stuff you like."
+}

electron/config/env_production.json

@@ -0,0 +1,4 @@
+{
+  "name": "production",
+  "description": "Add here any environment specific stuff you like."
+}

electron/config/env_test.json

@@ -0,0 +1,4 @@
+{
+  "name": "test",
+  "description": "Add here any environment specific stuff you like."
+}

electron/gulpfile.js

@@ -0,0 +1,5 @@
+'use strict';
+
+require('./tasks/build_app');
+require('./tasks/build_tests');
+require('./tasks/start');

electron/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "redditmusicplayer-electron",
+  "productName": "Reddit Music Player",
+  "description": "Music Player For Reddit | A Free and Open-Source Music Player",
+  "version": "1.0.0",
+  "author": "Nick Franken <[email protected]>",
+  "license": "GPLv3",
+  "main": "app/background.js",
+  "build": {
+    "appId": "com.example.redditmusicplayer",
+    "files": [
+      "app/**/*",
+      "node_modules/**/*",
+      "package.json"
+    ]
+  },
+  "scripts": {
+    "postinstall": "install-app-deps",
+    "build": "gulp build",
+    "prerelease": "gulp build --env=production",
+    "release": "build",
+    "start": "gulp start",
+    "pretest": "gulp build-unit --env=test",
+    "test": "electron-mocha app/specs.js.autogenerated --renderer --require source-map-support/register",
+    "coverage": "npm test -- -R scripts/istanbul-reporter",
+    "pree2e": "gulp build-e2e --env=test",
+    "e2e": "mocha app/e2e.js.autogenerated --require source-map-support/register"
+  },
+  "dependencies": {
+    "fs-jetpack": "^0.10.2",
+    "jquery": "^2.1.4"
+  },
+  "devDependencies": {
+    "chai": "^3.5.0",
+    "electron": "^1.4.7",
+    "electron-builder": "^8.6.0",
+    "electron-mocha": "^3.0.0",
+    "gulp": "^3.9.0",
+    "gulp-batch": "^1.0.5",
+    "gulp-less": "^3.0.3",
+    "gulp-plumber": "^1.1.0",
+    "gulp-util": "^3.0.6",
+    "gulp-watch": "^4.3.5",
+    "istanbul": "^0.4.3",
+    "minimist": "^1.2.0",
+    "mocha": "^3.0.2",
+    "rollup": "^0.36.3",
+    "rollup-plugin-istanbul": "^1.1.0",
+    "source-map-support": "^0.4.2",
+    "spectron": "^3.3.0"
+  }
+}

electron/src/background.js

@@ -0,0 +1,75 @@
+// This is main process of Electron, started as first thing when your
+// app starts. This script is running through entire life of your application.
+// It doesn't have any windows which you can see on screen, but we can open
+// window from here.
+
+import path from 'path';
+import url from 'url';
+import { app, Menu, BrowserWindow, globalShortcut } from 'electron';
+import { devMenuTemplate } from './menu/dev_menu_template';
+import { editMenuTemplate } from './menu/edit_menu_template';
+import createWindow from './helpers/window';
+
+// Special module holding environment variables which you declared
+// in config/env_xxx.json file.
+import env from './env';
+
+var mainWindow, keysWindow;
+
+var setApplicationMenu = function () {
+    var menus = [editMenuTemplate];
+    if (env.name !== 'production') {
+        menus.push(devMenuTemplate);
+    }
+    Menu.setApplicationMenu(Menu.buildFromTemplate(menus));
+};
+
+// Save userData in separate folders for each environment.
+// Thanks to this you can use production and development versions of the app
+// on same machine like those are two separate apps.
+if (env.name !== 'production') {
+    var userDataPath = app.getPath('userData');
+    app.setPath('userData', userDataPath + ' (' + env.name + ')');
+}
+
+app.on('ready', function () {
+    setApplicationMenu();
+
+    mainWindow = createWindow('main', {
+        width: 1024,
+        height: 768,
+        minWidth: 1024,
+        minHeight: 768,
+        webPreferences: {
+            nodeIntegration: false
+        }
+    });
+
+    mainWindow.loadURL('https://reddit.musicplayer.io/');
+
+    let webContents = mainWindow.webContents
+
+    if (env.name === 'development') {
+        mainWindow.openDevTools();
+    }
+
+    globalShortcut.register('MediaNextTrack', () => {
+        webContents.executeJavaScript("$('.item.forward.button').click()")
+    })
+
+    globalShortcut.register('MediaPreviousTrack', () => {
+        webContents.executeJavaScript("$('.item.backward.button').click()")
+    })
+
+    globalShortcut.register('MediaStop', () => {
+        webContents.executeJavaScript("$('.item.play.button').click()")
+    })
+
+    globalShortcut.register('MediaPlayPause', () => {
+        webContents.executeJavaScript("$('.item.play.button').click()")
+    })
+});
+
+app.on('window-all-closed', function () {
+    app.quit();
+});

electron/src/env.js

@@ -0,0 +1,8 @@
+// Simple wrapper exposing environment variables to rest of the code.
+
+import jetpack from 'fs-jetpack';
+
+// The variables have been written to `env.json` by the build process.
+var env = jetpack.cwd(__dirname).read('env.json', 'json');
+
+export default env;