add options for using fallback fonts

src/controllers/dashboard/encodingsettings.js

@@ -13,6 +13,8 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
         $('#txtDownMixAudioBoost', page).val(config.DownMixAudioBoost);
         page.querySelector('.txtEncoderPath').value = config.EncoderAppPathDisplay || '';
         $('#txtTranscodingTempPath', page).val(systemInfo.TranscodingTempPath || '');
+        page.querySelector('#txtFallbackFontPath').value = config.FallbackFontPath || '';
+        page.querySelector('#chkEnableFallbackFont').checked = config.EnableFallbackFont;
         $('#txtVaapiDevice', page).val(config.VaapiDevice || '');
         page.querySelector('#selectEncoderPreset').value = config.EncoderPreset || '';
         page.querySelector('#txtH264Crf').value = config.H264Crf || '';
@@ -56,6 +58,8 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
             ApiClient.getNamedConfiguration('encoding').then(function (config) {
                 config.DownMixAudioBoost = $('#txtDownMixAudioBoost', form).val();
                 config.TranscodingTempPath = $('#txtTranscodingTempPath', form).val();
+                config.FallbackFontPath = form.querySelector('#txtFallbackFontPath').value;
+                config.EnableFallbackFont = form.querySelector('#chkEnableFallbackFont').checked;
                 config.EncodingThreadCount = $('#selectThreadCount', form).val();
                 config.HardwareAccelerationType = $('#selectVideoDecoder', form).val();
                 config.VaapiDevice = $('#txtVaapiDevice', form).val();
@@ -181,6 +185,24 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
                 });
             });
         });
+        $('#btnSelectFallbackFontPath', page).on('click.selectDirectory', function () {
+            require(['directorybrowser'], function (directoryBrowser) {
+                var picker = new directoryBrowser();
+                picker.show({
+                    includeFiles: true,
+                    includeDirectories: true,
+                    callback: function (path) {
+                        if (path) {
+                            page.querySelector('#txtFallbackFontPath').value = path;
+                        }
+
+                        picker.close();
+                    },
+                    header: globalize.translate('HeaderSelectFallbackFontPath'),
+                    instruction: globalize.translate('HeaderSelectFallbackFontPathHelp')
+                });
+            });
+        });
         $('.encodingSettingsForm').off('submit', onSubmit).on('submit', onSubmit);
     }).on('pageshow', '#encodingSettingsPage', function () {
         loading.show();

src/encodingsettings.html

@@ -125,6 +125,22 @@
                     </div>
                     <div class="fieldDescription">${LabelTranscodingTempPathHelp}</div>
                 </div>
+                <div class="inputContainer">
+                    <div style="display: flex; align-items: center;">
+                        <div style="flex-grow:1;">
+                            <input is="emby-input" id="txtFallbackFontPath" label="${LabelFallbackFontPath}" autocomplete="off" />
+                        </div>
+                        <button type="button" is="paper-icon-button-light" id="btnSelectFallbackFontPath" class="emby-input-iconbutton"><span class="material-icons search"></span></button>
+                    </div>
+                    <div class="fieldDescription">${LabelFallbackFontPathHelp}</div>
+                </div>
+                <div class="checkboxContainer checkboxContainer-withDescription">
+                    <label>
+                        <input is="emby-checkbox" type="checkbox" id="chkEnableFallbackFont" />
+                        <span>${EnableFallbackFont}</span>
+                    </label>
+                    <div class="fieldDescription checkboxFieldDescription">${EnableFallbackFontHelp}</div>
+                </div>
                 <div class="inputContainer">
                     <input is="emby-input" type="number" id="txtDownMixAudioBoost" pattern="[0-9]*" required="required" min=".5" max="3" step=".1" label="${LabelDownMixAudioScale}" />
                     <div class="fieldDescription">${LabelDownMixAudioScaleHelp}</div>

src/plugins/htmlVideoPlayer/plugin.js

@@ -1066,14 +1066,20 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
         }
 
         function renderSsaAss(videoElement, track, item) {
+            var avaliableFonts = new Array();
             var attachments = self._currentPlayOptions.mediaSource.MediaAttachments || [];
+            attachments.map(function (i) {
+                // embedded font url
+                return avaliableFonts.push(i.DeliveryUrl);
+            });
             var apiClient = connectionManager.getApiClient(item);
+            var fallbackFont = apiClient.getUrl('/FallbackFont/Font', {
+                api_key: apiClient.accessToken()
+            });
             var options = {
                 video: videoElement,
                 subUrl: getTextTrackUrl(track, item),
-                fonts: attachments.map(function (i) {
+                fonts: avaliableFonts,
-                    return apiClient.getUrl(i.DeliveryUrl);
-                }),
                 workerUrl: appRouter.baseUrl() + '/libraries/subtitles-octopus-worker.js',
                 legacyWorkerUrl: appRouter.baseUrl() + '/libraries/subtitles-octopus-worker-legacy.js',
                 onError: function() {
@@ -1094,8 +1100,14 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
                 renderAhead: 90
             };
             require(['JavascriptSubtitlesOctopus'], function(SubtitlesOctopus) {
+                apiClient.getNamedConfiguration('encoding').then(function (config) {
+                    if (config.EnableFallbackFont) {
+                        avaliableFonts.push(fallbackFont);
+                    }
+
                     currentSubtitlesOctopus = new SubtitlesOctopus(options);
                 });
+            });
         }
 
         function requiresCustomSubtitlesElement() {

src/strings/en-us.json

@@ -1565,5 +1565,11 @@
     "ButtonCast": "Cast",
     "ButtonPlayer": "Player",
     "StopPlayback": "Stop playback",
-    "ClearQueue": "Clear queue"
+    "ClearQueue": "Clear queue",
+    "HeaderSelectFallbackFontPath" : "Select Fallback Font File Path",
+    "HeaderSelectFallbackFontPathHelp": "Browse or enter the path of the fallback font file to use for rendering ASS/SSA subtitles.",
+    "LabelFallbackFontPath": "Fallback font file path:",
+    "LabelFallbackFontPathHelp": "Specify a custom path of the fallback font file to use for rendering ASS/SSA subtitles. The maximum allowed size is 10 Megabytes. It is recommended to use the lightweight and web-friendly woff2 format font. Leave it blank unless the font is rendered incorrectly.",
+    "EnableFallbackFont" : "Enable fallback fonts",
+    "EnableFallbackFontHelp" : "Enable custom alternate fonts. This can avoid the problem of incorrect subtitle rendering."
 }

src/strings/zh-cn.json

@@ -1578,5 +1578,11 @@
     "ClearQueue": "清空队列",
     "StopPlayback": "停止播放",
     "Writers": "作者",
-    "ViewAlbumArtist": "查看专辑艺术家"
+    "ViewAlbumArtist": "查看专辑艺术家",
+    "HeaderSelectFallbackFontPath" : "选择备用字体路径",
+    "HeaderSelectFallbackFontPathHelp": "浏览或输入一个备用字体文件的路径用于渲染 ASS/SSA 字幕。",
+    "LabelFallbackFontPath": "备用字体文件路径：",
+    "LabelFallbackFontPathHelp": "指定一个备用字体文件用于渲染 ASS/SSA 字幕。允许的最大字体容量为 10 MB。推荐使用轻量且适合网络传输的 woff2 格式字体。除非字体显示不正确，否则将其留空。",
+    "EnableFallbackFont" : "启用备用字体",
+    "EnableFallbackFontHelp" : "使用自定义的备用字体。这可以避免一些字幕渲染不正确的问题。"
 }