PCO Integration Improvements

[schplay]

This PR contains several improvements/additions to the PCO integration. These updates are important for users coming from ProPresenter as they are hugely important for those that heavily utilize Planning Center Services across multiple service types as well as depend on the PCO "live" timing. My church falls into that category and the lack of these features has prevented us from even being able to seriously consider switching to FreeShow. I hope that these will also help other users be able to make the switch.

• New PCO Timer type allowing live PCO service time sync.
• Updated wording for countdown "overflow" to make it easier to understand.
• Added PusherJS to support PCO "live" events for new PCO Timer.
• New PCO Service type selection in the PCO config to allow customization of which service types/folders are auto-synced. This also fixes PCO import for all accounts with service type and folder structures that don't match the default assumption the app previously made which in some cases made the feature unusable.
• New ability when manually creating a Project to select any upcoming PCO service that would not have otherwise gotten synced and created.
• New manual refresh button when viewing a PCO Project to force re-syncing to get updates from online.

These were tested and are working well on Windows.

[vassbo]

Awesome! This is great.
Can we instead of having it as a "Timer", we should just have it as a dynamic value.

[vassbo]

Also we should use Socket.IO instead of PusherJS because that's already being used in the app.

[schplay]

@vassbo concerning "Timer" vs a dynamic value I'm not 100% sure that I understand. Do you mean to have it be a "Variable" under the "Functions"? I honestly think having it as a "Timer" makes the most sense for users since that's essentially what it is; it's just controlled by an external service instead of logic within FreeShow. Furthermore if we were to change it to being a "Variable" then I don't currently see a way to display those on the Stage Display and we would need to find the best way to add that (presumably an entirely new "Item" type).

Unfortunately the existing Socket.io implementation isn't compatible with the Pusher events used by PCO so unless I'm mistaken there's not a way to replace one with the other.

[vassbo]

Right click any textbox and you'll find "Dynamic values" - timers and variables are here as well.
Because it does not need to be controlled, we just need it as text and not as an interface.

[schplay]

@vassbo I see, I wasn't aware of that feature. After looking at it I have some questions about how you suggest I would make that change. For instance, would it be a new dynamic value under the "Project" group or would it make sense to be a new "PCO" group? Also, if making this change from a "Timer" then how would we configure the early warning and overflow settings that are native to "Timers" but presumably don't exist for text?

[vassbo]

I guess if it needs many values it can be it's own "PCO" section, if not it can be put in the "Project" section, you can choose.

Textboxes and dynamic values work well with "Conditions" where you can show/hide certain textboxes based on the value of a dynamic value. So it's up to the user to configure multiple textboxes with different colors here, you can just leave it as plain text.

[vassbo]

I guess the condition would need an update to allow setting "is above"/"is below" if the dynamic value can be parsed into a number.

[schplay]

I'm going to be honest, that sounds like a lot of work just to duplicate existing functionality that EVERY single person that uses this PCO timer will want. I think having it available as a Dynamic Value is a good idea but in the current implementation it already is since it's a timer. I also think new "is above" and "is below" modes for the conditional logic are good ideas but I think requiring every user to build their own logic there just to get the existing timer functionality is bad UX.

[vassbo]

Then we should just make a default PCO timer stage display (and/or template) that is created when the user connects with Planning Center, that can also be used as an example.