Issue 626 - Media playback criterion change

[airimovici]

https://github.com/mozilla-frontend-infra/firefox-health-dashboard/issues/626

[airimovici]

I also added some visual changes in this PR:

• fixed the loading spinner not to be overlapped with the next component
• added spacing for the titles, not to overlap with the results anymore

[airimovici]

@klahnakoski I didn't change the special sizes we had defined:

const SPECIAL_SIZES = [
  { id: '480p30', label: '480p' }, // .4M pixels
  { id: '720p60', label: '720p' }, // 1M pixels
  { id: '1080p60', label: '1080p' }, // 2M pixels
  { id: '1440p60', label: '1440p' }, // 4M pixels
  { id: '2160p60', label: '2160p' }, // 8M pixels

But in the issue description there is this:

The media plackback should color according to:

• greater than 1 dropped frame for 1080p 30fps (or smaller, or slower) - RED
• greater than 1 dropped from on all others - YELLOW

Did you mean there 1080p 60fps? The criterion change I did in this PR considers the first 3 sizes (480p30, 720p60, 1080p60) from the above SPECIAL_SIZES as "small sizes" and colors them red according to the criterion above.

My question is: Should 1080p60 be considered under the line in the criterion and can be colored RED also, or is it over the line and can be colored at maximum YELLOW?

[klahnakoski]

I was specifically not meaning 1080p 60fps.,it is too fast. I think all 60fps will be considered fast, no matter how small the resolution.

[airimovici]

In this case we need to change the SPECIAL_SIZES definition to include only results for 30fps on the tests we are interested in:

const SPECIAL_SIZES = [
  { id: '480p30', label: '480p' }, // .4M pixels
  { id: '720p30', label: '720p' }, // 1M pixels
  { id: '1080p30', label: '1080p' }, // 2M pixels
  { id: '1440p30', label: '1440p' }, // 4M pixels
  { id: '2160p30', label: '2160p' }, // 8M pixels
]

[airimovici]

I changed the config to have the data if a size is considered small and a speed is considered slow and now we get them like that.

const SMALL_SIZES = selectFrom(SPECIAL_SIZES).where({ isSmall: true }).select('id').toArray();
const SLOW_SPEEDS = selectFrom(SPEEDS).where({ isSlow: true }).select('speed').toArray();