Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[INCOMPLETE] Port to Linux #37

Closed
wants to merge 6 commits into from
Closed

[INCOMPLETE] Port to Linux #37

wants to merge 6 commits into from

Conversation

PaulBGD
Copy link

@PaulBGD PaulBGD commented Oct 8, 2016

This PR is mostly waiting on the aperture PR to support Linux. There are a lot of inconsistencies with this code that need to be fixed before it gets merged however (see the review.)

Image
Image

Once the aperture PR is finished and pulled, the dependency in this project should be updated.

@PaulBGD
Copy link
Author

PaulBGD commented Oct 8, 2016

Huh. So it turns out Linux support might not even be possible, because you can't make a transparent window.. electron/electron#2170

@timothyis
Copy link
Member

Really looks like some great work @PaulBGD. It'd be a shame if it really isn't possible! 😢

@matheuss
Copy link
Member

matheuss commented Oct 8, 2016

Amazing work @PaulBGD. I'll leave it as on hold until we manage to merge wulkano/Aperture#3 😄

Also: --enable-transparent-visuals --disable-gpu don't work? 😔

@PaulBGD
Copy link
Author

PaulBGD commented Oct 9, 2016

Tried that, on my computer it made random colors semi-transparent and was seemingly random.

@GottZ
Copy link

GottZ commented Oct 18, 2016

--enable-transparent-visuals --disable-gpu does work on linux if you run a window manager that supports compositing.

this has been deepy discussed and fiddled around with. go there for more info: https://github.com/nwjs/nw.js/wiki/Transparency
(yes thats node-webkit but there is not much of a difference since both node-webkit aswell as electron run on webkit)

@PaulBGD
Copy link
Author

PaulBGD commented Oct 18, 2016

@GottZ I'll check it out on a few window managers, but for some reason it didn't seem to work in Cinnamon (which uses compositing since 2012.)

@PaulBGD
Copy link
Author

PaulBGD commented Nov 8, 2016

Current status
Image

Copy link

@fearphage fearphage left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey, thanks for the effort. I look forward to using this in Linux. 😃

I had a few suggestions to improve the code. Let me know if anything doesn't make sense.

const triangle = document.querySelector('.triangle');
const updateNotification = document.querySelector('.update-notification');
const windowTitle = document.querySelector('.window__title');

if (platform === 'darwin') {
content.classList.add('darwin');

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would add this regardless of platform. That would allow you to revert pretty much all the changes in this file.

content.classList.add(os.platform());

This would open the door for any platform to have custom styling.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great idea!

if (platform === 'darwin') {
content.classList.add('darwin');
titleBar.style.display = 'block';
trayTriangle.style.display = 'block';

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You could style both of these in CSS.

.darwin .title-bar, 
.darwin .tray-arrow {
  display: block;
}

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another good idea.

@@ -1,4 +1,11 @@
#!/usr/bin/env node
const os = require('os');

if (os.platform() !== 'darwin') {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You should move the darwin check from line 31 up to line 16ish and then an else-if for linux. I'd also update the message to not say "only supported on mac". Perhaps make it more generic like "unsupported platform".

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this might be an accidental 2nd comment, but what do you mean about the message? I think it's pretty accurate as is, since the install script is being skipped since ffmpeg is already installed on Linux.

brew update
brew install p7zip

if [[ $OSTYPE == darwin* ]]; then

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you need to edit the script even though you're no longer calling it?

@@ -1,6 +1,8 @@
#!/usr/bin/env bash

cd $1
if [[ $OSTYPE == darwin* ]]; then

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you need to edit the script even though you're no longer calling it?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point.

mainWindow.webContents.send('cropper-window-closed');
});
selectorWindow.on('move', event => {
console.log(event);

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left over debug.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks.

@@ -53,10 +59,14 @@ let tray;

let recording = false;

if (platform !== 'darwin') {
menubar.setOption('alwaysOnTop', true);

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a reason not to add this to the constructor on line 20?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From when I added the check I'm pretty sure that the line of code was called already. I can move it to the constructor.

@@ -21,6 +21,7 @@
"file-size": "^1.0.0",
"first-run": "^1.2.0",
"insight": "^0.8.3",
"linux-area-selector": "^1.2.0",

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI the github link for your repo is not showing up in NPM.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My bad, I didn't add a repository field in the package.json.

});
selectorWindow.on('blur', () => {
if (!recording) {
selectorWindow.kill();

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you exposed and renamed a few more methods in linux-area-selector, you could de-dupe a lot of this code I feel.

Don't repeat yourself.

  • .kill() => .close()
  • Add .getContentBounds()

I think it might be possible to make a createLinuxSelector and createDarwinSelector method to create the windows and possible not fork too much after that. I'm just briefly looking over the code though. I'd be happy to help with that more if you're interested.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah originally I was planning on making an abstraction that would cover both of them, this was just the quickest way to check if it worked with Kap.

});
selectorWindow.on('move', event => {
console.log(event);
// because GTK/GDK makes it hard to get move/resize events differently, we do this

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did. Check the C++ code in linux-area-selector, I'm already using the configure event. The event just doesn't say what type of window configuration was passed through. Check https://developer.gnome.org/gdk3/stable/gdk3-Event-Structures.html#GdkEventConfigure

@skllcrn
Copy link
Member

skllcrn commented Nov 19, 2016

Woah, thank you for reviewing this @fearphage!

@PaulBGD PaulBGD mentioned this pull request Nov 20, 2016
@@ -338,6 +403,10 @@ ipcMain.on('will-stop-recording', () => {
if (cropperWindow) {
cropperWindow.close();
}
if (selectorWindow) {
selectorWindow.kill();
selectorWindow = undefined;
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure if this is needed, since I unset the variable above in the quit event.

cropperWindow.close(); // TODO: cropperWindow.hide()
} else {
selectorWindow.kill();
selectorWindow = null;
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also not sure this is needed. I also accidentally inconsistently set it to null, where ahead I set it to undefined.

@PaulBGD
Copy link
Author

PaulBGD commented Dec 5, 2016

I'm uninterested in maintaining this anymore. All code is licensed MIT.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

6 participants