Electron backend

[mattrix27]

This is the branch for the testing and creation of a desktop version of VIAME-Web.

Using electron_builder one is able to run the vanilla version of VIAME on an electron window
I used resources such as this when implementing
NOTE: In order to get electron and the builder working with typescript, I had to downgrade from Node 14 to Node 12. I am not sure if this affects anything in the future, but with the current version of Electron, support for Typescript seems to not work
with this, you can now open up VIAME in electron by running yarn run electron:serve

• It would probably be smart to implement yarn workspaces as mentioned in Assess yarn workspaces to handle multiple build configurations. #277 especially with the different version of node

I created a separate router to test new features. If you just want to use VIAME normally you can just comment out the env variable electron route in the beforeEnter function in router.js

Next was attempting to create a video player. In general, I had a lot of problems getting anything off the ground and tried out a bunch of stuff:

Video Player:

• MPV.js This is an electron player that encodes using mpv. Only has a component for React and actually didn't work properly on my local computer. No Typescript support

• seblavoie Another standalone video player for electron. Uses Vue so it looked promising but had require statements that broke the build and ended up being glitchy as a standalone

• RIAEvangelist I didn't look into this one too much because is deprecated, but a lot of google searches seemed to reference so maybe worth a look

• video.js This seemed to be a very popular library for playing videos in JS in general. When I played around I got a lot of typescript and linting errors, so maybe best if looked at with a more experienced eye.

• vue-video-player This was a popular library when looking around. Seems to use video.js a lot, hence I ran into the same problems. Also no Typescript support when installing

• vue-core-video-player Another popular library. I ran into similar problems with Typescript and linting but it has a more fleshed out example that could be helpful to look deeper into. Also no Typescript support when installing

File Managing

• I looked into only for a short while, alot of the things I looked at used const { dialog } = require('electron').remote; to take advantage of electron's builtin dialogs to open windows and stuff, but this isn't super allowed in in vue files.

Overall, the Venn diagram of Electron, Vue, and Typescript threw into a loop. It would probably be better if someone with more experience with electron and vue (and web-dev in general) to look through these things again. If there is a proper way to use JS libraries in a TS project then vue-core-video-player and video.js probably hold the most promise but I wasn't able to make much headway.

[subdavis]

Closing in favor of #397