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

Reduce cognitive complexity in card builder component

Browse source
This commit is contained in:
Dmitriy Dubson 2023-10-08 11:46:49 -04:00
parent 8af76ca3e7
commit c8a7c7040a
15 changed files with 735 additions and 391 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -23,6 +23,7 @@ import Dashboard from '../../utils/dashboard';
import ServerConnections from '../../components/ServerConnections';
import alert from '../../components/alert';
import confirm from '../../components/confirm/confirm';
import { getDefaultBackgroundClass } from '../../components/cardbuilder/cardBuilderUtils';
function showPlaybackInfo(btn, session) {
let title;
@ -259,7 +260,7 @@ function renderActiveConnections(view, sessions) {
html += '<div class="cardBox visualCardBox">';
html += '<div class="cardScalable visualCardBox-cardScalable">';
html += '<div class="cardPadder cardPadder-backdrop"></div>';
html += `<div class="cardContent ${cardBuilder.getDefaultBackgroundClass()}">`;
html += `<div class="cardContent ${getDefaultBackgroundClass()}">`;
if (imgUrl) {
html += '<div class="sessionNowPlayingContent sessionNowPlayingContent-withbackground"';

4
src/controllers/dashboard/devices/devices.js
View file

@ -1,5 +1,4 @@
import escapeHtml from 'escape-html';
import cardBuilder from '../../../components/cardbuilder/cardBuilder';
import loading from '../../../components/loading/loading';
import dom from '../../../scripts/dom';
import globalize from '../../../scripts/globalize';
@ -11,6 +10,7 @@ import '../../../elements/emby-itemscontainer/emby-itemscontainer';
import '../../../components/cardbuilder/card.scss';
import Dashboard from '../../../utils/dashboard';
import confirm from '../../../components/confirm/confirm';
import { getDefaultBackgroundClass } from '../../../components/cardbuilder/cardBuilderUtils';
// Local cache of loaded
let deviceIds = [];
@ -94,7 +94,7 @@ function load(page, devices) {
deviceHtml += '<div class="cardBox visualCardBox">';
deviceHtml += '<div class="cardScalable">';
deviceHtml += '<div class="cardPadder cardPadder-backdrop"></div>';
deviceHtml += `<a is="emby-linkbutton" href="#/dashboard/devices/edit?id=${escapeHtml(device.Id)}" class="cardContent cardImageContainer ${cardBuilder.getDefaultBackgroundClass()}">`;
deviceHtml += `<a is="emby-linkbutton" href="#/dashboard/devices/edit?id=${escapeHtml(device.Id)}" class="cardContent cardImageContainer ${getDefaultBackgroundClass()}">`;
// audit note: getDeviceIcon returns static text
const iconUrl = imageHelper.getDeviceIcon(device);

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

@ -10,7 +10,7 @@ import '../../components/cardbuilder/card.scss';
import '../../elements/emby-itemrefreshindicator/emby-itemrefreshindicator';
import Dashboard, { pageClassOn, pageIdOn } from '../../utils/dashboard';
import confirm from '../../components/confirm/confirm';
import cardBuilder from '../../components/cardbuilder/cardBuilder';
import { getDefaultBackgroundClass } from '../../components/cardbuilder/cardBuilderUtils';
function addVirtualFolder(page) {
import('../../components/mediaLibraryCreator/mediaLibraryCreator').then(({ default: MediaLibraryCreator }) => {
@ -275,11 +275,11 @@ function getVirtualFolderHtml(page, virtualFolder, index) {
let hasCardImageContainer;
if (imgUrl) {
html += `<div class="cardImageContainer editLibrary ${imgUrl ? '' : cardBuilder.getDefaultBackgroundClass()}" style="cursor:pointer">`;
html += `<div class="cardImageContainer editLibrary ${imgUrl ? '' : getDefaultBackgroundClass()}" style="cursor:pointer">`;
html += `<img src="${imgUrl}" style="width:100%" />`;
hasCardImageContainer = true;
} else if (!virtualFolder.showNameWithIcon) {
html += `<div class="cardImageContainer editLibrary ${cardBuilder.getDefaultBackgroundClass()}" style="cursor:pointer;">`;
html += `<div class="cardImageContainer editLibrary ${getDefaultBackgroundClass()}" style="cursor:pointer;">`;
html += '<span class="cardImageIcon material-icons ' + (virtualFolder.icon || imageHelper.getLibraryIcon(virtualFolder.CollectionType)) + '" aria-hidden="true"></span>';
hasCardImageContainer = true;
}

4
src/controllers/dashboard/plugins/available/index.js
View file

@ -3,11 +3,11 @@ import escapeHTML from 'escape-html';
import loading from '../../../../components/loading/loading';
import libraryMenu from '../../../../scripts/libraryMenu';
import globalize from '../../../../scripts/globalize';
import * as cardBuilder from '../../../../components/cardbuilder/cardBuilder.js';
import '../../../../components/cardbuilder/card.scss';
import '../../../../elements/emby-button/emby-button';
import '../../../../elements/emby-checkbox/emby-checkbox';
import '../../../../elements/emby-select/emby-select';
import { getDefaultBackgroundClass } from '../../../../components/cardbuilder/cardBuilderUtils';
function reloadList(page) {
loading.show();
@ -137,7 +137,7 @@ function getPluginHtml(plugin, options, installedPlugins) {
if (plugin.imageUrl) {
html += `<img src="${escapeHTML(plugin.imageUrl)}" style="width:100%" />`;
} else {
html += `<div class="cardImage flex align-items-center justify-content-center ${cardBuilder.getDefaultBackgroundClass()}">`;
html += `<div class="cardImage flex align-items-center justify-content-center ${getDefaultBackgroundClass()}">`;
html += '<span class="cardImageIcon material-icons extension" aria-hidden="true"></span>';
html += '</div>';
}

4
src/controllers/dashboard/plugins/installed/index.js
View file

@ -2,11 +2,11 @@ import loading from '../../../../components/loading/loading';
import libraryMenu from '../../../../scripts/libraryMenu';
import dom from '../../../../scripts/dom';
import globalize from '../../../../scripts/globalize';
import * as cardBuilder from '../../../../components/cardbuilder/cardBuilder.js';
import '../../../../components/cardbuilder/card.scss';
import '../../../../elements/emby-button/emby-button';
import Dashboard, { pageIdOn } from '../../../../utils/dashboard';
import confirm from '../../../../components/confirm/confirm';
import { getDefaultBackgroundClass } from '../../../../components/cardbuilder/cardBuilderUtils';
function deletePlugin(page, uniqueid, version, name) {
const msg = globalize.translate('UninstallPluginConfirmation', name);
@ -73,7 +73,7 @@ function getPluginCardHtml(plugin, pluginConfigurationPages) {
const imageUrl = ApiClient.getUrl(`/Plugins/${plugin.Id}/${plugin.Version}/Image`);
html += `<img src="${imageUrl}" style="width:100%" />`;
} else {
html += `<div class="cardImage flex align-items-center justify-content-center ${cardBuilder.getDefaultBackgroundClass()}">`;
html += `<div class="cardImage flex align-items-center justify-content-center ${getDefaultBackgroundClass()}">`;
html += '<span class="cardImageIcon material-icons extension" aria-hidden="true"></span>';
html += '</div>';
}