mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Retranslate UI instead of recreating it
This commit is contained in:
parent
e6f1802508
commit
2b7130351e
1 changed files with 26 additions and 13 deletions
|
@ -29,10 +29,10 @@ import 'flexStyles';
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
html += '<div class="headerRight">';
|
html += '<div class="headerRight">';
|
||||||
html += '<span class="headerSelectedPlayer"></span>';
|
html += '<span class="headerSelectedPlayer"></span>';
|
||||||
html += `<button is="paper-icon-button-light" class="headerSyncButton syncButton headerButton headerButtonRight hide" title="${globalize.translate('ButtonSyncPlay')}"><span class="material-icons sync_disabled"></span></button>`;
|
html += '<button is="paper-icon-button-light" class="headerSyncButton syncButton headerButton headerButtonRight hide"><span class="material-icons sync_disabled"></span></button>';
|
||||||
html += `<button is="paper-icon-button-light" class="headerAudioPlayerButton audioPlayerButton headerButton headerButtonRight hide" title="${globalize.translate('ButtonPlayer')}"><span class="material-icons music_note"></span></button>`;
|
html += '<button is="paper-icon-button-light" class="headerAudioPlayerButton audioPlayerButton headerButton headerButtonRight hide"><span class="material-icons music_note"></span></button>';
|
||||||
html += `<button is="paper-icon-button-light" class="headerCastButton castButton headerButton headerButtonRight hide" title="${globalize.translate('ButtonCast')}"><span class="material-icons cast"></span></button>`;
|
html += '<button is="paper-icon-button-light" class="headerCastButton castButton headerButton headerButtonRight hide"><span class="material-icons cast"></span></button>';
|
||||||
html += `<button type="button" is="paper-icon-button-light" class="headerButton headerButtonRight headerSearchButton hide" title="${globalize.translate('Search')}"><span class="material-icons search"></span></button>`;
|
html += '<button type="button" is="paper-icon-button-light" class="headerButton headerButtonRight headerSearchButton hide"><span class="material-icons search"></span></button>';
|
||||||
html += '<button is="paper-icon-button-light" class="headerButton headerButtonRight headerUserButton hide"><span class="material-icons person"></span></button>';
|
html += '<button is="paper-icon-button-light" class="headerButton headerButtonRight headerUserButton hide"><span class="material-icons person"></span></button>';
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
@ -43,13 +43,16 @@ import 'flexStyles';
|
||||||
skinHeader.classList.add('skinHeader-blurred');
|
skinHeader.classList.add('skinHeader-blurred');
|
||||||
skinHeader.innerHTML = html;
|
skinHeader.innerHTML = html;
|
||||||
|
|
||||||
|
headerBackButton = skinHeader.querySelector('.headerBackButton');
|
||||||
headerHomeButton = skinHeader.querySelector('.headerHomeButton');
|
headerHomeButton = skinHeader.querySelector('.headerHomeButton');
|
||||||
|
mainDrawerButton = skinHeader.querySelector('.mainDrawerButton');
|
||||||
headerUserButton = skinHeader.querySelector('.headerUserButton');
|
headerUserButton = skinHeader.querySelector('.headerUserButton');
|
||||||
headerCastButton = skinHeader.querySelector('.headerCastButton');
|
headerCastButton = skinHeader.querySelector('.headerCastButton');
|
||||||
headerAudioPlayerButton = skinHeader.querySelector('.headerAudioPlayerButton');
|
headerAudioPlayerButton = skinHeader.querySelector('.headerAudioPlayerButton');
|
||||||
headerSearchButton = skinHeader.querySelector('.headerSearchButton');
|
headerSearchButton = skinHeader.querySelector('.headerSearchButton');
|
||||||
headerSyncButton = skinHeader.querySelector('.headerSyncButton');
|
headerSyncButton = skinHeader.querySelector('.headerSyncButton');
|
||||||
|
|
||||||
|
retranslateUi();
|
||||||
lazyLoadViewMenuBarImages();
|
lazyLoadViewMenuBarImages();
|
||||||
bindMenuEvents();
|
bindMenuEvents();
|
||||||
updateCastIcon();
|
updateCastIcon();
|
||||||
|
@ -73,8 +76,26 @@ import 'flexStyles';
|
||||||
appRouter.back();
|
appRouter.back();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function retranslateUi() {
|
||||||
|
if (headerSyncButton) {
|
||||||
|
headerSyncButton.title = globalize.translate('ButtonSyncPlay');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (headerAudioPlayerButton) {
|
||||||
|
headerAudioPlayerButton.title = globalize.translate('ButtonPlayer');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (headerCastButton) {
|
||||||
|
headerCastButton.title = globalize.translate('ButtonCast');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (headerSearchButton) {
|
||||||
|
headerSearchButton.title = globalize.translate('Search');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function updateUserInHeader(user) {
|
function updateUserInHeader(user) {
|
||||||
renderHeader();
|
retranslateUi();
|
||||||
|
|
||||||
let hasImage;
|
let hasImage;
|
||||||
|
|
||||||
|
@ -153,14 +174,10 @@ import 'flexStyles';
|
||||||
}
|
}
|
||||||
|
|
||||||
function bindMenuEvents() {
|
function bindMenuEvents() {
|
||||||
mainDrawerButton = document.querySelector('.mainDrawerButton');
|
|
||||||
|
|
||||||
if (mainDrawerButton) {
|
if (mainDrawerButton) {
|
||||||
mainDrawerButton.addEventListener('click', toggleMainDrawer);
|
mainDrawerButton.addEventListener('click', toggleMainDrawer);
|
||||||
}
|
}
|
||||||
|
|
||||||
const headerBackButton = skinHeader.querySelector('.headerBackButton');
|
|
||||||
|
|
||||||
if (headerBackButton) {
|
if (headerBackButton) {
|
||||||
headerBackButton.addEventListener('click', onBackClick);
|
headerBackButton.addEventListener('click', onBackClick);
|
||||||
}
|
}
|
||||||
|
@ -772,10 +789,6 @@ import 'flexStyles';
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateBackButton(page) {
|
function updateBackButton(page) {
|
||||||
if (!headerBackButton) {
|
|
||||||
headerBackButton = document.querySelector('.headerBackButton');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (headerBackButton) {
|
if (headerBackButton) {
|
||||||
if (page.getAttribute('data-backbutton') !== 'false' && appRouter.canGoBack()) {
|
if (page.getAttribute('data-backbutton') !== 'false' && appRouter.canGoBack()) {
|
||||||
headerBackButton.classList.remove('hide');
|
headerBackButton.classList.remove('hide');
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue