charlestehio/memefast
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update

Browse Source
This commit is contained in:
ct
2025-07-15 02:38:23 +08:00
parent 3a2818473c
commit d57c75d5d7
4 changed files with 135 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/components/ui/grid-skeleton.jsx
View File

@@ -5,7 +5,7 @@ const GridSkeleton = ({ itemCount = 6 }) => {
<div className="grid grid-cols-2 gap-2 p-2">
{Array.from({ length: itemCount }, (_, index) => (
<div key={index} className="relative">
<div className="aspect-[9/16] w-full rounded-lg bg-gradient-to-r from-gray-200 via-white to-gray-200 bg-[length:200%_100%] animate-shimmer" />
<div className="aspect-[9/16] w-full rounded-lg bg-gradient-to-r from-muted via-background to-muted bg-[length:200%_100%] animate-shimmer" />
</div>
))}
</div>

7
resources/js/components/ui/media-item-skeleton.jsx Normal file
View File

@@ -0,0 +1,7 @@
const MediaItemSkeleton = () => {
return (
<div className="aspect-[9/16] w-full rounded-lg bg-gradient-to-r from-muted via-background to-muted bg-[length:200%_100%] animate-shimmer" />
);
};
export { MediaItemSkeleton };

48
resources/js/components/ui/media-item.jsx Normal file
View File

@@ -0,0 +1,48 @@
import { useState } from 'react';
import { MediaItemSkeleton } from './media-item-skeleton';
const MediaItem = ({ src, alt, onClick, isSelected, className = "" }) => {
const [isLoading, setIsLoading] = useState(true);
const [hasError, setHasError] = useState(false);
const handleImageLoad = () => {
setIsLoading(false);
};
const handleImageError = () => {
setIsLoading(false);
setHasError(true);
};
return (
<div className={`relative aspect-[9/16] w-full overflow-hidden rounded-lg bg-muted ${className}`}>
{isLoading && (
<div className="absolute inset-0 z-10">
<MediaItemSkeleton />
</div>
)}
{hasError ? (
<div className="flex h-full w-full items-center justify-center bg-muted text-muted-foreground text-xs p-2 text-center">
Failed to load
</div>
) : (
<img
src={src}
alt={alt}
className={`h-full w-full object-cover cursor-pointer transition-opacity duration-300 ${isLoading ? 'opacity-0' : 'opacity-100'}`}
onLoad={handleImageLoad}
onError={handleImageError}
onClick={onClick}
/>
)}
{/* Selection border overlay */}
{isSelected && !isLoading && (
<div className="absolute inset-0 rounded-lg ring-2 ring-blue-500 pointer-events-none" />
)}
</div>
);
};
export { MediaItem };

126
resources/js/modules/editor/partials/edit-sidebar.jsx
View File

@@ -1,6 +1,7 @@
import { Button } from '@/components/ui/button';
import { GridSkeleton } from '@/components/ui/grid-skeleton';
import { Input } from '@/components/ui/input';
import { MediaItem } from '@/components/ui/media-item';
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { cn } from '@/lib/utils';
@@ -32,13 +33,13 @@ export default function EditSidebar({ isOpen, onClose }) {
// Track search queries
const [searchQueries, setSearchQueries] = useState({
memes: '',
backgrounds: ''
backgrounds: '',
});
// Track if data has been loaded for each tab (to prevent infinite loading on empty results)
const [dataLoaded, setDataLoaded] = useState({
memes: false,
backgrounds: false
backgrounds: false,
});
// Fetch data when sidebar opens for the current active tab
@@ -48,22 +49,22 @@ export default function EditSidebar({ isOpen, onClose }) {
const query = searchQueries.memes;
if (query) {
searchMemes(query).finally(() => {
setDataLoaded(prev => ({ ...prev, memes: true }));
setDataLoaded((prev) => ({ ...prev, memes: true }));
});
} else {
fetchMemes().finally(() => {
setDataLoaded(prev => ({ ...prev, memes: true }));
setDataLoaded((prev) => ({ ...prev, memes: true }));
});
}
} else if (activeTab === 'backgrounds' && !dataLoaded.backgrounds && !isFetchingBackgrounds) {
const query = searchQueries.backgrounds;
if (query) {
searchBackgrounds(query).finally(() => {
setDataLoaded(prev => ({ ...prev, backgrounds: true }));
setDataLoaded((prev) => ({ ...prev, backgrounds: true }));
});
} else {
fetchBackgrounds().finally(() => {
setDataLoaded(prev => ({ ...prev, backgrounds: true }));
setDataLoaded((prev) => ({ ...prev, backgrounds: true }));
});
}
}
@@ -76,22 +77,22 @@ export default function EditSidebar({ isOpen, onClose }) {
const query = searchQueries.memes;
if (query) {
searchMemes(query).finally(() => {
setDataLoaded(prev => ({ ...prev, memes: true }));
setDataLoaded((prev) => ({ ...prev, memes: true }));
});
} else {
fetchMemes().finally(() => {
setDataLoaded(prev => ({ ...prev, memes: true }));
setDataLoaded((prev) => ({ ...prev, memes: true }));
});
}
} else if (value === 'backgrounds' && !dataLoaded.backgrounds && !isFetchingBackgrounds) {
const query = searchQueries.backgrounds;
if (query) {
searchBackgrounds(query).finally(() => {
setDataLoaded(prev => ({ ...prev, backgrounds: true }));
setDataLoaded((prev) => ({ ...prev, backgrounds: true }));
});
} else {
fetchBackgrounds().finally(() => {
setDataLoaded(prev => ({ ...prev, backgrounds: true }));
setDataLoaded((prev) => ({ ...prev, backgrounds: true }));
});
}
}
@@ -99,9 +100,9 @@ export default function EditSidebar({ isOpen, onClose }) {
// Handle search input changes
const handleSearchChange = (value) => {
setSearchQueries(prev => ({
setSearchQueries((prev) => ({
...prev,
[activeTab]: value
[activeTab]: value,
}));
};
@@ -110,30 +111,30 @@ export default function EditSidebar({ isOpen, onClose }) {
const query = searchQueries[activeTab];
if (activeTab === 'memes') {
searchMemes(query).finally(() => {
setDataLoaded(prev => ({ ...prev, memes: true }));
setDataLoaded((prev) => ({ ...prev, memes: true }));
});
} else if (activeTab === 'backgrounds') {
searchBackgrounds(query).finally(() => {
setDataLoaded(prev => ({ ...prev, backgrounds: true }));
setDataLoaded((prev) => ({ ...prev, backgrounds: true }));
});
}
};
// Handle clearing search
const handleClearSearch = () => {
setSearchQueries(prev => ({
setSearchQueries((prev) => ({
...prev,
[activeTab]: ''
[activeTab]: '',
}));
// Reset data loaded state and fetch fresh data without search
if (activeTab === 'memes') {
fetchMemes().finally(() => {
setDataLoaded(prev => ({ ...prev, memes: true }));
setDataLoaded((prev) => ({ ...prev, memes: true }));
});
} else if (activeTab === 'backgrounds') {
fetchBackgrounds().finally(() => {
setDataLoaded(prev => ({ ...prev, backgrounds: true }));
setDataLoaded((prev) => ({ ...prev, backgrounds: true }));
});
}
};
@@ -178,7 +179,7 @@ export default function EditSidebar({ isOpen, onClose }) {
<img src={selectedMeme.gif_url} alt="Selected Meme" className="h-full w-full object-cover" />
</div>
) : (
<div className="flex aspect-[9/16] h-[200px] items-center justify-center rounded-lg border-2 border-dashed border-gray-300 p-2 text-center text-xs text-gray-500">
<div className="text-muted-foreground flex aspect-[9/16] h-[200px] items-center justify-center rounded-lg border-2 border-dashed border-gray-300 p-2 text-center text-xs">
No meme
</div>
)}
@@ -197,7 +198,7 @@ export default function EditSidebar({ isOpen, onClose }) {
<img src={selectedBackground.media_url} alt="Selected Background" className="h-full w-full object-cover" />
</div>
) : (
<div className="flex aspect-[9/16] h-[200px] items-center justify-center rounded-lg border-2 border-dashed border-gray-300 p-2 text-center text-xs text-gray-500">
<div className="text-muted-foreground flex aspect-[9/16] h-[200px] items-center justify-center rounded-lg border-2 border-dashed border-gray-300 p-2 text-center text-xs">
No background
</div>
)}
@@ -216,56 +217,61 @@ export default function EditSidebar({ isOpen, onClose }) {
{/* Search Bar */}
<div className="relative flex items-center gap-2 px-2 pt-3">
<div className="relative flex-1">
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
<Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
<Input
placeholder={`Search ${activeTab === 'memes' ? 'memes' : 'backgrounds'}...`}
value={searchQueries[activeTab]}
onChange={(e) => handleSearchChange(e.target.value)}
onKeyDown={handleSearchKeyDown}
className="pl-10 pr-10"
className="pr-10 pl-10"
/>
{searchQueries[activeTab] && (
<button
onClick={handleClearSearch}
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
className="text-muted-foreground hover:text-foreground absolute top-1/2 right-3 -translate-y-1/2"
>
<X className="h-4 w-4" />
</button>
)}
</div>
<Button
onClick={handleSearch}
variant="outline"
size="sm"
className="px-3"
>
<Button onClick={handleSearch} variant="outline" size="sm" className="px-3">
<Search className="h-4 w-4" />
</Button>
</div>
<TabsContent value="backgrounds" className="">
{isFetchingBackgrounds && <GridSkeleton itemCount={6} />}
{!isFetchingBackgrounds && backgrounds.length === 0 && <div className="w-full text-center p-8 text-gray-500">No backgrounds found.</div>}
{!isFetchingBackgrounds && backgrounds.length === 0 && (
<div className="text-muted-foreground w-full p-8 text-center">
<p className="mb-4 text-sm">No backgrounds found.</p>
<div className="flex flex-col gap-3">
{searchQueries.backgrounds && (
<Button variant="secondary" onClick={handleClearSearch} className="rounded-full text-sm">
Clear Search
</Button>
)}
{import.meta.env.VITE_DISCORD_LINK && (
<Button variant="" asChild className="rounded-full text-sm">
<a href={import.meta.env.VITE_DISCORD_LINK} target="_blank" rel="noopener noreferrer">
Request in Discord
</a>
</Button>
)}
</div>
</div>
)}
{!isFetchingBackgrounds && backgrounds.length > 0 && (
<>
<div className="grid grid-cols-2 gap-2">
<div className="grid grid-cols-2 gap-2 p-2">
{backgrounds.map((item, index) => (
<Button
<MediaItem
key={item.ids}
variant="ghost"
className={`aspect-[9/16] h-auto w-full overflow-hidden rounded-lg bg-gray-100 p-0 transition-all hover:bg-gray-100 hover:ring-2 hover:ring-blue-500 ${
selectedBackground?.ids === item.ids ? 'ring-2 ring-blue-500' : ''
}`}
onClick={() => handleBackgroundSelect(item)}
>
<img
src={item.media_url}
alt="Background"
width={150}
height={150}
className="h-full w-full object-cover"
onClick={() => handleBackgroundSelect(item)}
isSelected={selectedBackground?.ids === item.ids}
className="transition-all hover:ring-2 hover:ring-blue-500"
/>
</Button>
))}
</div>
</>
@@ -274,21 +280,37 @@ export default function EditSidebar({ isOpen, onClose }) {
<TabsContent value="memes" className="">
{isFetchingMemes && <GridSkeleton itemCount={6} />}
{!isFetchingMemes && memes.length === 0 && <div className="w-full text-center p-8 text-gray-500">No memes found.</div>}
{!isFetchingMemes && memes.length === 0 && (
<div className="text-muted-foreground w-full p-8 text-center">
<p className="mb-4 text-sm">No memes found.</p>
<div className="flex flex-col gap-2">
{searchQueries.memes && (
<Button variant="outline" onClick={handleClearSearch} className="text-sm">
Clear Search
</Button>
)}
{import.meta.env.VITE_DISCORD_LINK && (
<Button variant="secondary" asChild className="text-sm">
<a href={import.meta.env.VITE_DISCORD_LINK} target="_blank" rel="noopener noreferrer">
Request in Discord
</a>
</Button>
)}
</div>
</div>
)}
{!isFetchingMemes && memes.length > 0 && (
<>
<div className="grid grid-cols-2 gap-2 p-2">
{memes.map((item, index) => (
<Button
<MediaItem
key={item.ids}
variant="ghost"
className={`aspect-[9/16] h-auto w-full overflow-hidden rounded-lg bg-gray-100 p-0 transition-all hover:bg-gray-100 hover:ring-2 hover:ring-blue-500 ${
selectedMeme?.ids === item.ids ? 'ring-2 ring-blue-500' : ''
}`}
src={item.gif_url}
alt="Meme"
onClick={() => handleMemeSelect(item)}
>
<img src={item.gif_url} alt="Meme" width={150} height={150} className="h-full w-full object-cover" />
</Button>
isSelected={selectedMeme?.ids === item.ids}
className="transition-all hover:ring-2 hover:ring-blue-500"
/>
))}
</div>
</>