Feat: change subtitle character edge color

CHANGELOG.md

@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Added
 - Support for changing the font style of subtitles and closed captions
+- Support for changing the edge color of characters of subtitles and closed captions
 
 ## [3.83.0] - 2025-01-14
 

src/scss/skin-modern/_mixins.scss

@@ -144,3 +144,19 @@
     outline: none;
   }
 }
+
+/// Replace `$search` with `$replace` in `$string`. From https://css-tricks.com/snippets/sass/str-replace-function/
+/// @author Kitty Giraudel
+/// @param {String} $string - Initial string
+/// @param {String} $search - Substring to replace
+/// @param {String} $replace ('') - New value
+/// @return {String} - Updated string
+@function str-replace($string, $search, $replace: '') {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}

src/scss/skin-modern/components/subtitlesettings/_subtitleoverlay-settings.scss

@@ -23,10 +23,10 @@
 
   $character-edges: (
     'none': 'none',
-    'raised': '0px 0px 4px rgba(0, 0, 0, 0.9), 0px 1px 4px rgba(0, 0, 0, 0.9), 0px 2px 4px rgba(0, 0, 0, 0.9)',
-    'depressed': 'rgba(0, 0, 0, 0.8) 0px -2px 1px',
-    'uniform': '-2px 0px 1px rgba(0, 0, 0, 0.8), 2px 0px 1px rgba(0, 0, 0, 0.8), 0px -2px 1px rgba(0, 0, 0, 0.8), 0px 2px 1px rgba(0, 0, 0, 0.8), -1px 1px 1px rgba(0, 0, 0, 0.8), 1px 1px 1px rgba(0, 0, 0, 0.8), 1px -1px 1px rgba(0, 0, 0, 0.8), 1px 1px 1px rgba(0, 0, 0, 0.8)',
-    'dropshadowed': ' 0px 2px 1px rgba(0, 0, 0, 0.8)',
+    'raised': '0px 0px 4px $COLOR$, 0px 1px 4px $COLOR$, 0px 2px 4px $COLOR$',
+    'depressed': '$COLOR$ 0px -2px 1px',
+    'uniform': '-2px 0px 1px $COLOR$, 2px 0px 1px $COLOR$, 0px -2px 1px $COLOR$, 0px 2px 1px $COLOR$, -1px 1px 1px $COLOR$, 1px 1px 1px $COLOR$, 1px -1px 1px $COLOR$, 1px 1px 1px $COLOR$',
+    'dropshadowed': ' 0px 2px 1px $COLOR$',
   );
 
   $font-sizes: (
@@ -79,11 +79,13 @@
     }
   }
 
-  // Font character edge
-  @each $name, $value in $character-edges {
-    &.#{$prefix}-characteredge-#{$name} {
-      .#{$prefix}-ui-subtitle-label {
-        text-shadow: unquote($value);
+  // Font character edge and character edge color
+  @each $color-name, $color-value in $colors {
+    @each $name, $value in $character-edges {
+      &.#{$prefix}-characteredge-#{$name}-#{$color-name} {
+        .#{$prefix}-ui-subtitle-label {
+          text-shadow: unquote(str-replace($value, '$COLOR$', $color-value));
+        }
       }
     }
   }

src/ts/components/subtitlesettings/characteredgecolorselectbox.ts

@@ -0,0 +1,57 @@
+import { SubtitleSettingSelectBox, SubtitleSettingSelectBoxConfig } from './subtitlesettingselectbox';
+import { UIInstanceManager } from '../../uimanager';
+import { PlayerAPI } from 'bitmovin-player';
+import { i18n } from '../../localization/i18n';
+
+/**
+ * A select box providing a selection of different character edge colors.
+ *
+ * @category Components
+ */
+export class CharacterEdgeColorSelectBox extends SubtitleSettingSelectBox {
+
+  constructor(config: SubtitleSettingSelectBoxConfig) {
+    super(config);
+
+    this.config = this.mergeConfig(config, {
+      cssClasses: ['ui-subtitlesettingscharacteredgecolorselectbox'],
+    }, this.config);
+  }
+
+  configure(player: PlayerAPI, uimanager: UIInstanceManager): void {
+    super.configure(player, uimanager);
+
+    this.addItem(null, i18n.getLocalizer('default'));
+    this.addItem('white', i18n.getLocalizer('colors.white'));
+    this.addItem('black', i18n.getLocalizer('colors.black'));
+    this.addItem('red', i18n.getLocalizer('colors.red'));
+    this.addItem('green', i18n.getLocalizer('colors.green'));
+    this.addItem('blue', i18n.getLocalizer('colors.blue'));
+    this.addItem('cyan', i18n.getLocalizer('colors.cyan'));
+    this.addItem('yellow', i18n.getLocalizer('colors.yellow'));
+    this.addItem('magenta', i18n.getLocalizer('colors.magenta'));
+
+    this.onItemSelected.subscribe((sender, key: string) => {
+      this.settingsManager.characterEdgeColor.value = key;
+
+      // Edge type and color go together, so we need to...
+      if (!this.settingsManager.characterEdgeColor.isSet()) {
+        // ... clear the edge type when the color is not set
+        this.settingsManager.characterEdge.clear();
+      } else if (!this.settingsManager.characterEdge.isSet()) {
+        // ... set a edge type when the color is set
+        this.settingsManager.characterEdge.value = 'uniform';
+      }
+    });
+
+    // Update selected item when value is set from somewhere else
+    this.settingsManager.characterEdgeColor.onChanged.subscribe((sender, property) => {
+      this.selectItem(property.value);
+    });
+
+    // Load initial value
+    if (this.settingsManager.characterEdgeColor.isSet()) {
+      this.selectItem(this.settingsManager.characterEdgeColor.value);
+    }
+  }
+}

