Preliminary Lyrics Editor

src/components/lyricsuploader/lyricsuploader.js

@@ -0,0 +1,171 @@
+import escapeHtml from 'escape-html';
+
+import { LyricsApi } from '@jellyfin/sdk/lib/generated-client/api/lyrics-api';
+import { toApi } from 'utils/jellyfin-apiclient/compat';
+import dialogHelper from '../../components/dialogHelper/dialogHelper';
+import ServerConnections from '../ServerConnections';
+import dom from '../../scripts/dom';
+import loading from '../../components/loading/loading';
+import scrollHelper from '../../scripts/scrollHelper';
+import layoutManager from '../layoutManager';
+import globalize from '../../scripts/globalize';
+import template from './lyricsuploader.template.html';
+import toast from '../toast/toast';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-select/emby-select';
+import '../formdialog.scss';
+import './lyricsuploader.scss';
+import { readFileAsText } from 'utils/file';
+
+let currentItemId;
+let currentServerId;
+let currentFile;
+let hasChanges = false;
+
+function onFileReaderError(evt) {
+    loading.hide();
+
+    const error = evt.target.error;
+    if (error.code !== error.ABORT_ERR) {
+        toast(globalize.translate('MessageFileReadError'));
+    }
+}
+
+function isValidLyricsFile(file) {
+    return file && ['.lrc', '.txt']
+        .some(function(ext) {
+            return file.name.endsWith(ext);
+        });
+}
+
+function setFiles(page, files) {
+    const file = files[0];
+
+    if (!isValidLyricsFile(file)) {
+        page.querySelector('#lyricsOutput').innerHTML = '';
+        page.querySelector('#fldUpload').classList.add('hide');
+        page.querySelector('#labelDropLyrics').classList.remove('hide');
+        currentFile = null;
+        return;
+    }
+
+    currentFile = file;
+
+    const reader = new FileReader();
+
+    reader.onerror = onFileReaderError;
+    reader.onloadstart = function () {
+        page.querySelector('#fldUpload').classList.add('hide');
+    };
+    reader.onabort = function () {
+        loading.hide();
+        console.debug('File read cancelled');
+    };
+
+    // Closure to capture the file information.
+    reader.onload = (function (theFile) {
+        return function () {
+            // Render file.
+            const html = `<div><span class="material-icons lyrics" aria-hidden="true" style="transform: translateY(25%);"></span><span>${escapeHtml(theFile.name)}</span></div>`;
+
+            page.querySelector('#lyricsOutput').innerHTML = html;
+            page.querySelector('#fldUpload').classList.remove('hide');
+            page.querySelector('#labelDropLyrics').classList.add('hide');
+        };
+    })(file);
+
+    // Read in the lyrics file as a data URL.
+    reader.readAsDataURL(file);
+}
+
+async function onSubmit(e) {
+    e.preventDefault();
+    const file = currentFile;
+
+    if (!isValidLyricsFile(file)) {
+        toast(globalize.translate('MessageLyricsFileTypeAllowed'));
+        return;
+    }
+
+    loading.show();
+    const dlg = dom.parentWithClass(this, 'dialog');
+
+    const api = toApi(ServerConnections.getApiClient(currentServerId));
+    const lyricsApi = new LyricsApi(api.configuration, undefined, api.axiosInstance);
+    const data = await readFileAsText(file);
+
+    lyricsApi.uploadLyrics({
+        itemId: currentItemId, fileName: file.name, body: data
+    }).then(function () {
+        dlg.querySelector('#uploadLyrics').value = '';
+        loading.hide();
+        hasChanges = true;
+        dialogHelper.close(dlg);
+    });
+}
+
+function initEditor(page) {
+    page.querySelector('.uploadLyricsForm').addEventListener('submit', onSubmit);
+    page.querySelector('#uploadLyrics').addEventListener('change', function () {
+        setFiles(page, this.files);
+    });
+    page.querySelector('.btnBrowse').addEventListener('click', function () {
+        page.querySelector('#uploadLyrics').click();
+    });
+}
+
+function showEditor(options, resolve) {
+    options = options || {};
+    currentItemId = options.itemId;
+    currentServerId = options.serverId;
+
+    const dialogOptions = {
+        removeOnClose: true,
+        scrollY: false
+    };
+
+    if (layoutManager.tv) {
+        dialogOptions.size = 'fullscreen';
+    } else {
+        dialogOptions.size = 'small';
+    }
+
+    const dlg = dialogHelper.createDialog(dialogOptions);
+
+    dlg.classList.add('formDialog');
+    dlg.classList.add('lyricsUploaderDialog');
+
+    dlg.innerHTML = globalize.translateHtml(template, 'core');
+
+    if (layoutManager.tv) {
+        scrollHelper.centerFocus.on(dlg, false);
+    }
+
+    // Has to be assigned a z-index after the call to .open()
+    dlg.addEventListener('close', function () {
+        if (layoutManager.tv) {
+            scrollHelper.centerFocus.off(dlg, false);
+        }
+        loading.hide();
+        resolve(hasChanges);
+    });
+
+    dialogHelper.open(dlg);
+
+    initEditor(dlg);
+
+    dlg.querySelector('.btnCancel').addEventListener('click', function () {
+        dialogHelper.close(dlg);
+    });
+}
+
+export function show(options) {
+    return new Promise(function (resolve) {
+        hasChanges = false;
+        showEditor(options, resolve);
+    });
+}
+
+export default {
+    show: show
+};

src/components/lyricsuploader/lyricsuploader.scss

@@ -0,0 +1,15 @@
+.lyricsEditor-dropZone {
+    border: 0.2em dashed currentcolor;
+    border-radius: 0.25em;
+
+    text-align: center;
+    position: relative;
+    height: 12em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.raised.raised-mini.btnBrowse {
+    margin-left: 1.5em;
+}

src/components/lyricsuploader/lyricsuploader.template.html

@@ -0,0 +1,36 @@
+<div class="formDialogHeader">
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1" title="${ButtonBack}"><span class="material-icons arrow_back" aria-hidden="true"></span></button>
+    <h3 class="formDialogHeaderTitle">
+        ${HeaderUploadLyrics}
+    </h3>
+</div>
+
+<div class="formDialogContent">
+    <div class="dialogContentInner">
+
+        <form class="uploadLyricsForm">
+
+            <div class="flex align-items-center" style="margin:1.5em 0;">
+                <h2 style="margin:0;">${HeaderAddLyrics}</h2>
+
+                <button is="emby-button" type="button" class="raised raised-mini btnBrowse">
+                    <span class="material-icons folder" aria-hidden="true"></span>
+                    <span>${Browse}</span>
+                </button>
+            </div>
+            <div>
+                <div class="lyricsEditor-dropZone fieldDescription">
+                    <div id="labelDropLyrics">${LabelDropLyricsHere}</div>
+                    <output id="lyricsOutput" class="flex align-items-center justify-content-center" style="position: absolute;top:0;left:0;right:0;bottom:0;width:100%;"></output>
+                    <input type="file" accept=".lrc,.txt" id="uploadLyrics" name="uploadLyrics" style="position: absolute;top:0;left:0;right:0;bottom:0;width:100%;opacity:0;"/>
+                </div>
+                <div id="fldUpload" class="hide">
+                    <br />
+                    <button is="emby-button" type="submit" class="raised button-submit block">
+                        <span>${Upload}</span>
+                    </button>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>