From 4c16904df9b280168eab08a55c2b9507c97fdef1 Mon Sep 17 00:00:00 2001
From: inbalvasserman <55684552+inbalvasserman@users.noreply.github.com>
Date: Wed, 22 May 2024 14:06:47 +0300
Subject: [PATCH] fix(SUP-42112): Advanced Caption Settings not working in iOS
 (#773)

issue:
in advances captions settings for ios change background color and change
font size didn't applied

solution:
add font-size to css attribute
add background using gradient (due to known issue in ios) to css
attribute


resolve [SUP-42112](https://kaltura.atlassian.net/browse/SUP-42112)

[SUP-42112]:
https://kaltura.atlassian.net/browse/SUP-42112?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
---
 src/track/external-captions-handler.ts | 2 +-
 src/track/text-style.ts                | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/track/external-captions-handler.ts b/src/track/external-captions-handler.ts
index 53f25764..f407a674 100644
--- a/src/track/external-captions-handler.ts
+++ b/src/track/external-captions-handler.ts
@@ -32,7 +32,7 @@ const VTT_POSTFIX: string = 'vtt';
 class ExternalCaptionsHandler extends FakeEventTarget {
 
   public static applyNativeTextTrackStyles(sheet: CSSStyleSheet, styles: TextStyle, containerId: string, engineClassName: string): void {
-    sheet.insertRule(`#${containerId} video.${engineClassName}::-webkit-media-text-track-display { text-align: ${styles.textAlign}!important; }`, 0);
+    sheet.insertRule(`#${containerId} video.${engineClassName}::-webkit-media-text-track-display { ${styles.webkitTextCSS()} }`, 0);
     sheet.insertRule(`#${containerId} video.${engineClassName}::cue { ${styles.toCSS()} }`, 0);
   }
 
diff --git a/src/track/text-style.ts b/src/track/text-style.ts
index 4fb7b4d0..a9df0233 100644
--- a/src/track/text-style.ts
+++ b/src/track/text-style.ts
@@ -284,10 +284,17 @@ class TextStyle {
     attributes.push('font-family: ' + this.fontFamily);
     attributes.push('color: ' + TextStyle.toRGBA(this.fontColor, this.fontOpacity));
     attributes.push('background-color: ' + TextStyle.toRGBA(this.backgroundColor, this.backgroundOpacity));
+    attributes.push('font-size: ' + this.fontSize);
     attributes.push('text-shadow: ' + this.getTextShadow());
     return attributes.join('!important; ');
   }
 
+  public webkitTextCSS(): string {
+    const attributes: Array<string> = [];
+    attributes.push('text-align: ' + this.textAlign);
+    attributes.push(`background: linear-gradient(0deg, ${TextStyle.toRGBA(this.backgroundColor, this.fontOpacity)}, ${TextStyle.toRGBA(this.backgroundColor, this.fontOpacity)})`);
+    return attributes.join('!important; ');
+  }
   /**
    * clones the textStyle object
    * @returns {TextStyle} the cloned textStyle object