Added client setting to enable experimental Pgs subtitle renderer.

src/components/subtitlesettings/subtitlesettings.js

@@ -61,6 +61,9 @@ function loadForm(context, user, userSettings, appearanceSettings, apiClient) {
         context.querySelector('#sliderVerticalPosition').value = appearanceSettings.verticalPosition;
 
         context.querySelector('#selectSubtitleBurnIn').value = appSettings.get('subtitleburnin') || '';
+        context.querySelector('#chkSubtitleRenderPgs').checked = appSettings.get('subtitlerenderpgs') === 'true';
+
+        context.querySelector('#selectSubtitleBurnIn').dispatchEvent(new CustomEvent('change', {}));
 
         onAppearanceFieldChange({
             target: context.querySelector('#selectTextSize')
@@ -86,6 +89,7 @@ function save(instance, context, userId, userSettings, apiClient, enableSaveConf
     loading.show();
 
     appSettings.set('subtitleburnin', context.querySelector('#selectSubtitleBurnIn').value);
+    appSettings.set('subtitlerenderpgs', context.querySelector('#chkSubtitleRenderPgs').checked);
 
     apiClient.getUser(userId).then(function (user) {
         saveUser(context, user, userSettings, instance.appearanceKey, apiClient).then(function () {
@@ -111,6 +115,19 @@ function onSubtitleModeChange(e) {
     view.querySelector('.subtitles' + this.value + 'Help').classList.remove('hide');
 }
 
+function onSubtitleBurnInChange(e) {
+    const view = dom.parentWithClass(e.target, 'subtitlesettings');
+
+    const fieldRenderPgs = view.querySelector('.fldRenderPgs');
+
+    // Pgs option is only available if burn-in mode is set to 'auto' (empty string)
+    if (this.value) {
+        fieldRenderPgs.classList.add('hide');
+    } else {
+        fieldRenderPgs.classList.remove('hide');
+    }
+}
+
 function onAppearanceFieldChange(e) {
     const view = dom.parentWithClass(e.target, 'subtitlesettings');
 
@@ -166,6 +183,7 @@ function embed(options, self) {
     options.element.querySelector('form').addEventListener('submit', self.onSubmit.bind(self));
 
     options.element.querySelector('#selectSubtitlePlaybackMode').addEventListener('change', onSubtitleModeChange);
+    options.element.querySelector('#selectSubtitleBurnIn').addEventListener('change', onSubtitleBurnInChange);
     options.element.querySelector('#selectTextSize').addEventListener('change', onAppearanceFieldChange);
     options.element.querySelector('#selectTextWeight').addEventListener('change', onAppearanceFieldChange);
     options.element.querySelector('#selectDropShadow').addEventListener('change', onAppearanceFieldChange);

src/components/subtitlesettings/subtitlesettings.template.html

@@ -32,6 +32,15 @@
             </select>
             <div class="fieldDescription">${BurnSubtitlesHelp}</div>
         </div>
+
+        <div class="checkboxContainer checkboxContainer-withDescription fldRenderPgs hide">
+            <label>
+                <input is="emby-checkbox" type="checkbox" id="chkSubtitleRenderPgs" />
+                <span>${RenderPgsSubtitle}</span>
+
+            </label>
+            <div class="fieldDescription checkboxFieldDescription">${RenderPgsSubtitleHelp}</div>
+        </div>
     </div>
 
     <div class="verticalSection subtitleAppearanceSection hide">

src/scripts/browserDeviceProfile.js

@@ -1424,6 +1424,7 @@ export default function (options) {
     // External vtt or burn in
     profile.SubtitleProfiles = [];
     const subtitleBurninSetting = appSettings.get('subtitleburnin');
+    const subtitleRenderPgsSetting = appSettings.get('subtitlerenderpgs') === 'true';
     if (subtitleBurninSetting !== 'all') {
         if (supportsTextTracks()) {
             profile.SubtitleProfiles.push({
@@ -1442,7 +1443,7 @@ export default function (options) {
             });
         }
 
-        if (supportsCanvas2D() && options.enablePgsRender !== false && !options.isRetry
+        if (supportsCanvas2D() && options.enablePgsRender !== false && !options.isRetry && subtitleRenderPgsSetting
             && subtitleBurninSetting !== 'allcomplexformats' && subtitleBurninSetting !== 'onlyimageformats') {
             profile.SubtitleProfiles.push({
                 Format: 'pgssub',

src/strings/en-us.json

@@ -1383,6 +1383,8 @@
     "Remixer": "Remixer",
     "RemoveFromCollection": "Remove from collection",
     "RemoveFromPlaylist": "Remove from playlist",
+    "RenderPgsSubtitle": "Experimental PGS subtitle rendering",
+    "RenderPgsSubtitleHelp": "Determine if the client should render PGS subtitles instead of using burned in subtitles. This can avoid server-side transcoding in exchange of client-side rendering performance.",
     "Repeat": "Repeat",
     "RepeatAll": "Repeat all",
     "RepeatEpisodes": "Repeat episodes",