[FIXED] Incorrect subtitle positioning on the web client HTML player

[Protected 86]

EDIT: Fixed in vanilla as of 4.9.*!

I spotted another issue which I suspect correlates with some previous reports.

A lot of .ASS subtitle features make use of positioning and as such expect the subtitle canvas to overlay the video canvas. This is currently only true if the webpage body has the same aspect ratio as the video being played, which might be true for example if the video is a 16:9 video (most are) playing fullscreen on a 16:9 device.

Otherwise, the video will touch the video element from the inside and black bars will appear to fill the remaining space (as they should). But Emby will happily use a subtitle canvas with variable dimensions covering the whole page body. This will place the subtitles incorrectly and break the video playback in various ways (see attachments).

The problem is especially noticeable if the web application body has a portrait aspect ratio, since the "horizontally centered" nature of most subtitles will disguise the problem in landscape mode (some things will still break).

To fix the problem, in modules/htmlvideoplayer/plugin.js I added some code to resetVideoRendererSize . There is already some code there, but as far as I can tell it will never run, since it requires currentAssRenderer to exist, and it never does in this scope?

Here's the size fix:

            let subtitles = self.currentSubtitlesOctopus;
            let video = self._mediaElement;
            let aspectRatio = video.videoWidth / video.videoHeight;
            if (video.offsetWidth / video.offsetHeight > aspectRatio) {
                //Landscape
                let subWidth = video.offsetHeight * aspectRatio;
                subtitles.canvasParent.style.left = `${(video.offsetWidth - subWidth) / 2}px`;
                subtitles.canvasParent.style.top = 0;
                subtitles.canvasParent.style.width = `${subWidth}px`;
                subtitles.canvasParent.style.height = `${video.offsetHeight}px`;
            } else {
                //Portrait
                let subHeight = video.offsetWidth / aspectRatio;
                subtitles.canvasParent.style.left = 0;
                subtitles.canvasParent.style.top = `${(video.offsetHeight - subHeight) / 2}px`;
                subtitles.canvasParent.style.width = `${video.offsetWidth}px`;
                subtitles.canvasParent.style.height = `${subHeight}px`;
            }

This is not necessarily the most efficient possible fix but it does the trick.

Edited April 21, 2025 by Protected

[Luke 42077]

Hi, but it will call subtitlesOctopus.resize(), therefore I think any changes should be in there.

[Protected 86]

I see what you mean now. Sneaky.

I guess you're right, to prevent a pointless incorrect resize you should apply the fix there instead.