Merge pull request #154 from aridevelopment-de/dev

v4.1.0
aridevelopment-de · Mar 4, 2023 · 9ea818e · 9ea818e
2 parents 78dac48 + 50f6d07
commit 9ea818e
Show file tree

Hide file tree

Showing 19 changed files with 359 additions and 127 deletions.
diff --git a/package.json b/package.json
@@ -1,33 +1,29 @@
 {
   "name": "client",
   "main": "src/index.tsx",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "private": true,
   "dependencies": {
-    "@emotion/react": "^11.10.0",
-    "@emotion/styled": "^11.3.0",
-    "@fontsource/inter": "^4.5.12",
-    "@mantine/core": "^5.2.3",
-    "@mantine/form": "^5.2.3",
-    "@mantine/hooks": "^5.2.3",
-    "@mantine/modals": "^5.2.3",
-    "@mantine/notifications": "^5.2.4",
-    "@mui/icons-material": "^5.0.5",
-    "@mui/material": "^5.0.6",
-    "@types/node": "^18.0.0",
-    "@types/react": "^18.0.14",
-    "@types/react-dom": "^18.0.5",
-    "axios": "^1.1.3",
-    "dexie": "^3.2.2",
+    "@emotion/styled": "^11.10.6",
+    "@fontsource/inter": "^4.5.15",
+    "@mantine/core": "^6.0.0",
+    "@mantine/dates": "^6.0.0",
+    "@mantine/form": "^6.0.0",
+    "@mantine/hooks": "^6.0.0",
+    "@mantine/modals": "^6.0.0",
+    "@mantine/notifications": "^6.0.0",
+    "@mui/icons-material": "^5.11.11",
+    "@mui/material": "^5.11.11",
+    "axios": "^1.3.4",
+    "dayjs": "^1.11.7",
+    "dexie": "^3.2.3",
     "dexie-react-hooks": "^1.1.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-json-view": "^1.21.3",
     "react-scripts": "^5.0.1",
-    "typescript": "^4.7.4",
-    "web-ext": "^6.8.0",
-    "web-vitals": "^1.1.2",
-    "zustand": "^4.1.1"
+    "web-vitals": "^3.1.1",
+    "zustand": "^4.3.5"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -54,5 +50,13 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/dexie": "^1.3.1",
+    "@types/node": "^18.14.6",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^4.9.5",
+    "web-ext": "^7.5.0"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -14,6 +14,11 @@
 
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/icons/icon.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <style>
+      body {
+        background-color: black !important;
+      }
+    </style>
     <title>New Tab</title>
   </head>
   <body>

diff --git a/public/manifest.json b/public/manifest.json
@@ -4,7 +4,7 @@
   "description": "A custom startpage for your browser!",
   "name": "MyAnimeTab",
   "short_name": "MyAnimeTab",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "icons": {
       "192": "icons/favicon.ico",
       "512": "icons/favicon.ico"

diff --git a/src/App.module.css b/src/App.module.css
@@ -6,4 +6,14 @@
     opacity: 1;
     width: 100vw;
     height: 100vh;
+    animation: fadeIn 200ms linear;
+}
+
+@keyframes fadeIn {
+    from {
+        filter: blur(5px) brightness(0);
+    }
+    to {
+        filter: blur(0) brightness(1);
+    }
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -6,16 +6,18 @@ import EventHandler, { EventType } from "./utils/eventhandler";
 import { Component, registry } from "./utils/registry/customcomponentregistry";
 import { MantineProvider } from "@mantine/core";
 import { ModalsProvider } from "@mantine/modals";
-import { NotificationsProvider } from "@mantine/notifications";
 import "@fontsource/inter";
 import { useState, useEffect } from "react";
 import { useMoverState } from "./hooks/widgetmover";
 import MoverControlbar from "./components/widgetmover/movercontrolbar/MoverControlbar";
 import { SnapLineRenderer } from "./components/widgetmover/snaplinerenderer/SnapLineRenderer";
 import WelcomeScreen from "./components/justInstalled/WelcomeScreen";
+import { Notifications } from "@mantine/notifications";
 
 const App = (_) => {
-	const [installedComponents, setInstalledComponents] = useState<Array<Component>>([]);
+	const [installedComponents, setInstalledComponents] = useState<
+		Array<Component>
+	>([]);
 	const [justInstalled, setJustInstalled] = useState<boolean>(false);
 	const moverEnabled = useMoverState((state) => state.enabled);
 
@@ -39,7 +41,7 @@ const App = (_) => {
 					}
 				}
 
-				setInstalledComponents(enabledComponents)
+				setInstalledComponents(enabledComponents);
 			})();
 		};
 
@@ -57,21 +59,25 @@ const App = (_) => {
 			}, 50);
 		});
 
