Add ability to upload hearing-impaired subs

src/components/subtitleuploader/subtitleuploader.js

@@ -1,5 +1,7 @@
 import escapeHtml from 'escape-html';
 
+import { getSubtitleApi } from '@jellyfin/sdk/lib/utils/api/subtitle-api';
+import { toApi } from 'utils/jellyfin-apiclient/compat';
 import dialogHelper from '../../components/dialogHelper/dialogHelper';
 import ServerConnections from '../ServerConnections';
 import dom from '../../scripts/dom';
@@ -13,6 +15,7 @@ import '../../elements/emby-button/emby-button';
 import '../../elements/emby-select/emby-select';
 import '../formdialog.scss';
 import './style.scss';
+import { readFileAsBase64 } from 'utils/file';
 
 let currentItemId;
 let currentServerId;
@@ -75,7 +78,7 @@ function setFiles(page, files) {
     reader.readAsDataURL(file);
 }
 
-function onSubmit(e) {
+async function onSubmit(e) {
     const file = currentFile;
 
     if (!isValidSubtitleFile(file)) {
@@ -89,8 +92,17 @@ function onSubmit(e) {
     const dlg = dom.parentWithClass(this, 'dialog');
     const language = dlg.querySelector('#selectLanguage').value;
     const isForced = dlg.querySelector('#chkIsForced').checked;
+    const isHearingImpaired = dlg.querySelector('#chkIsHearingImpaired').checked;
 
-    ServerConnections.getApiClient(currentServerId).uploadItemSubtitle(currentItemId, language, isForced, file).then(function () {
+    const subtitleApi = getSubtitleApi(toApi(ServerConnections.getApiClient(currentServerId)));
+
+    const data = await readFileAsBase64(file);
+    const format = file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase();
+
+    subtitleApi.uploadSubtitle({
+        itemId: currentItemId,
+        uploadSubtitleDto: { Data: data, Language: language, IsForced: isForced, Format: format, IsHearingImpaired: isHearingImpaired }
+    }).then(function () {
         dlg.querySelector('#uploadSubtitle').value = '';
         loading.hide();
         hasChanges = true;

src/components/subtitleuploader/subtitleuploader.template.html

@@ -31,6 +31,10 @@ <h2 style="margin:0;">${HeaderAddUpdateSubtitle}</h2>
                             <input type="checkbox" is="emby-checkbox" id="chkIsForced" />
                             <span>${LabelIsForced}</span>
                         </label>
+                        <label>
+                            <input type="checkbox" is="emby-checkbox" id="chkIsHearingImpaired" />
+                            <span>${LabelIsHearingImpaired}</span>
+                        </label>
                     </div>
                     <div class="selectContainer flex-grow">
                         <select is="emby-select" id="selectLanguage" required="required" label="${LabelLanguage}"></select>

src/strings/en-us.json

@@ -1722,5 +1722,6 @@
     "AiTranslated": "AI Translated",
     "MachineTranslated": "Machine Translated",
     "ForeignPartsOnly": "Forced/Foreign parts only",
-    "HearingImpairedShort": "HI/SDH"
+    "HearingImpairedShort": "HI/SDH",
+    "LabelIsHearingImpaired": "For hearing impaired (SDH)"
 }

src/utils/file.ts

@@ -0,0 +1,15 @@
+/**
+ * Reads and returns the file encoded in base64
+ */
+export function readFileAsBase64(file: File): Promise<string> {
+    return new Promise(function (resolve, reject) {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            // Split by a comma to remove the url: prefix
+            const data = (e.target?.result as string)?.split?.(',')[1];
+            resolve(data);
+        };
+        reader.onerror = reject;
+        reader.readAsDataURL(file);
+    });
+}