add Lyrics

src/components/itemContextMenu.js

@@ -183,6 +183,14 @@ export function getCommands(options) {
             id: 'delete',
             icon: 'delete'
         });
+
+        if (item.Type === 'Audio' && item.HasLyrics && window.location.href.includes(item.Id)) {
+            commands.push({
+                name: globalize.translate('DeleteLyrics'),
+                id: 'deleteLyrics',
+                icon: 'delete_sweep'
+            });
+        }
     }
 
     // Books are promoted to major download Button and therefor excluded in the context menu
@@ -313,6 +321,14 @@ export function getCommands(options) {
         });
     }
 
+    if (item.HasLyrics) {
+        commands.push({
+            name: globalize.translate('ViewLyrics'),
+            id: 'lyrics',
+            icon: 'lyrics'
+        });
+    }
+
     return commands;
 }
 
@@ -495,6 +511,9 @@ function executeCommand(item, id, options) {
             case 'delete':
                 deleteItem(apiClient, item).then(getResolveFunction(resolve, id, true, true), getResolveFunction(resolve, id));
                 break;
+            case 'deleteLyrics':
+                deleteLyrics(apiClient, item).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
+                break;
             case 'share':
                 navigator.share({
                     title: item.Name,
@@ -510,6 +529,15 @@ function executeCommand(item, id, options) {
                 appRouter.showItem(item.AlbumArtists[0].Id, item.ServerId);
                 getResolveFunction(resolve, id)();
                 break;
+            case 'lyrics': {
+                if (options.isMobile) {
+                    appRouter.show('lyrics');
+                } else {
+                    appRouter.showItem(item.Id, item.ServerId);
+                }
+                getResolveFunction(resolve, id)();
+                break;
+            }
             case 'playallfromhere':
                 getResolveFunction(resolve, id)();
                 break;
@@ -636,6 +664,12 @@ function deleteItem(apiClient, item) {
     });
 }
 
+function deleteLyrics(apiClient, item) {
+    return import('../scripts/deleteHelper').then((deleteHelper) => {
+        return deleteHelper.deleteLyrics(item);
+    });
+}
+
 function refresh(apiClient, item) {
     import('./refreshdialog/refreshdialog').then(({ default: RefreshDialog }) => {
         new RefreshDialog({

src/components/nowPlayingBar/nowPlayingBar.js

@@ -34,6 +34,7 @@ let positionSlider;
 let toggleAirPlayButton;
 let toggleRepeatButton;
 let toggleRepeatButtonIcon;
+let lyricButton;
 
 let lastUpdateTime = 0;
 let lastPlayerState = {};
@@ -42,6 +43,9 @@ let currentRuntimeTicks = 0;
 
 let isVisibilityAllowed = true;
 
+let lyricPageActive = false;
+let isAudio = false;
+
 function getNowPlayingBarHtml() {
     let html = '';
 
@@ -82,6 +86,8 @@ function getNowPlayingBarHtml() {
 
     html += `<button is="paper-icon-button-light" class="btnAirPlay mediaButton" title="${globalize.translate('AirPlay')}"><span class="material-icons airplay" aria-hidden="true"></span></button>`;
 
+    html += `<button is="paper-icon-button-light" class="openLyricsButton mediaButton" title="${globalize.translate('Lyrics')}"><span class="material-icons lyrics" style="top:0.1em" aria-hidden="true"></span></button>`;
+
     html += `<button is="paper-icon-button-light" class="toggleRepeatButton mediaButton" title="${globalize.translate('Repeat')}"><span class="material-icons repeat" aria-hidden="true"></span></button>`;
     html += `<button is="paper-icon-button-light" class="btnShuffleQueue mediaButton" title="${globalize.translate('Shuffle')}"><span class="material-icons shuffle" aria-hidden="true"></span></button>`;
 
@@ -146,6 +152,7 @@ function bindEvents(elem) {
     toggleRepeatButton = elem.querySelector('.toggleRepeatButton');
     volumeSlider = elem.querySelector('.nowPlayingBarVolumeSlider');
     volumeSliderContainer = elem.querySelector('.nowPlayingBarVolumeSliderContainer');
+    lyricButton = nowPlayingBarElement.querySelector('.openLyricsButton');
 
     muteButton.addEventListener('click', function () {
         if (currentPlayer) {
@@ -212,6 +219,14 @@ function bindEvents(elem) {
         }
     });
 
+    lyricButton.addEventListener('click', function() {
+        if (lyricPageActive) {
+            appRouter.back();
+        } else {
+            appRouter.show('lyrics');
+        }
+    });
+
     toggleRepeatButton = elem.querySelector('.toggleRepeatButton');
     toggleRepeatButton.addEventListener('click', function () {
         switch (playbackManager.getRepeatMode()) {
@@ -363,6 +378,7 @@ function updatePlayerStateInternal(event, state, player) {
     updateTimeDisplay(playState.PositionTicks, nowPlayingItem.RunTimeTicks, playbackManager.getBufferedRanges(player));
 
     updateNowPlayingInfo(state);
+    updateLyricButton();
 }
 
 function updateRepeatModeDisplay(repeatMode) {
@@ -453,6 +469,22 @@ function updatePlayerVolumeState(isMuted, volumeLevel) {
     }
 }
 
+function updateLyricButton() {
+    if (!isEnabled) {
+        return;
+    }
+
+    isAudio ? showButton(lyricButton) : hideButton(lyricButton);
+    setLyricButtonActiveStatus();
+}
+
+function setLyricButtonActiveStatus() {
+    if (!isEnabled) {
+        return;
+    }
+    lyricButton.classList.toggle('buttonActive', lyricPageActive);
+}
+
 function seriesImageUrl(item, options) {
     if (!item) {
         throw new Error('item cannot be null!');
@@ -595,6 +627,9 @@ function updateNowPlayingInfo(state) {
 function onPlaybackStart(e, state) {
     console.debug('nowplaying event: ' + e.type);
     const player = this;
+
+    isAudio = state.NowPlayingItem.Type === 'Audio';
+
     onStateChanged.call(player, e, state);
 }
 
@@ -698,6 +733,7 @@ function onStateChanged(event, state) {
     }
 
     getNowPlayingBar();
+    updateLyricButton();
     updatePlayerStateInternal(event, state, player);
 }
 
@@ -754,6 +790,7 @@ function refreshFromPlayer(player, type) {
 }
 
 function bindToPlayer(player) {
+    lyricPageActive = appRouter.currentRouteInfo.path.toLowerCase() === '/lyrics';
     if (player === currentPlayer) {
         return;
     }
@@ -786,6 +823,8 @@ Events.on(playbackManager, 'playerchange', function () {
 bindToPlayer(playbackManager.getCurrentPlayer());
 
 document.addEventListener('viewbeforeshow', function (e) {
+    lyricPageActive = appRouter.currentRouteInfo.path.toLowerCase() === '/lyrics';
+    setLyricButtonActiveStatus();
     if (!e.detail.options.enableMediaControl) {
         if (isVisibilityAllowed) {
             isVisibilityAllowed = false;

src/components/remotecontrol/remotecontrol.js

@@ -222,7 +222,8 @@ function updateNowPlayingInfo(context, state, serverId) {
                 contextButton.addEventListener('click', function () {
                     itemContextMenu.show(Object.assign({
                         item: fullItem,
-                        user: user
+                        user: user,
+                        isMobile: layoutManager.mobile
                     }, options))
                         .catch(() => { /* no-op */ });
                 });
@@ -323,6 +324,7 @@ export default function () {
             context.querySelector('.remoteControlSection').classList.add('hide');
         }
 
+        buttonVisible(context.querySelector('.btnLyrics'), item?.Type === 'Audio' && !layoutManager.mobile);
         buttonVisible(context.querySelector('.btnStop'), item != null);
         buttonVisible(context.querySelector('.btnNextTrack'), item != null);
         buttonVisible(context.querySelector('.btnPreviousTrack'), item != null);
@@ -769,6 +771,10 @@ export default function () {
                 playbackManager.fastForward(currentPlayer);
             }
         });
+        context.querySelector('.btnLyrics').addEventListener('click', function () {
+            appRouter.show('lyrics');
+        });
+
         for (const shuffleButton of context.querySelectorAll('.btnShuffleQueue')) {
             shuffleButton.addEventListener('click', function () {
                 if (currentPlayer) {