Merge pull request #2 from kyan/feature/global_hotkeys

Add global hotkeys to settings for voting up and down

js/layout_1.js

@@ -31,6 +31,17 @@ storage.get('initials', function(error, data) {
 
   current_user = data
 });
+// Vote listener
+ipcRenderer.on('voteUp', (event, arg) => {
+  if (!hasClass(vote_up, 'voted')) {
+    vote(1)
+  }
+})
+ipcRenderer.on('voteDown', (event, arg) => {
+  if (!hasClass(vote_down, 'voted')) {
+    vote(0)
+  }
+})
 
 current_track = document.getElementById("current_track")
 current_artist = document.getElementById("current_artist")

js/layout_2.js

@@ -31,6 +31,17 @@ storage.get('initials', function(error, data) {
 
   current_user = data
 });
+// Vote listener
+ipcRenderer.on('voteUp', (event, arg) => {
+  if (!hasClass(vote_up, 'voted')) {
+    vote(1)
+  }
+})
+ipcRenderer.on('voteDown', (event, arg) => {
+  if (!hasClass(vote_down, 'voted')) {
+    vote(0)
+  }
+})
 
 current_track = document.getElementById("current_track")
 current_artist = document.getElementById("current_artist")

js/layout_3.js

@@ -31,6 +31,17 @@ storage.get('initials', function(error, data) {
 
   current_user = data
 });
+// Vote listener
+ipcRenderer.on('voteUp', (event, arg) => {
+  if (!hasClass(vote_up, 'voted')) {
+    vote(1)
+  }
+})
+ipcRenderer.on('voteDown', (event, arg) => {
+  if (!hasClass(vote_down, 'voted')) {
+    vote(0)
+  }
+})
 
 current_track = document.getElementById("current_track")
 current_artist = document.getElementById("current_artist")

js/layout_4.js

@@ -31,6 +31,17 @@ storage.get('initials', function(error, data) {
 
   current_user = data
 });
+// Vote listener
+ipcRenderer.on('voteUp', (event, arg) => {
+  if (!hasClass(vote_up, 'voted')) {
+    vote(1)
+  }
+})
+ipcRenderer.on('voteDown', (event, arg) => {
+  if (!hasClass(vote_down, 'voted')) {
+    vote(0)
+  }
+})
 
 current_track = document.getElementById("current_track")
 current_artist = document.getElementById("current_artist")

js/modules/key-event-to-string.js

@@ -0,0 +1,102 @@
+var defaultOptions = {
+  cmd: 'Cmd',
+  ctrl: 'Ctrl',
+  alt: 'Alt',
+  shift: 'Shift',
+  joinWith: ' + '
+}
+
+var options = {}
+
+var keyMap = {
+  8: 'Backspace',
+  9: 'Tab',
+  13: 'Enter',
+  27: 'Escape',
+  32: 'Space',
+  36: 'Home',
+  33: 'Page Up',
+  34: 'Page Down',
+  35: 'End',
+  37: 'Left',
+  38: 'Up',
+  39: 'Right',
+  40: 'Down',
+  46: 'Delete',
+  186: ';',
+  187: '=',
+  188: ',',
+  189: '-',
+  190: '.',
+  192: '`',
+  222: "'",
+  112: "F1",
+  113: "F2",
+  114: "F3",
+  115: "F4",
+  116: "F5",
+  117: "F6",
+  118: "F7",
+  119: "F8",
+  120: "F9",
+  121: "F10",
+  122: "F11",
+  123: "F12",
+}
+
+function buildKeyMap (e) {
+  var isOnlyModifier = [16, 17, 18, 91, 93, 224].indexOf(e.keyCode) !== -1
+  var character = isOnlyModifier ? null : keyMap[e.keyCode] || String.fromCharCode(e.keyCode)
+
+  return {
+    character: character,
+    modifiers: {
+      cmd: e.metaKey,
+      ctrl: e.ctrlKey,
+      alt: e.altKey,
+      shift: e.shiftKey
+    }
+  }
+}
+
+function buildKeyArray (e) {
+  console.log(e.keyCode)
+  var map = buildKeyMap(e)
+  var modifiers = map.modifiers
+
+  var result = []
+
+  if (modifiers.cmd) result.push(options.cmd)
+  if (modifiers.ctrl) result.push(options.ctrl)
+  if (modifiers.alt) result.push(options.alt)
+  if (modifiers.shift) result.push(options.shift)
+  if (map.character) result.push(map.character)
+
+  return result
+}
+
+function event2string (e) {
+  return buildKeyArray(e).join(options.joinWith)
+}
+
+function details (e) {
+  var map = buildKeyMap(e)
+  var mods = map.modifiers
+
+  var hasModifier = mods.cmd || mods.ctrl || mods.alt || mods.shift
+
+  var result = {
+    hasKey: map.character != null,
+    hasModifier: hasModifier,
+    map: map
+  }
+
+  return result
+}
+
+module.exports = function (userOptions) {
+  options = Object.assign(defaultOptions, userOptions)
+  return event2string
+}
+
+module.exports.details = details

js/settings.js

@@ -1,10 +1,41 @@
 const storage = require('electron-json-storage');
 const remote = require('electron').remote;
 
+var event2string = require('./modules/key-event-to-string.js')({
+  cmd: "Command",
+  ctrl: "Control",
+  alt: "Alt",
+  shift: "Shift",
+  joinWith: "+"
+})
+
+document.body.onkeydown = (e) => {
+  var keys = event2string(e)
+  console.log(keys)
+  if (isVoteUpActive) {
+    vote_up_hotkey.value = keys
+    storage.set('vote_up_hotkey', keys, function(error) {
+      if (error) throw error;
+    });
+  }
+  if (isVoteDownActive) {
+    vote_down_hotkey.value = keys
+    storage.set('vote_down_hotkey', keys, function(error) {
+      if (error) throw error;
+    });
+  }
+}
+
 var user_id = document.getElementById('user_id')
 var initials = document.getElementById('initials')
 var save_button = document.getElementById('save')
 
