Refactor: 🛠 Enhanced Error Handling, Optimized Caching, and UI Updates.

- 🚫 Eliminated the temporary banner previously used for cache bug diagnostics. - ✨ Enhanced error message styling in Home.jsx to elevate user experience. - 🚀 Overhauled the caching mechanism in useApi.js with a more efficient approach. - 🐞 Resolved multiple issues with styled-components and the $ prefix for more consistent styling. - 👁️‍🗨️ Transitioned from <i> tag icons to react/icons for increased accessibility and easier maintenance. - ⚡ Integrated caching functionality into Cloudflare workers to boost performance. - 📱 Introduced manifest.json to augment web application features and capabilities.
t11dknyt2 · Feb 9, 2024 · fa3b5ee · fa3b5ee
1 parent 8435f34
commit fa3b5ee
Show file tree

Hide file tree

Showing 13 changed files with 275 additions and 267 deletions.
diff --git a/api/proxy.js b/api/proxy.js
@@ -1,21 +1,31 @@
+/**
+ * Welcome to Cloudflare Workers! This is your first worker.
+ *
+ * - Run "bun run dev" in your terminal to start a development server
+ * - Open a browser tab at http://localhost:8787/ to see your worker in action
+ * - Run "bun run deploy" to publish your worker
+ *
+ * Learn more at https://developers.cloudflare.com/workers/
+ */
+
 addEventListener("fetch", (event) => {
-  event.respondWith(handleRequest(event.request));
+  event.respondWith(handleRequest(event));
 });
 
