tweaked scroll to top behaviour, scroll to top on logoLink, fixed: sh…

…ortcutpopup was being trigerred in text boxes, commented card animations temporarily, reduced margins on watch page.
Miruro-no-kuon · Mar 17, 2024 · 5e8fd45 · 5e8fd45
1 parent 915a38e
commit 5e8fd45
Show file tree

Hide file tree

Showing 12 changed files with 109 additions and 64 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,10 +1,5 @@
 import { useEffect, useRef } from "react";
-import {
-  BrowserRouter as Router,
-  Routes,
-  Route,
-  useLocation,
-} from "react-router-dom";
+import { BrowserRouter as Router, Routes, Route, useLocation } from "react-router-dom";
 import Navbar from "./components/Navbar";
 import Footer from "./components/Footer";
 import Home from "./pages/Home";
@@ -16,32 +11,75 @@ import PolicyTerms from "./pages/PolicyTerms";
 import ShortcutsPopup from "./components/ShortcutsPopup";
 
 function ScrollToTop() {
-  const { pathname } = useLocation();
-  const prevPathnameRef = useRef(pathname);
+  const location = useLocation();
+  const prevPathnameRef = useRef(null);
 
   useEffect(() => {
+    // Attempt to restore the scroll position if it exists
+    const restoreScrollPosition = () => {
+      const savedPosition = sessionStorage.getItem(location.pathname);
+      if (savedPosition) {
+        window.scrollTo(0, parseInt(savedPosition, 10));
+      }
+    };
+
+    // Save the scroll position for the current path before navigating away
+    const saveScrollPosition = () => sessionStorage.setItem(location.pathname, window.scrollY.toString());
+
+    // Add event listeners
+    window.addEventListener('beforeunload', saveScrollPosition);
+    window.addEventListener('popstate', restoreScrollPosition);
+
+    // Initial scroll restoration or scroll to top
     const ignoreRoutePattern = /^\/watch\/[^/]+\/[^/]+\/[^/]+$/;
     // Only scroll to if pathname has changed and does not match the ignore pattern
     if (
-      prevPathnameRef.current !== pathname &&
-      !ignoreRoutePattern.test(pathname)
+      prevPathnameRef.current !== location.pathname &&
+      !ignoreRoutePattern.test(location.pathname)
     ) {
-      window.setTimeout(() => {
-        window.scrollTo({
-          top: 0,
-          // behavior: "smooth",
-        });
-      });
+      if (location.state?.preserveScroll) {
+        restoreScrollPosition();
+      } else {
+        window.scrollTo(0, 0);
+      }
     }
 
     // Update the previous pathname reference for the next render
-    prevPathnameRef.current = pathname;
-  }, [pathname]);
+    prevPathnameRef.current = location.pathname;
+
+    // Cleanup event listeners
+    return () => {
+      window.removeEventListener('beforeunload', saveScrollPosition);
+      window.removeEventListener('popstate', restoreScrollPosition);
+    };
+  }, [location]);
 
   return null;
 }
 
