Display time "moves" during time update

[pietrop]

Describe the bug

To Reproduce

• Load a transcript and click play
• watch the display time

Expected behavior

expect it not to move

Screenshots

Additional context

Might be a quick CSS fix?

[pietrop]

Can’t reproduce in demo app, This might be a problem when component is used in another react app (which is where this issue was observed). Might be issue with CSS height/width of parent component(?)

[pietrop]

closing this, as CSS has moved on since, but can be reopened if anyone comes across it

[pietrop]

Added the component to an app with React bootstrap and seems like the bug is not gone?
Altho it doesn't show up in the demo app.

[Gribbs]

I also see the same behavior when adding the component to a different App

[bevand10]

You need to use a monospace font to avoid movement.

[pietrop]

ok, thanks @Gribbs and @bevand10, so a fix could be to add a monospace font-family to PlayerControls.module.css such as

...
.currentTime {
   ...
  font-family: 'Lucida Console',  monospace;
}

.duration {
  ...
  font-family: 'Lucida Console',  monospace;
}

This

Don't want to get into fonts and UI details, but I am not sure tho how this will work, for example when adding into a parent app where we have BBC Reith fonts. Because of css specificity rules currentTime and duration might stick to mono and not pick up the Reith font, and might stand out as being of a different font.

Just thinking out loud if there's a quick fix for this (cc @jamesdools ).

[bevand10]

The point with timecode display is that is should always be monospace.

Even in a BBC scenario where Reith is used elsewhere, it should still be a monospace font otherwise it'll bounce around just as it does now - Reith does not have a monospace variant.

It's because, to avoid horizontal movement, the width of 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 and : must be identical.

[pietrop]

Awesome, thanks for clarifying that @bevand10
closing this issue it has been addressed in the "monorepo refactor" branch #130