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

Use remove+add pattern for icons

This commit is contained in:
Dmitry Lyzo 2020-05-02 14:02:44 +03:00
parent d98645135b
commit a3bc8c183e
7 changed files with 62 additions and 42 deletions

View file

@ -571,9 +571,9 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
row.querySelector(".btnSessionStop").classList.add("hide");
}
let icons = ["play_arrow", "pause"];
if (session.PlayState && session.PlayState.IsPaused) icons = icons.reverse();
btnSessionPlayPause.querySelector(".material-icons").classList.replace(icons[0], icons[1]);
const btnSessionPlayPauseIcon = btnSessionPlayPause.querySelector(".material-icons");
btnSessionPlayPauseIcon.classList.remove("play_arrow", "pause");
btnSessionPlayPauseIcon.classList.add(session.PlayState && session.PlayState.IsPaused ? "play_arrow" : "pause");
row.querySelector(".sessionNowPlayingStreamInfo").innerHTML = DashboardPage.getSessionNowPlayingStreamInfo(session);
row.querySelector(".sessionNowPlayingTime").innerHTML = DashboardPage.getSessionNowPlayingTime(session);

View file

@ -543,12 +543,17 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
}
function updateFullscreenIcon() {
const button = view.querySelector(".btnFullscreen");
const icon = button.querySelector(".material-icons");
icon.classList.remove("fullscreen_exit", "fullscreen");
if (playbackManager.isFullscreen(currentPlayer)) {
view.querySelector(".btnFullscreen").setAttribute("title", globalize.translate("ExitFullscreen"));
view.querySelector(".btnFullscreen .material-icons").classList.replace("fullscreen", "fullscreen_exit");
button.setAttribute("title", globalize.translate("ExitFullscreen") + " (f)");
icon.classList.add("fullscreen_exit");
} else {
view.querySelector(".btnFullscreen").setAttribute("title", globalize.translate("Fullscreen") + " (f)");
view.querySelector(".btnFullscreen .material-icons").classList.replace("fullscreen_exit", "fullscreen");
button.setAttribute("title", globalize.translate("Fullscreen") + " (f)");
icon.classList.add("fullscreen");
}
}
@ -746,13 +751,17 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
}
function updatePlayPauseState(isPaused) {
var button = view.querySelector(".btnPause .material-icons");
const btnPlayPause = view.querySelector(".btnPause");
const btnPlayPauseIcon = btnPlayPause.querySelector(".material-icons");
btnPlayPauseIcon.classList.remove("play_arrow", "pause");
if (isPaused) {
button.classList.replace("pause", "play_arrow");
button.setAttribute("title", globalize.translate("ButtonPlay") + " (k)");
btnPlayPauseIcon.classList.add("play_arrow");
btnPlayPause.setAttribute("title", globalize.translate("ButtonPlay") + " (k)");
} else {
button.classList.replace("play_arrow", "pause");
button.setAttribute("title", globalize.translate("ButtonPause") + " (k)");
btnPlayPauseIcon.classList.add("pause");
btnPlayPause.setAttribute("title", globalize.translate("ButtonPause") + " (k)");
}
}
@ -883,18 +892,23 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
showVolumeSlider = false;
}
const buttonMute = view.querySelector(".buttonMute");
const buttonMuteIcon = buttonMute.querySelector(".material-icons");
buttonMuteIcon.classList.remove("volume_off", "volume_up");
if (isMuted) {
view.querySelector(".buttonMute").setAttribute("title", globalize.translate("Unmute") + " (m)");
view.querySelector(".buttonMute .material-icons").classList.replace("volume_up", "volume_off");
buttonMute.setAttribute("title", globalize.translate("Unmute") + " (m)");
buttonMuteIcon.classList.add("volume_off");
} else {
view.querySelector(".buttonMute").setAttribute("title", globalize.translate("Mute") + " (m)");
view.querySelector(".buttonMute .material-icons").classList.replace("volume_off", "volume_up");
buttonMute.setAttribute("title", globalize.translate("Mute") + " (m)");
buttonMuteIcon.classList.add("volume_up");
}
if (showMuteButton) {
view.querySelector(".buttonMute").classList.remove("hide");
buttonMute.classList.remove("hide");
} else {
view.querySelector(".buttonMute").classList.add("hide");
buttonMute.classList.add("hide");
}
if (nowPlayingVolumeSlider) {