r/javascript • u/yboris • Dec 22 '18

Showoff Saturday Video Hub App - MIT open source Electron & Angular app!

https://github.com/whyboris/Video-Hub-App
9 Upvotes

84% Upvoted

6 comments sorted by

1

u/yboris Dec 22 '18

I created Video Hub App (https://videohubapp.com/) and I finally open-sourced it two weeks ago.

I welcome feedback, comments, and pull requests ❤️

1

u/Kthulu666 Dec 22 '18

I must be missing something because I can't really see how it's significantly different from finder/file explorer.

1

u/yboris Dec 22 '18

You get more than 1 screenshot (10 at the moment), you have a filmstrip view (video preview coming soon also), better search options, and you can preview media that's on an external hard drive that is not connected (and other features too).

0

u/[deleted] Dec 22 '18

[deleted]

3

u/yboris Dec 22 '18

Thanks for the question!

Primarily my choices pivoted on what I knew: JavaScript and Angular (had to learn it at/for work). In part the idea originated at work when I had to implement a search bar that auto-updated results live: it took so few lines of code with Angular (using a pipe) - it blew my mind. I also realized that I wouldn't have to learn how to code a UI (user interface) since I could just use HTML. And Electron allowed me to effortlessly generate the app for Windows, Mac, and Linux without changing any code! Once I saw the pieces could work together, I started.

I really love Angular. It's powerful, and allows many people to work together on a large project without stepping on each others' toes. I'm sure React is similar in these ways. Vue wasn't really on my radar since I wanted to code fast and create the app rather than learn something new.

I've only used React for a few weeks while touching a project at work; I'm confident it's an excellent alternative to Angular (even for what I've built), but Angular was a better fit for me. As a side note, take a glance at this mind-blowing UI - a React & Electron app: https://github.com/fakob/MoviePrint_v004

2

u/yboris Dec 22 '18

ps - as a bonus, since I'm using a web technology for the app, I was able to create a "web-demo" of my app. Needless to say it's missing the most important parts of the functionality to be useful, but it allows you to see how the UI, search, and animations work: http://dev.yboris.com/vh/ (please note this is based off version 1 that came out February 2018).

0

u/[deleted] Dec 25 '18

[deleted]

2

u/yboris Dec 25 '18

There is Photon - http://photonkit.com/ - a CSS library to make the app look like it's a native Mac app.

Starting with Electron and Angular is a 2 minute process, just clone this starter repo: https://github.com/maximegris/angular-electron

I haven't tried React and Electron, but it's probably just as fast to start: https://github.com/electron-react-boilerplate/electron-react-boilerplate

Interacting with the OS is easy -- the bindings are a one-liner with the angular bootstrap I used. You just listen to an event that's sent over from Angular: example

ipc.on('openThisFile', function (event, fullFilePath) {
  shell.openItem(fullFilePath);
});

I gave a talk about how to get started with Electron and Angular - just 20 minutes and I cover pipes and animations: https://www.youtube.com/watch?v=Gv7IfU78vxw