+var vote_up_hotkey = document.getElementById('vote_up_hotkey')
+var vote_down_hotkey = document.getElementById('vote_down_hotkey')
+
+var isVoteUpActive = false
+var isVoteDownActive = false
+
 user_id.onkeyup = function(){
   storage.set('user_id', user_id.value, function(error) {
     if (error) throw error;
@@ -17,6 +48,30 @@ initials.onkeyup = function(){
   });
 }
 
+vote_up_hotkey.onkeydown = function(event){
+  event.preventDefault()
+};
+
+vote_down_hotkey.onkeydown = function(event){
+  event.preventDefault()
+};
+
+vote_up_hotkey.onfocus = function(){
+  isVoteUpActive = true
+};
+
+vote_up_hotkey.onblur = function(){
+  isVoteUpActive = false
+};
+
+vote_down_hotkey.onfocus = function(){
+  isVoteDownActive = true
+};
+
+vote_down_hotkey.onblur = function(){
+  isVoteDownActive = false
+};
+
 save_button.onclick = function() {
   var window = remote.getCurrentWindow();
   window.close();
@@ -40,3 +95,21 @@ storage.get('initials', function(error, data) {
 
   initials.value = data
 });
+
+storage.get('vote_up_hotkey', function(error, data) {
+  if (error) throw error;
+  if (typeof(data) == 'object') {
+    return console.log('Object returned expected value')
+  }
+
+  vote_up_hotkey.value = data
+});
+
+storage.get('vote_down_hotkey', function(error, data) {
+  if (error) throw error;
+  if (typeof(data) == 'object') {
+    return console.log('Object returned expected value')
+  }
+
+  vote_down_hotkey.value = data
+});

main.js

@@ -2,7 +2,8 @@ const electron = require('electron')
 const app = electron.app
 const Menu = electron.Menu
 const BrowserWindow = electron.BrowserWindow
-const {ipcMain} = require('electron')
+const {ipcMain, globalShortcut} = require('electron')
+const storage = require('electron-json-storage');
 
 const path = require('path')
 const url = require('url')
@@ -105,14 +106,16 @@ function reloadAllWindows() {
 }
 
 function createSettingsWindow() {
-  settingsWindow = new BrowserWindow({width: 250, height: 250, resizable: false, alwaysOnTop: true})
+  settingsWindow = new BrowserWindow({width: 250, height: 465, resizable: false, alwaysOnTop: true})
 
   settingsWindow.loadURL(url.format({
     pathname: path.join(__dirname, 'settings.html'),
     protocol: 'file:',
     slashes: true
   }))
 
+  // settingsWindow.webContents.openDevTools()
+
   settingsWindow.on('closed', function () {
     settingsWindow = null
     reloadAllWindows();
@@ -133,6 +136,33 @@ function createPlaylistWindow() {
   })
 }
 
+function registerHotkeys(window) {
+  globalShortcut.unregisterAll()
+  storage.get('vote_up_hotkey', function(error, data) {
+    if (error) throw error;
+    if (typeof(data) == 'object') {
+      return console.log('Object returned expected value')
+    }
+
+    const ret = globalShortcut.register(data, () => {
+      console.log('VOTEUP shortcut is pressed: ' + data)
+      window.webContents.send('voteUp', '')
+    })
+  });
+
+  storage.get('vote_down_hotkey', function(error, data) {
+    if (error) throw error;
+    if (typeof(data) == 'object') {
+      return console.log('Object returned expected value')
+    }
+
+    const ret = globalShortcut.register(data, () => {
+      console.log('VOTEDOWN shortcut is pressed: ' + data)
+      window.webContents.send('voteDown', '')
+    })
+  });
+}
+
 function createFirstLayoutWindow () {
   mainWindow = new BrowserWindow({width: 380, height: 155, resizable: false, frame: false, alwaysOnTop: true})
   // mainWindow = new BrowserWindow({width: 800, height: 500, resizable: false, frame: false})
@@ -143,8 +173,8 @@ function createFirstLayoutWindow () {
     slashes: true
   }))
 
-  // Open the DevTools.
   // mainWindow.webContents.openDevTools()
+  registerHotkeys(mainWindow)
 
   mainWindow.on('closed', function () {
     mainWindow = null
@@ -161,6 +191,9 @@ function createSecondLayoutWindow () {
     slashes: true
   }))
 
+  // mainWindow.webContents.openDevTools()
+  registerHotkeys(mainWindow)
+
   mainWindow.on('closed', function () {
     mainWindow = null
     reloadAllWindows();
@@ -178,6 +211,7 @@ function createThirdLayoutWindow() {
   }))
 
   // mainWindow.webContents.openDevTools()
+  registerHotkeys(mainWindow)
 
   mainWindow.on('closed', function () {
     mainWindow = null
@@ -196,6 +230,7 @@ function createFourthLayoutWindow() {
   }))
 
   // mainWindow.webContents.openDevTools()
+  registerHotkeys(mainWindow)
 
   mainWindow.on('closed', function () {
     mainWindow = null
@@ -218,6 +253,11 @@ app.on('ready', function() {
 
 });
 
+app.on('will-quit', () => {
+  // Unregister all shortcuts.
+  globalShortcut.unregisterAll()
+})
+
 // Quit when all windows are closed.
 app.on('window-all-closed', function () {
   // On OS X it is common for applications and their menu bar