From 995b4756c09651fde6074bf33be8db6d0df550a2 Mon Sep 17 00:00:00 2001
From: Dani Palou <dani@moodle.com>
Date: Tue, 24 May 2022 11:02:30 +0200
Subject: [PATCH] MOBILE-4082 video: Fix subtitles wider than video

---
 src/core/directives/external-content.ts | 7 ++-----
 src/theme/theme.base.scss               | 5 +++++
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/core/directives/external-content.ts b/src/core/directives/external-content.ts
index 908f9ada7..53272d158 100644
--- a/src/core/directives/external-content.ts
+++ b/src/core/directives/external-content.ts
@@ -29,7 +29,6 @@ import { CoreFilepool, CoreFilepoolFileActions, CoreFilepoolFileEventData } from
 import { CoreSites } from '@services/sites';
 import { CoreUrlUtils } from '@services/utils/url';
 import { CoreUtils } from '@services/utils/utils';
-import { Platform } from '@singletons';
 import { CoreLogger } from '@singletons/logger';
 import { CoreError } from '@classes/errors/error';
 import { CoreSite } from '@classes/site';
@@ -304,12 +303,10 @@ export class CoreExternalContentDirective implements AfterViewInit, OnChanges, O
                         return;
                     }
 
-                    const line = Platform.is('tablet') || CoreApp.isAndroid() ? 90 : 80;
                     // Position all subtitles to a percentage of video height.
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    Array.from(track.cues).forEach((cue: any) => {
+                    Array.from(track.cues).forEach((cue: VTTCue) => {
                         cue.snapToLines = false;
-                        cue.line = line;
+                        cue.line = 90;
                         cue.size = 100; // This solves some Android issue.
                     });
                     // Delete listener.
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index d2d550b9a..7170248ca 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -1725,3 +1725,8 @@ ion-header.no-title {
         bottom: 0;
     }
 }
+
+// Fix subtitles wider than video.
+video::-webkit-media-text-track-display {
+    white-space: normal !important;
+}