Add custom drag handler to reimplement custom menu bar

[jacobwgillespie]

Check out https://github.com/kapetan/electron-drag - it implements drag in native code. We will need to reimplement though as it uses dynamic imports, which are broken by design in ES6.

[jacobwgillespie]

This is implemented for OSX - need to reimplement for other platforms

[benortiz]

@jacobwgillespie hey i'm interested in helping you out with development if you're open to that. is there something small i can help with?

[jacobwgillespie]

Hey @benortiz! Feel free to contribute anywhere, I'm totally open to contributions! I have a pseudo list of todo items on this issue comment over on radiant-player-mac: https://github.com/radiant-player/radiant-player-mac/issues/409#issuecomment-202002854. Essentially a settings system, theming system, and LastFM scrobbling are the remaining areas that need to be implemented.

[MarshallOfSound]

First off, apologies for the jQuery 😆

And on that note, have a code sample showing how to do cross platform window dragging with Electron API's.

import { remote } from 'electron';

let wX;
let wY;
let dragging = false;

$('.draggable').mousedown(function (e) {
    dragging = true;
    wX = e.pageX;
    wY = e.pageY;
});

$(window).mousemove(function (e) {
    e.stopPropagation();
    e.preventDefault();
    if (dragging) {
        var xLoc = e.screenX - wX;
        var yLoc = e.screenY - wY;

        try {
            remote.BrowserWindow.getFocusedWindow().setPosition(xLoc, yLoc);
        } catch (err) {
            console.log(err);
        }
    }
});

$(window).mouseup(function () {
    dragging = false;
});

[jacobwgillespie]

Sweet thanks, I should probably test that solution. From what I read, implementing Electron drag in pure-JS could have potential performance implications, i.e. not register drags fast enough and run the risk of the mouse moving outside the player window and thus "losing" the window in the process, hence why I went with a native solution that grabs mousedown from the DOM and mousemove and mouseup from the OS, but beyond secondhand accounts I didn't actually test pure JS. Maybe it could be implemented as a hybrid (native support if it exists with JS fallback).

[MarshallOfSound]

@jacobwgillespie I've tested this on OS X and Windows and the beauty of it is the use of remote. remote uses Electron's sendSync IPC calls which introduces basically 0 lag between action and reaction.

I've deliberately tried to "lose" the window by dragging it quickly and I just can't seem to lose it 😆