ChadBailey
commented
4 years ago Short Answer
Target Audience: Non-developers seeking a solid straight forward answer
This appears to be an architecture oversight, so a fix may not happen quickly unless we get lucky and someone has enough time to invest in overhauling the code.
The good news is, this really does need to happen so I don't think we should ignore due to perceived difficulty.
Long Answer
Target Audience: Developers or non-developers seeking a more in depth understanding of the problem
Foreword
Hindsight is 20/20... Don't feel like re-writing the below, but noticed I poised this incorrectly. I feel I came across as if I were certain about the issue and solution, but in reality I'm far from an expert in HTML/CSS/JS, so I may be responding out of some misunderstandings or incorrect assumptions.
Explanation
Unfortunately, this is a byproduct of the combination of 2 architectures. The primary architecture at play is called a shadow root. The shadow root was introduced to HTML/CSS to provide better encapsulation of the elements so that styling and other types of mutations within that shadow root don't "bleed" out into the rest of the page.
The reason allowing things to "bleed" out into the other elements is a problem is because inclusion of someone else's code (maybe it was an embedded script, or perhaps you have multiple development teams making different components so they may accidentally call something the same thing). The shadow root was created to solve all of this.
In this case the designers of the website have decided they would like to use shadow roots to structure their website. Now that this has happened, there's a chance that something exists at a higher layer than the shadow root that contains the video obscuring the element. This causes your mouse click to be intercepted by the above layered element. Since the entire point of shadow roots is to not allow things to "bust out" of them, there is no possible way to place the controller above this blocking element - it's against the intentional design of the browser.
I did mention there was 2 architectures at play here. The second one is the design of VSC itself. It attaches the floating controller to the video itself at its location in the DOM. Ironically, it is using a shadow root itself though that isn't related to the aforementioned issues because the element containing the shadow root is set to max z-index. The problem is, if the parent video to the controller's controller is found within a shadow root the maximum allowable z-index will be the z-index of the shadow root that it's already in. For example, a shadow root with a z-index of 1 can have an element within it set to 999, but that will only impact z ordering within the shadow root, outside of the shadow root the element with a z-index of 999 will remain with a calculated z-index of 1.
In order to get around this limitation, we probably need to redesign the way the controller is added to the DOM, perhaps making a top-most container (similar to how modals are designed - as the controller itself is essentially a modal) to add all controller instances to. When scanning the DOM for video elements, the X and Y coordinates of the video will be discovered and a controller would be placed in the top-most container at the same coordinates rather than imbedding at the same place the video resides in the DOM. This would guarantee the controller would always* be accessible and not obscured by any other element.
*I suppose it's possible that something else could be at max z-index, so perhaps even better would be to leverage this behavior by moving the entire DOM into a shadow root that's 1 z-index below the controller container
Long story short, this means there is no currently obvious simple solution.
Nyanpasu1
Hi. Thanks so much for a great tool. Problem is that the controls are hidden behind several layers of stuff on the xfinity player screen. Possible solution: allow for a new setting to allow for the controls UI to live in different places. Another issue with xfinity is the transparent layer they put in front. Perhaps a keystroke to make the control the front layer??
Thanks!