From 86c87446e343eb10f388852f1d3e049efc0b6edd Mon Sep 17 00:00:00 2001 From: nyanmisaka Date: Fri, 24 Jul 2020 21:55:33 +0800 Subject: [PATCH 1/8] add options for using fallback fonts --- src/controllers/dashboard/encodingsettings.js | 22 +++++++++++++++++++ src/encodingsettings.html | 16 ++++++++++++++ src/plugins/htmlVideoPlayer/plugin.js | 20 +++++++++++++---- src/strings/en-us.json | 8 ++++++- src/strings/zh-cn.json | 8 ++++++- 5 files changed, 68 insertions(+), 6 deletions(-) diff --git a/src/controllers/dashboard/encodingsettings.js b/src/controllers/dashboard/encodingsettings.js index 0f54f9d70f..1e957171f3 100644 --- a/src/controllers/dashboard/encodingsettings.js +++ b/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(); diff --git a/src/encodingsettings.html b/src/encodingsettings.html index 858375b145..b0010e1d70 100644 --- a/src/encodingsettings.html +++ b/src/encodingsettings.html @@ -125,6 +125,22 @@
${LabelTranscodingTempPathHelp}
+
+
+
+ +
+ +
+
${LabelFallbackFontPathHelp}
+
+
+ +
${EnableFallbackFontHelp}
+
${LabelDownMixAudioScaleHelp}
diff --git a/src/plugins/htmlVideoPlayer/plugin.js b/src/plugins/htmlVideoPlayer/plugin.js index cc312bb956..36d35eac7b 100644 --- a/src/plugins/htmlVideoPlayer/plugin.js +++ b/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) { - return apiClient.getUrl(i.DeliveryUrl); - }), + fonts: avaliableFonts, workerUrl: appRouter.baseUrl() + '/libraries/subtitles-octopus-worker.js', legacyWorkerUrl: appRouter.baseUrl() + '/libraries/subtitles-octopus-worker-legacy.js', onError: function() { @@ -1094,7 +1100,13 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa renderAhead: 90 }; require(['JavascriptSubtitlesOctopus'], function(SubtitlesOctopus) { - currentSubtitlesOctopus = new SubtitlesOctopus(options); + apiClient.getNamedConfiguration('encoding').then(function (config) { + if (config.EnableFallbackFont) { + avaliableFonts.push(fallbackFont); + } + + currentSubtitlesOctopus = new SubtitlesOctopus(options); + }); }); } diff --git a/src/strings/en-us.json b/src/strings/en-us.json index c1ea50431d..8bd233c011 100644 --- a/src/strings/en-us.json +++ b/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." } diff --git a/src/strings/zh-cn.json b/src/strings/zh-cn.json index 0b2767fda3..cdd9319389 100644 --- a/src/strings/zh-cn.json +++ b/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" : "使用自定义的备用字体。这可以避免一些字幕渲染不正确的问题。" } From 7849f57f694f6563591e14607f35e12f159876da Mon Sep 17 00:00:00 2001 From: nyanmisaka Date: Wed, 29 Jul 2020 03:04:13 +0800 Subject: [PATCH 2/8] allows to use multiple fallback fonts --- src/controllers/dashboard/encodingsettings.js | 1 - src/plugins/htmlVideoPlayer/plugin.js | 17 +++++++++++++---- src/strings/en-us.json | 8 ++++---- src/strings/zh-cn.json | 4 ++-- 4 files changed, 19 insertions(+), 11 deletions(-) diff --git a/src/controllers/dashboard/encodingsettings.js b/src/controllers/dashboard/encodingsettings.js index 1e957171f3..47414e4c2b 100644 --- a/src/controllers/dashboard/encodingsettings.js +++ b/src/controllers/dashboard/encodingsettings.js @@ -189,7 +189,6 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo require(['directorybrowser'], function (directoryBrowser) { var picker = new directoryBrowser(); picker.show({ - includeFiles: true, includeDirectories: true, callback: function (path) { if (path) { diff --git a/src/plugins/htmlVideoPlayer/plugin.js b/src/plugins/htmlVideoPlayer/plugin.js index 36d35eac7b..a3e973840d 100644 --- a/src/plugins/htmlVideoPlayer/plugin.js +++ b/src/plugins/htmlVideoPlayer/plugin.js @@ -1073,7 +1073,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa return avaliableFonts.push(i.DeliveryUrl); }); var apiClient = connectionManager.getApiClient(item); - var fallbackFont = apiClient.getUrl('/FallbackFont/Font', { + var fallbackFontList = apiClient.getUrl('/FallbackFont/FontList', { api_key: apiClient.accessToken() }); var options = { @@ -1102,10 +1102,19 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa require(['JavascriptSubtitlesOctopus'], function(SubtitlesOctopus) { apiClient.getNamedConfiguration('encoding').then(function (config) { if (config.EnableFallbackFont) { - avaliableFonts.push(fallbackFont); + apiClient.getJSON(fallbackFontList).then(function (fontFiles) { + (fontFiles || []).map(function (font) { + var fontUrl = apiClient.getUrl('/FallbackFont/Font', { + name: font.Name, + api_key: apiClient.accessToken() + }); + return avaliableFonts.push(fontUrl); + }); + currentSubtitlesOctopus = new SubtitlesOctopus(options); + }); + } else { + currentSubtitlesOctopus = new SubtitlesOctopus(options); } - - currentSubtitlesOctopus = new SubtitlesOctopus(options); }); }); } diff --git a/src/strings/en-us.json b/src/strings/en-us.json index 8bd233c011..3e342bea1d 100644 --- a/src/strings/en-us.json +++ b/src/strings/en-us.json @@ -1566,10 +1566,10 @@ "ButtonPlayer": "Player", "StopPlayback": "Stop playback", "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.", + "HeaderSelectFallbackFontPath" : "Select Fallback Font Folder Path", + "HeaderSelectFallbackFontPathHelp": "Browse or enter the path of the fallback font folder to use for rendering ASS/SSA subtitles.", + "LabelFallbackFontPath": "Fallback font folder path:", + "LabelFallbackFontPathHelp": "Specify a path containing fallback font for rendering ASS/SSA subtitles. The maximum allowed total font size is 20 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." } diff --git a/src/strings/zh-cn.json b/src/strings/zh-cn.json index cdd9319389..24c18a0256 100644 --- a/src/strings/zh-cn.json +++ b/src/strings/zh-cn.json @@ -1580,9 +1580,9 @@ "Writers": "作者", "ViewAlbumArtist": "查看专辑艺术家", "HeaderSelectFallbackFontPath" : "选择备用字体路径", - "HeaderSelectFallbackFontPathHelp": "浏览或输入一个备用字体文件的路径用于渲染 ASS/SSA 字幕。", + "HeaderSelectFallbackFontPathHelp": "浏览或输入一个包含备用字体文件的路径用于渲染 ASS/SSA 字幕。", "LabelFallbackFontPath": "备用字体文件路径：", - "LabelFallbackFontPathHelp": "指定一个备用字体文件用于渲染 ASS/SSA 字幕。允许的最大字体容量为 10 MB。推荐使用轻量且适合网络传输的 woff2 格式字体。除非字体显示不正确，否则将其留空。", + "LabelFallbackFontPathHelp": "指定一个包含备用字体文件的路径用于渲染 ASS/SSA 字幕。允许的最大字体总容量为 20 MB。推荐使用轻量且适合网络传输的 woff2 格式字体。除非字体显示不正确，否则将其留空。", "EnableFallbackFont" : "启用备用字体", "EnableFallbackFontHelp" : "使用自定义的备用字体。这可以避免一些字幕渲染不正确的问题。" } From fe390efbc52e3fac24a1e5e113acde1e7dc4fb95 Mon Sep 17 00:00:00 2001 From: Nyanmisaka Date: Thu, 30 Jul 2020 16:49:09 +0800 Subject: [PATCH 3/8] follow the server side changes --- src/plugins/htmlVideoPlayer/plugin.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/plugins/htmlVideoPlayer/plugin.js b/src/plugins/htmlVideoPlayer/plugin.js index a3e973840d..0bd5eea134 100644 --- a/src/plugins/htmlVideoPlayer/plugin.js +++ b/src/plugins/htmlVideoPlayer/plugin.js @@ -1073,7 +1073,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa return avaliableFonts.push(i.DeliveryUrl); }); var apiClient = connectionManager.getApiClient(item); - var fallbackFontList = apiClient.getUrl('/FallbackFont/FontList', { + var fallbackFontList = apiClient.getUrl('/FallbackFont/Fonts', { api_key: apiClient.accessToken() }); var options = { @@ -1104,8 +1104,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa if (config.EnableFallbackFont) { apiClient.getJSON(fallbackFontList).then(function (fontFiles) { (fontFiles || []).map(function (font) { - var fontUrl = apiClient.getUrl('/FallbackFont/Font', { - name: font.Name, + var fontUrl = apiClient.getUrl(`/FallbackFont/Fonts/${font.Name}`, { api_key: apiClient.accessToken() }); return avaliableFonts.push(fontUrl); From 25ed2680d13e3a07379aebc764cb0c993c9620be Mon Sep 17 00:00:00 2001 From: Nyanmisaka Date: Thu, 30 Jul 2020 17:26:22 +0800 Subject: [PATCH 4/8] disable font when the path is not set --- src/controllers/dashboard/encodingsettings.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/controllers/dashboard/encodingsettings.js b/src/controllers/dashboard/encodingsettings.js index 47414e4c2b..edeb89966e 100644 --- a/src/controllers/dashboard/encodingsettings.js +++ b/src/controllers/dashboard/encodingsettings.js @@ -59,7 +59,7 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo config.DownMixAudioBoost = $('#txtDownMixAudioBoost', form).val(); config.TranscodingTempPath = $('#txtTranscodingTempPath', form).val(); config.FallbackFontPath = form.querySelector('#txtFallbackFontPath').value; - config.EnableFallbackFont = form.querySelector('#chkEnableFallbackFont').checked; + config.EnableFallbackFont = form.querySelector('#txtFallbackFontPath').value && form.querySelector('#chkEnableFallbackFont').checked; config.EncodingThreadCount = $('#selectThreadCount', form).val(); config.HardwareAccelerationType = $('#selectVideoDecoder', form).val(); config.VaapiDevice = $('#txtVaapiDevice', form).val(); From f9b95a42c2c09349f9d43cbb0bd1b4696d25e4ed Mon Sep 17 00:00:00 2001 From: Nyanmisaka Date: Thu, 30 Jul 2020 17:58:59 +0800 Subject: [PATCH 5/8] optimize the string according to suggestions Co-authored-by: David Mouse --- src/strings/en-us.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/strings/en-us.json b/src/strings/en-us.json index 3e342bea1d..55c8d5e59e 100644 --- a/src/strings/en-us.json +++ b/src/strings/en-us.json @@ -1569,7 +1569,7 @@ "HeaderSelectFallbackFontPath" : "Select Fallback Font Folder Path", "HeaderSelectFallbackFontPathHelp": "Browse or enter the path of the fallback font folder to use for rendering ASS/SSA subtitles.", "LabelFallbackFontPath": "Fallback font folder path:", - "LabelFallbackFontPathHelp": "Specify a path containing fallback font for rendering ASS/SSA subtitles. The maximum allowed total font size is 20 Megabytes. It is recommended to use the lightweight and web-friendly woff2 format font. Leave it blank unless the font is rendered incorrectly.", + "LabelFallbackFontPathHelp": "Specify a path containing fallback fonts for rendering ASS/SSA subtitles. The maximum allowed total font size is 20 MB. Lightweight and web-friendly font formats such as woff2 are recommended.", "EnableFallbackFont" : "Enable fallback fonts", "EnableFallbackFontHelp" : "Enable custom alternate fonts. This can avoid the problem of incorrect subtitle rendering." } From e06fb53f4880558fff1f9046080202c0388a1fd6 Mon Sep 17 00:00:00 2001 From: Nyanmisaka Date: Thu, 30 Jul 2020 18:00:06 +0800 Subject: [PATCH 6/8] optimize strings --- src/strings/zh-cn.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/strings/zh-cn.json b/src/strings/zh-cn.json index 24c18a0256..7c7b420d1a 100644 --- a/src/strings/zh-cn.json +++ b/src/strings/zh-cn.json @@ -1582,7 +1582,7 @@ "HeaderSelectFallbackFontPath" : "选择备用字体路径", "HeaderSelectFallbackFontPathHelp": "浏览或输入一个包含备用字体文件的路径用于渲染 ASS/SSA 字幕。", "LabelFallbackFontPath": "备用字体文件路径：", - "LabelFallbackFontPathHelp": "指定一个包含备用字体文件的路径用于渲染 ASS/SSA 字幕。允许的最大字体总容量为 20 MB。推荐使用轻量且适合网络传输的 woff2 格式字体。除非字体显示不正确，否则将其留空。", + "LabelFallbackFontPathHelp": "指定一个包含备用字体文件的路径用于渲染 ASS/SSA 字幕。允许的最大字体总容量为 20 MB。推荐使用轻量且适合网络传输的字体，例如 woff2。", "EnableFallbackFont" : "启用备用字体", "EnableFallbackFontHelp" : "使用自定义的备用字体。这可以避免一些字幕渲染不正确的问题。" } From b232117ff5603ad606fcc28426e6708a01b9f7dc Mon Sep 17 00:00:00 2001 From: nyanmisaka Date: Fri, 31 Jul 2020 00:35:23 +0800 Subject: [PATCH 7/8] minor changes --- src/plugins/htmlVideoPlayer/plugin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/htmlVideoPlayer/plugin.js b/src/plugins/htmlVideoPlayer/plugin.js index fb01840719..27b0eb8303 100644 --- a/src/plugins/htmlVideoPlayer/plugin.js +++ b/src/plugins/htmlVideoPlayer/plugin.js @@ -1035,7 +1035,7 @@ function tryRemoveElement(elem) { * @private */ renderSsaAss(videoElement, track, item) { - const avaliableFonts = new Array(); + const avaliableFonts = []; const attachments = this._currentPlayOptions.mediaSource.MediaAttachments || []; attachments.map(function (i) { // embedded font url From 68f0f43fdcde169c133d5908b5f9a96399f74594 Mon Sep 17 00:00:00 2001 From: nyanmisaka Date: Wed, 19 Aug 2020 23:02:17 +0800 Subject: [PATCH 8/8] minor changes --- src/controllers/dashboard/encodingsettings.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/controllers/dashboard/encodingsettings.js b/src/controllers/dashboard/encodingsettings.js index f640877842..fdb35d3d9f 100644 --- a/src/controllers/dashboard/encodingsettings.js +++ b/src/controllers/dashboard/encodingsettings.js @@ -64,7 +64,7 @@ import libraryMenu from 'libraryMenu'; config.DownMixAudioBoost = $('#txtDownMixAudioBoost', form).val(); config.TranscodingTempPath = $('#txtTranscodingTempPath', form).val(); config.FallbackFontPath = form.querySelector('#txtFallbackFontPath').value; - config.EnableFallbackFont = form.querySelector('#txtFallbackFontPath').value && form.querySelector('#chkEnableFallbackFont').checked; + config.EnableFallbackFont = form.querySelector('#txtFallbackFontPath').value ? form.querySelector('#chkEnableFallbackFont').checked : false; config.EncodingThreadCount = $('#selectThreadCount', form).val(); config.HardwareAccelerationType = $('#selectVideoDecoder', form).val(); config.VaapiDevice = $('#txtVaapiDevice', form).val(); @@ -191,8 +191,8 @@ import libraryMenu from 'libraryMenu'; }); }); $('#btnSelectFallbackFontPath', page).on('click.selectDirectory', function () { - require(['directorybrowser'], function (directoryBrowser) { - var picker = new directoryBrowser(); + import('directorybrowser').then(({default: directoryBrowser}) => { + const picker = new directoryBrowser(); picker.show({ includeDirectories: true, callback: function (path) {