Option to show both transcription and translation on one overlay

[preeefix]

Migrating from another solution since this seems much snappier.

Currently in order to show both the untranslated transcription, and the translation, I have to have two browser sources.

I have the sources stacked with ~1 line of buffer between the two, but that take a lot of screen space.

[steveseguin]

would you want a fixed number of lines for each? The text on top will jump around a lot otherwise

[preeefix]

My previous solution used center pinning between the two, with a buffer below the bottom of the page. Good enough for ~2 lines of text, which is good for just about anything except a monologue.

[steveseguin]

Dual overlay mode is now live.

Load overlay.html with any translate flag plus &dual (or view=dual) and the overlay will stack the translated line on top of the original transcript inside a single browser source, using compact spacing so the height stays close to the old single-line layout

eg: https://caption.ninja/overlay?room=XXXXXX&translate=fr&dual

Spacing and such I can change as needed; feel free to include a diagram if you want it done in a specific way