-async function handleRequest(request) {
+async function handleRequest(event) {
+  const request = event.request;
   const url = new URL(request.url);
   const pathname = url.pathname;
 
   try {
     if (pathname.startsWith("/api/vtt")) {
-      return proxyHandler(request, "text/vtt");
+      return handleProxy(event, "text/vtt");
     } else if (pathname.startsWith("/api/m3u8")) {
-      return proxyHandler(request, "application/x-mpegURL");
+      return handleProxy(event, "application/x-mpegURL");
     } else if (pathname.startsWith("/api/text")) {
-      return proxyHandler(request, "text/plain");
+      return handleProxy(event, "text/plain");
     } else if (pathname.startsWith("/api/json")) {
-      // Adding handling for JSON content type
-      return proxyHandler(request, "application/json");
+      return handleProxy(event, "application/json");
     } else {
       return new Response("Not Found", { status: 404 });
     }
@@ -24,6 +34,27 @@ async function handleRequest(request) {
   }
 }
 
+async function handleProxy(event, contentType) {
+  const request = event.request;
+  const cacheUrl = new URL(request.url);
+  const cacheKey = new Request(cacheUrl.toString(), request);
+  const cache = caches.default;
+
+  // Check whether the response is already in the cache
+  let response = await cache.match(cacheKey);
+  if (!response) {
+    // If not in cache, fetch from the network
+    response = await proxyHandler(request, contentType);
+
+    // Update the cache with the fetched response
+    response = new Response(response.body, response);
+    response.headers.append("Cache-Control", "s-maxage=3600"); // Adjust cache duration as needed
+    event.waitUntil(cache.put(cacheKey, response.clone()));
+  }
+
+  return response;
+}
+
 async function proxyHandler(request, contentType) {
   const urlParam = new URL(request.url).searchParams.get("url");
   if (!urlParam) {

diff --git a/index.html b/index.html
@@ -7,15 +7,12 @@
       name="description"
       content="Miruro no Kuon - Anime Streaming Site with minimal UI 🍜. Enjoy HD fast streaming of your favorite anime, manga reading, and explore anime-related forums on www.miruro.tv. Discover a world of anime entertainment at Miruro no Kuon!"
     />
+    <link rel="manifest" href="manifest.json" />
     <link
       rel="icon"
       type="image/svg+xml"
       href="src/assets/favicon notr/favicon-circular-miruro-512x512.png"
     />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
-    />
     <link
       rel="stylesheet"
       href="https://fonts.googleapis.com/icon?family=Material+Icons"
@@ -24,7 +21,7 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
+    <script type="module" src="/src/main.jsx" defer></script>
     <script>
       const themePreference = localStorage.getItem("themePreference");
 

diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,45 @@
+{
+  "theme_color": "#aeaee4",
+  "background_color": "#080808",
+  "display": "standalone",
+  "orientation": "portrait",
+  "scope": "/",
+  "start_url": "/",
+  "name": "Miruro",
+  "short_name": "Miruro",
+  "description": "🍜 Miruro is an Anime Streaming Site with minimal UI. Made with ⚡ Vite & 🍞 Bun!",
+  "lang": "en",
+  "categories": ["entertainment", "books", "comics"],
+  "icons": [
+    {
+      "src": "/src/assets/favicon notr/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/src/assets/favicon notr/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/src/assets/favicon notr/favicon-circular-miruro-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "screenshots": [
+    {
+      "src": "screenshots/homepage.png",
+      "sizes": "1024x768",
+      "type": "image/png"
+    },
+    {
+      "src": "screenshots/read-view.png",
+      "sizes": "1024x768",
+      "type": "image/png"
+    }
+  ]
+}
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "iu": "bun i && cd server && bun i"
   },
   "dependencies": {
+    "@apollo/client": "^3.9.4",
     "@cloudflare/wrangler": "^1.21.0",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
@@ -26,13 +27,15 @@
     "axios": "^1.6.0",
     "chalk": "^5.3.0",
     "fortawesome": "^0.0.1-security",
+    "graphql": "^16.8.1",
     "hls.js": "^1.4.14",
     "image-webpack-loader": "^8.1.0",
     "imagemin-mozjpeg": "^10.0.0",
     "imagemin-pngquant": "^9.0.2",
     "ldrs": "^1.0.1",
     "lodash": "^4.17.21",
     "lodash.debounce": "^4.0.8",
+    "lodash.memoize": "^4.1.2",
     "lru-cache": "latest",
     "node-fetch": "^3.3.2",
     "plyr": "^3.7.8",

diff --git a/src/components/Cards/CardItem.jsx b/src/components/Cards/CardItem.jsx
@@ -58,7 +58,7 @@ const CardItemContent = React.memo(
 
     const {
       coverImage,
-      bannerImage,
+      $bannerImage,
       releaseDate,
       popularity,
       format,
@@ -126,7 +126,7 @@ const CardItemContent = React.memo(
             totalEpisodes={totalEpisodes}
             currentEpisode={currentEpisode}
             releaseDate={releaseDate || anime.year}
-            cover={bannerImage || anime.cover}
+            cover={$bannerImage || anime.cover}
             maxDescriptionLength={100}
           />
         )}

diff --git a/src/components/FilterButton.jsx b/src/components/FilterButton.jsx
diff --git a/src/components/Home/Carousel.jsx b/src/components/Home/Carousel.jsx
@@ -67,7 +67,7 @@ const SlideImage = styled.img`
   border-radius: 0.2rem;
   position: absolute;
   content: ${(props) =>
-    props.cover === props.image ? BannerNotFound : props.cover};
+    props.$cover === props.$image ? BannerNotFound : props.$cover};
 `;
 
 const ContentWrapper = styled.div`
@@ -109,7 +109,7 @@ const SlideDescription = styled.p`
   background: var(--global-primary-bg)
   font-size: clamp(0.9rem, 1.5vw, 1rem);
   line-height: 1;
-  margin-bottom: 1rem;
+  margin-bottom: 0;
   max-width: 50%;
   max-height: 4rem;
   overflow: hidden;
@@ -169,7 +169,8 @@ const PlayButton = styled.button`
   }
 
   @media (max-width: 500px) {
-    padding: 0.9rem 1.4rem; /* Adjusted for small devices */
+    border-radius: 50%;
+    padding: 1.25rem; /* Adjusted for small devices */
     font-size: 1rem; /* Adjusted font size for small devices */
     span {
       display: none;
@@ -241,8 +242,8 @@ const Carousel = ({ data = [] }) => {
             <SlideImageWrapper>
               <SlideImage
                 src={cover === image ? BannerNotFound : cover}
-                cover={cover}
-                image={image}
+                $cover={cover}
+                $image={image}
                 alt={title.native}
                 loading="lazy"
               />

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -2,7 +2,13 @@ import React, { useRef, useEffect, useState, useCallback } from "react";
 import styled, { keyframes } from "styled-components";
 import { useNavigate, useSearchParams, Link } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
+import {
+  faSun,
+  faMoon,
+  faSearch,
+  faTimes,
+  faSlash,
+} from "@fortawesome/free-solid-svg-icons";
 
 const colors = {
   globalPrimaryBgTr: "var(--global-primary-bg-tr)",
@@ -275,7 +281,7 @@ const Navbar = () => {
         <LogoLink to="/home">見るろ の 久遠</LogoLink>
         <InputContainer>
           <Icon $isFocused={search.isSearchFocused}>
-            <i className="fas fa-search"></i>
+            <FontAwesomeIcon icon={faSearch} />
           </Icon>
           <SearchInput
             type="text"
@@ -286,10 +292,10 @@ const Navbar = () => {
             ref={inputRef}
           />
           <ClearButton $query={search.searchQuery} onClick={handleClearSearch}>
-            <i className="fas fa-times"></i>
+            <FontAwesomeIcon icon={faTimes} />
           </ClearButton>
           <SlashToggleBtn $isFocused={search.isSearchFocused}>
-            <i className="fa-solid fa-slash fa-rotate-90"></i>
+            <FontAwesomeIcon icon={faSlash} rotation={90} />
           </SlashToggleBtn>
         </InputContainer>
         <ThemeToggleBtn onClick={toggleTheme}>

diff --git a/src/components/Watch/Video/VideoPlayer.jsx b/src/components/Watch/Video/VideoPlayer.jsx
@@ -132,7 +132,7 @@ const BannerOverlay = styled.div`
   left: 0;
   width: 100%;
   height: 100%;
-  background-image: url(${({ bannerImage }) => bannerImage});
+  background-image: url(${({ $bannerImage }) => $bannerImage});
   background-size: cover; // Adjust this as needed
   background-position: center;
   z-index: 1; // Make sure this is below the play button but above the video
@@ -465,7 +465,7 @@ const VideoPlayer = ({
                 </LargePlayIcon>
               )}
               {!isPlaying && !hasPlayed && !isVideoChanging && (
-                <BannerOverlay bannerImage={bannerImage} />
+                <BannerOverlay $bannerImage={bannerImage} />
               )}
 
               <StyledVideo ref={videoRef} controls={isMobile} />