Add time & date overlays

[bhajneet]

This kind of blurs whether or not it should be in Shabad OS or released as a second standalone app. Need feedback on bloat (size, codebase, packages, cpu perf) and definition/scope of desktop app.

The goal here is to allow users to add the time/date stamps to their livestream. There are two options: (1) expose to the same overlay page, (2) create separate webpages for time and date (3 webpages total including overlay). The first option allows theme creators to place everything in one file; the second option allows users to place the date and time flexibly in their OBS (crucial when switching between 720, 1080, etc. resolutions).

• [ ] Add two input boxes for time and date in Settings > Tools > Overlay
• [ ] Default string for time: Military (13:04)
• [ ] Show options in description for
  • [ ] Military Hour and preceding 0 (6, 06)
  • [ ] 12 hour and preceding 0 variant
  • [ ] Minutes always preceding 0 (03, 14, 59)
  • [ ] a/p in lowercase (CSS can make upper)
  • [ ] am/pm in lowercase
• [ ] Default string for date: Wed 15 Oct 2019
  • [ ] day of week 2, 3, and full letters in lowercase (mo, mon, monday)
  • [ ] day in numeric and preceding 0 variant (3, 03)
  • [ ] month in alphanumeric options (aug, august, 8, 08)
  • [ ] year in two or four digits (19, 2019)
• [ ] Input boxes should allow for other characters like comma, hyphen, and other words. This allows the flexibility for a user to write Day 6 of '%19% Smaagam, %Wed%, %15% %Oct%

[Harjot1Singh]

Bloat is next to nothing (everything can be done with setTimeout and new Date(), and any npm packages that have this wrapped in a component will be tiny).

I'd opt for the 1st option, unless you really wanted to add a /overlay/time endpoint, but I don't really understand how it'd help the resolution issue

[bhajneet]

Yeah, first option is fine for advanced users. It's for the people that want to use OBS or their livestream software that the second option is better / easier for them. All they have to do is add a browser pointing to the separate endpoint (/time, /day, /date) and then they can move it wherever they like. I'm still leaning towards second for most users/ease of use.

A better option is to have one single endpoint that is manipulable. So something like /timedaydate?format="HH:mm ddd DD M YY". This endpoint is the most preferable. It allows the user to set up complex strings that don't have to be formatted with fancy left/right aligns in their software (Say if someone wants to show day and date together, but both change widths, how do you arrange them in livestream software? Easy to do when you can create one string that includes both). Why one endpoint that is manipulatable as opposed to one endpoint that can be customized in shabad os GUI? Because you may also want to have 3 of these in different formats at different parts of your live stream.

We also have to be careful that esc hotkey doesn't turn off these two fields. Also we need a css tag on app tag for when it's escaped/empty.

On time day date endpoint(s), a tag to indicate empty/esc in shabad os would be nice as well. In case they want to hide time, day, date whenever the shabad os is cleared.

[Harjot1Singh]

How do you want to handle theming?

[Harjot1Singh]

Maybe move to another repo, since a lot of people might use this without SOS anyway.

[bhajneet]

If we add it to a website, it could go with #353 to generate these two static files.

[bhajneet]

Perhaps we can make this simpler by using moment.js and simply allowing user to pass "locale" and "format" string in URL

So e.g.:

• en and llll => Sun, May 17, 2020 1:18 PM
• pa-in and llll => ਐਤ, ੧੭ ਮਈ ੨੦੨੦, ਦੁਪਹਿਰ ੧:੧੯ ਵਜੇ

I still don't want to force these dropdown choices in GUI so that user may use USA date formate but also have 24 hour clock from UK with two URLs

[saihaj]

We can have option to style this in theme tool and overlays just need to provide support for this

[saihaj]

We can use https://momentjs.com as it offers so many date formats and then user can style the date as they want. MomentJS allows us to define locales.

[bhajneet]

At most I think the user should be able to theme color, font size, font family, and text alignment. I don't think it's enough to really warrant an entire theme tool.

As said before, the format of the time or date should be passed in the URL if possible. The same webpage can be used for multiple formats then.

Maybe it's possible you can pass this formatting through the GUI through a couple drop downs, but the URL overrides (takes priority over) whatever format was chosen in the GUI?

The other option is to simply have n text files created, so for example 3 GUI dropdowns in shabad os settings. These 3 can be formatted as whatever strings preferred. The text file is continually updated. Live stream software can handle formatting/styling/etc. I don't think any user would require more than 3 formatted strings, and could even suffice with just the one perhaps. Text files could be like timedate{1,2,3}.txt. Perhaps dropdowns for this could be "added" so there is only one to start with.

[bhajneet]

One downside of the text file method, is that only the local machine can access it easily.

[saihaj]

We can do the URL way, it is simpler and no need for reading/writing files. We pass in the format in the query as said above and then that param will be rendered in a component. For basic users, they can use the dropdown way where a query param is generated and if you are advanced then they can probably modify it (according to momentJS docs) however they like.

So we have 2 endpoints/overlay/time?format, /overlay/date?format. How does styling work? Do we have multiple defaults for this too (similar to themes)?

[bhajneet]

My latest thoughts on this are:

• Create something similar to the "theme tool". An online "date/time" generator. It would create an html file with javascript embedded in it. This webpage could be added to live streaming programs such as OBS, Wirecast, vMix, etc.
• This webpage method is superior for the following reasons
  • Share date/time configurations for organizations
  • Still usable offline for recordings (instead of just for live streams)
  • Easier to set up than fiddling with custom CSS
  • More separated from presenter project, thus other content creators may feel like they can use it in their live streams
• This webpage method is inferior for the following reasons
  • Have to open a browser and go to a website to create your datetime string, adds a little friction (unless linking to it anyways in settings/overlay)
  • Cannot access the datetime across the network, it is a local file (which itself could be shared with a USB drive, but ideally, given this downside, the second user should be able to quickly generate their own webpages for date/time)

Each generated website should offer

• moment.js string (e.g. dddd => Thursday, LT => 7:03 AM, lll => Oct 29, 2020 7:04 AM)
• instructions on how to use it
• customizations for fontSize, color, textAlign, fontFamily, etc.
• generate/download button with pre-designated but customizable file name