fix(subtitles): Styles. #15043
fix(subtitles): Styles. #15043
Conversation
hristoterezov
commented
Aug 22, 2024
hristoterezov
commented
- Move the styles from css to tss-react ones
- Dynamic fontSize based on the visible area of the page
- Remove the gaps in the background when a line is wrapped.
- Change the text color to white.
- Remove transparency.
| */ | ||
| export function calculateSubtitlesFontSize(clientHeight?: number) { | ||
| if (typeof clientHeight === 'undefined') { | ||
| return 16; |
There was a problem hiding this comment.
Extract to a constant since it's used in 2 places here?
| 1px 0px 1px rgba(0,0,0,0.3), | ||
| 0px 0px 1px rgba(0,0,0,0.3)`, | ||
| transform: 'translateX(-50%)', | ||
| zIndex: 7, |
There was a problem hiding this comment.
Why 7? Is it relative to something? A comment explaining woould help.
There was a problem hiding this comment.
Probably. Now the thing is this is a copy paste of the css :)
There was a problem hiding this comment.
Do you insist on reviewing all z-indexes so that we can write what do we want to cover?
If we are doing this wouldn't it be more beneficial, to review all zIndex levels, to define all z-index levels as variables with meaningful names and comments?
There was a problem hiding this comment.
Added a comment for now
|
|
||
| return { | ||
| transcriptionSubtitles: { | ||
| bottom: _isLifted ? `${toolbarSize + 36 + 40}px` : `${toolbarSize + 40}px`, |
There was a problem hiding this comment.
Where do those 36 and 40 come from?
There was a problem hiding this comment.
ditto.
For 36 I guess the intention was to lift it for the label for the on stage participant's name. Will add a comment or something.
For 40 I can only guess this only the desired padding...
There was a problem hiding this comment.
Now I see that this whole thing is kind of dependent on the onstage participant display name badge, which uses the theme. I'll move those in a common place and use it from there.
There was a problem hiding this comment.
This should be fixed now. both stage participant display name badge and the captions are using the same thing from a generic function which uses the theme.
hristoterezov
force-pushed
the
transcriptions_styles
branch
from
29f7f35
to
9548504
Compare
- Move the styles from css to tss-react ones - Dynamic fontSize based on the visible area of the page - Remove the gaps in the background when a line is wrapped. - Change the text color to white. - Remove transparency.
hristoterezov
force-pushed
the
transcriptions_styles
branch
from
9548504
to
f1d4b50
Compare