-		EventHandler.on(EventType.INITIAL_LAYOUT_SELECT, "app", (url: string | null) => {
-			setJustInstalled(false);
+		EventHandler.on(
+			EventType.INITIAL_LAYOUT_SELECT,
+			"app",
+			(url: string | null) => {
+				setJustInstalled(false);
 
-			if (url !== null) {
-				actUponInitialLayout(url);
-				
-				metaDb.getMeta("justInstalled").then((jI) => {
-					if (jI === true) {
-						metaDb.removeJustInstalled();
-					}
-				});
+				if (url !== null) {
+					actUponInitialLayout(url);
+
+					metaDb.getMeta("justInstalled").then((jI) => {
+						if (jI === true) {
+							metaDb.removeJustInstalled();
+						}
+					});
 
-				EventHandler.emit(EventType.REFRESH_SNAPLINES);
+					EventHandler.emit(EventType.REFRESH_SNAPLINES);
+				}
 			}
-		});
+		);
 
 		return () => {
 			EventHandler.off("rerenderAll", "app");
@@ -90,40 +96,39 @@ const App = (_) => {
 					colorScheme: "light",
 				}}
 			>
-				<NotificationsProvider>
-					<ModalsProvider>
-						{justInstalled && <WelcomeScreen />}
-						{moverEnabled ? (
-							<>
+				<Notifications />
+				<ModalsProvider>
+					{justInstalled && <WelcomeScreen />}
+					{moverEnabled ? (
+						<>
 							<MoverControlbar />
 							<SnapLineRenderer />
-							</>
-						) : (
-							<SettingsComponent />
-						)}
-						<Background moverEnabled={moverEnabled}>
-							{(blur) => {
-								if (justInstalled) return null;
-
-								return installedComponents.map(
-									(component: Component) => {
-										if (component.element === null) {
-											return null;
-										}
-
-										return (
-											<component.element
-												id={component.fullId}
-												key={component.fullId}
-												blur={blur}
-											/>
-										);
+						</>
+					) : (
+						<SettingsComponent />
+					)}
+					<Background moverEnabled={moverEnabled}>
+						{(blur) => {
+							if (justInstalled) return null;
+
+							return installedComponents.map(
+								(component: Component) => {
+									if (component.element === null) {
+										return null;
 									}
-								);
-							}}
-						</Background>
-					</ModalsProvider>
-				</NotificationsProvider>
+
+									return (
+										<component.element
+											id={component.fullId}
+											key={component.fullId}
+											blur={blur}
+										/>
+									);
+								}
+							);
+						}}
+					</Background>
+				</ModalsProvider>
 			</MantineProvider>
 		</div>
 	);

diff --git a/src/BackgroundComponent.tsx b/src/BackgroundComponent.tsx
@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import styles from "./App.module.css";
 import AutoHideScheduler from "./components/AutoHideScheduler";
 import BackgroundScheduler from "./components/BackgroundScheduler";
+import QueueScheduler from "./components/QueueScheduler";
 import { metaDb } from "./utils/db";
 
 function Background(props: {children: (blur: boolean) => JSX.Element, moverEnabled: boolean}) {
@@ -37,6 +38,7 @@ function Background(props: {children: (blur: boolean) => JSX.Element, moverEnabl
 		>
 			<AutoHideScheduler setBlur={setBlur} blur={blur} />
 			<BackgroundScheduler />
+			<QueueScheduler />
 			{props.children(blur)}
 		</div>
 	);

diff --git a/src/DatabaseChecker.tsx b/src/DatabaseChecker.tsx
@@ -5,9 +5,9 @@ const DatabaseChecker = (props: { children: JSX.Element }) => {
 	const [shouldRender, setShouldRender] = useState<boolean>(false);
 
 	useEffect(() => {
+		addMissing();
+
 		metaDb.initializeFirstTimers().then((newUser: boolean) => {
-			addMissing();
-
 			if (newUser) {
 				// Reload the page for new users as this ensures correct creation of databases
 				setTimeout(() => window.location.reload(), 500);

diff --git a/src/components/QueueScheduler.tsx b/src/components/QueueScheduler.tsx
@@ -0,0 +1,36 @@
+import { useLiveQuery } from "dexie-react-hooks";
+import { useCallback, useEffect } from "react";
+import { metaDb } from "../utils/db";
+
+const QueueScheduler = () => {
+  const queues = useLiveQuery(() => metaDb.queues.filter(q => q.timed === true).toArray(), []);
+
+  const queueInterval = useCallback(async () => {
+    if (queues) {
+      const now = new Date();
+      const hour = now.getHours();
+      const minute = now.getMinutes();
+
+      const currentQueue = await metaDb.getCurrentTimedQueue(hour, minute);
+
+      if (!currentQueue) {
+        metaDb.setMeta("selected_queue", null);
+      } else {
+        metaDb.setMeta("selected_queue", currentQueue.id);
+      }
+    }
+  }, [queues]);
+
+  useEffect(() => {
+    let interval = setInterval(queueInterval, 1000 * 60);
+    queueInterval();
+
+    return () => {
+      if (interval) clearInterval(interval);
+    }
+  }, [queueInterval])
+
+  return <></>
+}
+
+export default QueueScheduler;