feat: sidebar

xpadev-net · Oct 7, 2023 · 8cb3358 · 8cb3358
1 parent 2f0a89c
commit 8cb3358
Show file tree

Hide file tree

Showing 11 changed files with 141 additions and 24 deletions.
diff --git a/electron/lib/cookies/chromium.ts b/electron/lib/cookies/chromium.ts
@@ -149,7 +149,9 @@ const getAvailableChromiumProfiles = async (
           name: value.name,
           path: profilePath,
         });
-      } catch (_) {}
+      } catch (_) {
+        console.log(_);
+      }
     }
     return profiles;
   } catch (_) {

diff --git a/src/controller/controller.module.scss b/src/controller/controller.module.scss
@@ -17,10 +17,8 @@
     }
   }
   .queue {
-    width: 10vw;
-    min-width: 350px;
-    height: 100%;
     border-left: solid 1px white;
+    width: 50px;
     overflow: hidden;
   }
 }

diff --git a/src/controller/controller.tsx b/src/controller/controller.tsx
@@ -16,6 +16,8 @@ import Button from "@mui/material/Button";
 import { useAtom, useAtomValue } from "jotai";
 import { useState } from "react";
 import Styles from "./controller.module.scss";
+import { Sidebar } from "@/controller/sidebar/sidebar";
+import { DownloadingOutlined } from "@mui/icons-material";
 
 const Controller = () => {
   const [tab, setTab] = useState<number>(0);
@@ -49,7 +51,15 @@ const Controller = () => {
           </div>
         </div>
         <div className={Styles.queue}>
-          <QueueDisplay />
+          <Sidebar
+            pages={[
+              {
+                id: "queue",
+                icon: DownloadingOutlined,
+                component: QueueDisplay,
+              },
+            ]}
+          />
         </div>
       </div>
       <Dialog open={!!message} onClose={() => setMessage(undefined)}>

diff --git a/src/controller/queue/CommentItem.tsx b/src/controller/queue/CommentItem.tsx
@@ -5,14 +5,15 @@ import Styles from "./ConvertItem.module.scss";
 
 type props = {
   queue: CommentQueue;
+  className: string;
 };
-const CommentItem = ({ queue }: props) => {
+const CommentItem = ({ queue, className }: props) => {
   return useMemo(() => {
     const outputName = queue.path.split(/\/|\\/g).reverse()[0];
     const url = queue.target;
     if (queue.status !== "processing") {
       return (
-        <div className={Styles.queue}>
+        <div className={`${Styles.queue} ${className}`}>
           <p>id: {url}</p>
           <p>output: {outputName}</p>
           <p>status: {queue.status}</p>
@@ -21,7 +22,7 @@ const CommentItem = ({ queue }: props) => {
     }
 
     return (
-      <div className={Styles.queue}>
+      <div className={`${Styles.queue} ${className}`}>
         <p>id: {url}</p>
         <p>path: {outputName}</p>
         <p>status: processing</p>

diff --git a/src/controller/queue/ConvertItem.module.scss b/src/controller/queue/ConvertItem.module.scss
@@ -1,5 +1,4 @@
 .queue {
-  border-bottom: solid 1px white;
   padding: 10px;
   .progressWrapper {
     display: flex;

diff --git a/src/controller/queue/ConvertItem.tsx b/src/controller/queue/ConvertItem.tsx
@@ -5,14 +5,15 @@ import Styles from "./ConvertItem.module.scss";
 
 type props = {
   queue: ConvertQueue;
+  className: string;
 };
-const ConvertItem = ({ queue }: props) => {
+const ConvertItem = ({ queue, className }: props) => {
   return useMemo(() => {
     const movieName = queue.movie.path.split(/\/|\\/g).reverse()[0];
     const outputName = queue.output.path.split(/\/|\\/g).reverse()[0];
     if (queue.status !== "processing") {
       return (
-        <div className={Styles.queue}>
+        <div className={`${Styles.queue} ${className}`}>
           <p>input: {movieName}</p>
           <p>output: {outputName}</p>
           <p>status: {queue.status}</p>
@@ -22,7 +23,7 @@ const ConvertItem = ({ queue }: props) => {
     const pg = queue.progress;
 
     return (
-      <div className={Styles.queue}>
+      <div className={`${Styles.queue} ${className}`}>
         <p>input: {movieName}</p>
         <p>output: {outputName}</p>
         <p>status: processing</p>

diff --git a/src/controller/queue/MovieItem.tsx b/src/controller/queue/MovieItem.tsx
@@ -5,14 +5,15 @@ import Styles from "./ConvertItem.module.scss";
 
 type props = {
   queue: MovieQueue;
+  className: string;
 };
-const MovieItem = ({ queue }: props) => {
+const MovieItem = ({ queue, className }: props) => {
   return useMemo(() => {
     const outputName = queue.path.split(/\/|\\/g).reverse()[0];
     const url = queue.url.split(/\/|\\/g).reverse()[0];
     if (queue.status !== "processing") {
       return (
-        <div className={Styles.queue}>
+        <div className={`${Styles.queue} ${className}`}>
           <p>id: {url}</p>
           <p>video: {queue.format.video.slice(8)}</p>
           <p>audio: {queue.format.audio.slice(8)}</p>
@@ -23,7 +24,7 @@ const MovieItem = ({ queue }: props) => {
     }
 
     return (
-      <div className={Styles.queue}>
+      <div className={`${Styles.queue} ${className}`}>
         <p>id: {url}</p>
         <p>video: {queue.format.video.slice(8)}</p>
         <p>audio: {queue.format.audio.slice(8)}</p>

diff --git a/src/controller/queue/queue.module.scss b/src/controller/queue/queue.module.scss
@@ -2,4 +2,9 @@
   height: 100vh;
   overflow-y: scroll;
   padding: 10px;
+  .item {
+    &:not(:last-child) {
+      border-bottom: solid 1px white;
+    }
+  }
 }
diff --git a/src/controller/queue/queue.tsx b/src/controller/queue/queue.tsx
@@ -19,15 +19,21 @@ const QueueDisplay = () => {
   }, []);
   return (
     <div className={Styles.wrapper}>
-      {queue.map((item) =>
-        item.type === "convert" ? (
-          <ConvertItem key={item.id} queue={item} />
-        ) : item.type === "movie" ? (
-          <MovieItem key={item.id} queue={item} />
-        ) : (
-          <CommentItem key={item.id} queue={item} />
-        ),
-      )}
+      {queue.map((item) => {
+        if (item.type === "convert") {
+          return (
+            <ConvertItem className={Styles.item} key={item.id} queue={item} />
+          );
+        }
+        if (item.type === "movie") {
+          return (
+            <MovieItem className={Styles.item} key={item.id} queue={item} />
+          );
+        }
+        return (
+          <CommentItem className={Styles.item} key={item.id} queue={item} />
+        );
+      })}
     </div>
   );
 };

diff --git a/src/controller/sidebar/sidebar.module.scss b/src/controller/sidebar/sidebar.module.scss
@@ -0,0 +1,40 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 50px;
+  .icon {
+    width: 50px;
+    height: 50px;
+    display: grid;
+    place-items: center;
+    &.active {
+      background: #253b40;
+    }
+  }
+  .overlay {
+    position: fixed;
+    right: 50px;
+    top: 0;
+    min-width: 300px;
+    max-width: calc(100vw - 50px);
+    width: 30vw;
+    z-index: 1;
+    display: none;
+    &.visible {
+      display: block;
+    }
+    &:before {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 100vw;
+      height: 100vh;
+      background: rgba(0, 0, 0, 0.5);
+      z-index: -1;
+    }
+    .container {
+      background: #0f181a;
+    }
+  }
+}
diff --git a/src/controller/sidebar/sidebar.tsx b/src/controller/sidebar/sidebar.tsx
@@ -0,0 +1,54 @@
+import { FC, useState } from "react";
+import Styles from "./sidebar.module.scss";
+
+type props = {
+  pages: {
+    id: string;
+    icon: FC;
+    component: FC;
+  }[];
+};
+
+const Sidebar = ({ pages }: props) => {
+  const [openingPage, setOpeningPage] = useState<string | undefined>(undefined);
+  const togglePage = (i: string) => {
+    if (i === openingPage) {
+      setOpeningPage(undefined);
+    } else {
+      setOpeningPage(i);
+    }
+  };
+  return (
+    <div className={Styles.wrapper}>
+      {pages.map((page) => {
+        return (
+          <div key={page.id}>
+            <div
+              onClick={() => togglePage(page.id)}
+              className={`${Styles.icon} ${
+                openingPage === page.id && Styles.active
+              }`}
+            >
+              <page.icon />
+            </div>
+            <div
+              className={`${Styles.overlay} ${
+                openingPage === "queue" && Styles.visible
+              }`}
+              onClick={() => setOpeningPage(undefined)}
+            >
+              <div
+                className={Styles.container}
+                onClick={(e) => e.stopPropagation()}
+              >
+                <page.component />
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export { Sidebar };