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

Use remove+add pattern for icons

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

13
src/components/nowplayingbar/nowplayingbar.js
View file

@ -280,11 +280,10 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
function updatePlayPauseState(isPaused) { function updatePlayPauseState(isPaused) {
if (playPauseButtons) { if (playPauseButtons) {
let icons = ['play_arrow', 'pause'];
if (isPaused) icons = icons.reverse();
playPauseButtons.forEach((button) => { 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; showMuteButton = false;
} }
let icons = ['volume_off', 'volume_up']; const muteButtonIcon = muteButton.querySelector('.material-icons');
if (isMuted) icons = icons.reverse(); muteButtonIcon.classList.remove('volume_off', 'volume_up');
muteButton.querySelector('.material-icons').classList.replace(icons[0], icons[1]); muteButtonIcon.classList.add(isMuted ? 'volume_off' : 'volume_up');
if (supportedCommands.indexOf('SetVolume') === -1) { if (supportedCommands.indexOf('SetVolume') === -1) {
showVolumeSlider = false; showVolumeSlider = false;

5
src/components/playback/volumeosd.js
View file

@ -101,9 +101,8 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
function updatePlayerVolumeState(isMuted, volume) { function updatePlayerVolumeState(isMuted, volume) {
if (iconElement) { if (iconElement) {
let icons = ["volume_off", "volume_up"]; iconElement.classList.remove('volume_off', 'volume_up');
if (isMuted) icons = icons.reverse(); iconElement.classList.add(isMuted ? 'volume_off' : 'volume_up');
iconElement.classList.replace(icons[0], icons[1]);
} }
if (progressElement) { if (progressElement) {
progressElement.style.width = (volume || 0) + '%'; progressElement.style.width = (volume || 0) + '%';

25
src/components/remotecontrol/remotecontrol.js
View file

@ -349,18 +349,23 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
showVolumeSlider = false; showVolumeSlider = false;
} }
const buttonMute = view.querySelector(".buttonMute");
const buttonMuteIcon = buttonMute.querySelector(".material-icons");
buttonMuteIcon.classList.remove("volume_off", "volume_up");
if (isMuted) { if (isMuted) {
view.querySelector(".buttonMute").setAttribute("title", globalize.translate("Unmute")); buttonMute.setAttribute("title", globalize.translate("Unmute"));
view.querySelector(".buttonMute .material-icons").classList.replace("volume_up", "volume_off"); buttonMuteIcon.classList.add("volume_off");
} else { } else {
view.querySelector(".buttonMute").setAttribute("title", globalize.translate("Mute")); buttonMute.setAttribute("title", globalize.translate("Mute"));
view.querySelector(".buttonMute .material-icons").classList.replace("volume_off", "volume_up"); buttonMuteIcon.classList.add("volume_up");
} }
if (showMuteButton) { if (showMuteButton) {
view.querySelector(".buttonMute").classList.remove("hide"); buttonMute.classList.remove("hide");
} else { } else {
view.querySelector(".buttonMute").classList.add("hide"); buttonMute.classList.add("hide");
} }
var nowPlayingVolumeSlider = context.querySelector(".nowPlayingVolumeSlider"); var nowPlayingVolumeSlider = context.querySelector(".nowPlayingVolumeSlider");
@ -382,9 +387,11 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
function updatePlayPauseState(isPaused, isActive) { function updatePlayPauseState(isPaused, isActive) {
var context = dlg; var context = dlg;
var btnPlayPause = context.querySelector(".btnPlayPause"); var btnPlayPause = context.querySelector(".btnPlayPause");
let icons = ["play_circle_filled", "pause_circle_filled"]; const btnPlayPauseIcon = btnPlayPause.querySelector(".material-icons");
if (isPaused) icons = icons.reverse();
btnPlayPause.querySelector(".material-icons").classList.replace(icons[0], icons[1]); btnPlayPauseIcon.classList.remove("play_circle_filled", "pause_circle_filled");
btnPlayPauseIcon.classList.add(isPaused ? "play_circle_filled" : "pause_circle_filled");
buttonVisible(btnPlayPause, isActive); buttonVisible(btnPlayPause, isActive);
} }

5
src/components/tabbedview/itemstab.js
View file

@ -181,9 +181,8 @@ define(['playbackManager', 'userSettings', 'alphaPicker', 'alphaNumericShortcuts
return; return;
} }
let icons = ["arrow_downward", "arrow_upward"]; btnSortIcon.classList.remove('arrow_downward', 'arrow_upward');
if (values.sortOrder === 'Descending') icons = icons.reverse(); btnSortIcon.classList.add(values.sortOrder === 'Descending' ? 'arrow_downward' : 'arrow_upward');
btnSortIcon.classList.replace(icons[0], icons[1]);
} }
function bindAll(elems, eventName, fn) { function bindAll(elems, eventName, fn) {

6
src/controllers/dashboard/dashboard.js
View file

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

44
src/controllers/playback/videoosd.js
View file

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

6
src/scripts/librarymenu.js
View file

@ -616,12 +616,14 @@ define(["dom", "layoutManager", "inputManager", "connectionManager", "events", "
var info = playbackManager.getPlayerInfo(); var info = playbackManager.getPlayerInfo();
var icon = headerCastButton.querySelector(".material-icons"); var icon = headerCastButton.querySelector(".material-icons");
icon.classList.remove("cast_connected", "cast");
if (info && !info.isLocalPlayer) { if (info && !info.isLocalPlayer) {
icon.classList.replace("cast", "cast_connected"); icon.classList.add("cast_connected");
headerCastButton.classList.add("castButton-active"); headerCastButton.classList.add("castButton-active");
context.querySelector(".headerSelectedPlayer").innerHTML = info.deviceName || info.name; context.querySelector(".headerSelectedPlayer").innerHTML = info.deviceName || info.name;
} else { } else {
icon.classList.replace("cast_connected", "cast"); icon.classList.add("cast");
headerCastButton.classList.remove("castButton-active"); headerCastButton.classList.remove("castButton-active");
context.querySelector(".headerSelectedPlayer").innerHTML = ""; context.querySelector(".headerSelectedPlayer").innerHTML = "";
} }