Schlagwort-Archive: Electron

YouTube Audio Player

screen

For one year I have tried to create my own YouTube Audio Player. I wanted something that can play my playlists and favorite music from YouTube, but I only wanted the sound – no video. In that case I usually used a separate browser-window or -tab and that was sometimes very annoying.

Download all OS

So this player is build on top of NodeJS and Electron and uses the Google API for all YouTube requests. The code and the structure is available on GitHub.

Angular 2, Electron, NodeJS

Currently I’m working on a private project with Angular 2 (v.2.0.0-beta.0 | TypeScript), Electron (Atom Shell) and NodeJS.

I had some issues with Angular 2 and webpack modular bundler.
In my system I have to transcode all the TypeScript code with all the nice features to normal JavaScript-code (ES5).

first issue
  • It took me many hours to get the InterProcess Comunication from the Electron to the NodeJS running. The Problem is that the IPC-module is a native Electron-module and webpack is trying to find it in the node_modules folder.
    StackOverflow issue

Solution: webpack-target-electron-renderer
You have to change/update your webpack config. After that webpack will ignore or find the native Electron-modules.

second issue
  • In Angular 2 you can write components, services, …. and more. I wanted to use a service to get data from one component to another but I never got the data exchanged between them.

Solution: In my case I used the Componenttag “providers” to create an instance of the declared service but every time you write “providers” with a service in it, you are creating a new instance of the service and you will never get data from one component to another. You start your app with that

bootstrap(App, ['services']);

since then you have an instance of the provided services. To use them, you only have to import the service and to write in the somponent-constructor

constructor( %varname% : %servicename% )

 

conclusion:

The combination of Angular 2 (TypeScript), Electron (Atom Shell) and NodeJS is very nice. With that components you are able to build a client application rapidly. My next “nice to have” is to integrate a CSS-preprocessor (SASS, LASS, …) in my projects to write CSS-code in the ways of a programmer.