Up Your MultiTasking Game: How I Built a Transparent Video Player App with Electron that Transformed the Way I Work
My mother always drilled into me that there’s nothing more precious in this world than time. As a result, I’m a bit of multitasking junkie, — like most other computer users my age, I’ll binge my favorite shows or watch online class lectures all while writing code, checking email and browsing online. Problem is, since I work on a laptop, screen real estate becomes a major issue and even with the second monitor in my office, it’s difficult to maintain focus on two separate screens. I’ll try making the video window super small, or I’ll “float” it atop the desktop (a cool feature in VLC) but it always seems to get in the way of my other computer tasks.
Now what if, (run with me on this), what if you could have your cake and eat it too? Play your videos full screen AND have your full desktop at your disposal all at the same time? Well now you can…. Sort of… Teaching myself electron, I built a utility that allows you to play video files fullscreen, transparently atop the desktop with full control of the apps beneath. I think of it a little like bifocals, — you can focus on your work and selectively shift to video playback by adjusting your eyes, though I often prefer to leave my focus on the background and register the movement and action of the video peripherally.
This little app has completely changed the way I work. I’ve fit an extra edX Team course into my monthly routine and was able to catch up on the latest season of Rick and Morty with little drop in my work productivity. I also play the occasional PC game (shenzhen and opus magnum are some of my favorites) and being able to watch videos in the background while gaming on Steam is a tremendous benefit. I would often mute these games and listen to WNYC or other educational podcasts, but opening this up to videos as well changes everything. Try the latest version of Chameleon Video Player for free here.
This whole experiment was built using Electron, an amazingly simple yet powerful Javascript framework. Getting started is simple — a breeze for anyone the least bit familiar with web design. The conceit of this particular project, the fundamental idea of floating a fullscreen window atop the desktop and enabling click-through while registering keyboard input, was made possible by the versatility of Javascript, the ability to capture keystrokes and mouse events that are then forwarded to the parent window. I have attached an elegant demo illustrating this to the bottom of the article. This example, written by Will Knowles (@StickyCube), was extremely helpful for tinkering with this concept and ultimately developing my app.
I believe there’s a fertility to the idea of semi-transparent comptuer windows and pass-through mouse and keystroke events. I can imagine several novel applications that extend far beyond a simple video player, software that could allow us to absorb an amalgam of information at a much faster rate. Your template for getting started is below, (courtsey of Will Knowles, @StickyCube) and if you manage to build something cool, be sure to let me know!