+const usePreserveScrollOnReload = () => {
+  useEffect(() => {
+    // Restore scroll position
+    const savedScrollPosition = sessionStorage.getItem('scrollPosition');
+    if (savedScrollPosition) {
+      window.scrollTo(0, parseInt(savedScrollPosition, 10));
+    }
+
+    // Save scroll position before reload
+    const handleBeforeUnload = () => {
+      sessionStorage.setItem('scrollPosition', window.scrollY.toString());
+    };
+
+    window.addEventListener('beforeunload', handleBeforeUnload);
+
+    return () => {
+      window.removeEventListener('beforeunload', handleBeforeUnload);
+    };
+  }, []);
+};
+
 function App() {
+  usePreserveScrollOnReload();
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (

diff --git a/src/components/Cards/CardItem.tsx b/src/components/Cards/CardItem.tsx
@@ -47,13 +47,13 @@ interface CardItemContentProps {
 }
 
 const popInAnimation = keyframes`
-  0% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
+  // 0% {
+  //   opacity: 0.4;
+  // }
+  // 100% {
+  //   opacity: 1;
+  //   transform: scale(1);
+  // }
 `;
 
 const StyledCardWrapper = styled.div`

diff --git a/src/components/Cards/ImageDisplay.tsx b/src/components/Cards/ImageDisplay.tsx
@@ -19,14 +19,14 @@ interface ImageDisplayProps {
 }
 
 const popInAnimation = keyframes`
-  0% {
-    opacity: 0.4;
-    transform: scale(0.9);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
+  // 0% {
+  //   opacity: 0.4;
+  //   transform: scale(1);
+  // }
+  // 100% {
+  //   opacity: 1;
+  //   transform: scale(1);
+  // }
 `;
 
 const AnimeImage = styled.div<{
@@ -45,7 +45,7 @@ const AnimeImage = styled.div<{
 
   &:hover {
     background: ${({ $ishovered, color }) =>
-      $ishovered ? color : "var(--global-card-bg)"};
+    $ishovered ? color : "var(--global-card-bg)"};
   }
 `;
 
@@ -127,7 +127,7 @@ const Button = styled.span<{ $ishovered?: boolean; color?: string }>`
 
   &:hover {
     color: ${({ $ishovered, color }) =>
-      $ishovered ? color : "var(--global-button-text)"};
+    $ishovered ? color : "var(--global-button-text)"};
   }
   @media (max-width: 1000px) {
     font-size: 0.6rem;

diff --git a/src/components/Home/Carousel.tsx b/src/components/Home/Carousel.tsx
@@ -43,15 +43,15 @@ const StyledSwiperSlide = styled(SwiperSlide)`
   justify-content: flex-start;
   align-items: center;
   animation: ${keyframes`
-    0% {
-      opacity: 0.4;
-      transform: scale(0.965);
-    }
-    100% {
-      opacity: 1;
-      transform: scale(1);
-    }
-  `} 0.2s ease-in-out forwards;
+  //   0% {
+  //     opacity: 0.4;
+  //     transform: scale(1);
+  //   }
+  //   100% {
+  //     opacity: 1;
+  //     transform: scale(1);
+  //   }
+  // `} 0.2s ease-in-out forwards;
 `;
 
 const DarkOverlay = styled.div`

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -405,7 +405,7 @@ const Navbar = () => {
   return (
     <StyledNavbar ref={navbarRef}>
       <TopContainer>
-        <LogoImg to="/home">見るろ の 久遠</LogoImg>
+        <LogoImg to="/home" onClick={() => window.scrollTo(0, 0)}>見るろ の 久遠</LogoImg>
         <InputContainer>
           <Icon $isFocused={search.isSearchFocused}>
             <FontAwesomeIcon icon={faSearch} />

diff --git a/src/components/ShortcutsPopup.tsx b/src/components/ShortcutsPopup.tsx
@@ -144,7 +144,12 @@ const ShortcutsPopup = () => {
   const [showPopup, setShowPopup] = useState(false);
 
   useEffect(() => {
-    const togglePopupWithShortcut = (e: any) => {
+    const togglePopupWithShortcut = (e) => {
+      // Check if the event's target is an input, textarea, or select element
+      if (e.target.tagName === "INPUT" || e.target.tagName === "TEXTAREA" || e.target.tagName === "SELECT") {
+        return; // Do nothing if the event is from one of these elements
+      }
+
       if (e.shiftKey && e.key === "?") {
         e.preventDefault(); // Prevent the default action of the key press
         setShowPopup(!showPopup);
@@ -153,6 +158,7 @@ const ShortcutsPopup = () => {
       }
     };
 
+
     // Add the event listener
     window.addEventListener("keydown", togglePopupWithShortcut);
 

diff --git a/src/components/Skeletons/CardSkeleton.tsx b/src/components/Skeletons/CardSkeleton.tsx
@@ -46,7 +46,7 @@ const SkeletonCard = styled.div<SkeletonProps>`
     !loading &&
     css`
       animation: ${css`
-        ${pulseAnimation} 1s infinite, ${popInAnimation} 1s infinite
+        // ${pulseAnimation} 1s infinite, ${popInAnimation} 1s infinite
       `};
     `}
 `;

diff --git a/src/components/Skeletons/CarouselSkeleton.tsx b/src/components/Skeletons/CarouselSkeleton.tsx
@@ -14,18 +14,18 @@ const pulseAnimation = keyframes`
 `;
 
 const popInAnimation = keyframes`
-  0%, 100%{
-    opacity: 0;
-    transform: scale(0.975);
-  }
-  50% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  75% {
-    opacity: 0.5;
-    transform: scale(1);
-  }
+  // 0%, 100%{
+  //   opacity: 0;
+  //   transform: scale(1);
+  // }
+  // 50% {
+  //   opacity: 1;
+  //   transform: scale(1);
+  // }
+  // 75% {
+  //   opacity: 0.5;
+  //   transform: scale(1);
+  // }
 `;
 
 interface SkeletonProps {
@@ -42,6 +42,7 @@ const SkeletonSlide = styled.div<SkeletonProps>`
 
   @media (max-width: 1000px) {
     height: 20rem;
+    margin-bottom: 0.5rem;
   }
   @media (max-width: 500px) {
     height: 18rem;

diff --git a/src/components/Watch/EpisodeList.tsx b/src/components/Watch/EpisodeList.tsx
@@ -33,7 +33,7 @@ const ListContainer = styled.div`
   flex-grow: 1;
   display: flex;
   flex-direction: column;
-  max-height: 46rem;
+  max-height: 50rem;
   @media (max-width: 1900px) {
     max-height: 35rem;
   }

diff --git a/src/components/Watch/Video/EmbeddedVideoPlayer.tsx b/src/components/Watch/Video/EmbeddedVideoPlayer.tsx
@@ -12,7 +12,7 @@ const Container = styled.div`
   padding-bottom: 56.25%; /* 16:9 aspect ratio (height / width * 100) */
   position: relative;
   @media (max-width: 1000px) {
-    padding-bottom:18rem; /* Adjust aspect ratio for smaller screens */
+    padding-bottom:16rem; /* Adjust aspect ratio for smaller screens */
   }
 `;
 

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -168,7 +168,7 @@ const Home = () => {
           animeData={animeData}
           totalPages={1} // Adjust as necessary
           hasNextPage={false} // Adjust as necessary
-          onLoadMore={() => {}} // Placeholder for actual logic
+          onLoadMore={() => { }} // Placeholder for actual logic
         />
       )}
     </Section>

diff --git a/src/pages/Watch.tsx b/src/pages/Watch.tsx
@@ -17,8 +17,8 @@ import VideoPlayerSkeleton from "../components/Skeletons/VideoPlayerSkeleton";
 // Styled Components
 
 const WatchContainer = styled.div`
-  margin-left: 5rem;
-  margin-right: 5rem;
+  margin-left: 1rem;
+  margin-right: 1rem;
   @media (max-width: 1000px) {
     margin-left: 0rem;
     margin-right: 0rem;