From 7dd5fd89f8a160f001baf02456659bb92bb00d39 Mon Sep 17 00:00:00 2001 From: Prayag Prajapati Date: Tue, 29 Aug 2023 23:42:07 +0530 Subject: [PATCH] Add blurhash support to cards #153 --- package-lock.json | 196 +++++++++--------- src/components/card/card.jsx | 11 + src/components/card/card.module.scss | 10 +- src/components/carousel/carousel.scss | 11 +- src/components/carousel/index.jsx | 29 ++- src/components/carouselSlide/index.jsx | 2 +- .../homeSection/latestMediaSection.jsx | 7 + src/routes/home/index.jsx | 41 ++++ 8 files changed, 197 insertions(+), 110 deletions(-) diff --git a/package-lock.json b/package-lock.json index da619e56..beecb79c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -60,11 +60,11 @@ } }, "node_modules/@babel/code-frame": { - "version": "7.22.10", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz", - "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==", + "version": "7.22.13", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz", + "integrity": "sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==", "dependencies": { - "@babel/highlight": "^7.22.10", + "@babel/highlight": "^7.22.13", "chalk": "^2.4.2" }, "engines": { @@ -80,24 +80,24 @@ } }, "node_modules/@babel/core": { - "version": "7.22.10", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.22.10.tgz", - "integrity": "sha512-fTmqbbUBAwCcre6zPzNngvsI0aNrPZe77AeqvDxWM9Nm+04RrJ3CAmGHA9f7lJQY6ZMhRztNemy4uslDxTX4Qw==", + "version": "7.22.11", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.22.11.tgz", + "integrity": "sha512-lh7RJrtPdhibbxndr6/xx0w8+CVlY5FJZiaSz908Fpy+G0xkBFTvwLcKJFF4PJxVfGhVWNebikpWGnOoC71juQ==", "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.22.10", "@babel/generator": "^7.22.10", "@babel/helper-compilation-targets": "^7.22.10", "@babel/helper-module-transforms": "^7.22.9", - "@babel/helpers": "^7.22.10", - "@babel/parser": "^7.22.10", + "@babel/helpers": "^7.22.11", + "@babel/parser": "^7.22.11", "@babel/template": "^7.22.5", - "@babel/traverse": "^7.22.10", - "@babel/types": "^7.22.10", + "@babel/traverse": "^7.22.11", + "@babel/types": "^7.22.11", "convert-source-map": "^1.7.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", - "json5": "^2.2.2", + "json5": "^2.2.3", "semver": "^6.3.1" }, "engines": { @@ -253,22 +253,22 @@ } }, "node_modules/@babel/helpers": { - "version": "7.22.10", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.22.10.tgz", - "integrity": "sha512-a41J4NW8HyZa1I1vAndrraTlPZ/eZoga2ZgS7fEr0tZJGVU4xqdE80CEm0CcNjha5EZ8fTBYLKHF0kqDUuAwQw==", + "version": "7.22.11", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.22.11.tgz", + "integrity": "sha512-vyOXC8PBWaGc5h7GMsNx68OH33cypkEDJCHvYVVgVbbxJDROYVtexSk0gK5iCF1xNjRIN2s8ai7hwkWDq5szWg==", "dependencies": { "@babel/template": "^7.22.5", - "@babel/traverse": "^7.22.10", - "@babel/types": "^7.22.10" + "@babel/traverse": "^7.22.11", + "@babel/types": "^7.22.11" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/highlight": { - "version": "7.22.10", - "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.10.tgz", - "integrity": "sha512-78aUtVcT7MUscr0K5mIEnkwxPE0MaxkR5RxRwuHaQ+JuU5AmTPhY+do2mdzVTnIJJpyBglql2pehuBIWHug+WQ==", + "version": "7.22.13", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.13.tgz", + "integrity": "sha512-C/BaXcnnvBCmHTpz/VGZ8jgtE2aYlW4hxDhseJAWZb7gqGM/qtCK6iZUb0TyKFf7BOUsBH7Q7fkRsDRhg1XklQ==", "dependencies": { "@babel/helper-validator-identifier": "^7.22.5", "chalk": "^2.4.2", @@ -279,9 +279,9 @@ } }, "node_modules/@babel/parser": { - "version": "7.22.10", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz", - "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==", + "version": "7.22.13", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.13.tgz", + "integrity": "sha512-3l6+4YOvc9wx7VlCSw4yQfcBo01ECA8TicQfbnCPuCEpRQrf+gTUyGdxNw+pyTUyywp6JRD1w0YQs9TpBXYlkw==", "bin": { "parser": "bin/babel-parser.js" }, @@ -320,9 +320,9 @@ } }, "node_modules/@babel/runtime": { - "version": "7.22.10", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.10.tgz", - "integrity": "sha512-21t/fkKLMZI4pqP2wlmsQAWnYW1PDyKyyUV4vCi+B25ydmdaYTKXPwCj0BzSUnZf4seIiYvSA3jcZ3gdsMFkLQ==", + "version": "7.22.11", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.11.tgz", + "integrity": "sha512-ee7jVNlWN09+KftVOu9n7S8gQzD/Z6hN/I8VBRXW4P1+Xe7kJGXMwu8vds4aGIMHZnNbdpSWCfZZtinytpcAvA==", "dependencies": { "regenerator-runtime": "^0.14.0" }, @@ -344,9 +344,9 @@ } }, "node_modules/@babel/traverse": { - "version": "7.22.10", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.10.tgz", - "integrity": "sha512-Q/urqV4pRByiNNpb/f5OSv28ZlGJiFiiTh+GAHktbIrkPhPbl90+uW6SmpoLyZqutrg9AEaEf3Q/ZBRHBXgxig==", + "version": "7.22.11", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.11.tgz", + "integrity": "sha512-mzAenteTfomcB7mfPtyi+4oe5BZ6MXxWcn4CX+h4IRJ+OOGXBrWU6jDQavkQI9Vuc5P+donFabBfFCcmWka9lQ==", "dependencies": { "@babel/code-frame": "^7.22.10", "@babel/generator": "^7.22.10", @@ -354,8 +354,8 @@ "@babel/helper-function-name": "^7.22.5", "@babel/helper-hoist-variables": "^7.22.5", "@babel/helper-split-export-declaration": "^7.22.6", - "@babel/parser": "^7.22.10", - "@babel/types": "^7.22.10", + "@babel/parser": "^7.22.11", + "@babel/types": "^7.22.11", "debug": "^4.1.0", "globals": "^11.1.0" }, @@ -364,9 +364,9 @@ } }, "node_modules/@babel/types": { - "version": "7.22.10", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.10.tgz", - "integrity": "sha512-obaoigiLrlDZ7TUQln/8m4mSqIW2QFeOrCQc9r+xsaHGNoplVNYlRVpsfE8Vj35GEm2ZH4ZhrNYogs/3fj85kg==", + "version": "7.22.11", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.11.tgz", + "integrity": "sha512-siazHiGuZRz9aB9NpHy9GOs9xiQPKnMzgdr493iI1M67vRXpnEq8ZOOKzezC5q7zwuQ6sDhdSp4SD9ixKSqKZg==", "dependencies": { "@babel/helper-string-parser": "^7.22.5", "@babel/helper-validator-identifier": "^7.22.5", @@ -857,11 +857,11 @@ } }, "node_modules/@floating-ui/react-dom": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.1.tgz", - "integrity": "sha512-rZtAmSht4Lry6gdhAJDrCp/6rKN7++JnL1/Anbr/DdeyYXQPxvg/ivrbYvJulbRf4vL8b212suwMM2lxbv+RQA==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.2.tgz", + "integrity": "sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==", "dependencies": { - "@floating-ui/dom": "^1.3.0" + "@floating-ui/dom": "^1.5.1" }, "peerDependencies": { "react": ">=16.8.0", @@ -938,15 +938,15 @@ "integrity": "sha512-paR9M9ZT7rKbh2boksNUynuSZMHhqRYnEZOm/KrZTjQ4/FzyhjLHuvw/8XYzP+E7fS4+/Ms/82EN1pl/OFsiIA==" }, "node_modules/@mui/base": { - "version": "5.0.0-beta.12", - "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.12.tgz", - "integrity": "sha512-tZjjXNAyUpwSDT1uRliZMhRQkWYzELJ8Qi61EuOMRpi36HIwnK2T7Nr4RI423Sv8G2EEikDAZj7je33eNd73NQ==", + "version": "5.0.0-beta.13", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.13.tgz", + "integrity": "sha512-uC0l97pBspfDAp+iz2cJq8YZ8Sd9i73V77+WzUiOAckIVEyCm5dyVDZCCO2/phmzckVEeZCGcytybkjMQuhPQw==", "dependencies": { "@babel/runtime": "^7.22.10", "@emotion/is-prop-valid": "^1.2.1", "@floating-ui/react-dom": "^2.0.1", "@mui/types": "^7.2.4", - "@mui/utils": "^5.14.6", + "@mui/utils": "^5.14.7", "@popperjs/core": "^2.11.8", "clsx": "^2.0.0", "prop-types": "^15.8.1", @@ -971,24 +971,24 @@ } }, "node_modules/@mui/core-downloads-tracker": { - "version": "5.14.6", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.6.tgz", - "integrity": "sha512-QZEU3pyGWLuaHbxvOlShol7U1FVgzWBR0OH9H8D7L8w4/vto5N5jJVvlqFQS3T0zbR6YGHxFaiL6Ky87jQg7aw==", + "version": "5.14.7", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.7.tgz", + "integrity": "sha512-sCWTUNElBPgB30iLvWe3PU7SIlTKZNf6/E/sko85iHVeHCM6WPkDw+y89CrZYjhFNmPqt2fIQM/pZu+rP2lFLA==", "funding": { "type": "opencollective", "url": "https://opencollective.com/mui" } }, "node_modules/@mui/lab": { - "version": "5.0.0-alpha.141", - "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.141.tgz", - "integrity": "sha512-PsW55xX2ieNLldca2hLxL1SYtZgRQv++lj1W/Jyi5Z2MHuFDcdqI7yKGrOzyIWw7ctQrmHa1FTShBiCa2wkEoQ==", + "version": "5.0.0-alpha.142", + "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.142.tgz", + "integrity": "sha512-JDrT5G3QBZ0nzkKMFWzJY5KN8WcyDx4p7qOjg6hs7yKLq90VSdsqIOmyhvWDxJR7zPNQjo0WRYBAaRaQ5FlGxg==", "dependencies": { "@babel/runtime": "^7.22.10", - "@mui/base": "5.0.0-beta.12", - "@mui/system": "^5.14.6", + "@mui/base": "5.0.0-beta.13", + "@mui/system": "^5.14.7", "@mui/types": "^7.2.4", - "@mui/utils": "^5.14.6", + "@mui/utils": "^5.14.7", "clsx": "^2.0.0", "prop-types": "^15.8.1", "react-is": "^18.2.0" @@ -1021,16 +1021,16 @@ } }, "node_modules/@mui/material": { - "version": "5.14.6", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.6.tgz", - "integrity": "sha512-C3UgGrmtvcGkQkm0ONBU7bTdapTjQc2Se3b2354xMmU7lgSgW7VM6EP9wIH5XqqoJ60m9l/s9kbTWX0Y+EaWvA==", + "version": "5.14.7", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.7.tgz", + "integrity": "sha512-jIZj9F7zMv6IlyaYDVv5M2Kp20jIX8c0kzuwteySHS/A0IvPVyomQEPtWc51MCbpDNCqzwoZUp3rQtA2lI8k7A==", "dependencies": { "@babel/runtime": "^7.22.10", - "@mui/base": "5.0.0-beta.12", - "@mui/core-downloads-tracker": "^5.14.6", - "@mui/system": "^5.14.6", + "@mui/base": "5.0.0-beta.13", + "@mui/core-downloads-tracker": "^5.14.7", + "@mui/system": "^5.14.7", "@mui/types": "^7.2.4", - "@mui/utils": "^5.14.6", + "@mui/utils": "^5.14.7", "@types/react-transition-group": "^4.4.6", "clsx": "^2.0.0", "csstype": "^3.1.2", @@ -1065,12 +1065,12 @@ } }, "node_modules/@mui/private-theming": { - "version": "5.14.6", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.14.6.tgz", - "integrity": "sha512-3VBLFGizBXfofyk33bwRg6t9L648aKnLmOKPfY1wFuiXq3AEYwobK65iDci/tHKxm/VKbZ6A7PFjLejvB3EvRQ==", + "version": "5.14.7", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.14.7.tgz", + "integrity": "sha512-Y86+hmDnJab2Ka42PgxKpK3oL7EiacbeeX3X/lG9LGO0wSc45wZjHeTfIlVSkkUCkexiMKEJp5NlSjZhr27NRQ==", "dependencies": { "@babel/runtime": "^7.22.10", - "@mui/utils": "^5.14.6", + "@mui/utils": "^5.14.7", "prop-types": "^15.8.1" }, "engines": { @@ -1091,9 +1091,9 @@ } }, "node_modules/@mui/styled-engine": { - "version": "5.14.6", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.14.6.tgz", - "integrity": "sha512-I6zeu/OP1Hk4NsX1Oj85TiYl1dER0JMsLJVn76J1Ihl24A5EbiZQKJp3Mn+ufA79ypkdAvM9aQCAQyiVBFcUHg==", + "version": "5.14.7", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.14.7.tgz", + "integrity": "sha512-hKBETEDsIAkL8/mBwPiQj/vw28OeIhMXC3Tvj4J2bb9snxAKpiZioR1PwqP+6P41twsC/GKBd0Vr9oaWYaHuMg==", "dependencies": { "@babel/runtime": "^7.22.10", "@emotion/cache": "^11.11.0", @@ -1122,15 +1122,15 @@ } }, "node_modules/@mui/system": { - "version": "5.14.6", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.6.tgz", - "integrity": "sha512-/n0ae1MegWjiV1BpRU8jgg4E0zBjeB2VYsT/68ag/xaDuq3/TaDKJeT9REIvyBvwlG3CI3S2O+tRELktxCD1kg==", + "version": "5.14.7", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.7.tgz", + "integrity": "sha512-jeZtHglc+Pi6qjGoopT6O4RqYXVBMqHVOsjMGP0hxGSSPm1T4gsAu7jU8eqGx9YwwjvvJ0eotTjFqw7iJ6qE2Q==", "dependencies": { "@babel/runtime": "^7.22.10", - "@mui/private-theming": "^5.14.6", - "@mui/styled-engine": "^5.14.6", + "@mui/private-theming": "^5.14.7", + "@mui/styled-engine": "^5.14.7", "@mui/types": "^7.2.4", - "@mui/utils": "^5.14.6", + "@mui/utils": "^5.14.7", "clsx": "^2.0.0", "csstype": "^3.1.2", "prop-types": "^15.8.1" @@ -1174,9 +1174,9 @@ } }, "node_modules/@mui/utils": { - "version": "5.14.6", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.6.tgz", - "integrity": "sha512-AznpqLu6hrFnpHgcvsSSMCG+cDbkcCYfo+daUwBVReNYv4l+NQ8+wvBAF4aUMi155N7xWbbgh0cyKs6Wdsm3aA==", + "version": "5.14.7", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.7.tgz", + "integrity": "sha512-RtheP/aBoPogVdi8vj8Vo2IFnRa4mZVmnD0RGlVZ49yF60rZs+xP4/KbpIrTr83xVs34QmHQ2aQ+IX7I0a0dDw==", "dependencies": { "@babel/runtime": "^7.22.10", "@types/prop-types": "^15.7.5", @@ -1213,9 +1213,9 @@ } }, "node_modules/@rollup/pluginutils": { - "version": "5.0.3", - "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.3.tgz", - "integrity": "sha512-hfllNN4a80rwNQ9QCxhxuHCGHMAvabXqxNdaChUSSadMre7t4iEUI6fFAhBOn/eIYTgYVhBv7vCLsAJ4u3lf3g==", + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.4.tgz", + "integrity": "sha512-0KJnIoRI8A+a1dqOYLxH8vBf8bphDmty5QvIm2hqm7oFCFYKCAZWWd2hXgMibaPsNDhI0AtpYfQZJG47pt/k4g==", "dependencies": { "@types/estree": "^1.0.0", "estree-walker": "^2.0.2", @@ -1926,9 +1926,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001520", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001520.tgz", - "integrity": "sha512-tahF5O9EiiTzwTUqAeFjIZbn4Dnqxzz7ktrgGlMYNLH43Ul26IgTMH/zvL3DG0lZxBYnlT04axvInszUsZULdA==", + "version": "1.0.30001524", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001524.tgz", + "integrity": "sha512-Jj917pJtYg9HSJBF95HVX3Cdr89JUyLT4IZ8SvM5aDRni95swKgYi3TgYLH5hnGfPE/U1dg6IfZ50UsIlLkwSA==", "funding": [ { "type": "opencollective", @@ -2110,9 +2110,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.4.490", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.490.tgz", - "integrity": "sha512-6s7NVJz+sATdYnIwhdshx/N/9O6rvMxmhVoDSDFdj6iA45gHR8EQje70+RYsF4GeB+k0IeNSBnP7yG9ZXJFr7A==" + "version": "1.4.504", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.504.tgz", + "integrity": "sha512-cSMwIAd8yUh54VwitVRVvHK66QqHWE39C3DRj8SWiXitEpVSY3wNPD9y1pxQtLIi4w3UdzF9klLsmuPshz09DQ==" }, "node_modules/entities": { "version": "4.5.0", @@ -2289,9 +2289,9 @@ "optional": true }, "node_modules/fsevents": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", - "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", "hasInstallScript": true, "optional": true, "os": [ @@ -2375,9 +2375,9 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/immutable": { - "version": "4.3.2", - "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.2.tgz", - "integrity": "sha512-oGXzbEDem9OOpDWZu88jGiYCvIsLHMvGw+8OXlpsvTFvIQplQbjg1B1cvKg8f7Hoch6+NGjpPsH1Fr+Mc2D1aA==", + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz", + "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==", "devOptional": true }, "node_modules/import-fresh": { @@ -2691,9 +2691,9 @@ } }, "node_modules/postcss": { - "version": "8.4.27", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.27.tgz", - "integrity": "sha512-gY/ACJtJPSmUFPDCHtX78+01fHa64FaU4zaaWfuh1MhGJISufJAH4cun6k/8fwsHYeK4UQmENQK+tRLCFJE8JQ==", + "version": "8.4.29", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.29.tgz", + "integrity": "sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==", "funding": [ { "type": "opencollective", @@ -2923,9 +2923,9 @@ } }, "node_modules/rollup": { - "version": "3.28.0", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.28.0.tgz", - "integrity": "sha512-d7zhvo1OUY2SXSM6pfNjgD5+d0Nz87CUp4mt8l/GgVP3oBsPwzNvSzyu1me6BSG9JIgWNTVcafIXBIyM8yQ3yw==", + "version": "3.28.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.28.1.tgz", + "integrity": "sha512-R9OMQmIHJm9znrU3m3cpE8uhN0fGdXiawME7aZIpQqvpS/85+Vt1Hq1/yVIcYfOmaQiHjvXkQAoJukvLpau6Yw==", "bin": { "rollup": "dist/bin/rollup" }, @@ -3066,9 +3066,9 @@ } }, "node_modules/tslib": { - "version": "2.6.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.1.tgz", - "integrity": "sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig==" + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" }, "node_modules/update-browserslist-db": { "version": "1.0.11", diff --git a/src/components/card/card.jsx b/src/components/card/card.jsx index b86b4fb1..7b7e4c76 100644 --- a/src/components/card/card.jsx +++ b/src/components/card/card.jsx @@ -48,6 +48,7 @@ export const Card = ({ isFavorite, isPlayed, imageType = "Primary", + imageBlurhash, cardType, secondaryText, queryKey, @@ -97,6 +98,16 @@ export const Card = ({ width: "100%", }} > + {!!imageBlurhash && ( + + )} {TypeIconCollectionCard[itemType]} diff --git a/src/components/card/card.module.scss b/src/components/card/card.module.scss index 39fd3700..9d4b90e0 100644 --- a/src/components/card/card.module.scss +++ b/src/components/card/card.module.scss @@ -6,7 +6,7 @@ object-fit: cover; transition: opacity $transition-time-fast; position: absolute; - z-index: 0; + z-index: 1; top: 0; left: 0; &-container { @@ -31,6 +31,14 @@ z-index: 0; } } + &-blurhash { + position: absolute; + z-index: 1; + top: 0; + left: 0; + width: 100% !important; + height: 100% !important; + } } &-overlay { position: absolute; diff --git a/src/components/carousel/carousel.scss b/src/components/carousel/carousel.scss index 4d2a5254..d8a1e3d6 100644 --- a/src/components/carousel/carousel.scss +++ b/src/components/carousel/carousel.scss @@ -14,12 +14,14 @@ } } &-indicator { - height: 5px; + height: 2px; width: 100%; border-radius: 10px; - transition: background $transition-time-fast; + transition: background $transition-time-fast, + height $transition-time-fast; &:hover { cursor: pointer; + height: 5px; background: rgb(255 255 255 / 0.8) !important; } &-container { @@ -30,6 +32,11 @@ left: 1em; right: 1em; gap: 1em; + align-items: center; + justify-content: center; + } + &.active { + height: 5px; } } } diff --git a/src/components/carousel/index.jsx b/src/components/carousel/index.jsx index dfbb9a47..fe1d3c9a 100644 --- a/src/components/carousel/index.jsx +++ b/src/components/carousel/index.jsx @@ -10,7 +10,7 @@ import { MdiChevronRight } from "../icons/mdiChevronRight"; import "./carousel.scss"; import { useCarouselStore } from "../../utils/store/carousel"; -const swipeConfidenceThreshold = 10000; +const swipeConfidenceThreshold = 8000; const swipePower = (offset, velocity) => { return Math.abs(offset) * velocity; }; @@ -50,18 +50,23 @@ const Carousel = ({ content, onChange }) => { animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ - duration: 0.5, + duration: 0.3, }} - drag="x" + drag={"x"} dragConstraints={{ left: 0, right: 0 }} dragElastic={1} onDragEnd={(e, { offset, velocity }) => { const swipe = swipePower(offset.x, velocity.x); - - if (swipe < -swipeConfidenceThreshold) { + if ( + currentSlide != content.length - 1 && + swipe < -swipeConfidenceThreshold + ) { setDirection("right"); setCurrentSlide((init) => init + 1); - } else if (swipe > swipeConfidenceThreshold) { + } else if ( + currentSlide != 0 && + swipe > swipeConfidenceThreshold + ) { setDirection("left"); setCurrentSlide((init) => init - 1); } @@ -92,7 +97,11 @@ const Carousel = ({ content, onChange }) => { { /> {content.map((item, index) => ( { opacity: 0, }} transition={{ - duration: 0.25, + duration: 0.15, }} className="hero-carousel-detail" > diff --git a/src/components/homeSection/latestMediaSection.jsx b/src/components/homeSection/latestMediaSection.jsx index 50065983..fcc93d5e 100644 --- a/src/components/homeSection/latestMediaSection.jsx +++ b/src/components/homeSection/latestMediaSection.jsx @@ -61,6 +61,13 @@ export const LatestMediaSection = ({ latestMediaLib }) => { queryKey={["home", "resume", "video"]} isPlayed={item.UserData.Played} userId={user.data.Id} + imageBlurhash={ + item.ImageBlurHashes?.Primary[ + Object.keys( + item.ImageBlurHashes.Primary, + )[0] + ] + } > ); })} diff --git a/src/routes/home/index.jsx b/src/routes/home/index.jsx index 9ad62d98..6a1b5f15 100644 --- a/src/routes/home/index.jsx +++ b/src/routes/home/index.jsx @@ -263,6 +263,17 @@ const Home = () => { `/library/${item.Id}`, ) } + imageBlurhash={ + item + .ImageBlurHashes + ?.Primary[ + Object.keys( + item + .ImageBlurHashes + .Primary, + )[0] + ] + } > ); }, @@ -298,6 +309,16 @@ const Home = () => { item.UserData.Played } userId={user.data.Id} + imageBlurhash={ + item.ImageBlurHashes + ?.Primary[ + Object.keys( + item + .ImageBlurHashes + .Primary, + )[0] + ] + } > ); }, @@ -352,6 +373,16 @@ const Home = () => { item.UserData.Played } userId={user.data.Id} + imageBlurhash={ + item.ImageBlurHashes + ?.Primary[ + Object.keys( + item + .ImageBlurHashes + .Primary, + )[0] + ] + } > ); }, @@ -398,6 +429,16 @@ const Home = () => { item.UserData.Played } userId={user.data.Id} + imageBlurhash={ + item.ImageBlurHashes + ?.Primary[ + Object.keys( + item + .ImageBlurHashes + .Primary, + )[0] + ] + } > ); },