From abfc14d745f25db354b606bfc094f2588857df8f Mon Sep 17 00:00:00 2001 From: Bill Thornton Date: Tue, 22 Apr 2025 02:37:12 -0400 Subject: [PATCH] Update subtitle position styling (#6766) --- .../subtitlesettings/subtitleappearancehelper.js | 9 +++++---- src/plugins/htmlVideoPlayer/plugin.js | 10 ++++++++-- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/src/components/subtitlesettings/subtitleappearancehelper.js b/src/components/subtitlesettings/subtitleappearancehelper.js index 5f146056e..cfc0437b7 100644 --- a/src/components/subtitlesettings/subtitleappearancehelper.js +++ b/src/components/subtitlesettings/subtitleappearancehelper.js @@ -101,13 +101,14 @@ function getTextStyles(settings, preview) { if (!preview) { const pos = parseInt(settings.verticalPosition, 10); const lineHeight = 1.35; // FIXME: It is better to read this value from element - const line = Math.abs(pos * lineHeight); if (pos < 0) { - list.push({ name: 'min-height', value: `${line}em` }); + const margin = Math.abs(pos + 1) * lineHeight; + list.push({ name: 'margin-bottom', value: `${margin}em` }); list.push({ name: 'margin-top', value: '' }); } else { - list.push({ name: 'min-height', value: '' }); - list.push({ name: 'margin-top', value: `${line}em` }); + const margin = pos * lineHeight; + list.push({ name: 'margin-bottom', value: '' }); + list.push({ name: 'margin-top', value: `${margin}em` }); } } diff --git a/src/plugins/htmlVideoPlayer/plugin.js b/src/plugins/htmlVideoPlayer/plugin.js index 5afc9d182..4b6e0c9a7 100644 --- a/src/plugins/htmlVideoPlayer/plugin.js +++ b/src/plugins/htmlVideoPlayer/plugin.js @@ -1532,10 +1532,16 @@ export class HtmlVideoPlayer { // in safari, the cues need to be added before setting the track mode to showing for (const trackEvent of data.TrackEvents) { const TrackCue = window.VTTCue || window.TextTrackCue; - const cue = new TrackCue(trackEvent.StartPositionTicks / 10000000, trackEvent.EndPositionTicks / 10000000, normalizeTrackEventText(trackEvent.Text, false)); + const text = normalizeTrackEventText(trackEvent.Text, false); + const cue = new TrackCue(trackEvent.StartPositionTicks / 10000000, trackEvent.EndPositionTicks / 10000000, text); if (cue.line === 'auto') { - cue.line = cueLine; + if (cueLine < 0) { + const lineCount = (text.match(/\n/g) || []).length; + cue.line = cueLine - lineCount; + } else { + cue.line = cueLine; + } } trackElement.addCue(cue);