From 1729bed9eb78247fc43337dc0e5d76e7c8e99927 Mon Sep 17 00:00:00 2001 From: Alexander Flatter Date: Mon, 30 Dec 2024 13:32:12 +0100 Subject: [PATCH 1/3] Upgrade to Material UI v6 --- src/webapp/package-lock.json | 420 +++++++++++------- src/webapp/package.json | 6 +- src/webapp/src/App.js | 7 +- .../actions/audio/slider-change-volume.js | 11 +- .../actions/host/say-my-ip-options.js | 7 +- .../actions/timers/slider-set-timer.js | 7 +- .../Cards/controls/command-selector.js | 4 +- .../Cards/controls/controls-selector.js | 11 +- .../Cards/controls/options-selector.js | 7 +- src/webapp/src/components/Cards/form.js | 74 +-- src/webapp/src/components/Cards/list.js | 15 +- .../src/components/Library/library-header.js | 19 +- .../albums/album-list/album-list-item.js | 20 +- src/webapp/src/components/Player/controls.js | 10 +- src/webapp/src/components/Player/cover.js | 17 +- src/webapp/src/components/Player/index.js | 2 +- src/webapp/src/components/Player/seekbar.js | 13 +- src/webapp/src/components/Player/volume.js | 7 +- .../src/components/Settings/audio/outputs.js | 8 +- .../src/components/Settings/dialogs/reboot.js | 103 +++-- .../Settings/general/show-covers.js | 12 +- .../src/components/Settings/systemcontrols.js | 8 +- 22 files changed, 451 insertions(+), 337 deletions(-) diff --git a/src/webapp/package-lock.json b/src/webapp/package-lock.json index 218e67ab7..aff195542 100644 --- a/src/webapp/package-lock.json +++ b/src/webapp/package-lock.json @@ -10,8 +10,8 @@ "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", - "@mui/icons-material": "^5.14.16", - "@mui/material": "^5.14.17", + "@mui/icons-material": "^6.3.0", + "@mui/material": "^6.3.0", "@mui/styles": "^5.14.17", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^12.1.5", @@ -2103,9 +2103,10 @@ "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==" }, "node_modules/@babel/runtime": { - "version": "7.23.2", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.2.tgz", - "integrity": "sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==", + "version": "7.26.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz", + "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==", + "license": "MIT", "dependencies": { "regenerator-runtime": "^0.14.0" }, @@ -2453,21 +2454,35 @@ } }, "node_modules/@emotion/cache": { - "version": "11.11.0", - "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz", - "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==", - "dependencies": { - "@emotion/memoize": "^0.8.1", - "@emotion/sheet": "^1.2.2", - "@emotion/utils": "^1.2.1", - "@emotion/weak-memoize": "^0.3.1", + "version": "11.14.0", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.14.0.tgz", + "integrity": "sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==", + "license": "MIT", + "dependencies": { + "@emotion/memoize": "^0.9.0", + "@emotion/sheet": "^1.4.0", + "@emotion/utils": "^1.4.2", + "@emotion/weak-memoize": "^0.4.0", "stylis": "4.2.0" } }, + "node_modules/@emotion/cache/node_modules/@emotion/memoize": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz", + "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==", + "license": "MIT" + }, + "node_modules/@emotion/cache/node_modules/@emotion/weak-memoize": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz", + "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==", + "license": "MIT" + }, "node_modules/@emotion/hash": { - "version": "0.9.1", - "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", - "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==" + "version": "0.9.2", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz", + "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==", + "license": "MIT" }, "node_modules/@emotion/is-prop-valid": { "version": "1.2.1", @@ -2506,21 +2521,29 @@ } }, "node_modules/@emotion/serialize": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.2.tgz", - "integrity": "sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==", - "dependencies": { - "@emotion/hash": "^0.9.1", - "@emotion/memoize": "^0.8.1", - "@emotion/unitless": "^0.8.1", - "@emotion/utils": "^1.2.1", + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz", + "integrity": "sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==", + "license": "MIT", + "dependencies": { + "@emotion/hash": "^0.9.2", + "@emotion/memoize": "^0.9.0", + "@emotion/unitless": "^0.10.0", + "@emotion/utils": "^1.4.2", "csstype": "^3.0.2" } }, + "node_modules/@emotion/serialize/node_modules/@emotion/memoize": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz", + "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==", + "license": "MIT" + }, "node_modules/@emotion/sheet": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz", - "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==" + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz", + "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==", + "license": "MIT" }, "node_modules/@emotion/styled": { "version": "11.11.0", @@ -2545,9 +2568,10 @@ } }, "node_modules/@emotion/unitless": { - "version": "0.8.1", - "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", - "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==" + "version": "0.10.0", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz", + "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==", + "license": "MIT" }, "node_modules/@emotion/use-insertion-effect-with-fallbacks": { "version": "1.0.1", @@ -2558,9 +2582,10 @@ } }, "node_modules/@emotion/utils": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz", - "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==" + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz", + "integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==", + "license": "MIT" }, "node_modules/@emotion/weak-memoize": { "version": "0.3.1", @@ -2660,40 +2685,6 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, - "node_modules/@floating-ui/core": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz", - "integrity": "sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==", - "dependencies": { - "@floating-ui/utils": "^0.1.3" - } - }, - "node_modules/@floating-ui/dom": { - "version": "1.5.3", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz", - "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==", - "dependencies": { - "@floating-ui/core": "^1.4.2", - "@floating-ui/utils": "^0.1.3" - } - }, - "node_modules/@floating-ui/react-dom": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.4.tgz", - "integrity": "sha512-CF8k2rgKeh/49UrnIBs4BdxPUV6vize/Db1d/YbCLyp9GiVZ0BEwf5AiDSxJRCr6yOkGqTFHtmrULxkEfYZ7dQ==", - "dependencies": { - "@floating-ui/dom": "^1.5.1" - }, - "peerDependencies": { - "react": ">=16.8.0", - "react-dom": ">=16.8.0" - } - }, - "node_modules/@floating-ui/utils": { - "version": "0.1.6", - "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz", - "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==" - }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.13", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz", @@ -3542,64 +3533,35 @@ "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz", "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==" }, - "node_modules/@mui/base": { - "version": "5.0.0-beta.23", - "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.23.tgz", - "integrity": "sha512-9L8SQUGAWtd/Qi7Qem26+oSSgpY7f2iQTuvcz/rsGpyZjSomMMO6lwYeQSA0CpWM7+aN7eGoSY/WV6wxJiIxXw==", - "dependencies": { - "@babel/runtime": "^7.23.2", - "@floating-ui/react-dom": "^2.0.2", - "@mui/types": "^7.2.8", - "@mui/utils": "^5.14.17", - "@popperjs/core": "^2.11.8", - "clsx": "^2.0.0", - "prop-types": "^15.8.1" - }, - "engines": { - "node": ">=12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/mui" - }, - "peerDependencies": { - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0", - "react-dom": "^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, "node_modules/@mui/core-downloads-tracker": { - "version": "5.14.17", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.17.tgz", - "integrity": "sha512-eE0uxrpJAEL2ZXkeGLKg8HQDafsiXY+6eNpP4lcv3yIjFfGbU6Hj9/P7Adt8jpU+6JIhmxvILGj2r27pX+zdrQ==", + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.3.0.tgz", + "integrity": "sha512-/d8NwSuC3rMwCjswmGB3oXC4sdDuhIUJ8inVQAxGrADJhf0eq/kmy+foFKvpYhHl2siOZR+MLdFttw6/Bzqtqg==", + "license": "MIT", "funding": { "type": "opencollective", - "url": "https://opencollective.com/mui" + "url": "https://opencollective.com/mui-org" } }, "node_modules/@mui/icons-material": { - "version": "5.14.16", - "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.14.16.tgz", - "integrity": "sha512-wmOgslMEGvbHZjFLru8uH5E+pif/ciXAvKNw16q6joK6EWVWU5rDYWFknDaZhCvz8ZE/K8ZnJQ+lMG6GgHzXbg==", + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.3.0.tgz", + "integrity": "sha512-3uWws6DveDn5KxCS34p+sUNMxehuclQY6OmoJeJJ+Sfg9L7LGBpksY/nX5ywKAqickTZnn+sQyVcp963ep9jvw==", + "license": "MIT", "dependencies": { - "@babel/runtime": "^7.23.2" + "@babel/runtime": "^7.26.0" }, "engines": { - "node": ">=12.0.0" + "node": ">=14.0.0" }, "funding": { "type": "opencollective", - "url": "https://opencollective.com/mui" + "url": "https://opencollective.com/mui-org" }, "peerDependencies": { - "@mui/material": "^5.0.0", - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0" + "@mui/material": "^6.3.0", + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@types/react": { @@ -3608,36 +3570,38 @@ } }, "node_modules/@mui/material": { - "version": "5.14.17", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.17.tgz", - "integrity": "sha512-+y0VeOLWfEA4Z98We/UH6KCo8+f2HLZDK45FY+sJf8kSojLy3VntadKtC/u0itqnXXb1Pr4wKB2tSIBW02zY4Q==", - "dependencies": { - "@babel/runtime": "^7.23.2", - "@mui/base": "5.0.0-beta.23", - "@mui/core-downloads-tracker": "^5.14.17", - "@mui/system": "^5.14.17", - "@mui/types": "^7.2.8", - "@mui/utils": "^5.14.17", - "@types/react-transition-group": "^4.4.8", - "clsx": "^2.0.0", - "csstype": "^3.1.2", + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.3.0.tgz", + "integrity": "sha512-qhlTFyRMxfoVPxUtA5e8IvqxP0dWo2Ij7cvot7Orag+etUlZH+3UwD8gZGt+3irOoy7Ms3UNBflYjwEikUXtAQ==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.26.0", + "@mui/core-downloads-tracker": "^6.3.0", + "@mui/system": "^6.3.0", + "@mui/types": "^7.2.20", + "@mui/utils": "^6.3.0", + "@popperjs/core": "^2.11.8", + "@types/react-transition-group": "^4.4.12", + "clsx": "^2.1.1", + "csstype": "^3.1.3", "prop-types": "^15.8.1", - "react-is": "^18.2.0", + "react-is": "^19.0.0", "react-transition-group": "^4.4.5" }, "engines": { - "node": ">=12.0.0" + "node": ">=14.0.0" }, "funding": { "type": "opencollective", - "url": "https://opencollective.com/mui" + "url": "https://opencollective.com/mui-org" }, "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0", - "react-dom": "^17.0.0 || ^18.0.0" + "@mui/material-pigment-css": "^6.3.0", + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@emotion/react": { @@ -3646,11 +3610,50 @@ "@emotion/styled": { "optional": true }, + "@mui/material-pigment-css": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/material/node_modules/@mui/utils": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.3.0.tgz", + "integrity": "sha512-MkDBF08OPVwXhAjedyMykRojgvmf0y/jxkBWjystpfI/pasyTYrfdv4jic6s7j3y2+a+SJzS9qrD6X8ZYj/8AQ==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.26.0", + "@mui/types": "^7.2.20", + "@types/prop-types": "^15.7.14", + "clsx": "^2.1.1", + "prop-types": "^15.8.1", + "react-is": "^19.0.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { "@types/react": { "optional": true } } }, + "node_modules/@mui/material/node_modules/react-is": { + "version": "19.0.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.0.0.tgz", + "integrity": "sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g==", + "license": "MIT" + }, "node_modules/@mui/private-theming": { "version": "5.14.17", "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.14.17.tgz", @@ -3678,26 +3681,29 @@ } }, "node_modules/@mui/styled-engine": { - "version": "5.14.17", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.14.17.tgz", - "integrity": "sha512-AqpVjBEA7wnBvKPW168bNlqB6EN7HxTjLOY7oi275AzD/b1C7V0wqELy6NWoJb2yya5sRf7ENf4iNi3+T5cOgw==", - "dependencies": { - "@babel/runtime": "^7.23.2", - "@emotion/cache": "^11.11.0", - "csstype": "^3.1.2", + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.3.0.tgz", + "integrity": "sha512-iWA6eyiPkO07AlHxRUvI7dwVRSc+84zV54kLmjUms67GJeOWVuXlu8ZO+UhCnwJxHacghxnabsMEqet5PYQmHg==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.26.0", + "@emotion/cache": "^11.13.5", + "@emotion/serialize": "^1.3.3", + "@emotion/sheet": "^1.4.0", + "csstype": "^3.1.3", "prop-types": "^15.8.1" }, "engines": { - "node": ">=12.0.0" + "node": ">=14.0.0" }, "funding": { "type": "opencollective", - "url": "https://opencollective.com/mui" + "url": "https://opencollective.com/mui-org" }, "peerDependencies": { "@emotion/react": "^11.4.1", "@emotion/styled": "^11.3.0", - "react": "^17.0.0 || ^18.0.0" + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@emotion/react": { @@ -3749,31 +3755,32 @@ } }, "node_modules/@mui/system": { - "version": "5.14.17", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.17.tgz", - "integrity": "sha512-Ccz3XlbCqka6DnbHfpL3o3TfOeWQPR+ewvNAgm8gnS9M0yVMmzzmY6z0w/C1eebb+7ZP7IoLUj9vojg/GBaTPg==", - "dependencies": { - "@babel/runtime": "^7.23.2", - "@mui/private-theming": "^5.14.17", - "@mui/styled-engine": "^5.14.17", - "@mui/types": "^7.2.8", - "@mui/utils": "^5.14.17", - "clsx": "^2.0.0", - "csstype": "^3.1.2", + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.3.0.tgz", + "integrity": "sha512-L+8hUHMNlfReKSqcnVslFrVhoNfz/jw7Fe9NfDE85R3KarvZ4O3MU9daF/lZeqEAvnYxEilkkTfDwQ7qCgJdFg==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.26.0", + "@mui/private-theming": "^6.3.0", + "@mui/styled-engine": "^6.3.0", + "@mui/types": "^7.2.20", + "@mui/utils": "^6.3.0", + "clsx": "^2.1.1", + "csstype": "^3.1.3", "prop-types": "^15.8.1" }, "engines": { - "node": ">=12.0.0" + "node": ">=14.0.0" }, "funding": { "type": "opencollective", - "url": "https://opencollective.com/mui" + "url": "https://opencollective.com/mui-org" }, "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0" + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@emotion/react": { @@ -3787,12 +3794,76 @@ } } }, + "node_modules/@mui/system/node_modules/@mui/private-theming": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.3.0.tgz", + "integrity": "sha512-tdS8jvqMokltNTXg6ioRCCbVdDmZUJZa/T9VtTnX2Lwww3FTgCakst9tWLZSxm1fEE9Xp0m7onZJmgeUmWQYVw==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.26.0", + "@mui/utils": "^6.3.0", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/system/node_modules/@mui/utils": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.3.0.tgz", + "integrity": "sha512-MkDBF08OPVwXhAjedyMykRojgvmf0y/jxkBWjystpfI/pasyTYrfdv4jic6s7j3y2+a+SJzS9qrD6X8ZYj/8AQ==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.26.0", + "@mui/types": "^7.2.20", + "@types/prop-types": "^15.7.14", + "clsx": "^2.1.1", + "prop-types": "^15.8.1", + "react-is": "^19.0.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/system/node_modules/react-is": { + "version": "19.0.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.0.0.tgz", + "integrity": "sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g==", + "license": "MIT" + }, "node_modules/@mui/types": { - "version": "7.2.8", - "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.8.tgz", - "integrity": "sha512-9u0ji+xspl96WPqvrYJF/iO+1tQ1L5GTaDOeG3vCR893yy7VcWwRNiVMmPdPNpMDqx0WV1wtEW9OMwK9acWJzQ==", + "version": "7.2.20", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.20.tgz", + "integrity": "sha512-straFHD7L8v05l/N5vcWk+y7eL9JF0C2mtph/y4BPm3gn2Eh61dDwDB65pa8DLss3WJfDXYC7Kx5yjP0EmXpgw==", + "license": "MIT", "peerDependencies": { - "@types/react": "^17.0.0 || ^18.0.0" + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@types/react": { @@ -3948,6 +4019,7 @@ "version": "2.11.8", "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "license": "MIT", "funding": { "type": "opencollective", "url": "https://opencollective.com/popperjs" @@ -4649,9 +4721,10 @@ "integrity": "sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==" }, "node_modules/@types/prop-types": { - "version": "15.7.10", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.10.tgz", - "integrity": "sha512-mxSnDQxPqsZxmeShFH+uwQ4kO4gcJcGahjjMFeLbKE95IAZiiZyiEepGZjtXJ7hN/yfu0bu9xN2ajcU0JcxX6A==" + "version": "15.7.14", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz", + "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==", + "license": "MIT" }, "node_modules/@types/q": { "version": "1.5.8", @@ -4687,10 +4760,11 @@ } }, "node_modules/@types/react-transition-group": { - "version": "4.4.9", - "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.9.tgz", - "integrity": "sha512-ZVNmWumUIh5NhH8aMD9CR2hdW0fNuYInlocZHaZ+dgk/1K49j1w/HoAuK1ki+pgscQrOFRTlXeoURtuzEkV3dg==", - "dependencies": { + "version": "4.4.12", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz", + "integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==", + "license": "MIT", + "peerDependencies": { "@types/react": "*" } }, @@ -6367,9 +6441,10 @@ } }, "node_modules/clsx": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz", - "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "license": "MIT", "engines": { "node": ">=6" } @@ -7110,9 +7185,10 @@ "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==" }, "node_modules/csstype": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", - "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", + "license": "MIT" }, "node_modules/damerau-levenshtein": { "version": "1.0.8", diff --git a/src/webapp/package.json b/src/webapp/package.json index 1619a8c60..3281284c4 100644 --- a/src/webapp/package.json +++ b/src/webapp/package.json @@ -5,9 +5,9 @@ "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", - "@mui/icons-material": "^5.14.16", - "@mui/material": "^5.14.17", - "@mui/styles": "^5.14.17", + "@mui/icons-material": "^6.3.0", + "@mui/material": "^6.3.0", + "@mui/styles": "^6.3.0", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^12.1.5", "@testing-library/user-event": "^14.5.1", diff --git a/src/webapp/src/App.js b/src/webapp/src/App.js index a51529381..2e6ab7543 100644 --- a/src/webapp/src/App.js +++ b/src/webapp/src/App.js @@ -13,12 +13,13 @@ function App() { + sx={{ + alignItems: "center", + justifyContent: "center" + }}> diff --git a/src/webapp/src/components/Cards/controls/actions/audio/slider-change-volume.js b/src/webapp/src/components/Cards/controls/actions/audio/slider-change-volume.js index 64f5edada..7e05f6950 100644 --- a/src/webapp/src/components/Cards/controls/actions/audio/slider-change-volume.js +++ b/src/webapp/src/components/Cards/controls/actions/audio/slider-change-volume.js @@ -34,12 +34,19 @@ const SliderChangeVolume = ({ }; return ( - + {t('cards.controls.actions.audio.volume.title')} - + + {t('cards.controls.actions.host.description')} diff --git a/src/webapp/src/components/Cards/controls/actions/timers/slider-set-timer.js b/src/webapp/src/components/Cards/controls/actions/timers/slider-set-timer.js index fa5707d11..9f994d654 100644 --- a/src/webapp/src/components/Cards/controls/actions/timers/slider-set-timer.js +++ b/src/webapp/src/components/Cards/controls/actions/timers/slider-set-timer.js @@ -26,7 +26,12 @@ const SliderSetTimer = ({ }; return ( - + {t('cards.controls.actions.timers.description')} diff --git a/src/webapp/src/components/Cards/controls/command-selector.js b/src/webapp/src/components/Cards/controls/command-selector.js index c6f0ea982..37c367edc 100644 --- a/src/webapp/src/components/Cards/controls/command-selector.js +++ b/src/webapp/src/components/Cards/controls/command-selector.js @@ -26,7 +26,9 @@ const CommandSelector = ({ } return ( - + {t('cards.controls.command-selector.title')} diff --git a/src/webapp/src/components/Cards/controls/controls-selector.js b/src/webapp/src/components/Cards/controls/controls-selector.js index eea2d5c67..70d6133d9 100644 --- a/src/webapp/src/components/Cards/controls/controls-selector.js +++ b/src/webapp/src/components/Cards/controls/controls-selector.js @@ -35,7 +35,9 @@ const ControlsSelector = ({ return ( - + {t('cards.controls.controls-selector.label')} @@ -51,9 +53,10 @@ const ControlsSelector = ({ + sx={{ + alignItems: "center", + marginTop: '20px' + }}> {actionData.action === 'host' && + {t(optionLabel)} diff --git a/src/webapp/src/components/Cards/form.js b/src/webapp/src/components/Cards/form.js index 03a435923..292d85058 100644 --- a/src/webapp/src/components/Cards/form.js +++ b/src/webapp/src/components/Cards/form.js @@ -33,47 +33,47 @@ const CardsForm = ({ }) => { const { t } = useTranslation(); - return ( - <> -
- - - - - - - } - title={ - cardId - ? cardId - : t('cards.form.no-card-id') - } - /> - - {cardId && - <> - - - - +
+ + + + + + + } + title={ + cardId + ? cardId + : t('cards.form.no-card-id') + } + /> + + {cardId && + <> + + - - } - {!cardId && } - - - + + + + } + {!cardId && } + + - - ); + + ); }; diff --git a/src/webapp/src/components/Cards/list.js b/src/webapp/src/components/Cards/list.js index 4e8211a27..ade6f6863 100644 --- a/src/webapp/src/components/Cards/list.js +++ b/src/webapp/src/components/Cards/list.js @@ -3,14 +3,7 @@ import { Link } from 'react-router-dom'; import { isNil, reject } from 'ramda'; import { useTranslation } from 'react-i18next'; -import { - Avatar, - List, - ListItem, - ListItemAvatar, - ListItemText, - Typography -} from '@mui/material'; +import { Avatar, List, ListItemAvatar, ListItemButton, ListItemText, Typography } from '@mui/material'; import BookmarkIcon from '@mui/icons-material/Bookmark'; @@ -36,12 +29,10 @@ const CardsList = ({ cardsList }) => { : cardsList[cardId].func return ( - + key={cardId}> diff --git a/src/webapp/src/components/Library/library-header.js b/src/webapp/src/components/Library/library-header.js index ab894f2b6..7ca04e35c 100644 --- a/src/webapp/src/components/Library/library-header.js +++ b/src/webapp/src/components/Library/library-header.js @@ -69,13 +69,16 @@ const LibraryHeader = ({ handleMusicFilter, musicFilter }) => { } {!showSearchInput && + sx={{ + alignItems: "center", + marginRight: '5px' + }}> {t('library.header.albums')} @@ -86,8 +89,10 @@ const LibraryHeader = ({ handleMusicFilter, musicFilter }) => { color="default" /> {t('library.header.folders')} diff --git a/src/webapp/src/components/Library/lists/albums/album-list/album-list-item.js b/src/webapp/src/components/Library/lists/albums/album-list/album-list-item.js index 71f6ba315..f5cc33daf 100644 --- a/src/webapp/src/components/Library/lists/albums/album-list/album-list-item.js +++ b/src/webapp/src/components/Library/lists/albums/album-list/album-list-item.js @@ -5,13 +5,7 @@ import { } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; -import { - Avatar, - ListItem, - ListItemAvatar, - ListItemButton, - ListItemText, -} from '@mui/material'; +import { Avatar, ListItemAvatar, ListItemButton, ListItemText } from '@mui/material'; import noCover from '../../../../../assets/noCover.jpg'; @@ -47,7 +41,7 @@ const AlbumListItem = ({ albumartist, album, isButton = true }) => { if (albumartist && album && show_covers) { getCoverArt(); } - }, [albumartist, album]); + }, [albumartist, album, show_covers]); const AlbumLink = forwardRef((props, ref) => { const { data } = props; @@ -62,14 +56,11 @@ const AlbumListItem = ({ albumartist, album, isButton = true }) => { }); return ( - - + key={album}> {show_covers && @@ -79,8 +70,7 @@ const AlbumListItem = ({ albumartist, album, isButton = true }) => { primary={album || t('library.albums.unknown-album')} secondary={albumartist || null} /> - - + ); } diff --git a/src/webapp/src/components/Player/controls.js b/src/webapp/src/components/Player/controls.js index 48a587a32..82b5a25ad 100644 --- a/src/webapp/src/components/Player/controls.js +++ b/src/webapp/src/components/Player/controls.js @@ -67,12 +67,12 @@ const Controls = () => { return ( - + sx={{ + alignItems: "center", + flexWrap: "nowrap", + justifyContent: "space-evenly" + }}> {/* Shuffle */} { const { t } = useTranslation(); return ( - + { + height: '100%' + }}> {coverImage && {t('player.cover.title')} { if (file && show_covers) { getCoverArt(); } - }, [file]); + }, [file, show_covers]); return ( { if (!isSeeking) { updateTimeAndProgress(playerstatus?.elapsed); } - }, [playerstatus]); + }, [isSeeking, playerstatus]); return <> @@ -64,14 +64,13 @@ const SeekBar = () => { + sx={{ + alignItems: "center", + justifyContent: "space-between", + marginTop: '-10px' + }}> {toHHMMSS(parseInt(timeElapsed))} diff --git a/src/webapp/src/components/Player/volume.js b/src/webapp/src/components/Player/volume.js index a70dc6dd6..11e11e1bf 100644 --- a/src/webapp/src/components/Player/volume.js +++ b/src/webapp/src/components/Player/volume.js @@ -74,10 +74,11 @@ const Volume = () => { return ( + sx={{ + alignItems: "center", + width: '100%' + }}> { return ( - + {t('settings.audio.outputs.title')} {isLoading && } {isError && ⚠️} diff --git a/src/webapp/src/components/Settings/dialogs/reboot.js b/src/webapp/src/components/Settings/dialogs/reboot.js index 1813f3c25..13cc8705f 100644 --- a/src/webapp/src/components/Settings/dialogs/reboot.js +++ b/src/webapp/src/components/Settings/dialogs/reboot.js @@ -62,59 +62,58 @@ export default function RebootDialog() { setShowError(false); }; - return ( - <> - - - - {!waitingForReboot && t('settings.dialogs.reboot.title')} - {waitingForReboot && t('settings.dialogs.reboot.rebooting')} - - - { - !waitingForReboot && - - {t('settings.dialogs.reboot.description-confirm')} - - } + return (<> + + + + {!waitingForReboot && t('settings.dialogs.reboot.title')} + {waitingForReboot && t('settings.dialogs.reboot.rebooting')} + + + { + !waitingForReboot && + + {t('settings.dialogs.reboot.description-confirm')} + + } - { - waitingForReboot && - - - - + { + waitingForReboot && + + + - } + + } - - - - - - - - - - ); + + + + + + + + ); } diff --git a/src/webapp/src/components/Settings/general/show-covers.js b/src/webapp/src/components/Settings/general/show-covers.js index a3b31f4e0..92966021a 100644 --- a/src/webapp/src/components/Settings/general/show-covers.js +++ b/src/webapp/src/components/Settings/general/show-covers.js @@ -33,8 +33,16 @@ const ShowCovers = () => { } return ( - - + + {t(`settings.general.show_covers.title`)} diff --git a/src/webapp/src/components/Settings/systemcontrols.js b/src/webapp/src/components/Settings/systemcontrols.js index 3fd08fdc4..f3ed82238 100644 --- a/src/webapp/src/components/Settings/systemcontrols.js +++ b/src/webapp/src/components/Settings/systemcontrols.js @@ -20,7 +20,13 @@ const SystemControls = () => { - + From 9272c0f08e633ea3901d418a09928c4515a589a3 Mon Sep 17 00:00:00 2001 From: Alexander Flatter Date: Mon, 30 Dec 2024 20:30:21 +0100 Subject: [PATCH 2/3] Fix build --- src/webapp/src/components/Cards/list.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/webapp/src/components/Cards/list.js b/src/webapp/src/components/Cards/list.js index ade6f6863..f6c449298 100644 --- a/src/webapp/src/components/Cards/list.js +++ b/src/webapp/src/components/Cards/list.js @@ -42,7 +42,7 @@ const CardsList = ({ cardsList }) => { primary={cardId} secondary={description} /> - + ); } From 83dff99d4b90ab6179c598500dfdfb90dd278ae1 Mon Sep 17 00:00:00 2001 From: pabera <1260686+pabera@users.noreply.github.com> Date: Tue, 31 Dec 2024 08:26:18 +0100 Subject: [PATCH 3/3] chore: Updated quotes and a missing closing tag --- .../Cards/controls/actions/timers/slider-set-timer.js | 2 +- src/webapp/src/components/Cards/controls/controls-selector.js | 2 +- src/webapp/src/components/Cards/controls/options-selector.js | 2 +- src/webapp/src/components/Library/library-header.js | 2 +- src/webapp/src/components/Player/seekbar.js | 2 +- src/webapp/src/components/Player/volume.js | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/webapp/src/components/Cards/controls/actions/timers/slider-set-timer.js b/src/webapp/src/components/Cards/controls/actions/timers/slider-set-timer.js index 9f994d654..61421615e 100644 --- a/src/webapp/src/components/Cards/controls/actions/timers/slider-set-timer.js +++ b/src/webapp/src/components/Cards/controls/actions/timers/slider-set-timer.js @@ -30,7 +30,7 @@ const SliderSetTimer = ({ container sx={{ alignItems: "center", - marginTop: '20px' + marginTop: "20px" }}> diff --git a/src/webapp/src/components/Cards/controls/controls-selector.js b/src/webapp/src/components/Cards/controls/controls-selector.js index 70d6133d9..b5fa07e27 100644 --- a/src/webapp/src/components/Cards/controls/controls-selector.js +++ b/src/webapp/src/components/Cards/controls/controls-selector.js @@ -55,7 +55,7 @@ const ControlsSelector = ({ direction="row" sx={{ alignItems: "center", - marginTop: '20px' + marginTop: "20px" }}> {actionData.action === 'host' && diff --git a/src/webapp/src/components/Library/library-header.js b/src/webapp/src/components/Library/library-header.js index 7ca04e35c..5a1317ed4 100644 --- a/src/webapp/src/components/Library/library-header.js +++ b/src/webapp/src/components/Library/library-header.js @@ -72,7 +72,7 @@ const LibraryHeader = ({ handleMusicFilter, musicFilter }) => { direction="row" sx={{ alignItems: "center", - marginRight: '5px' + marginRight: "5px" }}> { sx={{ alignItems: "center", justifyContent: "space-between", - marginTop: '-10px' + marginTop: "-10px" }}> diff --git a/src/webapp/src/components/Player/volume.js b/src/webapp/src/components/Player/volume.js index 11e11e1bf..3e3a66be6 100644 --- a/src/webapp/src/components/Player/volume.js +++ b/src/webapp/src/components/Player/volume.js @@ -77,7 +77,7 @@ const Volume = () => { container sx={{ alignItems: "center", - width: '100%' + width: "100%" }}>