Update subtitle position styling (#6766)

Author: thornbill

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` });
         }
     }
 

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);