mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

add Lyrics

Browse source
This commit is contained in:
robert-hamilton36 2023-04-28 15:38:51 +12:00
parent 5defb79271
commit c42b96df3e
13 changed files with 456 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/components/nowPlayingBar/nowPlayingBar.js
View file

@ -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;