Fix mouse time tooltip when moved to far right of progress bar

[PikachuEXE]

Description

Fix mouse time tooltip when moved to far right of progress bar

Linked issue: #7248

Specific Changes proposed

Please list the specific changes involved in this pull request.

Requirements Checklist

• Bug fixed
• If necessary, more likely in a feature request than a bug fix
  • Change has been verified in an actual browser (FreeTube dev version)
  • Unit Tests updated or fixed
  • Docs/guides updated
  • Example created (starter template on JSBin)
• Reviewed by Two Core Contributors

[welcome]

💖 Thanks for opening this pull request! 💖

Things that will help get your PR across the finish line:

• Run npm run lint -- --errors locally to catch formatting errors earlier.
• Include tests when adding/changing behavior.
• Include screenshots and animated GIFs whenever possible.

We get a lot of pull requests on this repo, so please be patient and we will get back to you as soon as we can.

[peepo5]

I have this problem too.

[gkatsev]

Unfortunately, this change basically reverts the change from #5773 which fixes #6726 and #1102.
With this change, if you set transform: scale(1.5) for example, the mouse tooltip positions don't align properly.
We'd love to get #7248 fixed but we wouldn't want it to break other usecases.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[phloxic]

Unfortunately, this change basically reverts the change from #5773 which fixes #6726 and #1102. With this change, if you set transform: scale(1.5) for example, the mouse tooltip positions don't align properly. We'd love to get #7248 fixed but we wouldn't want it to break other usecases.

@gkatsev - I can repro the alignment issues with 7.9.3, however it looks like the fix/reversal could be applied in current versions. I did some quick tests with v7.21.4 and v8.3.0 (patch applied) and transform: scale(1.5) and do not see the alignment issues.

[codecov]

Codecov Report

Merging #7308 (c5fdd46) into main (a8a5e02) will increase coverage by 2.90%.
The diff coverage is 0.00%.

@@            Coverage Diff             @@
##             main    #7308      +/-   ##
==========================================
+ Coverage   79.45%   82.36%   +2.90%     
==========================================
  Files         115      112       -3     
  Lines        7266     7483     +217     
  Branches     1746     1804      +58     
==========================================
+ Hits         5773     6163     +390     
+ Misses       1493     1320     -173     

Impacted Files	Coverage Δ
...s/control-bar/progress-control/progress-control.js	26.66% <0.00%> (ø)

... and 72 files with indirect coverage changes

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[phloxic]

@mister-ben, @gkatsev imho this is still needed.

[amtins]

@phloxic to help me understand, is the transform: scale(1.5) applied to the whole player?

.video-js {
  transform: scale(1.5);
}

[phloxic]

@amtins, thanks for insisting. Indeed I applied the scale to the tooltip instead of the container, duh. It did not help that with video.js in 9.3 I saw misaligned tooltips when scaling them. These do not appear in more recent versions, "fix" or no "fix".
So, yes, something is needed when the container is transformed, but also something is needed to avoid the tooltip sticking out on the right side, the same way as on the left side. This backout change helps with symmetric behaviour, but apparently brings back problem with transformed containers.
As an aside: When the container is scaled, the tooltip(s) may stick out both sides.