Serhii 10 21

frontend/package.json

@@ -14,6 +14,7 @@
     "@types/react-dom": "^18.3.0",
     "clsx": "^2.1.1",
     "holderjs": "^2.9.9",
+    "lodash": "^4.17.21",
     "nth-check": "^2.1.1",
     "openapi-fetch": "^0.12.2",
     "react": "^18.3.1",
@@ -60,6 +61,7 @@
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@react-oauth/google": "^0.12.1",
     "@types/jest": "^29.5.12",
+    "@types/lodash": "^4.17.12",
     "axios": "^1.7.2",
     "babel-eslint": "*",
     "eslint": "^8.0.0",

frontend/src/App.css

@@ -43,6 +43,19 @@ body {
   /* Set transform origin to the left edge */
 }
 
+@keyframes spin-reverse {
+  from {
+    transform: rotate(360deg);
+  }
+  to {
+    transform: rotate(0deg);
+  }
+}
+
+.animate-spin-reverse {
+  animation: spin-reverse 2s linear infinite;
+}
+
 @layer base {
   @layer base {
     /* Global input customization */

frontend/src/App.tsx

@@ -60,12 +60,7 @@ const App = () => {
                       />
                       <Route
                         path="/collection/:id"
-                        element={
-                          <PrivateRoute
-                            element={<CollectionPage />}
-                            requiredSubscription={true} // Set true if subscription is required for this route
-                          />
-                        }
+                        element={<CollectionPage />}
                       />
                       <Route
                         path="/subscription"

frontend/src/components/Audio.tsx

@@ -107,6 +107,21 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({
     }
   }, [currentImage, index]);
 
+  const handleKey = (event: KeyboardEvent) => {
+    if (event.key === " " || event.code === "Space") {
+      // Prevent default action, e.g., scrolling
+      event.preventDefault();
+      togglePlayPause();
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener("keydown", handleKey);
+    return () => {
+      window.removeEventListener("keydown", handleKey);
+    };
+  }, [handleKey]);
+
   return (
     <div className="mt-2 w-full text-center bg-gray-12 px-4 py-1 rounded-md">
       <audio ref={audioRef}>

frontend/src/components/collection/Edit.tsx

@@ -12,7 +12,7 @@ import { useEffect, useMemo, useState } from "react";
 import { ListManager } from "react-beautiful-dnd-grid";
 import { Collection, ImageType } from "types/model";
 type CollectionEditProps = {
-  collection: Collection;
+  collection: Collection | undefined;
   setCollection: React.Dispatch<React.SetStateAction<Collection | undefined>>;
 };
 const skeletons = Array(5).fill(null);
@@ -51,7 +51,7 @@ const CollectionEdit: React.FC<CollectionEditProps> = ({
       };
       asyncfunction();
     }
-  }, [collection.id]);
+  }, [collection?.id]);
   useEffect(() => {
     if (updated_image && images) {
       const img = images?.find((image) => image.id == updated_image.id);
@@ -168,14 +168,14 @@ const CollectionEdit: React.FC<CollectionEditProps> = ({
     }
   };
   const onDeleteImage = async () => {
-    if (deleteImageId) {
+    if (deleteImageId && collection) {
       startLoading();
       const { error } = await client.GET("/delete_image", {
         params: { query: { id: deleteImageId } },
       });
       if (error) addAlert(error.detail?.toString(), "error");
       else if (images) {
-        const new_images_ID = collection.images.filter(
+        const new_images_ID = collection?.images.filter(
           (image) => image !== deleteImageId,
         );
         collection.images = new_images_ID;
@@ -229,42 +229,46 @@ const CollectionEdit: React.FC<CollectionEditProps> = ({
               required
             />
           </div>
-          <Book
-            title={title}
-            description={description}
-            id={collection.id}
-            featured_image={featured_image}
-          />
-        </div>
-        <div className="flex justify-content-end w-full gap-2">
-          <button
-            className="bg-blue-500 text-white w-35 p-2 rounded hover:bg-blue-600"
-            onClick={() => setShowUploadModal(true)}
-          >
-            Add Images
-          </button>
-          <button
-            className="bg-blue-500 text-white w-30 p-2 rounded hover:bg-blue-600"
-            disabled={
-              collection.images.join() == reorderImageIds?.join() &&
-              collection.title == title &&
-              collection.description == description
-            }
-            type="submit"
-            name="action"
-            value="save"
-          >
-            Save Changes
-          </button>
-          <button
-            className="bg-blue-500 text-white w-30 p-2 rounded hover:bg-blue-600"
-            type="submit"
-            name="action"
-            value="publish"
-          >
-            {collection.publish_flag ? "Unpublish" : "Publish"}
-          </button>
+          {collection && (
+            <Book
+              title={title}
+              description={description}
+              id={collection.id}
+              featured_image={featured_image}
+            />
+          )}
         </div>
+        {collection && (
+          <div className="flex justify-content-end w-full gap-2">
+            <button
+              className="bg-blue-500 text-white w-35 p-2 rounded hover:bg-blue-600"
+              onClick={() => setShowUploadModal(true)}
+            >
+              Add Images
+            </button>
+            <button
+              className="bg-blue-500 text-white w-30 p-2 rounded hover:bg-blue-600"
+              disabled={
+                collection.images.join() == reorderImageIds?.join() &&
+                collection.title == title &&
+                collection.description == description
+              }
+              type="submit"
+              name="action"
+              value="save"
+            >
+              Save Changes
+            </button>
+            <button
+              className="bg-blue-500 text-white w-30 p-2 rounded hover:bg-blue-600"
+              type="submit"
+              name="action"
+              value="publish"
+            >
+              {collection.publish_flag ? "Unpublish" : "Publish"}
+            </button>
+          </div>
+        )}
       </form>
       {/* <div className="flex gap-4">
           <button

frontend/src/components/collection/View.tsx

@@ -6,7 +6,7 @@ import { useEffect, useMemo, useState } from "react";
 import { Collection, ImageType } from "types/model";
 
 type CollectionViewProps = {
-  collection: Collection;
+  collection: Collection | undefined;
 };
 
 const CollectionView: React.FC<CollectionViewProps> = ({ collection }) => {
@@ -20,7 +20,7 @@ const CollectionView: React.FC<CollectionViewProps> = ({ collection }) => {
 
   // Get translated images
   const translatedImages = useMemo(() => {
-    if (images) {
+    if (images && collection) {
       const filter = images.filter((img) => img.is_translated);
       const final_filter = collection.images
         ?.map((img) => {
@@ -31,7 +31,7 @@ const CollectionView: React.FC<CollectionViewProps> = ({ collection }) => {
       if (final_filter) return final_filter;
     }
     return [];
-  }, [images]);
+  }, [images, collection]);
 
   // Preload images one by one
   const preloadImage = (src: string) => {
@@ -131,14 +131,29 @@ const CollectionView: React.FC<CollectionViewProps> = ({ collection }) => {
     };
   }, [handleKey]);
 
+  const FantasyLoading = () => {
+    return (
+      <div className="relative min-h-screen overflow-hidden">
+        {/* Loader Wrapper */}
+        <div className="fixed inset-0 z-50 flex justify-center items-center bg-gray-12 transition-opacity duration-1000 opacity-100">
+          <div className="relative w-36 h-36">
+            {/* Outer Spinner */}
+            <div className="absolute inset-0 border-4 border-transparent border-t-teal-500 rounded-full animate-spin"></div>
+            {/* Middle Spinner */}
+            <div className="absolute inset-1 border-4 border-transparent border-t-red-500 rounded-full animate-spin-reverse"></div>
+            {/* Inner Spinner */}
+            <div className="absolute inset-4 border-4 border-transparent border-t-yellow-500 rounded-full animate-spin"></div>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
   return (
     <div className="flex flex-col rounded-md h-full items-center bg-gray-0 gap-4 w-full">
       {isLoading ? (
-        <div className="flex flex-col h-full w-full gap-4">
-          <div className="bg-gray-3 w-full rounded-lg h-3/4 animate-pulse" />
-          <div className="bg-gray-3 w-full rounded-lg h-1/4 animate-pulse" />
-        </div>
-      ) : translatedImages ? (
+        <FantasyLoading />
+      ) : translatedImages.length > 0 ? (
         currentImage && (
           <div className="flex flex-col align-items-center w-full">
             <div className="w-full absolute left-0">
@@ -147,7 +162,11 @@ const CollectionView: React.FC<CollectionViewProps> = ({ collection }) => {
                 src={currentImage.image_url}
                 alt="Collection Image"
                 className="w-full select-none"
-                style={{ marginBottom: "230px" }}
+                style={
+                  currentImage.transcriptions.length != 0
+                    ? { marginBottom: "230px" }
+                    : {}
+                }
                 onClick={handlePhotoClick}
               />
             </div>
@@ -194,7 +213,9 @@ const CollectionView: React.FC<CollectionViewProps> = ({ collection }) => {
                       />
                     </>
                   ) : (
-                    <div className="h-52">No transcript</div>
+                    <div className="h-8 flex flex-col items-center justify-center text-md">
+                      <span>No transcript</span>
+                    </div>
                   )}
                 </div>
               </Container>

frontend/src/hooks/theme.tsx

@@ -1,3 +1,4 @@
+import throttle from "lodash/throttle";
 import {
   createContext,
   ReactNode,
@@ -61,25 +62,59 @@ export const ThemeProvider = (props: ThemeProviderProps) => {
     setThemeWithLocalStorage(theme);
   };
 
-  const scrollSpeed = 10; // Increase this value to make scrolling faster
+  // const scrollSpeed = 200; // Increase this value to make scrolling faster
+
+  // useEffect(() => {
+  //   const handleWheel = (event: WheelEvent) => {
+  //     event.preventDefault(); // Prevent default scroll behavior
+  //     window.scrollBy({
+  //       top: event.deltaY * scrollSpeed, // Multiply the scroll amount
+  //       left: 0,
+  //       behavior: "smooth", // Use smooth scrolling
+  //     });
+  //   };
+
+  //   window.addEventListener("wheel", handleWheel, { passive: false });
+
+  //   // Clean up the event listener on component unmount
+  //   return () => {
+  //     window.removeEventListener("wheel", handleWheel);
+  //   };
+  // }, []); // Empty dependency array ensures this runs only on mount and unmount
+
+  const handleKey = throttle((event: KeyboardEvent) => {
+    switch (event.key) {
+      case "ArrowUp":
+        window.scrollBy({
+          top: -600,
+          left: 0,
+          behavior: "smooth",
+        });
+        break;
+      case "ArrowDown":
+        window.scrollBy({
+          top: 600,
+          left: 0,
+          behavior: "smooth",
+        });
+        break;
+    }
+  }, 300);
 
   useEffect(() => {
-    const handleWheel = (event: WheelEvent) => {
-      event.preventDefault(); // Prevent default scroll behavior
-      window.scrollBy({
-        top: event.deltaY * scrollSpeed, // Multiply the scroll amount
-        left: 0,
-        behavior: "smooth", // Use smooth scrolling
-      });
-    };
-
-    window.addEventListener("wheel", handleWheel, { passive: false });
-
-    // Clean up the event listener on component unmount
+    const throttledHandleKey = (event: KeyboardEvent) => {
+      if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+        event.preventDefault(); // Prevent the default behavior for arrow keys.
+        handleKey(event);
+      }
+    }; // Adjust the throttle delay (200ms here) as needed.
+
+    window.addEventListener("keydown", throttledHandleKey);
     return () => {
-      window.removeEventListener("wheel", handleWheel);
+      window.removeEventListener("keydown", throttledHandleKey);
+      handleKey.cancel(); // Clean up the throttling
     };
-  }, []); // Empty dependency array ensures this runs only on mount and unmount
+  }, []);
 
   useEffect(() => {
     document.body.setAttribute("data-bs-theme", theme);