src/ts/components/subtitlesettings/characteredgeselectbox.ts

@@ -27,20 +27,34 @@ export class CharacterEdgeSelectBox extends SubtitleSettingSelectBox {
     this.addItem('uniform', i18n.getLocalizer('settings.subtitles.characterEdge.uniform'));
     this.addItem('dropshadowed', i18n.getLocalizer('settings.subtitles.characterEdge.dropshadowed'));
 
-    this.settingsManager.characterEdge.onChanged.subscribe((sender, property) => {
-      if (property.isSet()) {
-        this.toggleOverlayClass('characteredge-' + property.value);
+    const setColorAndEdgeType = () => {
+      if (this.settingsManager.characterEdge.isSet() && this.settingsManager.characterEdgeColor.isSet()) {
+        this.toggleOverlayClass('characteredge-' + this.settingsManager.characterEdge.value + '-' + this.settingsManager.characterEdgeColor.value);
       } else {
         this.toggleOverlayClass(null);
       }
-
-      // Select the item in case the property was set from outside
-      this.selectItem(property.value);
-    });
+    }
 
     this.onItemSelected.subscribe((sender, key: string) => {
       this.settingsManager.characterEdge.value = key;
     });
+
+    this.settingsManager.characterEdge.onChanged.subscribe((sender, property) => {
+      // Edge type and color go together, so we need to...
+      if (!this.settingsManager.characterEdge.isSet()) {
+        // ... clear the color when the edge type is not set
+        this.settingsManager.characterEdgeColor.clear();
+      } else if (!this.settingsManager.characterEdgeColor.isSet()) {
+        // ... set a color when the edge type is set
+        this.settingsManager.characterEdgeColor.value = 'black';
+      }
+      this.selectItem(property.value);
+      setColorAndEdgeType();
+    });
+
+    this.settingsManager.characterEdgeColor.onChanged.subscribe(() => {
+      setColorAndEdgeType();
+    });    
 
     // Load initial value
     if (this.settingsManager.characterEdge.isSet()) {

src/ts/components/subtitlesettings/subtitlesettingsmanager.ts

@@ -9,6 +9,7 @@ interface SubtitleSettings {
   fontSize?: string;
   fontStyle?: string;
   characterEdge?: string;
+  characterEdgeColor?: string;
   backgroundColor?: string;
   backgroundOpacity?: string;
   windowColor?: string;
@@ -33,6 +34,7 @@ export class SubtitleSettingsManager {
     fontSize: new SubtitleSettingsProperty<string>(this),
     fontStyle: new SubtitleSettingsProperty<string>(this),
     characterEdge: new SubtitleSettingsProperty<string>(this),
+    characterEdgeColor: new SubtitleSettingsProperty<string>(this),
     backgroundColor: new SubtitleSettingsProperty<string>(this),
     backgroundOpacity: new SubtitleSettingsProperty<string>(this),
     windowColor: new SubtitleSettingsProperty<string>(this),
@@ -75,6 +77,10 @@ export class SubtitleSettingsManager {
     return this._properties.characterEdge;
   }
 
+  public get characterEdgeColor(): SubtitleSettingsProperty<string> {
+    return this._properties.characterEdgeColor;
+  }
+
   public get backgroundColor(): SubtitleSettingsProperty<string> {
     return this._properties.backgroundColor;
   }

src/ts/components/subtitlesettings/subtitlesettingspanelpage.ts

@@ -10,6 +10,7 @@ import {FontFamilySelectBox} from './fontfamilyselectbox';
 import {FontColorSelectBox} from './fontcolorselectbox';
 import {FontOpacitySelectBox} from './fontopacityselectbox';
 import {CharacterEdgeSelectBox} from './characteredgeselectbox';
+import {CharacterEdgeColorSelectBox} from './characteredgecolorselectbox';
 import {BackgroundColorSelectBox} from './backgroundcolorselectbox';
 import {BackgroundOpacitySelectBox} from './backgroundopacityselectbox';
 import {WindowColorSelectBox} from './windowcolorselectbox';
@@ -64,6 +65,9 @@ export class SubtitleSettingsPanelPage extends SettingsPanelPage {
         new SettingsPanelItem(i18n.getLocalizer('settings.subtitles.characterEdge'), new CharacterEdgeSelectBox({
           overlay: this.overlay,
         })),
+        new SettingsPanelItem(i18n.getLocalizer('settings.subtitles.characterEdge.color'), new CharacterEdgeColorSelectBox({
+          overlay: this.overlay,
+        })),
         new SettingsPanelItem(i18n.getLocalizer('settings.subtitles.background.color'), new BackgroundColorSelectBox({
           overlay: this.overlay,
         })),

src/ts/localization/languages/de.json

@@ -26,6 +26,7 @@
   "settings.subtitles.font.color": "Farbe",
   "settings.subtitles.font.opacity": "Deckkraft",
   "settings.subtitles.characterEdge": "Ränder",
+  "settings.subtitles.characterEdge.color": "Buchstabenrandfarbe",
   "settings.subtitles.background.color": "Hintergrundfarbe",
   "settings.subtitles.background.opacity": "Hintergrunddeckkraft",
   "settings.subtitles.window.color": "Hintergrundfarbe",

src/ts/localization/languages/en.json

@@ -29,6 +29,7 @@
   "settings.subtitles.characterEdge.depressed": "depressed",
   "settings.subtitles.characterEdge.uniform": "uniform",
   "settings.subtitles.characterEdge.dropshadowed": "drop shadowed",
+  "settings.subtitles.characterEdge.color": "Character edge color",
   "settings.subtitles.font.family": "Font family",
   "settings.subtitles.font.family.monospacedserif": "monospaced serif",
   "settings.subtitles.font.family.proportionalserif": "proportional serif",