Merge pull request #48 from Zagrios/feature/notification-enable-oneclick/47

feature/add-notification-to-enable-oneclick-if-not/47

assets/jsons/translations/en.json

@@ -252,6 +252,14 @@
                         "error":{
                             "description":"An unknown error occurred."
                         }
+                    },
+                    "check-all-enabled":{
+                        "title": "OneClick Disabled",
+                        "description": "One or more OneClick installations are disabled. Go to settings to enable them.",
+                        "actions":{
+                            "settings": "Settings",
+                            "not-remind": "Do not remind me"
+                        }
                     }
                 }
             }

assets/jsons/translations/es.json

@@ -252,6 +252,14 @@
                         "error":{
                             "description":"Ocurrió un error desconocido."
                         }
+                    },
+                    "check-all-enabled":{
+                        "title": "OneClick deshabilitado",
+                        "description": "Una o más instalaciones de OneClick están deshabilitadas. Vaya a la configuración para habilitarlas.",
+                        "actions":{
+                            "settings": "Ajustes",
+                            "not-remind": "No volver a recordarme"
+                        }
                     }
                 }
             }

assets/jsons/translations/fr.json

@@ -252,6 +252,14 @@
                         "error":{
                             "description":"Une erreur inconnue s'est produite."
                         }
+                    },
+                    "check-all-enabled":{
+                        "title": "OneClick désactivée(s)",
+                        "description": "Une ou plusieurs installations OneClick sont désactivées. Rendez-vous dans les paramètres pour les activer.",
+                        "actions":{
+                            "settings": "Paramètres",
+                            "not-remind": "Ne plus me rappeler"
+                        }
                     }
                 }
             }

src/renderer/components/notification/notification-item.component.tsx

