diff --git a/src/components/nowplayingbar/nowplayingbar.js b/src/components/nowplayingbar/nowplayingbar.js index 2f44e31986..0b369f1f3c 100644 --- a/src/components/nowplayingbar/nowplayingbar.js +++ b/src/components/nowplayingbar/nowplayingbar.js @@ -280,11 +280,10 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader', function updatePlayPauseState(isPaused) { if (playPauseButtons) { - let icons = ['play_arrow', 'pause']; - if (isPaused) icons = icons.reverse(); - playPauseButtons.forEach((button) => { - button.querySelector('.material-icons').classList.replace(icons[0], icons[1]); + const icon = button.querySelector('.material-icons'); + icon.classList.remove('play_arrow', 'pause'); + icon.classList.add(isPaused ? 'play_arrow' : 'pause'); }); } } @@ -387,9 +386,9 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader', showMuteButton = false; } - let icons = ['volume_off', 'volume_up']; - if (isMuted) icons = icons.reverse(); - muteButton.querySelector('.material-icons').classList.replace(icons[0], icons[1]); + const muteButtonIcon = muteButton.querySelector('.material-icons'); + muteButtonIcon.classList.remove('volume_off', 'volume_up'); + muteButtonIcon.classList.add(isMuted ? 'volume_off' : 'volume_up'); if (supportedCommands.indexOf('SetVolume') === -1) { showVolumeSlider = false; diff --git a/src/components/playback/volumeosd.js b/src/components/playback/volumeosd.js index ab124ab22b..95a13d769d 100644 --- a/src/components/playback/volumeosd.js +++ b/src/components/playback/volumeosd.js @@ -101,9 +101,8 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia function updatePlayerVolumeState(isMuted, volume) { if (iconElement) { - let icons = ["volume_off", "volume_up"]; - if (isMuted) icons = icons.reverse(); - iconElement.classList.replace(icons[0], icons[1]); + iconElement.classList.remove('volume_off', 'volume_up'); + iconElement.classList.add(isMuted ? 'volume_off' : 'volume_up'); } if (progressElement) { progressElement.style.width = (volume || 0) + '%'; diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js index 3f3c4d1f1d..a9f0a4550f 100644 --- a/src/components/remotecontrol/remotecontrol.js +++ b/src/components/remotecontrol/remotecontrol.js @@ -349,18 +349,23 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL 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")); - view.querySelector(".buttonMute .material-icons").classList.replace("volume_up", "volume_off"); + buttonMute.setAttribute("title", globalize.translate("Unmute")); + buttonMuteIcon.classList.add("volume_off"); } else { - view.querySelector(".buttonMute").setAttribute("title", globalize.translate("Mute")); - view.querySelector(".buttonMute .material-icons").classList.replace("volume_off", "volume_up"); + buttonMute.setAttribute("title", globalize.translate("Mute")); + 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"); } var nowPlayingVolumeSlider = context.querySelector(".nowPlayingVolumeSlider"); @@ -382,9 +387,11 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL function updatePlayPauseState(isPaused, isActive) { var context = dlg; var btnPlayPause = context.querySelector(".btnPlayPause"); - let icons = ["play_circle_filled", "pause_circle_filled"]; - if (isPaused) icons = icons.reverse(); - btnPlayPause.querySelector(".material-icons").classList.replace(icons[0], icons[1]); + const btnPlayPauseIcon = btnPlayPause.querySelector(".material-icons"); + + btnPlayPauseIcon.classList.remove("play_circle_filled", "pause_circle_filled"); + btnPlayPauseIcon.classList.add(isPaused ? "play_circle_filled" : "pause_circle_filled"); + buttonVisible(btnPlayPause, isActive); } diff --git a/src/components/tabbedview/itemstab.js b/src/components/tabbedview/itemstab.js index 26da63c894..884cfa2015 100644 --- a/src/components/tabbedview/itemstab.js +++ b/src/components/tabbedview/itemstab.js @@ -181,9 +181,8 @@ define(['playbackManager', 'userSettings', 'alphaPicker', 'alphaNumericShortcuts return; } - let icons = ["arrow_downward", "arrow_upward"]; - if (values.sortOrder === 'Descending') icons = icons.reverse(); - btnSortIcon.classList.replace(icons[0], icons[1]); + btnSortIcon.classList.remove('arrow_downward', 'arrow_upward'); + btnSortIcon.classList.add(values.sortOrder === 'Descending' ? 'arrow_downward' : 'arrow_upward'); } function bindAll(elems, eventName, fn) { diff --git a/src/controllers/dashboard/dashboard.js b/src/controllers/dashboard/dashboard.js index ed16d90a38..6dd1ceae28 100644 --- a/src/controllers/dashboard/dashboard.js +++ b/src/controllers/dashboard/dashboard.js @@ -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); diff --git a/src/controllers/playback/videoosd.js b/src/controllers/playback/videoosd.js index ac6f796567..55c338b92f 100644 --- a/src/controllers/playback/videoosd.js +++ b/src/controllers/playback/videoosd.js @@ -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) { diff --git a/src/scripts/librarymenu.js b/src/scripts/librarymenu.js index 16104eb34e..fbc641b741 100644 --- a/src/scripts/librarymenu.js +++ b/src/scripts/librarymenu.js @@ -616,12 +616,14 @@ define(["dom", "layoutManager", "inputManager", "connectionManager", "events", " var info = playbackManager.getPlayerInfo(); var icon = headerCastButton.querySelector(".material-icons"); + icon.classList.remove("cast_connected", "cast"); + if (info && !info.isLocalPlayer) { - icon.classList.replace("cast", "cast_connected"); + icon.classList.add("cast_connected"); headerCastButton.classList.add("castButton-active"); context.querySelector(".headerSelectedPlayer").innerHTML = info.deviceName || info.name; } else { - icon.classList.replace("cast_connected", "cast"); + icon.classList.add("cast"); headerCastButton.classList.remove("castButton-active"); context.querySelector(".headerSelectedPlayer").innerHTML = ""; }