Aydogdy
/
hhm-client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

video item lazy load img

This commit is contained in:
VividTruthKeeper 2023-01-23 19:41:13 +05:00
parent bf34f482f1
commit 662fb8bed9
4 changed files with 44 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
package-lock.json generated
View File

@ -8,11 +8,13 @@
"name": "hhm-client",
"version": "0.0.0",
"dependencies": {
"@types/react-lazy-load-image-component": "^1.5.2",
"@types/uuid": "^9.0.0",
"axios": "^1.2.3",
"framer-motion": "^8.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-lazy-load-image-component": "^1.5.6",
"react-player": "^2.11.0",
"react-router-dom": "^6.7.0",
"react-spinners": "^0.13.8",
@ -1048,14 +1050,12 @@
"node_modules/@types/prop-types": {
"version": "15.7.5",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
"dev": true
"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
},
"node_modules/@types/react": {
"version": "18.0.27",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.27.tgz",
"integrity": "sha512-3vtRKHgVxu3Jp9t718R9BuzoD4NcQ8YJ5XRzsSKxNDiDonD2MXIT1TmSkenxuCycZJoQT5d2vE8LwWJxBC1gmA==",
"dev": true,
"dependencies": {
"@types/prop-types": "*",
"@types/scheduler": "*",
@ -1071,11 +1071,19 @@
"@types/react": "*"
}
},
"node_modules/@types/react-lazy-load-image-component": {
"version": "1.5.2",
"resolved": "https://registry.npmjs.org/@types/react-lazy-load-image-component/-/react-lazy-load-image-component-1.5.2.tgz",
"integrity": "sha512-4NLJsMJVrMv18FuMIkUUBVj/PH9A+BvLKrZC75EWiEFn1IsMrZHgL1tVKw5QBfoa0Qjz6SkWIzEvwcyZ8PgnIg==",
"dependencies": {
"@types/react": "*",
"csstype": "^3.0.2"
}
},
"node_modules/@types/scheduler": {
"version": "0.16.2",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
"dev": true
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
},
"node_modules/@types/uuid": {
"version": "9.0.0",
@ -1305,8 +1313,7 @@
"node_modules/csstype": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
"integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==",
"dev": true
"integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
},
"node_modules/debug": {
"version": "4.3.4",
@ -1666,6 +1673,16 @@
"resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz",
"integrity": "sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA=="
},
"node_modules/lodash.debounce": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
},
"node_modules/lodash.throttle": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
"integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
},
"node_modules/loose-envify": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@ -1886,6 +1903,19 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"node_modules/react-lazy-load-image-component": {
"version": "1.5.6",
"resolved": "https://registry.npmjs.org/react-lazy-load-image-component/-/react-lazy-load-image-component-1.5.6.tgz",
"integrity": "sha512-M0jeJtOlTHgThOfgYM9krSqYbR6ShxROy/KVankwbw9/amPKG1t5GSGN1sei6Cyu8+QJVuyAUvQ+LFtCVTTlKw==",
"dependencies": {
"lodash.debounce": "^4.0.8",
"lodash.throttle": "^4.1.1"
},
"peerDependencies": {
"react": "^15.x.x || ^16.x.x || ^17.x.x || ^18.x.x",
"react-dom": "^15.x.x || ^16.x.x || ^17.x.x || ^18.x.x"
}
},
"node_modules/react-player": {
"version": "2.11.0",
"resolved": "https://registry.npmjs.org/react-player/-/react-player-2.11.0.tgz",

2
package.json
View File

@ -9,11 +9,13 @@
"preview": "vite preview"
},
"dependencies": {
"@types/react-lazy-load-image-component": "^1.5.2",
"@types/uuid": "^9.0.0",
"axios": "^1.2.3",
"framer-motion": "^8.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-lazy-load-image-component": "^1.5.6",
"react-player": "^2.11.0",
"react-router-dom": "^6.7.0",
"react-spinners": "^0.13.8",

1
src/App.tsx
View File

@ -2,6 +2,7 @@
import { Routes, Route } from "react-router-dom";
// Styles
import "react-lazy-load-image-component/src/effects/blur.css";
import "./styles/style.scss";
// Pages

5
src/components/video/VideoItem.tsx
View File

@ -1,3 +1,6 @@
// Modules
import { LazyLoadImage } from "react-lazy-load-image-component";
// Types
import { videoItemType } from "../../types/video.types";
@ -6,7 +9,7 @@ const VideoItem = ({ img, date, title }: videoItemType) => {
<div className="video-item">
<div className="video-item-top">
<div className="video-img">
<img src={img} alt="" />
<LazyLoadImage src={img} effect="blur" useIntersectionObserver />
</div>
</div>
<div className="video-item-bottom">