Refactoring To Support Multiple services (Zoom, etc)

[cycomachead]

Alright, this is mostly to start a conversation, but after adding another service for a workshop I am doing this weekend, I think this interface isn't too hard to adapt. :) But, it's by no means perfect / the only option...

• This supports Zoom and a conference service Pathable
• Refactors the display name options into a radio choice
• Introduces a primary object LiveChatOverlay.
• I haven't touched youtube yet...
• Highlight words are not supported yet.

This essentially replaces #16

[champagj]

Glad you are still working on the zoom / multiple platform support. My current workaround uses H2R graphics lower third with overlay which requires cut/paste across applications..

I dont have the skills to contribute to the development but if there is a way to deploy the commits to a working environment I could do testing.

[cycomachead]

You can download my fork and import into your own Chrome as an extension. :)

If you go to the github readme for my fork

those are the installation instructions (same as Aaron's, actually).

In the case of Zoom, I may add a button that hides/shows the output window. However, do use it you'd also need to know to turn off the keyer so you don't see random chrome stuff on your video.

[aaronpk]

I hate to close this without merging, cause this was a lot of work, but I've changed how the extension works with the introduction of the new external overlay URL and I'd like to focus on that method for adding future services going forward.

With the new external overlay window, each service can have its own primary JS file that handles the logic of pulling comments from the chat, but doesn't need to have any of the display logic anymore since it can just push the comment text to the remote window to display there instead.

[cycomachead]

I'd be interested in trying to make some updates to this. I'll likely still be using Zoom in the fall, or possibly another service (ohyay). It seems like those files still need to be included here, right (and not with the overlay sever)?

I'm all for pulling out some display logic, and it seems like the main thing would be adding an AJAX call to forward to the remote server?

I ended up making quite a few other changes in the process. If you have any thoughts on those I'll make updates too.

[aaronpk]

I’m actually tempted to rip out the old way entirely, since you can use the standalone popout window in full screen locally if you really wanted to, which means we could consolidate the logic here so that there’s a separate component for reformatting an individual service’s chat window vs what is actually shown on the stream. I’m thinking that could be a good way to simplify and separate a lot of the logic for different services, since I do want to support more platforms with this.

[aaronpk]

Alright, the major refactoring is complete. All the display logic is moved over to the remote project which also doesn't care about what platform the message comes from. The extension now extracts the message content from the page and pushes it to the remote window. This still needs some good docs, but it should be much more straightforward to add additional services now. See youtube.js for an example of what needs to be done for each service: https://github.com/aaronpk/live-chat-overlay/blob/main/youtube.js#L21