If possible display lyrics in lrc format

src/components/lyricseditor/lyricseditor.js

@@ -39,6 +39,19 @@ function downloadRemoteLyrics(context, id) {
     });
 }
 
+function getLyricsText(lyricsObject) {
+    return lyricsObject.reduce((htmlAccumulator, lyric) => {
+        if (lyric.Start) {
+            const minutes = Math.floor(lyric.Start / 600000000);
+            const seconds = Math.floor((lyric.Start % 600000000) / 10000000);
+            const hundredths = Math.floor((lyric.Start % 10000000) / 100000);
+            htmlAccumulator += '[' + String(minutes).padStart(2, '0') + ':' + String(seconds).padStart(2, '0') + '.' + String(hundredths).padStart(2, '0') + '] ';
+        }
+        htmlAccumulator += escapeHtml(lyric.Text) + '<br/>';
+        return htmlAccumulator;
+    }, '');
+}
+
 function renderSearchResults(context, results) {
     let lastProvider = '';
     let html = '';
@@ -57,10 +70,7 @@ function renderSearchResults(context, results) {
 
         const provider = result.ProviderName;
         const metadata = result.Lyrics.Metadata;
-        const lyrics = result.Lyrics.Lyrics.reduce((htmlAccumulator, lyric) => {
+        const lyrics = getLyricsText(result.Lyrics.Lyrics);
-            htmlAccumulator += escapeHtml(lyric.Text) + '<br/>';
-            return htmlAccumulator;
-        }, '');
         if (provider !== lastProvider) {
             if (i > 0) {
                 html += '</div>';
@@ -225,7 +235,7 @@ function showOptions(button, context, lyricsId, lyrics) {
     const items = [];
 
     items.push({
-        name: globalize.translate('LyricsPreview'),
+        name: globalize.translate('PreviewLyrics'),
         id: 'preview'
     }
     , {
@@ -294,10 +304,7 @@ function fillCurrentLyrics(context, apiClient, item) {
             let html = '';
             html += '<h2>' + globalize.translate('Lyrics') + '</h2>';
             html += '<div>';
-            html += response.data.Lyrics.reduce((htmlAccumulator, lyric) => {
+            html += getLyricsText(response.data.Lyrics);
-                htmlAccumulator += escapeHtml(lyric.Text) + '<br/>';
-                return htmlAccumulator;
-            }, '');
             html += '</div>';
             context.querySelector('.currentLyrics').innerHTML = html;
         }

src/components/lyricseditor/lyricspreview.template.html

@@ -1,6 +1,6 @@
 <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">${LyricsPreview}</h3>
+    <h3 class="formDialogHeaderTitle">${HeaderPreviewLyrics}</h3>
 
 </div>
 <div class="formDialogContent smoothScrollY">

src/strings/en-us.json

@@ -462,6 +462,7 @@
     "HeaderPleaseSignIn": "Please sign in",
     "HeaderPortRanges": "Firewall and Proxy Settings",
     "HeaderPreferredMetadataLanguage": "Preferred Metadata Language",
+    "HeaderPreviewLyrics": "Preview Lyrics",
     "HeaderRecentlyPlayed": "Recently Played",
     "HeaderRecordingMetadataSaving": "Recording Metadata",
     "HeaderRecordingOptions": "Recording Options",
@@ -996,7 +997,6 @@
     "Lyric": "Lyric",
     "Lyricist": "Lyricist",
     "Lyrics": "Lyrics",
-    "LyricsPreview": "Lyrics Preview",
     "ManageLibrary": "Manage library",
     "ManageRecording": "Manage recording",
     "MapChannels": "Map Channels",
@@ -1319,6 +1319,7 @@
     "Premiere": "Premiere",
     "Premieres": "Premieres",
     "Preview": "Preview",
+    "PreviewLyrics": "Preview Lyrics",
     "Previous": "Previous",
     "PreviousChapter": "Previous chapter",
     "PreviousTrack": "Skip to previous",