diff --git a/src/controllers/itemDetails/index.js b/src/controllers/itemDetails/index.js
index e169a82c3ae..f5cf971eba5 100644
--- a/src/controllers/itemDetails/index.js
+++ b/src/controllers/itemDetails/index.js
@@ -1,7 +1,7 @@
import { intervalToDuration } from 'date-fns';
import DOMPurify from 'dompurify';
-import markdownIt from 'markdown-it';
import escapeHtml from 'escape-html';
+import markdownIt from 'markdown-it';
import isEqual from 'lodash-es/isEqual';
import { appHost } from 'components/apphost';
@@ -1055,6 +1055,7 @@ function renderDetails(page, item, apiClient, context) {
renderOverview(page, item);
renderMiscInfo(page, item);
reloadUserDataButtons(page, item);
+ renderLyricsContainer(page, item, apiClient);
// Don't allow redirection to other websites from the TV layout
if (!layoutManager.tv && appHost.supports('externallinks')) {
@@ -1069,6 +1070,38 @@ function enableScrollX() {
return browser.mobile && window.screen.availWidth <= 1000;
}
+function renderLyricsContainer(view, item, apiClient) {
+ const lyricContainer = view.querySelector('.lyricsContainer');
+ if (lyricContainer && item.HasLyrics) {
+ if (item.Type !== 'Audio') {
+ lyricContainer.classList.add('hide');
+ return;
+ }
+ //get lyrics
+ apiClient.ajax({
+ url: apiClient.getUrl('Audio/' + item.Id + '/Lyrics'),
+ type: 'GET',
+ dataType: 'json'
+ }).then((response) => {
+ if (!response.Lyrics) {
+ lyricContainer.classList.add('hide');
+ return;
+ }
+ lyricContainer.classList.remove('hide');
+ const itemsContainer = lyricContainer.querySelector('.itemsContainer');
+ if (itemsContainer) {
+ const html = response.Lyrics.reduce((htmlAccumulator, lyric) => {
+ htmlAccumulator += escapeHtml(lyric.Text) + '
';
+ return htmlAccumulator;
+ }, '');
+ itemsContainer.innerHTML = html;
+ }
+ }).catch(() => {
+ lyricContainer.classList.add('hide');
+ });
+ }
+}
+
function renderMoreFromSeason(view, item, apiClient) {
const section = view.querySelector('.moreFromSeasonSection');
@@ -1119,7 +1152,7 @@ function renderMoreFromArtist(view, item, apiClient) {
const section = view.querySelector('.moreFromArtistSection');
if (section) {
- if (item.Type !== 'MusicArtist' && (item.Type !== 'MusicAlbum' || !item.AlbumArtists || !item.AlbumArtists.length)) {
+ if (item.Type !== 'MusicArtist' && item.Type !== 'Audio' && (item.Type !== 'MusicAlbum' || !item.AlbumArtists || !item.AlbumArtists.length)) {
section.classList.add('hide');
return;
}
@@ -1174,7 +1207,7 @@ function renderSimilarItems(page, item, context) {
const similarCollapsible = page.querySelector('#similarCollapsible');
if (similarCollapsible) {
- if (item.Type != 'Movie' && item.Type != 'Trailer' && item.Type != 'Series' && item.Type != 'Program' && item.Type != 'Recording' && item.Type != 'MusicAlbum' && item.Type != 'MusicArtist' && item.Type != 'Playlist') {
+ if (item.Type != 'Movie' && item.Type != 'Trailer' && item.Type != 'Series' && item.Type != 'Program' && item.Type != 'Recording' && item.Type != 'MusicAlbum' && item.Type != 'MusicArtist' && item.Type != 'Playlist' && item.Type != 'Audio') {
similarCollapsible.classList.add('hide');
return;
}
diff --git a/src/controllers/lyrics.html b/src/controllers/lyrics.html
new file mode 100644
index 00000000000..d1e7b662cf9
--- /dev/null
+++ b/src/controllers/lyrics.html
@@ -0,0 +1,6 @@
+
diff --git a/src/controllers/lyrics.js b/src/controllers/lyrics.js
new file mode 100644
index 00000000000..d0107406e38
--- /dev/null
+++ b/src/controllers/lyrics.js
@@ -0,0 +1,250 @@
+import escapeHtml from 'escape-html';
+
+import autoFocuser from 'components/autoFocuser';
+import { appRouter } from '../components/router/appRouter';
+import layoutManager from 'components/layoutManager';
+import { playbackManager } from '../components/playback/playbackmanager';
+import ServerConnections from '../components/ServerConnections';
+
+import globalize from '../scripts/globalize';
+import LibraryMenu from '../scripts/libraryMenu';
+import Events from '../utils/events.ts';
+
+import '../styles/lyrics.scss';
+
+let currentPlayer;
+let currentItem;
+
+let savedLyrics;
+let isDynamicLyric = false;
+
+function dynamicLyricHtmlReducer(htmlAccumulator, lyric, index) {
+ if (layoutManager.tv) {
+ htmlAccumulator += `
`;
+ } else {
+ htmlAccumulator += `
${escapeHtml(lyric.Text)}
`;
+ }
+ return htmlAccumulator;
+}
+
+function staticLyricHtmlReducer(htmlAccumulator, lyric, index) {
+ if (layoutManager.tv) {
+ htmlAccumulator += `
`;
+ } else {
+ htmlAccumulator += `
${escapeHtml(lyric.Text)}
`;
+ }
+ return htmlAccumulator;
+}
+
+function getLyricIndex(time, lyrics) {
+ return lyrics.findLastIndex(lyric => lyric.Start <= time);
+}
+
+function getCurrentPlayTime() {
+ let currentTime = playbackManager.currentTime();
+ if (currentTime === undefined) currentTime = 0;
+ //convert to ticks
+ return currentTime * 10000;
+}
+
+export default function (view) {
+ function setPastLyricClassOnLine(line) {
+ const lyric = view.querySelector(`#lyricPosition${line}`);
+ if (lyric) {
+ lyric.classList.remove('futureLyric');
+ lyric.classList.add('pastLyric');
+ }
+ }
+
+ function setFutureLyricClassOnLine(line) {
+ const lyric = view.querySelector(`#lyricPosition${line}`);
+ if (lyric) {
+ lyric.classList.remove('pastLyric');
+ lyric.classList.add('futureLyric');
+ }
+ }
+
+ function setCurrentLyricClassOnLine(line) {
+ const lyric = view.querySelector(`#lyricPosition${line}`);
+ if (lyric) {
+ lyric.classList.remove('pastLyric');
+ lyric.classList.remove('futureLyric');
+ }
+ }
+
+ function updateAllLyricLines(currentLine, lyrics) {
+ for (let lyricIndex = 0; lyricIndex <= lyrics.length; lyricIndex++) {
+ if (lyricIndex < currentLine) {
+ setPastLyricClassOnLine(lyricIndex);
+ } else if (lyricIndex === currentLine) {
+ setCurrentLyricClassOnLine(lyricIndex);
+ } else if (lyricIndex > currentLine) {
+ setFutureLyricClassOnLine(lyricIndex);
+ }
+ }
+ }
+
+ function renderNoLyricMessage() {
+ const itemsContainer = view.querySelector('.dynamicLyricsContainer');
+ if (itemsContainer) {
+ const html = `
${globalize.translate('HeaderNoLyrics')}
`;
+ itemsContainer.innerHTML = html;
+ }
+ autoFocuser.autoFocus();
+ }
+
+ function renderDynamicLyrics(lyrics) {
+ const itemsContainer = view.querySelector('.dynamicLyricsContainer');
+ if (itemsContainer) {
+ const html = lyrics.reduce(dynamicLyricHtmlReducer, '');
+ itemsContainer.innerHTML = html;
+ }
+
+ const lyricLineArray = itemsContainer.querySelectorAll('.lyricsLine');
+
+ // attaches click event listener to change playtime to lyric start
+ lyricLineArray.forEach(element => {
+ element.addEventListener('click', () => onLyricClick(element.getAttribute('data-lyrictime')));
+ });
+
+ const currentIndex = getLyricIndex(getCurrentPlayTime(), lyrics);
+ updateAllLyricLines(currentIndex, savedLyrics);
+ }
+
+ function renderStaticLyrics(lyrics) {
+ const itemsContainer = view.querySelector('.dynamicLyricsContainer');
+ if (itemsContainer) {
+ const html = lyrics.reduce(staticLyricHtmlReducer, '');
+ itemsContainer.innerHTML = html;
+ }
+ }
+
+ function updateLyrics(lyrics) {
+ savedLyrics = lyrics;
+
+ isDynamicLyric = Object.prototype.hasOwnProperty.call(lyrics[0], 'Start');
+
+ if (isDynamicLyric) {
+ renderDynamicLyrics(savedLyrics);
+ } else {
+ renderStaticLyrics(savedLyrics);
+ }
+
+ autoFocuser.autoFocus(view);
+ }
+
+ function getLyrics(serverId, itemId) {
+ const apiClient = ServerConnections.getApiClient(serverId);
+
+ return apiClient.ajax({
+ url: apiClient.getUrl('Audio/' + itemId + '/Lyrics'),
+ type: 'GET',
+ dataType: 'json'
+ }).then((response) => {
+ if (!response.Lyrics) {
+ throw new Error();
+ }
+ return response.Lyrics;
+ });
+ }
+
+ function bindToPlayer(player) {
+ if (player === currentPlayer) {
+ return;
+ }
+
+ releaseCurrentPlayer();
+
+ currentPlayer = player;
+
+ if (!player) {
+ return;
+ }
+
+ Events.on(player, 'timeupdate', onTimeUpdate);
+ Events.on(player, 'playbackstart', onPlaybackStart);
+ Events.on(player, 'playbackstop', onPlaybackStop);
+ }
+
+ function releaseCurrentPlayer() {
+ const player = currentPlayer;
+
+ if (player) {
+ Events.off(player, 'timeupdate', onTimeUpdate);
+ Events.off(player, 'playbackstart', onPlaybackStart);
+ Events.off(player, 'playbackstop', onPlaybackStop);
+ currentPlayer = null;
+ }
+ }
+
+ function onLyricClick(lyricTime) {
+ playbackManager.seek(lyricTime);
+ if (playbackManager.paused()) {
+ playbackManager.playPause(currentPlayer);
+ }
+ }
+
+ function onTimeUpdate() {
+ if (isDynamicLyric) {
+ const currentIndex = getLyricIndex(getCurrentPlayTime(), savedLyrics);
+ updateAllLyricLines(currentIndex, savedLyrics);
+ }
+ }
+
+ function onPlaybackStart(event, state) {
+ if (currentItem.Id !== state.NowPlayingItem.Id) {
+ onLoad();
+ }
+ }
+
+ function onPlaybackStop(_, state) {
+ // TODO: switch to appRouter.back(), with fix to navigation to /#/queue. Which is broken when it has nothing playing
+ if (!state.NextMediaType) {
+ appRouter.goHome();
+ }
+ }
+
+ function onPlayerChange() {
+ const player = playbackManager.getCurrentPlayer();
+ bindToPlayer(player);
+ }
+
+ function onLoad() {
+ savedLyrics = null;
+ currentItem = null;
+ isDynamicLyric = false;
+
+ LibraryMenu.setTitle(globalize.translate('Lyrics'));
+
+ const player = playbackManager.getCurrentPlayer();
+
+ if (player) {
+ bindToPlayer(player);
+
+ const state = playbackManager.getPlayerState(player);
+ currentItem = state.NowPlayingItem;
+
+ const serverId = state.NowPlayingItem.ServerId;
+ const itemId = state.NowPlayingItem.Id;
+
+ getLyrics(serverId, itemId).then(updateLyrics).catch(renderNoLyricMessage);
+ } else {
+ // if nothing is currently playing, no lyrics to display redirect to home
+ appRouter.goHome();
+ }
+ }
+
+ view.addEventListener('viewshow', function () {
+ Events.on(playbackManager, 'playerchange', onPlayerChange);
+ try {
+ onLoad();
+ } catch (e) {
+ appRouter.goHome();
+ }
+ });
+
+ view.addEventListener('viewbeforehide', function () {
+ Events.off(playbackManager, 'playerchange', onPlayerChange);
+ releaseCurrentPlayer();
+ });
+}
diff --git a/src/controllers/playback/queue/index.html b/src/controllers/playback/queue/index.html
index cb4706f152a..bb3a85cd0af 100644
--- a/src/controllers/playback/queue/index.html
+++ b/src/controllers/playback/queue/index.html
@@ -81,6 +81,10 @@
+
+
diff --git a/src/scripts/deleteHelper.js b/src/scripts/deleteHelper.js
index e1857e33f0c..58a31045cbc 100644
--- a/src/scripts/deleteHelper.js
+++ b/src/scripts/deleteHelper.js
@@ -1,9 +1,9 @@
+import globalize from './globalize';
+import alert from '../components/alert';
import confirm from '../components/confirm/confirm';
import { appRouter } from '../components/router/appRouter';
-import globalize from './globalize';
import ServerConnections from '../components/ServerConnections';
-import alert from '../components/alert';
import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
function alertText(options) {
@@ -54,6 +54,28 @@ export function deleteItem(options) {
});
}
+export function deleteLyrics (item) {
+ return confirm({
+ title: globalize.translate('HeaderDeleteLyrics'),
+ text: globalize.translate('ConfirmDeleteLyrics'),
+ confirmText: globalize.translate('Delete'),
+ primary: 'delete'
+ }).then(() => {
+ const apiClient = ServerConnections.getApiClient(item.ServerId);
+ return apiClient.ajax({
+ url: apiClient.getUrl('Audio/' + item.Id + '/Lyrics'),
+ type: 'DELETE'
+ }).catch((err) => {
+ const result = function () {
+ return Promise.reject(err);
+ };
+
+ return alertText(globalize.translate('ErrorDeletingLyrics')).then(result, result);
+ });
+ });
+}
+
export default {
- deleteItem: deleteItem
+ deleteItem,
+ deleteLyrics
};
diff --git a/src/strings/en-us.json b/src/strings/en-us.json
index f593993fbd0..bb2c5e85e9c 100644
--- a/src/strings/en-us.json
+++ b/src/strings/en-us.json
@@ -162,6 +162,7 @@
"ConfirmDeleteItem": "Deleting this item will delete it from both the file system and your media library. Are you sure you wish to continue?",
"ConfirmDeleteSeries": "Deleting this series will delete ALL {0} episodes from both the file system and your media library. Are you sure you wish to continue?",
"ConfirmDeleteItems": "Deleting these items will delete them from both the file system and your media library. Are you sure you wish to continue?",
+ "ConfirmDeleteLyrics": "Deleting these lyrics will delete them from both the file system and your media library. Are you sure you wish to continue?",
"ConfirmDeletion": "Confirm Deletion",
"ConfirmEndPlayerSession": "Would you like to shutdown Jellyfin on {0}?",
"Connect": "Connect",
@@ -191,6 +192,7 @@
"DeleteDevicesConfirmation": "Are you sure you wish to delete all devices? All other sessions will be logged out. Devices will reappear the next time a user signs in.",
"DeleteImage": "Delete Image",
"DeleteImageConfirmation": "Are you sure you wish to delete this image?",
+ "DeleteLyrics": "Delete lyrics",
"DeleteMedia": "Delete media",
"DeleteSeries": "Delete Series",
"DeleteEpisode": "Delete Episode",
@@ -277,6 +279,7 @@
"ErrorAddingXmlTvFile": "There was an error accessing the XMLTV file. Please ensure the file exists and try again.",
"ErrorDefault": "There was an error processing the request. Please try again later.",
"ErrorDeletingItem": "There was an error deleting the item from the server. Please check that Jellyfin has write access to the media folder and try again.",
+ "ErrorDeletingLyrics": "There was an error deleting the lyrics from the server. Please check that Jellyfin has write access to the media folder and try again.",
"ErrorGettingTvLineups": "There was an error downloading TV lineups. Please ensure your information is correct and try again.",
"ErrorPlayerNotFound": "No player found for the requested media.",
"ErrorPleaseSelectLineup": "Please select a lineup and try again. If no lineups are available, then please check that your username, password, and postal code is correct.",
@@ -371,6 +374,7 @@
"HeaderDeleteItem": "Delete Item",
"HeaderDeleteSeries": "Delete Series",
"HeaderDeleteItems": "Delete Items",
+ "HeaderDeleteLyrics": "Delete Lyrics",
"HeaderDeleteProvider": "Delete Provider",
"HeaderDeleteTaskTrigger": "Delete Task Trigger",
"HeaderDetectMyDevices": "Detect My Devices",
@@ -428,6 +432,7 @@
"HeaderNewRepository": "New Repository",
"HeaderNextEpisodePlayingInValue": "Next Episode Playing in {0}",
"HeaderNextVideoPlayingInValue": "Next Video Playing in {0}",
+ "HeaderNoLyrics": "No lyrics found",
"HeaderOnNow": "On Now",
"HeaderOtherItems": "Other Items",
"HeaderParentalRatings": "Parental Ratings",
@@ -962,6 +967,7 @@
"LogoScreensaver": "Logo Screensaver",
"Lyric": "Lyric",
"Lyricist": "Lyricist",
+ "Lyrics": "Lyrics",
"ManageLibrary": "Manage library",
"ManageRecording": "Manage recording",
"MapChannels": "Map Channels",
@@ -1522,6 +1528,7 @@
"VideoAudio": "Video Audio",
"ViewAlbum": "View album",
"ViewAlbumArtist": "View album artist",
+ "ViewLyrics": "View lyrics",
"ViewPlaybackInfo": "View playback info",
"Watched": "Watched",
"Wednesday": "Wednesday",
diff --git a/src/styles/lyrics.scss b/src/styles/lyrics.scss
new file mode 100644
index 00000000000..8642dd05b13
--- /dev/null
+++ b/src/styles/lyrics.scss
@@ -0,0 +1,31 @@
+.lyricPage {
+ padding-top: 4.2em !important;
+ display: flex;
+ justify-content: center;
+}
+
+.dynamicLyricsContainer {
+ display: flex;
+ flex-direction: column;
+}
+
+.lyricsLine {
+ display: inline-block;
+ width: fit-content;
+ margin: 0.1em;
+ font-size: 30px;
+ color: inherit;
+ min-height: 2em;
+}
+
+.futureLyric {
+ opacity: 0.3;
+}
+
+.pastLyric {
+ opacity: 0.7;
+}
+
+.dynamicLyric {
+ cursor: pointer;
+}