-
Notifications
You must be signed in to change notification settings - Fork 88
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #679 from bitmovin/feature/subtitle-styling-edgeco…
…lor-fontstyle Support for customizing the font style and character edge color of subtitles/captions
- Loading branch information
Showing
13 changed files
with
207 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
57 changes: 57 additions & 0 deletions
57
src/ts/components/subtitlesettings/characteredgecolorselectbox.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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-subtitle-settings-character-edge-color-select-box'], | ||
| }, 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); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| 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 font styles. | ||
| * | ||
| * @category Components | ||
| */ | ||
| export class FontStyleSelectBox extends SubtitleSettingSelectBox { | ||
|
|
||
| constructor(config: SubtitleSettingSelectBoxConfig) { | ||
| super(config); | ||
|
|
||
| this.config = this.mergeConfig(config, { | ||
| cssClasses: ['ui-subtitle-settings-font-style-select-box'], | ||
| }, this.config); | ||
| } | ||
|
|
||
| configure(player: PlayerAPI, uimanager: UIInstanceManager): void { | ||
| super.configure(player, uimanager); | ||
|
|
||
| this.addItem(null, i18n.getLocalizer('default')); | ||
| this.addItem('italic', i18n.getLocalizer('settings.subtitles.font.style.italic')); | ||
| this.addItem('bold', i18n.getLocalizer('settings.subtitles.font.style.bold')); | ||
|
|
||
| this.settingsManager?.fontStyle.onChanged.subscribe((sender, property) => { | ||
| if (property.isSet()) { | ||
| this.toggleOverlayClass('fontstyle-' + property.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) => { | ||
| if (this.settingsManager) { | ||
| this.settingsManager.fontStyle.value = key; | ||
| } | ||
| }); | ||
|
|
||
| // Load initial value | ||
| if (this.settingsManager?.fontStyle.isSet()) { | ||
| this.selectItem(this.settingsManager.fontStyle.value); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters