From e7360919feacffe0cb7183cc349fcaf8e611a22b Mon Sep 17 00:00:00 2001 From: VyacheslavShtyrlin Date: Tue, 7 Feb 2023 18:04:18 +0500 Subject: [PATCH] added loader-popup --- package-lock.json | 165 +++++++++++------- package.json | 1 + src/App.css | 9 +- src/App.tsx | 11 +- src/components/LoadingPopup/LoadingPopup.css | 142 +++++++++++++++ src/components/LoadingPopup/LoadingPopup.tsx | 17 ++ src/components/LoadingPopup/loader.svg | 9 + src/components/Main/Main.tsx | 62 +++---- src/components/PopupShare/PopupShare.tsx | 91 +++++----- src/components/PopupShare/sharePopup.css | 3 +- .../playerComponent/playerComponent.tsx | 16 +- src/components/popupConnect/popupConnect.tsx | 21 +-- .../popupConnectEx/popupConnect.css | 84 --------- .../popupConnectEx/popupConnectEx.tsx | 54 ------ src/store/reducers/sessionSlice.ts | 25 ++- 15 files changed, 387 insertions(+), 323 deletions(-) create mode 100644 src/components/LoadingPopup/LoadingPopup.css create mode 100644 src/components/LoadingPopup/LoadingPopup.tsx create mode 100644 src/components/LoadingPopup/loader.svg delete mode 100644 src/components/popupConnectEx/popupConnect.css delete mode 100644 src/components/popupConnectEx/popupConnectEx.tsx diff --git a/package-lock.json b/package-lock.json index c2d309f..483f2db 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "@types/react-redux": "^7.1.24", "@types/react-router": "^5.1.20", "@types/socket.io": "^3.0.2", + "connected-react-router": "^6.9.3", "framer-motion": "^7.4.0", "i18next": "^22.4.6", "i18next-browser-languagedetector": "^7.0.1", @@ -5776,6 +5777,26 @@ "node": ">=0.8" } }, + "node_modules/connected-react-router": { + "version": "6.9.3", + "resolved": "https://registry.npmjs.org/connected-react-router/-/connected-react-router-6.9.3.tgz", + "integrity": "sha512-4ThxysOiv/R2Dc4Cke1eJwjKwH1Y51VDwlOrOfs1LjpdYOVvCNjNkZDayo7+sx42EeGJPQUNchWkjAIJdXGIOQ==", + "dependencies": { + "lodash.isequalwith": "^4.4.0", + "prop-types": "^15.7.2" + }, + "optionalDependencies": { + "immutable": "^3.8.1 || ^4.0.0", + "seamless-immutable": "^7.1.3" + }, + "peerDependencies": { + "history": "^4.7.2", + "react": "^16.4.0 || ^17.0.0", + "react-redux": "^6.0.0 || ^7.1.0", + "react-router": "^4.3.1 || ^5.0.0", + "redux": "^3.6.0 || ^4.0.0" + } + }, "node_modules/content-disposition": { "version": "0.5.4", "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz", @@ -8962,6 +8983,12 @@ "url": "https://opencollective.com/immer" } }, + "node_modules/immutable": { + "version": "4.2.4", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.4.tgz", + "integrity": "sha512-WDxL3Hheb1JkRN3sQkyujNlL/xRjAo3rJtaU5xeufUauG66JdMr32bLj4gF+vWl84DIA3Zxw7tiAjneYzRRw+w==", + "optional": true + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -11683,6 +11710,11 @@ "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==" }, + "node_modules/lodash.isequalwith": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/lodash.isequalwith/-/lodash.isequalwith-4.4.0.tgz", + "integrity": "sha512-dcZON0IalGBpRmJBmMkaoV7d3I80R2O+FrzsZyHdNSFrANq/cgDqKQNmAHE8UEj4+QYWwwhkQOVdLHiAopzlsQ==" + }, "node_modules/lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", @@ -15199,6 +15231,12 @@ "url": "https://opencollective.com/webpack" } }, + "node_modules/seamless-immutable": { + "version": "7.1.4", + "resolved": "https://registry.npmjs.org/seamless-immutable/-/seamless-immutable-7.1.4.tgz", + "integrity": "sha512-XiUO1QP4ki4E2PHegiGAlu6r82o5A+6tRh7IkGGTVg/h+UoeX4nFBeCGPOhb4CYjvkqsfm/TUtvOMYC1xmV30A==", + "optional": true + }, "node_modules/select-hose": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", @@ -18846,14 +18884,12 @@ "@csstools/postcss-unset-value": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/@csstools/postcss-unset-value/-/postcss-unset-value-1.0.2.tgz", - "integrity": "sha512-c8J4roPBILnelAsdLr4XOAR/GsTm0GJi4XpcfvoWk3U6KiTCqiFYc63KhRMQQX35jYMp4Ao8Ij9+IZRgMfJp1g==", - "requires": {} + "integrity": "sha512-c8J4roPBILnelAsdLr4XOAR/GsTm0GJi4XpcfvoWk3U6KiTCqiFYc63KhRMQQX35jYMp4Ao8Ij9+IZRgMfJp1g==" }, "@csstools/selector-specificity": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz", - "integrity": "sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==", - "requires": {} + "integrity": "sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==" }, "@emotion/is-prop-valid": { "version": "0.8.8", @@ -20681,14 +20717,12 @@ "acorn-import-assertions": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz", - "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==", - "requires": {} + "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==" }, "acorn-jsx": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", - "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", - "requires": {} + "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==" }, "acorn-node": { "version": "1.8.2", @@ -20774,8 +20808,7 @@ "ajv-keywords": { "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", - "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", - "requires": {} + "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==" }, "ansi-escapes": { "version": "4.3.2", @@ -21065,8 +21098,7 @@ "babel-plugin-named-asset-import": { "version": "0.3.8", "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.8.tgz", - "integrity": "sha512-WXiAc++qo7XcJ1ZnTYGtLxmBCVbddAml3CEXgWaBzNzLNoxtQ8AiGEFDMOhot9XjTCQbvP5E77Fj9Gk924f00Q==", - "requires": {} + "integrity": "sha512-WXiAc++qo7XcJ1ZnTYGtLxmBCVbddAml3CEXgWaBzNzLNoxtQ8AiGEFDMOhot9XjTCQbvP5E77Fj9Gk924f00Q==" }, "babel-plugin-polyfill-corejs2": { "version": "0.3.3", @@ -21580,6 +21612,17 @@ "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-2.0.0.tgz", "integrity": "sha512-U73+6lQFmfiNPrYbXqr6kZ1i1wiRqXnp2nhMsINseWXO8lDau0LGEffJ8kQi4EjLZympVgRdvqjAgiZ1tgzDDA==" }, + "connected-react-router": { + "version": "6.9.3", + "resolved": "https://registry.npmjs.org/connected-react-router/-/connected-react-router-6.9.3.tgz", + "integrity": "sha512-4ThxysOiv/R2Dc4Cke1eJwjKwH1Y51VDwlOrOfs1LjpdYOVvCNjNkZDayo7+sx42EeGJPQUNchWkjAIJdXGIOQ==", + "requires": { + "immutable": "^3.8.1 || ^4.0.0", + "lodash.isequalwith": "^4.4.0", + "prop-types": "^15.7.2", + "seamless-immutable": "^7.1.3" + } + }, "content-disposition": { "version": "0.5.4", "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz", @@ -21696,8 +21739,7 @@ "css-declaration-sorter": { "version": "6.3.1", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz", - "integrity": "sha512-fBffmak0bPAnyqc/HO8C3n2sHrp9wcqQz6ES9koRF2/mLOVAx9zIQ3Y7R29sYCteTPqMCwns4WYQoCX91Xl3+w==", - "requires": {} + "integrity": "sha512-fBffmak0bPAnyqc/HO8C3n2sHrp9wcqQz6ES9koRF2/mLOVAx9zIQ3Y7R29sYCteTPqMCwns4WYQoCX91Xl3+w==" }, "css-has-pseudo": { "version": "3.0.4", @@ -21780,8 +21822,7 @@ "css-prefers-color-scheme": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-6.0.3.tgz", - "integrity": "sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA==", - "requires": {} + "integrity": "sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA==" }, "css-select": { "version": "4.3.0", @@ -21885,8 +21926,7 @@ "cssnano-utils": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.1.0.tgz", - "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==", - "requires": {} + "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==" }, "csso": { "version": "4.2.0", @@ -22277,8 +22317,7 @@ "ws": { "version": "8.2.3", "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz", - "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==", - "requires": {} + "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==" } } }, @@ -22761,8 +22800,7 @@ "eslint-plugin-react-hooks": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz", - "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==", - "requires": {} + "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==" }, "eslint-plugin-testing-library": { "version": "5.6.4", @@ -23837,8 +23875,7 @@ "icss-utils": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", - "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", - "requires": {} + "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==" }, "idb": { "version": "7.1.0", @@ -23863,6 +23900,12 @@ "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.16.tgz", "integrity": "sha512-qenGE7CstVm1NrHQbMh8YaSzTZTFNP3zPqr3YU0S0UY441j4bJTg4A2Hh5KAhwgaiU6ZZ1Ar6y/2f4TblnMReQ==" }, + "immutable": { + "version": "4.2.4", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.4.tgz", + "integrity": "sha512-WDxL3Hheb1JkRN3sQkyujNlL/xRjAo3rJtaU5xeufUauG66JdMr32bLj4gF+vWl84DIA3Zxw7tiAjneYzRRw+w==", + "optional": true + }, "import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -24870,8 +24913,7 @@ "jest-pnp-resolver": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz", - "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==", - "requires": {} + "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==" }, "jest-regex-util": { "version": "27.5.1", @@ -25826,6 +25868,11 @@ "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==" }, + "lodash.isequalwith": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/lodash.isequalwith/-/lodash.isequalwith-4.4.0.tgz", + "integrity": "sha512-dcZON0IalGBpRmJBmMkaoV7d3I80R2O+FrzsZyHdNSFrANq/cgDqKQNmAHE8UEj4+QYWwwhkQOVdLHiAopzlsQ==" + }, "lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", @@ -26710,8 +26757,7 @@ "postcss-browser-comments": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/postcss-browser-comments/-/postcss-browser-comments-4.0.0.tgz", - "integrity": "sha512-X9X9/WN3KIvY9+hNERUqX9gncsgBA25XaeR+jshHz2j8+sYyHktHw1JdKuMjeLpGktXidqDhA7b/qm1mrBDmgg==", - "requires": {} + "integrity": "sha512-X9X9/WN3KIvY9+hNERUqX9gncsgBA25XaeR+jshHz2j8+sYyHktHw1JdKuMjeLpGktXidqDhA7b/qm1mrBDmgg==" }, "postcss-calc": { "version": "8.2.4", @@ -26809,26 +26855,22 @@ "postcss-discard-comments": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz", - "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==", - "requires": {} + "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==" }, "postcss-discard-duplicates": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz", - "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==", - "requires": {} + "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==" }, "postcss-discard-empty": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz", - "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==", - "requires": {} + "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==" }, "postcss-discard-overridden": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz", - "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==", - "requires": {} + "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==" }, "postcss-double-position-gradients": { "version": "3.1.2", @@ -26850,8 +26892,7 @@ "postcss-flexbugs-fixes": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-5.0.2.tgz", - "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==", - "requires": {} + "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==" }, "postcss-focus-visible": { "version": "6.0.4", @@ -26872,14 +26913,12 @@ "postcss-font-variant": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/postcss-font-variant/-/postcss-font-variant-5.0.0.tgz", - "integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==", - "requires": {} + "integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==" }, "postcss-gap-properties": { "version": "3.0.5", "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-3.0.5.tgz", - "integrity": "sha512-IuE6gKSdoUNcvkGIqdtjtcMtZIFyXZhmFd5RUlg97iVEvp1BZKV5ngsAjCjrVy+14uhGBQl9tzmi1Qwq4kqVOg==", - "requires": {} + "integrity": "sha512-IuE6gKSdoUNcvkGIqdtjtcMtZIFyXZhmFd5RUlg97iVEvp1BZKV5ngsAjCjrVy+14uhGBQl9tzmi1Qwq4kqVOg==" }, "postcss-image-set-function": { "version": "4.0.7", @@ -26902,8 +26941,7 @@ "postcss-initial": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-4.0.1.tgz", - "integrity": "sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==", - "requires": {} + "integrity": "sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==" }, "postcss-js": { "version": "4.0.0", @@ -26944,14 +26982,12 @@ "postcss-logical": { "version": "5.0.4", "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-5.0.4.tgz", - "integrity": "sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==", - "requires": {} + "integrity": "sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==" }, "postcss-media-minmax": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/postcss-media-minmax/-/postcss-media-minmax-5.0.0.tgz", - "integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==", - "requires": {} + "integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==" }, "postcss-merge-longhand": { "version": "5.1.6", @@ -27012,8 +27048,7 @@ "postcss-modules-extract-imports": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", - "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==", - "requires": {} + "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==" }, "postcss-modules-local-by-default": { "version": "4.0.0", @@ -27071,8 +27106,7 @@ "postcss-normalize-charset": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz", - "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==", - "requires": {} + "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==" }, "postcss-normalize-display-values": { "version": "5.1.0", @@ -27165,8 +27199,7 @@ "postcss-page-break": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-3.0.4.tgz", - "integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==", - "requires": {} + "integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==" }, "postcss-place": { "version": "7.0.5", @@ -27260,8 +27293,7 @@ "postcss-replace-overflow-wrap": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-4.0.0.tgz", - "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==", - "requires": {} + "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==" }, "postcss-selector-not": { "version": "6.0.1", @@ -27858,8 +27890,7 @@ "redux-thunk": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.2.tgz", - "integrity": "sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==", - "requires": {} + "integrity": "sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==" }, "regenerate": { "version": "1.4.2", @@ -28181,6 +28212,12 @@ "ajv-keywords": "^3.5.2" } }, + "seamless-immutable": { + "version": "7.1.4", + "resolved": "https://registry.npmjs.org/seamless-immutable/-/seamless-immutable-7.1.4.tgz", + "integrity": "sha512-XiUO1QP4ki4E2PHegiGAlu6r82o5A+6tRh7IkGGTVg/h+UoeX4nFBeCGPOhb4CYjvkqsfm/TUtvOMYC1xmV30A==", + "optional": true + }, "select-hose": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", @@ -28649,8 +28686,7 @@ "style-loader": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz", - "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==", - "requires": {} + "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==" }, "style-value-types": { "version": "5.1.2", @@ -29158,8 +29194,7 @@ "use-sync-external-store": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", - "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", - "requires": {} + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==" }, "util-deprecate": { "version": "1.0.2", @@ -29443,8 +29478,7 @@ "ws": { "version": "8.8.1", "resolved": "https://registry.npmjs.org/ws/-/ws-8.8.1.tgz", - "integrity": "sha512-bGy2JzvzkPowEJV++hF07hAD6niYSr0JzBNo/J29WsB57A2r7Wlc1UFcTR9IzrPvuNVO4B8LGqF8qcpsVOhJCA==", - "requires": {} + "integrity": "sha512-bGy2JzvzkPowEJV++hF07hAD6niYSr0JzBNo/J29WsB57A2r7Wlc1UFcTR9IzrPvuNVO4B8LGqF8qcpsVOhJCA==" } } }, @@ -29883,8 +29917,7 @@ "ws": { "version": "7.5.9", "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz", - "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==", - "requires": {} + "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==" }, "xml-name-validator": { "version": "3.0.0", diff --git a/package.json b/package.json index 024ce91..8a12bed 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "@types/react-redux": "^7.1.24", "@types/react-router": "^5.1.20", "@types/socket.io": "^3.0.2", + "connected-react-router": "^6.9.3", "framer-motion": "^7.4.0", "i18next": "^22.4.6", "i18next-browser-languagedetector": "^7.0.1", diff --git a/src/App.css b/src/App.css index fb635e8..06354d8 100644 --- a/src/App.css +++ b/src/App.css @@ -13,11 +13,12 @@ } .content__container { - display: flex; - justify-content: center; position: absolute; - top: 25%; - width: 100%; + top: 50%; /* position the top edge of the element at the middle of the parent */ + left: 50%; /* position the left edge of the element at the middle of the parent */ + + transform: translate(-50%, -50%); /* This is a shorthand of + } .content__player { diff --git a/src/App.tsx b/src/App.tsx index 5c87bc2..e086bf0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,5 @@ import "./App.css"; -import { useEffect, useState } from "react"; +import { useEffect } from "react"; import { Redirect, Route, Switch, useHistory } from "react-router-dom"; import { Header } from "./components/header/header"; @@ -15,11 +15,8 @@ import { ICards } from "./models/ICards"; import { useTranslation } from "react-i18next"; import cookies from "js-cookie"; -const App: React.FC = () => { - const [visible, setVisible] = useState({ - popup1: true, - popup2: false, - }); +const App: React.FC = () => { + const dispatch = useAppDispatch(); const history = useHistory(); @@ -66,7 +63,7 @@ const App: React.FC = () => {
-
+
diff --git a/src/components/LoadingPopup/LoadingPopup.css b/src/components/LoadingPopup/LoadingPopup.css new file mode 100644 index 0000000..c66af4a --- /dev/null +++ b/src/components/LoadingPopup/LoadingPopup.css @@ -0,0 +1,142 @@ +.popup__content { + display: flex; + flex-direction: column; + gap: 24px; +} + +.popup__title { + font-style: normal; + font-weight: 400; + font-size: 22px; + line-height: 130%; + /* identical to box height, or 29px */ + margin: 0; + + /* App/White */ + + color: #ffffff; +} + +.logo__popup { + height: auto; + width: 100%; + margin-bottom: 48px; + object-fit: cover; +} + +.logo__popup_ex { + display: none; +} + +.popup__input { + padding: 5px 0px; + border-radius: 12px; + background: #404040; + height: 76px; + font-style: normal; + font-weight: 300; + font-size: 38px; + line-height: 46px; + /* identical to box height */ + text-align: center; + + letter-spacing: 0.3em; + + /* App/White */ + box-sizing: border-box; + border: none; + outline: none; + color: #ffffff; +} + +@media screen and (max-width: 639px) { + .logo__popup { + margin-bottom: 40px; + } + + .logo__popup_ex { + display: block; + height: auto; + width: 100%; + margin-bottom: 24px; + object-fit: cover; + } + + .popup__input { + height: 48px; + font-size: 30px; + } + + .popup__title { + font-size: 16px; + width: 78%; + } + + .popup__content { + gap: 16px; + } +} + +.loader-container { + width: 494px; + box-sizing: border-box; + background-color: #262626; + border: 1px solid #404040; + border-radius: 32px; + padding: 45px 0 51px 0; + display: flex; + flex-direction: column; + gap: 51px; + align-items: center; +} + +.loading-caption { + font-style: normal; + font-weight: 400; + font-size: 22px; + line-height: 130%; + /* identical to box height, or 29px */ + + text-align: center; + + /* Landing/White */ + + color: #ebebeb; +} + +.loader { + width: 106px; + height: 106px; + border-radius: 50%; + display: inline-block; + position: relative; + background: conic-gradient( + from 135deg at 50% 50%, + rgba(255, 255, 255, 0) -6.26deg, + #ffffff 314.83deg, + rgba(255, 255, 255, 0) 353.74deg, + #ffffff 674.83deg + ); + box-sizing: border-box; + animation: rotation 1s linear infinite; +} +.loader::after { + content: ""; + box-sizing: border-box; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: 100px; + height: 100px; + border-radius: 50%; + background: #262626; +} +@keyframes rotation { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} diff --git a/src/components/LoadingPopup/LoadingPopup.tsx b/src/components/LoadingPopup/LoadingPopup.tsx new file mode 100644 index 0000000..ded2697 --- /dev/null +++ b/src/components/LoadingPopup/LoadingPopup.tsx @@ -0,0 +1,17 @@ +import "../../styles/styles.css"; +import "./LoadingPopup.css"; +import loader from "./loader.svg"; +import { useHistory } from "react-router-dom"; +import { useTranslation } from "react-i18next"; + +export const LoadingPopup: React.FC = ({}) => { + const history = useHistory(); + const { t } = useTranslation(); + + return ( +
+ Пожалуйста подождите + +
+ ); +}; diff --git a/src/components/LoadingPopup/loader.svg b/src/components/LoadingPopup/loader.svg new file mode 100644 index 0000000..4f6e79e --- /dev/null +++ b/src/components/LoadingPopup/loader.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/Main/Main.tsx b/src/components/Main/Main.tsx index 3db74f0..b6ef1f3 100644 --- a/src/components/Main/Main.tsx +++ b/src/components/Main/Main.tsx @@ -3,38 +3,45 @@ import { useEffect, useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { PopupConnect } from "../popupConnect/popupConnect"; -import { PopupConnectEx } from "../popupConnectEx/popupConnectEx"; +import { LoadingPopup } from "../LoadingPopup/LoadingPopup"; import { popupAnimation } from "../../utils/animationProps"; import { useAppDispatch, useAppSelector } from "../../hooks/redux"; -import { - createSession, -} from "../../store/reducers/ActionCreator"; +import { createSession } from "../../store/reducers/ActionCreator"; +import { sessionSlice } from "../../store/reducers/sessionSlice"; -export const Main: React.FC = ({ visible, setVisible }) => { - const [value, setValue] = useState(""); +export const Main: React.FC = () => { const dispatch = useAppDispatch(); - const { popup1, popup2 } = visible; - const { currentCard } = useAppSelector( - (state) => state.cardReducer - ); + const { currentCard } = useAppSelector((state) => state.cardReducer); + const [visible, setVisible] = useState({ + connectPopup: true, + loadingPopup: false, + }); - const { isLoading } = useAppSelector((state) => state.sessionReducer) + const { cleanErrors } = sessionSlice.actions; + + const { isLoading, error } = useAppSelector((state) => state.sessionReducer); + + const { connectPopup, loadingPopup } = visible; + + useEffect(() => { + if (isLoading) { + setVisible({ connectPopup: false, loadingPopup: true }); + return; + } else if (error) { + setVisible({ connectPopup: false, loadingPopup: false }); + return; + } + }, [isLoading, error]); useEffect(() => { return () => { - setVisible({ - popup1: true, - popup2: false, - }) - } - }, []) - - - + dispatch(cleanErrors()); + }; + }, []); return ( - {popup1 && ( + {connectPopup && ( = ({ visible, setVisible }) => { dispatch(createSession(currentCard.title))} visible={visible} - setVisible={setVisible} + onConnect={() => dispatch(createSession(currentCard.title))} > )} - {popup2 && ( + {loadingPopup && ( = ({ visible, setVisible }) => { animate={"show"} exit={"hidden"} > - + )} diff --git a/src/components/PopupShare/PopupShare.tsx b/src/components/PopupShare/PopupShare.tsx index 3e245b3..1641b26 100644 --- a/src/components/PopupShare/PopupShare.tsx +++ b/src/components/PopupShare/PopupShare.tsx @@ -1,52 +1,53 @@ -import './sharePopup.css' -import { useState, useEffect } from 'react' -import { TSidebarPopup } from '../../utils/types' -import { useTranslation } from 'react-i18next' -import { useAppSelector } from '../../hooks/redux' +import "./sharePopup.css"; +import { useState, useEffect } from "react"; +import { useTranslation } from "react-i18next"; export const PopupShare: React.FC = ({ setClose }) => { + const [copy, setCopy] = useState(false); - const { id } = useAppSelector((state) => state.sessionReducer); + function copyLink() { + navigator.clipboard.writeText(window.location.href); + setCopy((prev) => !prev); + } - const [copy, setCopy] = useState(false) + function closePopup() { + setClose(); + setCopy(false); + } + useEffect(() => () => setCopy(false), []); - function copyLink() { - navigator.clipboard.writeText(window.location.href) - setCopy(prev => !prev) - } + const { t } = useTranslation(); - function closePopup() { - setClose() - setCopy(false) - } - - useEffect(() => () => setCopy(false), []); - - const { t } = useTranslation(); - - - return ( -
-
- {t('popup-control-invite-title')} - -
-
- {t('popup-control-code')} - -
-
-
- {t('popup-control-link')} - -
-
- -
-
- ) -} \ No newline at end of file + return ( +
+
+ + {t("popup-control-invite-title")} + + +
+
+ + {t("popup-control-link")} + + +
+
+ +
+
+ ); +}; diff --git a/src/components/PopupShare/sharePopup.css b/src/components/PopupShare/sharePopup.css index 7c5a233..a2c16d9 100644 --- a/src/components/PopupShare/sharePopup.css +++ b/src/components/PopupShare/sharePopup.css @@ -12,8 +12,7 @@ background-color: #333333; color: #FFFFFF; padding: 48px; - /* gap: 24px; */ - justify-content: space-between; + gap: 24px; } .share-header-popup { diff --git a/src/components/playerComponent/playerComponent.tsx b/src/components/playerComponent/playerComponent.tsx index f9dfc37..cf01729 100644 --- a/src/components/playerComponent/playerComponent.tsx +++ b/src/components/playerComponent/playerComponent.tsx @@ -1,9 +1,10 @@ import "./playerStyles.css"; -import { useParams } from "react-router-dom"; +import { useHistory, useParams } from "react-router-dom"; import React, { useEffect } from "react"; import { Sidebar } from "../sidebar/sidebar"; import { connectSession } from "../../store/reducers/ActionCreator"; import { useAppDispatch, useAppSelector } from "../../hooks/redux"; +import { sessionSlice } from "../../store/reducers/sessionSlice"; type link = { id: string; @@ -12,14 +13,23 @@ type link = { export const PlayerComponent: React.FC = ({ closeStream }) => { const { id } = useParams(); const dispatch = useAppDispatch(); + const { cleanErrors } = sessionSlice.actions; + const history = useHistory() useEffect(() => { - dispatch(connectSession(id)); + dispatch(connectSession(id)).then((res: any) => { + if (res.error) { + alert(res.payload); + history.push('/') + } + }); + return () => { + dispatch(cleanErrors()); + }; }, []); const { url } = useAppSelector((state) => state.sessionReducer); - return ( <>