Root DIV element used for captions has wrong size and location

Created by: Gontran-Molotov

• Dash.js version: 2.6.2

Screenshots below show that the root div element used to display captions (highlighted in blue) has a wrong size and location.

This first screenshot shows that the root div element has an incorrect left position set to 0. So it is not horizontally aligned with the video. Its width is the same as the width of the video, but its height is smaller.

This second screenshot shows that the root div element has an incorrect top position set to 0. So it is not vertically aligned with the video. Its height is correct but not its width.

The top, left, width and height values seems to be computed by the getVideoVisibleVideoSize() method from the src/streaming/text/TextTracks.js: https://github.com/Dash-Industry-Forum/dash.js/blob/development/src/streaming/text/TextTracks.js#L184

One possible fix would be to replace lines 205 to 215 by:

        if (videoPictureAspect > aspectRatio) {
            videoPictureHeightAspect = videoPictureHeight;
            videoPictureWidthAspect = videoPictureHeight * aspectRatio;
        } else {
            videoPictureWidthAspect = videoPictureWidth;
            videoPictureHeightAspect = videoPictureWidth / aspectRatio;
        }
        videoPictureXAspect = (viewWidth - videoPictureWidthAspect) / 2;
        videoPictureYAspect = (viewHeight - videoPictureHeightAspect) / 2;

Then in the checkVideoSize() method which calls getVideoVisibleVideoSize() (in the same file), replace line 237 by:

        let aspectRatio =  videoWidth / videoHeight;

That fixes the problem for my use cases, but as I don't have the full picture about how dash.js processes captions, it should be check that it does not cause other bugs elsewhere.