✨ added folder compressing

loloToster · Dec 21, 2024 · 020d3c6 · 020d3c6
1 parent fe772e5
commit 020d3c6
Show file tree

Hide file tree

Showing 8 changed files with 471 additions and 7 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -6,12 +6,15 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^14.4.3",
+    "@types/file-saver": "^2.0.7",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.11.56",
     "@types/react": "^18.0.18",
     "@types/react-dom": "^18.0.6",
     "@wavesurfer/react": "^1.0.7",
+    "file-saver": "^2.0.5",
     "highlight.js": "^11.10.0",
+    "jszip": "^3.10.1",
     "msw": "^0.47.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -1,18 +1,25 @@
 import { Outlet, ScrollRestoration } from "react-router-dom";
 
 import { CacheContextProvider } from "./contexts/cacheContext";
+import { ZipContext, ZipContextProvider } from "./contexts/zipContext";
 import { SearchContextProvider } from "./contexts/searchContext";
 
 import Header from "./components/Header/Header";
+import Compressing from "./components/Compressing/Compressing";
 
 function App() {
   return (
     <div className="app">
       <CacheContextProvider>
-        <SearchContextProvider>
-          <Header />
-          <Outlet />
-        </SearchContextProvider>
+        <ZipContextProvider>
+          <SearchContextProvider>
+            <Header />
+            <Outlet />
+          </SearchContextProvider>
+          <ZipContext.Consumer>
+            {({ zipsInProgress }) => Boolean(zipsInProgress) && <Compressing />}
+          </ZipContext.Consumer>
+        </ZipContextProvider>
       </CacheContextProvider>
       <ScrollRestoration />
     </div>

diff --git a/client/src/components/Compressing/Compressing.scss b/client/src/components/Compressing/Compressing.scss
@@ -0,0 +1,90 @@
+@use "src/sass/abstract/colors" as c;
+
+.compressing {
+  position: fixed;
+  bottom: 32px;
+  right: 32px;
+
+  @keyframes border-lighten {
+    100% {
+      border-color: lighten(c.$main, 10%);
+    }
+  }
+
+  @keyframes bg-lighten {
+    100% {
+      background-color: lighten(c.$main, 10%);
+    }
+  }
+
+  &__portrait {
+    display: none;
+
+    position: relative;
+    padding: 18px;
+    background-color: c.$dark-grey;
+    border-radius: 100vh;
+    border: c.$main 2px solid;
+    animation: border-lighten 600ms infinite alternate;
+
+    .material-symbols-rounded {
+      font-size: 38px;
+    }
+
+    &__num {
+      position: absolute;
+      background-color: c.$main;
+      bottom: 0;
+      right: 0;
+      min-width: 1.3rem;
+      line-height: 1;
+      padding: 2px;
+      border-radius: 100vh;
+      text-align: center;
+      animation: bg-lighten 600ms infinite alternate;
+    }
+  }
+
+  &__horizontal {
+    padding: 10px 16px;
+    background-color: c.$dark-grey;
+    border-radius: 100vh;
+    border: c.$main 2px solid;
+    animation: border-lighten 600ms infinite alternate;
+
+    @keyframes jumping-dots {
+      0% {
+        transform: translateY(0);
+      }
+
+      50% {
+        transform: translateY(-5%);
+      }
+
+      100% {
+        transform: translateY(0);
+      }
+    }
+
+    &__dot {
+      display: inline-block;
+      animation: jumping-dots 900ms infinite;
+
+      @for $i from 0 through 2 {
+        &:nth-child(#{$i + 1}) {
+          animation-delay: #{$i * 200ms};
+        }
+      }
+    }
+  }
+
+  @media (orientation: portrait) {
+    &__horizontal {
+      display: none;
+    }
+
+    &__portrait {
+      display: block;
+    }
+  }
+}