Video-hub-app: Remember preferred number of screenshots and size in wizard

[whyboris]

It's very likely users who create many hubs have preferred settings. We may as well remember those.

Remember in the _Wizard_:

• preferred number of screenshots
• whether screenshots per video or per time interval
• screenshot size

[23mwest]

First timer here, can I try to tackle this?

[whyboris]

Hey @23mwest 👋 awesome 😁
Please feel free to reach out with any questions about anything. I'm happy to give hints or more-detailed suggestions (whichever you'd like) 🤝

[23mwest]

Awesome - appreciate it!

[23mwest]

Hey @whyboris 👋
Wondering if you have anything set up already to persist data between runs of the app (Didn't see anything in the dependencies). Found electron-json-storage and electron-store as two answers here Lmk if you like one over the other or if I'm missing something you already have in the app. Thanks!

[orkomlosh]

Hey,
the persist data of the app is saved in _settings.json_,
one of the interface that's being saved there can be found here: _src\app\common\app-state.ts_
settings object is this: _interfaces\settings-object.interface.ts_

and the place that write/read it in: _main.ts_

[whyboris]

Thank you @orkomlosh 🙇
@23mwest -- feel free to ask for clarification / more help. Especially that I'm working with _TypeScript_ which you might not be instantly familiar with (even if you're good with _JavaScript_) 👍

A quickstart:
main.ts is stuff that runs in _Node_ and communicates through "IPC" with Angular, here is when the settings return:
https://github.com/whyboris/Video-Hub-App/blob/main/src/app/components/home.component.ts#L677 🚀

[23mwest]

@orkomlosh @whyboris Thank you both for your replies, it is a bit confusing and it's not even my first time with TypeScript. 😅
I think I'm starting to understand what's going on though. Looks like this code is the setter for the object?
event.sender.send('settings-returning', previouslySavedSettings, locale);

[whyboris]

the event.sender.send('something', data) is the way for node to communicate to Angular through: Electron Docs

The 'something' is the message name -- as long as Angular is listening for that message, it can run arbitrary code upon receipt of the _data_ that's sent 🤝

This specific line sends over the "previously saved settings" (saved JSON as a JS object) to Angular. Angular then listens for it thus:

this.electronService.ipcRenderer.on('settings-returning', (
      event,
      settingsObject: SettingsObject,
      locale: string
    ) => {

in home.component 😁

[23mwest]

Finally got somewhere with this thanks to you guys, but I'm running into an issue with bindings that seems to stump me every time I use Angular... I get the settings and set it to the WizardOptions in home.component like this:
if (settingsObject.wizardSettings) { this.wizard = settingsObject.wizardSettings; }
but when the wizard loads it still has the default value of 10. I tried the "banana-in-the-box" two-way binding in both home.component.html and wizard.component.html, and just about every other possible combination of bindings I could think of.
Any Ideas?
Edit: Disregard this, sorry. I don't think it has to do with the bindings.

[whyboris]

👋 this stuff is a bit tricky 👌
The html dictates what is selected as default upon load, for example, notice the selected option for screenshot size:
https://github.com/whyboris/Video-Hub-App/blob/main/src/app/components/wizard/wizard.component.html#L247
The number input has a default set as well:
https://github.com/whyboris/Video-Hub-App/blob/main/src/app/components/wizard/wizard.component.html#L179
👍

[whyboris]

@23mwest let me know if you still would like a hand with this 👍