From 8d96111184ab5fa5a1bdae96fad1fb4a13bb42bf Mon Sep 17 00:00:00 2001 From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> Date: Mon, 26 Feb 2024 10:07:54 -0600 Subject: [PATCH] Use skeleton for review image loading (#10040) * don't show chips and date when image is loading * add skeleton and change observer threshold * remove debug * use skeleton for live view too * old activity indicator looks better on live * fix gradients and lazy load with skeleton * fading effects --- web/package-lock.json | 41 ++++++++-- web/package.json | 2 + .../player/PreviewThumbnailPlayer.tsx | 79 +++++++++++-------- web/src/components/ui/skeleton.tsx | 15 ++++ web/src/views/events/DesktopEventView.tsx | 2 +- 5 files changed, 102 insertions(+), 37 deletions(-) create mode 100644 web/src/components/ui/skeleton.tsx diff --git a/web/package-lock.json b/web/package-lock.json index 9b84a97b5..b36acd3f7 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -27,6 +27,7 @@ "@radix-ui/react-toggle": "^1.0.3", "@radix-ui/react-toggle-group": "^1.0.4", "@radix-ui/react-tooltip": "^1.0.7", + "@types/react-lazy-load-image-component": "^1.6.3", "apexcharts": "^3.45.1", "axios": "^1.6.2", "class-variance-authority": "^0.7.0", @@ -45,6 +46,7 @@ "react-dom": "^18.2.0", "react-hook-form": "^7.48.2", "react-icons": "^4.12.0", + "react-lazy-load-image-component": "^1.6.0", "react-router-dom": "^6.20.1", "react-transition-group": "^4.4.5", "react-use-websocket": "^4.5.0", @@ -2553,14 +2555,12 @@ "node_modules/@types/prop-types": { "version": "15.7.11", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz", - "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==", - "devOptional": true + "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==" }, "node_modules/@types/react": { "version": "18.2.41", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.41.tgz", "integrity": "sha512-CwOGr/PiLiNBxEBqpJ7fO3kocP/2SSuC9fpH5K7tusrg4xPSRT/193rzolYwQnTN02We/ATXKnb6GqA5w4fRxw==", - "devOptional": true, "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -2586,6 +2586,15 @@ "react-icons": "*" } }, + "node_modules/@types/react-lazy-load-image-component": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/@types/react-lazy-load-image-component/-/react-lazy-load-image-component-1.6.3.tgz", + "integrity": "sha512-HsIsYz7yWWTh/bftdzGnijKD26JyofLRqM/RM80sxs7Gk13G83ew8R/ra2XzXuiZfjNEjAq/Va+NBHFF9ciwxA==", + "dependencies": { + "@types/react": "*", + "csstype": "^3.0.2" + } + }, "node_modules/@types/react-transition-group": { "version": "4.4.10", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz", @@ -2598,8 +2607,7 @@ "node_modules/@types/scheduler": { "version": "0.16.8", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz", - "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==", - "devOptional": true + "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==" }, "node_modules/@types/semver": { "version": "7.5.6", @@ -5606,12 +5614,22 @@ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", "dev": true }, + "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.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", "dev": true }, + "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/log-symbols": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz", @@ -6887,6 +6905,19 @@ "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==", "dev": true }, + "node_modules/react-lazy-load-image-component": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/react-lazy-load-image-component/-/react-lazy-load-image-component-1.6.0.tgz", + "integrity": "sha512-8KFkDTgjh+0+PVbH+cx0AgxLGbdTsxWMnxXzU5HEUztqewk9ufQAu8cstjZhyvtMIPsdMcPZfA0WAa7HtjQbBQ==", + "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-remove-scroll": { "version": "2.5.5", "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz", diff --git a/web/package.json b/web/package.json index b64f39a58..62fde45a4 100644 --- a/web/package.json +++ b/web/package.json @@ -32,6 +32,7 @@ "@radix-ui/react-toggle": "^1.0.3", "@radix-ui/react-toggle-group": "^1.0.4", "@radix-ui/react-tooltip": "^1.0.7", + "@types/react-lazy-load-image-component": "^1.6.3", "apexcharts": "^3.45.1", "axios": "^1.6.2", "class-variance-authority": "^0.7.0", @@ -50,6 +51,7 @@ "react-dom": "^18.2.0", "react-hook-form": "^7.48.2", "react-icons": "^4.12.0", + "react-lazy-load-image-component": "^1.6.0", "react-router-dom": "^6.20.1", "react-transition-group": "^4.4.5", "react-use-websocket": "^4.5.0", diff --git a/web/src/components/player/PreviewThumbnailPlayer.tsx b/web/src/components/player/PreviewThumbnailPlayer.tsx index dda4fc2a8..32bd491dc 100644 --- a/web/src/components/player/PreviewThumbnailPlayer.tsx +++ b/web/src/components/player/PreviewThumbnailPlayer.tsx @@ -7,7 +7,7 @@ import { getIconForLabel, getIconForSubLabel } from "@/utils/iconUtil"; import TimeAgo from "../dynamic/TimeAgo"; import useSWR from "swr"; import { FrigateConfig } from "@/types/frigateConfig"; -import { isMobile, isSafari } from "react-device-detect"; +import { isFirefox, isMobile, isSafari } from "react-device-detect"; import Chip from "../Chip"; import { ContextMenu, @@ -19,6 +19,8 @@ import { import { LuCheckSquare, LuFileUp, LuTrash } from "react-icons/lu"; import axios from "axios"; import { useFormattedTimestamp } from "@/hooks/use-date-utils"; +import { Skeleton } from "../ui/skeleton"; +import { LazyLoadImage } from "react-lazy-load-image-component"; type PreviewPlayerProps = { review: ReviewSegment; @@ -49,6 +51,7 @@ export default function PreviewThumbnailPlayer({ const [hoverTimeout, setHoverTimeout] = useState(); const [playback, setPlayback] = useState(false); const [progress, setProgress] = useState(0); + const [imgLoaded, setImgLoaded] = useState(false); const playingBack = useMemo(() => playback, [playback, autoPlayback]); @@ -110,7 +113,7 @@ export default function PreviewThumbnailPlayer({ onClick={onClick} > {playingBack && ( -
+
)} - { + setImgLoaded(true); + }} + placeholder={} /> - {(review.severity == "alert" || review.severity == "detection") && ( - - {review.data.objects.map((object) => { - return getIconForLabel(object, "w-3 h-3 text-white"); - })} - {review.data.audio.map((audio) => { - return getIconForLabel(audio, "w-3 h-3 text-white"); - })} - {review.data.sub_labels?.map((sub) => { - return getIconForSubLabel(sub, "w-3 h-3 text-white"); - })} - + + {!playingBack && imgLoaded && ( + <> +
+
+ {(review.severity == "alert" || + review.severity == "detection") && ( + + {review.data.objects.map((object) => { + return getIconForLabel(object, "w-3 h-3 text-white"); + })} + {review.data.audio.map((audio) => { + return getIconForLabel(audio, "w-3 h-3 text-white"); + })} + {review.data.sub_labels?.map((sub) => { + return getIconForSubLabel(sub, "w-3 h-3 text-white"); + })} + + )} +
+
+
+
+ + {formattedDate} +
+
+ )} - {!playingBack && ( -
- - {formattedDate} -
- )} -
-
{playingBack && ( )} - {!playingBack && review.has_been_reviewed && ( -
+ {!playingBack && imgLoaded && review.has_been_reviewed && ( +
)}
@@ -192,7 +206,10 @@ function PreviewContent({ } // start with a bit of padding - return Math.max(0, review.start_time - relevantPreview.start - PREVIEW_PADDING); + return Math.max( + 0, + review.start_time - relevantPreview.start - PREVIEW_PADDING + ); }, []); const [lastPercent, setLastPercent] = useState(0.0); @@ -203,7 +220,7 @@ function PreviewContent({ return; } - if (isSafari) { + if (isSafari || (isFirefox && isMobile)) { playerRef.current.pause(); setManualPlayback(true); } else { @@ -223,7 +240,8 @@ function PreviewContent({ (playerRef.current?.currentTime || 0) - playerStartTime; // end with a bit of padding - const playerDuration = review.end_time - review.start_time + PREVIEW_PADDING; + const playerDuration = + review.end_time - review.start_time + PREVIEW_PADDING; const playerPercent = (playerProgress / playerDuration) * 100; if ( @@ -340,9 +358,8 @@ function InProgressPreview({ if (!previewFrames || previewFrames.length == 0) { return ( - ); diff --git a/web/src/components/ui/skeleton.tsx b/web/src/components/ui/skeleton.tsx new file mode 100644 index 000000000..01b8b6d4f --- /dev/null +++ b/web/src/components/ui/skeleton.tsx @@ -0,0 +1,15 @@ +import { cn } from "@/lib/utils" + +function Skeleton({ + className, + ...props +}: React.HTMLAttributes) { + return ( +
+ ) +} + +export { Skeleton } diff --git a/web/src/views/events/DesktopEventView.tsx b/web/src/views/events/DesktopEventView.tsx index c0e376984..ef8d2e58b 100644 --- a/web/src/views/events/DesktopEventView.tsx +++ b/web/src/views/events/DesktopEventView.tsx @@ -133,7 +133,7 @@ export default function DesktopEventView({ setMinimap([...visibleTimestamps]); }); }, - { root: contentRef.current, threshold: 0.5 } + { root: contentRef.current, threshold: 0.1 } ); return () => {