diff --git a/src/components/subtitlesettings/subtitleappearancehelper.js b/src/components/subtitlesettings/subtitleappearancehelper.js index 52a84bc2dc..6cd5440ea6 100644 --- a/src/components/subtitlesettings/subtitleappearancehelper.js +++ b/src/components/subtitlesettings/subtitleappearancehelper.js @@ -28,6 +28,16 @@ function getTextStyles(settings, preview) { break; } + switch (settings.textWeight || '') { + case 'bold': + list.push({ name: 'font-weight', value: 'bold' }); + break; + case 'normal': + default: + list.push({ name: 'font-weight', value: 'normal' }); + break; + } + switch (settings.dropShadow || '') { case 'raised': list.push({ name: 'text-shadow', value: '-1px -1px white, 0px -1px white, -1px 0px white, 1px 1px black, 0px 1px black, 1px 0px black' }); diff --git a/src/components/subtitlesettings/subtitlesettings.js b/src/components/subtitlesettings/subtitlesettings.js index 0342dddf4c..067d8f9e40 100644 --- a/src/components/subtitlesettings/subtitlesettings.js +++ b/src/components/subtitlesettings/subtitlesettings.js @@ -28,6 +28,7 @@ function getSubtitleAppearanceObject(context) { const appearanceSettings = {}; appearanceSettings.textSize = context.querySelector('#selectTextSize').value; + appearanceSettings.textWeight = context.querySelector('#selectTextWeight').value; appearanceSettings.dropShadow = context.querySelector('#selectDropShadow').value; appearanceSettings.font = context.querySelector('#selectFont').value; appearanceSettings.textBackground = context.querySelector('#inputTextBackground').value; @@ -53,6 +54,7 @@ function loadForm(context, user, userSettings, appearanceSettings, apiClient) { context.querySelector('#selectSubtitlePlaybackMode').dispatchEvent(new CustomEvent('change', {})); context.querySelector('#selectTextSize').value = appearanceSettings.textSize || ''; + context.querySelector('#selectTextWeight').value = appearanceSettings.textWeight || 'normal'; context.querySelector('#selectDropShadow').value = appearanceSettings.dropShadow || ''; context.querySelector('#inputTextBackground').value = appearanceSettings.textBackground || 'transparent'; context.querySelector('#inputTextColor').value = appearanceSettings.textColor || '#ffffff'; @@ -166,6 +168,7 @@ function embed(options, self) { options.element.querySelector('#selectSubtitlePlaybackMode').addEventListener('change', onSubtitleModeChange); options.element.querySelector('#selectTextSize').addEventListener('change', onAppearanceFieldChange); + options.element.querySelector('#selectTextWeight').addEventListener('change', onAppearanceFieldChange); options.element.querySelector('#selectDropShadow').addEventListener('change', onAppearanceFieldChange); options.element.querySelector('#selectFont').addEventListener('change', onAppearanceFieldChange); options.element.querySelector('#inputTextColor').addEventListener('change', onAppearanceFieldChange); diff --git a/src/components/subtitlesettings/subtitlesettings.template.html b/src/components/subtitlesettings/subtitlesettings.template.html index 7c41fcdad2..941cd937d9 100644 --- a/src/components/subtitlesettings/subtitlesettings.template.html +++ b/src/components/subtitlesettings/subtitlesettings.template.html @@ -72,6 +72,13 @@ +