@@ -37,7 +37,7 @@ export function NotificationItem({resolver, notification}: {resolver?: (value: N
     }
 
   return (
-   <motion.li layout drag="x" dragConstraints={{left: 0, right: 0}} dragElastic={{left: 0, right: .3}} onDragEnd={handleDragEnd} initial={{x: "110%"}} animate={{x: "0%"}} exit={{x:"110%"}} className="relative w-[270px] rounded-md overflow-hidden -left-[285px] mb-4 cursor-grab active:cursor-grabbing shadow-md shadow-black bg-gradient-to-br from-light-main-color-2 to-light-main-color-2 dark:from-main-color-2 dark:to-main-color-2 text-gray-800 dark:text-white">
+   <motion.li layout drag="x" dragConstraints={{left: 0, right: 0}} dragElastic={{left: 0, right: .3}} onDragEnd={handleDragEnd} initial={{x: "110%"}} animate={{x: "0%"}} exit={{x:"110%"}} className="relative w-[290px] rounded-md overflow-hidden -left-[300px] mb-4 cursor-grab active:cursor-grabbing shadow-md shadow-black bg-gradient-to-br from-light-main-color-2 to-light-main-color-2 dark:from-main-color-2 dark:to-main-color-2 text-gray-800 dark:text-white">
       <div className="w-full flex flex-col">
          <div className="flex items-center justify-start pl-1">
             <BsmImage className="h-14 mr-1 pointer-events-none" image={renderImage}/>

src/renderer/components/settings/setting-container.component.tsx

@@ -1,12 +1,21 @@
 import { ReactNode } from "react";
 import { useTranslation } from "renderer/hooks/use-translation.hook";
 
-export function SettingContainer({className, title, minorTitle, description, children}: {className?: string, title?: string, minorTitle?: string, description?: string, children?: ReactNode}) {
+type Props = {
+    id?: string,
+    className?: string, 
+    title?: string, 
+    minorTitle?: string, 
+    description?: string, 
+    children?: ReactNode
+}
+
+export function SettingContainer({id, className, title, minorTitle, description, children}: Props) {
 
   const t = useTranslation();
 
   return (
-    <div className={className || "relative mb-5"}>
+    <div id={id} className={className || "relative mb-5"}>
         { title && <h1 className="font-bold text-2xl mb-1 tracking-wide">{t(title)}</h1> }
         { minorTitle && <h2 className="font-bold mb-1 tracking-wide text-gray-600 dark:text-gray-300">{t(minorTitle)}</h2> }
         { description && <p className="mb-3 text-sm text-gray-600 dark:text-gray-400">{t(description)}</p> }

src/renderer/pages/settings-page.component.tsx

@@ -229,7 +229,7 @@ export function SettingsPage() {
 
                 <SettingContainer title="pages.settings.additional-content.title" description="pages.settings.additional-content.description">
 
-                <SettingContainer minorTitle="pages.settings.additional-content.deep-links.sub-title">
+                <SettingContainer id="one-clicks" minorTitle="pages.settings.additional-content.deep-links.sub-title">
                     <ul className="w-full flex flex-col gap-1.5">
                         <li className="bg-light-main-color-1 dark:bg-main-color-1 rounded-md group-one flex justify-between items-center basis-0 py-2 px-3">
                             <div className="flex items-center gap-2">

src/renderer/windows/App.tsx

@@ -1,6 +1,6 @@
 import { NavBar } from "../components/nav-bar/nav-bar.component";
 import TitleBar from "../components/title-bar/title-bar.component";
-import { Routes, Route, useLocation } from "react-router-dom";
+import { Routes, Route, useLocation, useNavigate } from "react-router-dom";
 import { AvailableVersionsList } from "../pages/available-versions-list.components";
 import { VersionViewer } from "../pages/version-viewer.component";
 import { Modal } from "../components/modal/modal.component";
@@ -14,24 +14,83 @@ import { MapsPage } from "../pages/maps-page.component";
 import "tailwindcss/tailwind.css";
 import { BsmIframeView } from "../components/shared/bsm-map-preview.component";
 import 'tippy.js/dist/tippy.css';
+import { MapsManagerService } from "renderer/services/maps-manager.service";
+import { PlaylistsManagerService } from "renderer/services/playlists-manager.service";
+import { ModelsManagerService } from "renderer/services/models-manager.service";
+import { NotificationService } from "renderer/services/notification.service";
+import { timer } from "rxjs";
+import { ConfigurationService } from "renderer/services/configuration.service";
 
 export default function App() {
 
     const themeService = ThemeService.getInstance();
     const pageState = PageStateService.getInstance();
+    const maps = MapsManagerService.getInstance();
+    const playlists = PlaylistsManagerService.getInstance();
+    const models = ModelsManagerService.getInstance();
+    const notification = NotificationService.getInstance();
+    const config = ConfigurationService.getInstance();
 
     const location = useLocation();
+    const navigate = useNavigate();
 
     useEffect(() => {
         themeService.theme$.subscribe(() => {
             if(themeService.isDark || (themeService.isOS && window.matchMedia('(prefers-color-scheme: dark)').matches)){ return document.documentElement.classList.add('dark'); }
             document.documentElement.classList.remove('dark');
         });
+
+        checkOneClicks();
+
     }, []);
 
+    const checkOneClicks = async () => {
+
+        if(config.get("not-remind-oneclick") === true){ return; }
+
+        await timer(2_000).toPromise();
+
+        const oneClicks = await Promise.all([
+            maps.isDeepLinksEnabled(),
+            playlists.isDeepLinksEnabled(),
+            models.isDeepLinksEnabled()
+        ]);
+
+        if(!oneClicks.some(enabled => enabled === false)){ return; }
+
+        const choice = await notification.notifyWarning({
+            title: "notifications.settings.additional-content.deep-link.check-all-enabled.title", 
+            desc: "notifications.settings.additional-content.deep-link.check-all-enabled.description",
+            duration: 10_000,
+            actions: [
+                {id: "0", title: "notifications.settings.additional-content.deep-link.check-all-enabled.actions.settings"},
+                {id: "1", title: "notifications.settings.additional-content.deep-link.check-all-enabled.actions.not-remind", cancel: true}
+            ]
+        });
+
+        if(choice === "0"){
+            return navigate("/settings#one-clicks");
+        }
+
+        if(choice === "1"){
+            config.set("not-remind-oneclick", true);
+        }
+
+    }
 
     useEffect(() => {
+
         pageState.setLocation(location);
+
+        if(!location.hash){ return; }
+
+        const hash = location.hash.replace("#", "");
+        const el = document.getElementById(hash);
+
+        if(!el){ return; }
+
+        el.scrollIntoView({block: "start", behavior: "smooth"});
+
     }, [location])