Improvements to queue

2025-07-29 19:26:40 +03:30
parent ebfe34faf0
commit 790b3d45b3
2 changed files with 121 additions and 103 deletions
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/components/AdminDashboard.tsx
+++ b/src/components/AdminDashboard.tsx
@@ -29,19 +29,26 @@ const AdminDashboard = ({ token, onLogout }: AdminDashboardProps) => {
  // Get current media item
  const currentMedia = mediaQueue.length > 0 ? mediaQueue[0] : null;

-  // Preload images
  useEffect(() => {
-    if (mediaQueue.length > 0) {
-      // Preload next images (up to 2)
-      mediaQueue.slice(1, 3).forEach(media => {
-        if (media.preview_url) {
-          const img = new Image();
-          img.src = media.preview_url;
-        }
-      });
-    }
+    // only preload if there are items after the current one
+    mediaQueue.slice(1, 5).forEach(media => {
+      if (!media.preview_url) return;
+
+      const img = new Image();
+      img.onload = () => {
+        // successful preload — nothing to do
+      };
+      img.onerror = () => {
+        // this media is broken even before we show it: remove it now
+        setMediaQueue(queue =>
+          queue.filter(item => item.id !== media.id)
+        );
+      };
+      img.src = media.preview_url;
+    });
  }, [mediaQueue]);

+
  const fetchMedia = async () => {
    setIsLoading(true);
    try {
@@ -94,10 +101,10 @@ const AdminDashboard = ({ token, onLogout }: AdminDashboardProps) => {
  // Fill the queue with initial media items
  const fillMediaQueue = async () => {
    // If queue is already being filled or has items, don't fetch more
-    if (isLoading || mediaQueue.length >= 3) return;
+    if (isLoading || mediaQueue.length >= 5) return;

    // Determine how many more items we need
-    const itemsNeeded = 3 - mediaQueue.length;
+    const itemsNeeded = 5 - mediaQueue.length;

    // Fetch the items one by one
    for (let i = 0; i < itemsNeeded; i++) {
@@ -110,6 +117,7 @@ const AdminDashboard = ({ token, onLogout }: AdminDashboardProps) => {
    fillMediaQueue();
  }, [mediaQueue.length]);

+
  const handleAction = async (action: 'approve' | 'reject') => {
    if (!currentMedia) return;

@@ -170,102 +178,112 @@ const AdminDashboard = ({ token, onLogout }: AdminDashboardProps) => {

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100">
-    {/* Header */}
-    <div className="bg-white shadow-sm border-b">
-    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-    <div className="flex justify-between items-center h-16">
-    <h1 className="text-xl font-semibold text-slate-800">Admin Dashboard</h1>
-    <Button
-    variant="outline"
-    onClick={onLogout}
-    className="flex items-center gap-2"
-    >
-    <LogOut className="w-4 h-4" />
-    Logout
-    </Button>
-    </div>
-    </div>
-    </div>
-
-    {/* Main Content */}
-    <div className="flex items-center justify-center min-h-[calc(100vh-4rem)] p-8">
-    <Card className="max-w-2xl w-full shadow-lg">
-    <CardContent className="p-8">
-    {isLoading && mediaQueue.length === 0 ? (
-      <div className="flex flex-col items-center justify-center py-16">
-      <Loader2 className="w-8 h-8 animate-spin text-slate-600 mb-4" />
-      <p className="text-slate-600">Loading media...</p>
-      </div>
-    ) : currentMedia ? (
-      <div className="space-y-6">
-      {/* Image */}
-      <div className="flex justify-center">
-      <img
-      src={currentMedia.preview_url}
-      alt="Media to review"
-      className="max-w-full max-h-96 rounded-lg shadow-md object-contain"
-      onError={(e) => {
-        // Fallback to remote URL if preview fails
-        const target = e.target as HTMLImageElement;
-        target.src = currentMedia.remote_url;
-      }}
-      />
-      </div>
-
-      {/* Media Info */}
-      <div className="text-center text-sm text-slate-600">
-      <p>Media ID: {currentMedia.id}</p>
-      <p>Post ID: {currentMedia.PostID}</p>
-      <p className="text-xs text-slate-400 mt-1">
-      {mediaQueue.length > 1 ? `${mediaQueue.length - 1} more item(s) pre-loaded` : 'Loading more items...'}
-      </p>
-      </div>
-
-      {/* Status Message */}
-      {statusMessage && (
-        <div className="text-center">
-        <p className="text-lg font-medium text-slate-700">{statusMessage}</p>
+      {/* Header */}
+      <div className="bg-white shadow-sm border-b">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center h-16">
+            <h1 className="text-xl font-semibold text-slate-800">Admin Dashboard</h1>
+            <Button
+              variant="outline"
+              onClick={onLogout}
+              className="flex items-center gap-2"
+            >
+              <LogOut className="w-4 h-4" />
+              Logout
+            </Button>
+          </div>
        </div>
-      )}
+      </div>

-      {/* Action Buttons */}
-      <div className="flex gap-4 justify-center">
-      <Button
-      onClick={() => handleAction('reject')}
-      disabled={isProcessing}
-      variant="destructive"
-      className="flex items-center gap-2 px-8 py-3"
-      >
-      <X className="w-5 h-5" />
-      Reject
-      </Button>
-      <Button
-      onClick={() => handleAction('approve')}
-      disabled={isProcessing}
-      className="flex items-center gap-2 px-8 py-3 bg-green-600 hover:bg-green-700"
-      >
-      <Check className="w-5 h-5" />
-      Approve
-      </Button>
+      {/* Main Content */}
+      <div className="flex items-center justify-center min-h-[calc(100vh-4rem)] p-8">
+        <Card className="max-w-2xl w-full shadow-lg">
+          <CardContent className="p-8">
+            {isLoading && mediaQueue.length === 0 ? (
+              <div className="flex flex-col items-center justify-center py-16">
+                <Loader2 className="w-8 h-8 animate-spin text-slate-600 mb-4" />
+                <p className="text-slate-600">Loading media...</p>
+              </div>
+            ) : currentMedia ? (
+              <div className="space-y-6">
+                {/* Image */}
+                <div className="flex justify-center">
+                  <img
+                    src={currentMedia.preview_url}
+                    alt="Media to review"
+                    className="max-w-full max-h-96 … object-contain"
+                    onError={(e) => {
+                      const imgEl = e.currentTarget;
+                      if (!imgEl.dataset.fallbackTried) {
+                        imgEl.dataset.fallbackTried = 'true';
+                        imgEl.src = currentMedia.remote_url;
+                      } else {
+                        // both preview AND remote have failed — drop it
+                        setMediaQueue(queue =>
+                          queue.filter(item => item.id !== currentMedia.id)
+                        );
+                      }
+                    }}
+                  />
+
+
+                </div>
+
+                {/* Media Info */}
+                <div className="text-center text-sm text-slate-600">
+                  <p>Media ID: {currentMedia.id}</p>
+                  <p>Post ID: {currentMedia.PostID}</p>
+                  <p className="text-xs text-slate-400 mt-1">
+                    {mediaQueue.length > 1 ? `${mediaQueue.length - 1} more item(s) pre-loaded` : 'Loading more items...'}
+                  </p>
+                </div>
+
+                {/* Status Message */}
+                {statusMessage && (
+                  <div className="text-center">
+                    <p className="text-lg font-medium text-slate-700">{statusMessage}</p>
+                  </div>
+                )}
+
+                {/* Action Buttons */}
+                <div className="flex gap-4 justify-center">
+                  <Button
+                    onClick={() => handleAction('reject')}
+                    disabled={isProcessing}
+                    variant="destructive"
+                    className="flex items-center gap-2 px-8 py-3"
+                  >
+                    <X className="w-5 h-5" />
+                    Reject
+                  </Button>
+                  <Button
+                    onClick={() => handleAction('approve')}
+                    disabled={isProcessing}
+                    className="flex items-center gap-2 px-8 py-3 bg-green-600 hover:bg-green-700"
+                  >
+                    <Check className="w-5 h-5" />
+                    Approve
+                  </Button>
+                </div>
+              </div>
+            ) : (
+              <div className="text-center py-16">
+                <p className="text-lg text-slate-600">No media available for review</p>
+                <Button
+                  onClick={fillMediaQueue}
+                  className="mt-4"
+                  variant="outline"
+                >
+                  Refresh
+                </Button>
+              </div>
+            )}
+          </CardContent>
+        </Card>
      </div>
-      </div>
-    ) : (
-      <div className="text-center py-16">
-      <p className="text-lg text-slate-600">No media available for review</p>
-      <Button
-      onClick={fillMediaQueue}
-      className="mt-4"
-      variant="outline"
-      >
-      Refresh
-      </Button>
-      </div>
-    )}
-    </CardContent>
-    </Card>
-    </div>
    </div>
  );
 };

 export default AdminDashboard;
+