Merge pull request #168 from Miruro-no-kuon/preview-main

Preview main

.env.example

@@ -1,7 +1,7 @@
 # VITE_BACKEND_URL: This is the base URL for the primary backend server.
 # It is used for making API requests to fetch anime data, metadata, and other related information.
 # Example: VITE_BACKEND_URL="https://api.consumet.org/"
-VITE_BACKEND_URL="https://api.consumet.org/"
+VITE_BACKEND_URL="https://public-miruro-consumet-api.vercel.app/"
 
 # VITE_API_KEY: A specific key required for accessing certain backend services or APIs.
 # This key might be used for authentication or tracking API usage. 

README.md

@@ -1,13 +1,11 @@
-
-
 <p align="center">
   <a href="https://www.miruro.com" target="_blank">
     <img src="https://raw.githubusercontent.com/Miruro-no-kuon/Miruro/main/src/assets/miruro-transparent-white.png" alt="Logo" width="200"/>
   </a>
 </p>
 
 <h1 align="center">
-    MIRURO<a href="https://www.miruro.com">.COM</a> ||
+    MIRURO<a href="https://www.miruro.com">.COM</a> //
     MIRURO<a href="https://www.miruro.tv">.TV</a>
   <p align="center">
     <img src="https://discordapp.com/api/guilds/1199699127190167643/widget.png?style=shield" alt="Discord Shield"/>
@@ -22,32 +20,27 @@
   <a href="#"><img src="https://img.shields.io/badge/cloudflare-white.svg?style=for-the-badge&logo=cloudflare&logoColor=orange"/></a>
 </p>
 
-### ⚠️ Heads Up:
-####  `JS` to `TS` codebase transition alert; It's a work in progress, so expect some hiccups and weird stuff :)
-
-
 ## What is Miruro?
 
-<p><a href="https://www.miruro.com">Miruro</a> is a cutting-edge anime streaming platform powered by the <a href="https://github.com/consumet">Consumet API</a>. Crafted using <a href="https://react.dev/">React</a> and <a href="https://vitejs.dev/">Vite</a>, it boasts a stylish and contemporary interface. Our platform, Miruro.com, is completely ad-free, ensuring an immersive viewing journey without interruptions.</p>
+<p><a href="https://www.miruro.com">Miruro</a> is a anime streaming platform powered by the <a href="https://github.com/consumet">Consumet API</a>. Crafted using <a href="https://react.dev/">React</a> and <a href="https://vitejs.dev/">Vite</a>, it boasts a stylish and contemporary interface. Miruro.com offers an immersive anime streaming experience where you can enjoy a vast library of anime titles in HD. Watch your favorite shows with English subtitles or dubbing, and conveniently download any anime without the need for registration.</p>
 
 ## Features 🪴
 
 - General
-  - Free ad-supported streaming service
   - Dub Anime support
   - User-friendly interface
-  - Add Anime/Manga to your AniList
   - Mobile responsive
   - Fast page load
+  - White/Dark theme
 - Watch Page
   - Player
     - Autoplay next episode
     - Skip op/ed button
     - Theater mode
+- Coming Soon
+  - Profile page to see your watch list
+  - Profile page to see your continue watching
   - Comment section
-- Profile page to see your watch list
-- Profile page to see your continue watching
-- Check new commits to see new features and changes!
 
 <div style="text-align: left;">
   <h3>Home Page</h3>
@@ -71,7 +64,7 @@
 
 ### Before starting installation ⚠️
 
-> Before we proceed with the installation, we strongly recommend using `bun` for a seamless and efficient setup. While `Node.js` is an alternative, Bun provides a comprehensive solution tailored for our project.
+> Before we proceed with the installation, we strongly recommend using `bun` for a seamless and efficient setup.
 
 ### 1. Clone this repository using
 
@@ -87,42 +80,19 @@ cd Miruro
 
 ### Basic Pre-Requisites
 
-As you might expect, Miruro relies on Node.js. However, for optimal performance, Miruro leverages Bun to achieve the fastest response times possible.
-
-#### Download and install Bun
-
-```bash
-curl -fsSL https://bun.sh/install | bash
-```
-
-#### Download and install Node.js
+This platform is built on <a href="https://nodejs.org/">`Node.js`</a> and utilizes <a href="https://bun.sh/">`bun`</a> to ensure the quickest response times achievable. While `npm` can also be used, the commands for npm would mirror those of bun, simply substituting the specific commands accordingly.
 
-- [Download Node.js](https://nodejs.org/)
-
-#### Verify the installation
+### Verify installations
 
 ```bash
-bun -v
 node -v
-npm -v
-```
-
-### Install Dependencies
-
-The following are custom installation commands, you can allways do it manually.
-
-```bash
-npm iu
-or
-npm install && cd server && npm install
+bun -v
 ```
 
-or
+### Install Dependencies (npm also works)
 
 ```bash
-bun iu
-or
-bun install && cd server && npm install
+bun install && cd server && bun install
 ```
 
 ### Copy the `.env.example` contents to `.env` in the root folder
@@ -131,17 +101,19 @@ bun install && cd server && npm install
 cp .env.example .env
 ```
 
-### 3. Run on development &/or production
+#### ⚠ Please remember to change the value of VITE_BACKEND_URL to a consumet deployment that is functional.⚠
+
+### 3. Run on development &/or production (npm also works)
+
+#### Start development version
 
 ```bash
-npm run dev
-npm start
+bun run dev
 ```
 
-or
+#### Start production version
 
 ```bash
-bun run dev
 bun start
 ```
 
@@ -151,7 +123,7 @@ Please be aware that self-hosting this application is strictly limited to person
 
 ## License 📝
 
-This project is licensed under the Custom BY-NC [License](LICENSE). You are free to use, share, and modify the code for non-commercial purposes with proper attribution to the original author(s). Commercial use is not allowed. For details, see the [LICENSE](LICENSE) file. Feel free to contact the author(s) for questions or additional permissions.
+This project is licensed under the Custom BY-NC [License](LICENSE). You are free to use, share, and modify the code for non-commercial purposes with proper attribution to our platform miruro.com. Commercial use is not allowed. For details, see the [LICENSE](LICENSE) file. Feel free to contact the author(s) for questions or additional permissions.
 
 ## Bug Report 🐞
 
@@ -171,7 +143,7 @@ If you have any questions or feedback, please reach out to us at [miruro@proton.
 
 <a href="https://discord.com/invite/Uaaw6R8y">
 
-  ![Discord Banner 2](https://discordapp.com/api/guilds/1199699127190167643/widget.png?style=banner2)
+![Discord Banner 2](https://discordapp.com/api/guilds/1199699127190167643/widget.png?style=banner2)
 </a>
 
 ## Support & Contributions 🤲
@@ -185,7 +157,3 @@ Feel free to contribute to this project! Whether you're an experienced developer
 <div align="left">
     <img src="https://api.star-history.com/svg?repos=Miruro-no-kuon/Miruro&type=Date" alt="Star History Chart" style="max-width: 70%;" />
 </div>
-
-### Note for Beginners 💬
-
-> If you're new to JavaScript or programming in general, no worries! Take some time to familiarize yourself with the basics before diving into this project. I'm here to help answer any questions you might have along the way. Don't hesitate to reach out, and let's learn and build together! 😊

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 (

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`

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;

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`

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} />

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);
 

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
       `};
     `}
 `;