mirror of
https://github.com/OpenCut-app/OpenCut.git
synced 2026-07-13 21:52:53 +02:00
fix: don't pre-fetch sounds
This commit is contained in:
@@ -1,13 +1,9 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useGlobalPrefetcher } from "@/components/providers/global-prefetcher";
|
|
||||||
|
|
||||||
export default function EditorLayout({
|
export default function EditorLayout({
|
||||||
children,
|
children,
|
||||||
}: {
|
}: {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}) {
|
}) {
|
||||||
useGlobalPrefetcher();
|
|
||||||
|
|
||||||
return <div>{children}</div>;
|
return <div>{children}</div>;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -82,6 +82,14 @@ function SoundEffectsView() {
|
|||||||
toggleSavedSound,
|
toggleSavedSound,
|
||||||
showCommercialOnly,
|
showCommercialOnly,
|
||||||
toggleCommercialFilter,
|
toggleCommercialFilter,
|
||||||
|
hasLoaded,
|
||||||
|
setTopSoundEffects,
|
||||||
|
setLoading,
|
||||||
|
setError,
|
||||||
|
setHasLoaded,
|
||||||
|
setCurrentPage,
|
||||||
|
setHasNextPage,
|
||||||
|
setTotalCount,
|
||||||
} = useSoundsStore();
|
} = useSoundsStore();
|
||||||
const {
|
const {
|
||||||
results: searchResults,
|
results: searchResults,
|
||||||
@@ -106,6 +114,55 @@ function SoundEffectsView() {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
loadSavedSounds();
|
loadSavedSounds();
|
||||||
|
|
||||||
|
if (!hasLoaded) {
|
||||||
|
let ignore = false;
|
||||||
|
|
||||||
|
const fetchTopSounds = async () => {
|
||||||
|
try {
|
||||||
|
if (!ignore) {
|
||||||
|
setLoading(true);
|
||||||
|
setError(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await fetch(
|
||||||
|
"/api/sounds/search?page_size=50&sort=downloads"
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!ignore) {
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`Failed to fetch: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
setTopSoundEffects(data.results);
|
||||||
|
setHasLoaded(true);
|
||||||
|
|
||||||
|
setCurrentPage(1);
|
||||||
|
setHasNextPage(!!data.next);
|
||||||
|
setTotalCount(data.count);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
if (!ignore) {
|
||||||
|
console.error("Failed to fetch top sounds:", error);
|
||||||
|
setError(
|
||||||
|
error instanceof Error ? error.message : "Failed to load sounds"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
if (!ignore) {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const timeoutId = setTimeout(fetchTopSounds, 100);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
clearTimeout(timeoutId);
|
||||||
|
ignore = true;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
if (scrollAreaRef.current && scrollPosition > 0) {
|
if (scrollAreaRef.current && scrollPosition > 0) {
|
||||||
const timeoutId = setTimeout(() => {
|
const timeoutId = setTimeout(() => {
|
||||||
scrollAreaRef.current?.scrollTo({ top: scrollPosition });
|
scrollAreaRef.current?.scrollTo({ top: scrollPosition });
|
||||||
@@ -113,7 +170,16 @@ function SoundEffectsView() {
|
|||||||
|
|
||||||
return () => clearTimeout(timeoutId);
|
return () => clearTimeout(timeoutId);
|
||||||
}
|
}
|
||||||
}, []);
|
}, [
|
||||||
|
hasLoaded,
|
||||||
|
setTopSoundEffects,
|
||||||
|
setLoading,
|
||||||
|
setError,
|
||||||
|
setHasLoaded,
|
||||||
|
setCurrentPage,
|
||||||
|
setHasNextPage,
|
||||||
|
setTotalCount,
|
||||||
|
]);
|
||||||
|
|
||||||
const handleScrollWithPosition = (event: React.UIEvent<HTMLDivElement>) => {
|
const handleScrollWithPosition = (event: React.UIEvent<HTMLDivElement>) => {
|
||||||
const { scrollTop } = event.currentTarget;
|
const { scrollTop } = event.currentTarget;
|
||||||
|
|||||||
@@ -1,78 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { useEffect } from "react";
|
|
||||||
import { useSoundsStore } from "@/stores/sounds-store";
|
|
||||||
|
|
||||||
export function useGlobalPrefetcher() {
|
|
||||||
const {
|
|
||||||
hasLoaded,
|
|
||||||
setTopSoundEffects,
|
|
||||||
setLoading,
|
|
||||||
setError,
|
|
||||||
setHasLoaded,
|
|
||||||
setCurrentPage,
|
|
||||||
setHasNextPage,
|
|
||||||
setTotalCount,
|
|
||||||
} = useSoundsStore();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (hasLoaded) return;
|
|
||||||
|
|
||||||
let ignore = false;
|
|
||||||
|
|
||||||
const prefetchTopSounds = async () => {
|
|
||||||
try {
|
|
||||||
if (!ignore) {
|
|
||||||
setLoading(true);
|
|
||||||
setError(null);
|
|
||||||
}
|
|
||||||
|
|
||||||
const response = await fetch(
|
|
||||||
"/api/sounds/search?page_size=50&sort=downloads"
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!ignore) {
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(`Failed to fetch: ${response.status}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = await response.json();
|
|
||||||
setTopSoundEffects(data.results);
|
|
||||||
setHasLoaded(true);
|
|
||||||
|
|
||||||
// Set pagination state for top sounds
|
|
||||||
setCurrentPage(1);
|
|
||||||
setHasNextPage(!!data.next);
|
|
||||||
setTotalCount(data.count);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
if (!ignore) {
|
|
||||||
console.error("Failed to prefetch top sounds:", error);
|
|
||||||
setError(
|
|
||||||
error instanceof Error ? error.message : "Failed to load sounds"
|
|
||||||
);
|
|
||||||
}
|
|
||||||
} finally {
|
|
||||||
if (!ignore) {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const timeoutId = setTimeout(prefetchTopSounds, 100);
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
clearTimeout(timeoutId);
|
|
||||||
ignore = true;
|
|
||||||
};
|
|
||||||
}, [
|
|
||||||
hasLoaded,
|
|
||||||
setTopSoundEffects,
|
|
||||||
setLoading,
|
|
||||||
setError,
|
|
||||||
setHasLoaded,
|
|
||||||
setCurrentPage,
|
|
||||||
setHasNextPage,
|
|
||||||
setTotalCount,
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user