Video-hub-app: Closing "Source Video Folder Not Found" causes error

[whyboris]

1) Create a hub based off an external location (network drive / external drive)
2) Exit app
3) Disconnect external source
4) Launch app
5) See the dialog for "Source Video Folder Not Found"
6) Close it (rather than cancel or some other option)
7) See ugly _Node_ error 👎

Dialog:
https://github.com/whyboris/Video-Hub-App/blob/ac9de115174fd50f6e6dfd768ac9bacf01090004/main.ts#L289

The language strings found in the dialog:
https://github.com/whyboris/Video-Hub-App/blob/master/i18n/en.json#L317

To fix probably just need to catch the dialog close event somehow 🤷‍♂

[whyboris]

🎉 Version 3 does not prompt the user when the folder is not connected -- it simply adds a little indicator on each video file indicating the file is not accessible 😎

[orkomlosh]

hmm, i've been looking on this, and if the folder is not exist (or to be more accurate the VHA file) we still get this error msg

and than we get this crash:

[whyboris]

Thank you for sharing! The original issue was for something else, but an Electron has stopped working is a problem 👀

The first screenshot shows an error message that makes sense -- when you delete the last-opened .vha2 file and open VHA it will complain. Perhaps rather than showing this error message the app could gracefully show the _Wizard_ screen instead 🤔

When I click OK the app doesn't crash -- it just goes to the _Wizard_ screen for me 🤔 ... if you can, could you share the steps that get the app to crash?

ps - I tested on the built & installed executable, not on npm start 🤔

[orkomlosh]

yeah i understand,
the way i got the issue:

1. open app
2. create hub
3. close app
4. rename/delete folder of the hub
5. open app
6. i got the error msg which is fine and than the crash,

i guess it's possible that it's only happens in dev mode (npm start). i'm working on windows.
if' it's not happening in production than i guess it's not interesting.

if it happens i got some kind of a solution.
but it de-attach the dialog box from the main window. but the issue is not happening anymore.
to remove the MsgBox is another good option if needed.

let me know if you manage to reproduce and if it's worth a fix

[whyboris]

Odd -- unable to reproduce (Windows 10) even with npm start 🤔 -- the app doesn't crash for me, just looks frozen, but if you click inside (or interact with the app, like moving the window) it will fade out into the _Wizard_ screen.

It's an edge case and I'm fine with letting it linger around -- there are bigger bugs to fix 😅

Of course -- feel free to work on any part of the app 👌 if this bug annoys you and you want it gone, you're definitely welcome 😄

[orkomlosh]

great, BTW what are you saying about maybe using Toasts, notifications or dialogs from the angular side and not the electron?
maybe using something like this https://github.com/scttcper/ngx-toastr
or any other libraries out there. maybe even create our own.
and than we can send the msg through the IPC and show the dialog.

[whyboris]

I like the idea of a nicer notification than a system popup. I'm using a self-created one already to indicate when a folder is not connected (when you click on a video with a yellow 🟡 circle in top-left corner). I send notifications (showMessageBox) for when renaming a file fails for some reason. The file not found and hub name already exists, please rename messages are the only two that are still around 🤔

I think both can be migrated to in-app messaging. I just would have to figure out a (visually) nice convention (UI) for handling it 🤔

[orkomlosh]

If you want i can try and implement a dialog for messaging, notifications etc.
of course i will do it as a POC on a side branch for you to review.
The question i have about it, is how you want me to implement this:

• I can use modal and implement it with CSS and HTML.
• I can use Material library which has a great implementation for dialogs.
  https://material.angular.io/components/dialog/overview.

[whyboris]

Thanks!

• I think you're right that an in-app notification (rather than a system popup) is a better UX (user experience)
• Since we're using Electron, bundle size doesn't matter and we can load up additional libraries at virtually no cost
• _Material library_ you link to has a great implementation for dialogs 👍 👍

I can style things a bit if the default look doesn't mesh well with my current design.

• I think for now just implementing the _dialog_ in the two places we use showMessageBox is enough - no need to refactor anything within the app to use the new library besides these two 😁
• I think a simple text inside (with no action button) is enough -- it seems like the default implementation lets you exit by clicking outside or pressing the esc key 👍

[orkomlosh]

Nice!
I want to close more bugs for you to release on 8.3, and than i'll take this POC!
Thanks!

[orkomlosh]

hey, @whyboris i started working on this POC very quick,
this is the basic implementation, i will make it look better soon.
this is of course just a mock to see how it works. what do you think?

[orkomlosh]

implemented in no such file found

[orkomlosh]

I committed and pushed the changes to my branch
https://github.com/orkomlosh/Video-Hub-App/tree/mat_dialog_poc
i'll continue working on it, let me know what you think

[whyboris]

Looks great 🤩

[whyboris]

The more I look at it and the more I think about this approach to user messaging, the more I love it!

I've always been upset at programs that give you a system message that locks up the app. I bet users sometimes don't notice the system message and get confused by why the app is no longer responding to anything they do (I've seen my dad get stuck like that with Photoshop 😅 ).

Having an in-app message (as you suggested and implemented) is an awesome improvement 🙇 🤝 😍

[orkomlosh]

Hey, @whyboris , i got stuck on an issue.
can you take a look maybe?
https://github.com/whyboris/Video-Hub-App/commit/3035618baf0ee20fe27ac00fca4a2b28417497a9

i think it's something related to changeDetection. i can see in debug that the dialog is opened and i can see it on screen.
but the text inside is is not rendered until i press keyboard or mouse.
i tried many techniques to fix this. but with no success.
dialog service is working fine when triggered from any angular component. but not when it gets triggered by the IpcRender event.

BTW if you want i can open new discussion/issue related to this.

[whyboris]

You could wrap the detectChanges() inside a setTimeout

setTimeout(() => { 
  this.cd.detectChanges();
});

-- it's hack, but I think it should work 👍

[orkomlosh]

I tried it, and got the same outcome.
i'm trying to figure this out since Tuesday 😞.
maybe I'll take something else, and get back to it later.

[whyboris]

I could borrow the branch and give it a try 🤝
I'll give it a go today after work 😁