handle no internet for mods and maps

assets/jsons/translations/en.json

@@ -51,6 +51,7 @@
             },
             "mods": {
                 "loading-mods": "Loading mods...",
+                "no-internet": "No internet",
                 "buttons": {
                     "more-infos": "More info",
                     "install-or-update": "Install or update"
@@ -164,10 +165,12 @@
         "shared": {
             "errors": {
                 "titles": {
-                    "operation-running": "Operation running"
+                    "operation-running": "Operation running",
+                    "no-internet": "No internet"
                 },
                 "msg": {
-                    "operation-running": "Wait for the end of the current operation then start again."
+                    "operation-running": "Wait for the end of the current operation then start again.",
+                    "no-internet": "Check your connection and try again."
                 }
             }
         },
@@ -506,7 +509,8 @@
         "download-maps": {
             "search-btn": "Search",
             "loading-maps": "Loading maps...",
-            "no-maps-found": "No maps found"
+            "no-maps-found": "No maps found",
+            "no-internet": "No internet"
         },
         "mods-disclaimer":{
             "title": "disclaimer",

assets/jsons/translations/es.json

@@ -51,6 +51,7 @@
             },
             "mods": {
                 "loading-mods": "Cargando mods...",
+                "no-internet": "Sin internet",
                 "buttons": {
                     "more-infos": "Más información",
                     "install-or-update": "Instalar o actualizar"
@@ -164,10 +165,12 @@
         "shared": {
             "errors": {
                 "titles": {
-                    "operation-running": "Operación en curso"
+                    "operation-running": "Operación en curso",
+                    "no-internet": "Sin internet"
                 },
                 "msg": {
-                    "operation-running": "Espere a que termine la operación actual y vuelva a empezar."
+                    "operation-running": "Espere a que termine la operación actual y vuelva a empezar.",
+                    "no-internet": "Comprueba tu conexión a Internet e inténtalo de nuevo."
                 }
             }
         },
@@ -506,7 +509,8 @@
         "download-maps": {
             "search-btn": "buscar",
             "loading-maps": "Cargando mapas...",
-            "no-maps-found": "No se encontraron mapas"
+            "no-maps-found": "No se encontraron mapas",
+            "no-internet": "Sin internet"
         },
         "mods-disclaimer":{
             "title": "descargo de responsabilidad",

assets/jsons/translations/fr.json

@@ -51,6 +51,7 @@
             },
             "mods": {
                 "loading-mods": "Chargement des mods...",
+                "no-internet": "Pas d'internet",
                 "buttons": {
                     "more-infos": "Plus d'infos",
                     "install-or-update": "Installer ou mettre à jour"
@@ -164,10 +165,12 @@
         "shared": {
             "errors": {
                 "titles": {
-                    "operation-running": "Opération en cours"
+                    "operation-running": "Opération en cours",
+                    "no-internet": "Pas d'internet"
                 },
                 "msg": {
-                    "operation-running": "Attend la fin de l'opération en cours puis recommences."
+                    "operation-running": "Attend la fin de l'opération en cours puis recommences.",
+                    "no-internet": "Verifie t'a connexion internet et recommence."
                 }
             }
         },
@@ -506,7 +509,8 @@
         "download-maps": {
             "search-btn": "Rechercher",
             "loading-maps": "Chargement des maps...",
-            "no-maps-found": "Aucune map trouvée"
+            "no-maps-found": "Aucune map trouvée",
+            "no-internet": "Pas d'internet"
         },
         "mods-disclaimer":{
             "title": "avis de non-responsabilité",

src/renderer/components/modal/modal-types/download-maps-modal.component.tsx

@@ -18,6 +18,7 @@ import BeatConflictImg from "../../../../../assets/images/apngs/beat-conflict.pn
 import equal from "fast-deep-equal/es6";
 import { ProgressBarService } from "renderer/services/progress-bar.service";
 import { useTranslation } from "renderer/hooks/use-translation.hook";
+import { OsDiagnosticService } from "renderer/services/os-diagnostic.service";
 
 export const DownloadMapsModal: ModalComponent<void, BSVersion> = ({data}) => {
 
@@ -25,6 +26,7 @@ export const DownloadMapsModal: ModalComponent<void, BSVersion> = ({data}) => {
     const mapsManager = MapsManagerService.getInstance();
     const mapsDownloader = MapsDownloaderService.getInstance();
     const progressBar = ProgressBarService.getInstance();
+    const os = OsDiagnosticService.getInstance();
 
     const currentDownload = useObservable(mapsDownloader.currentMapDownload$);
     const mapsInQueue = useObservable(mapsDownloader.mapsInQueue$);
@@ -36,6 +38,7 @@ export const DownloadMapsModal: ModalComponent<void, BSVersion> = ({data}) => {
     const [sortOrder, setSortOrder] = useState<SearchOrder>(BSV_SORT_ORDER.at(0));
     const [ownedMapHashs, setOwnedMapHashs] = useState<string[]>([]);
     const [loading, setLoading] = useState(false);
+    const isOnline = useObservable(os.isOnline$);
     const [searchParams, setSearchParams] = useState<SearchParams>({
         sortOrder,
         filter,
@@ -171,7 +174,7 @@ export const DownloadMapsModal: ModalComponent<void, BSVersion> = ({data}) => {
                 {maps.length === 0 ? (
                     <div className="w-full h-full flex flex-col items-center justify-center">
                         <img className={`w-32 h-32 ${loading && "spin-loading"}`} src={loading ? BeatWaitingImg : BeatConflictImg} alt=" "/>
-                        <span className="text-lg">{t(loading ? "modals.download-maps.loading-maps" : "modals.download-maps.no-maps-found")}</span>
+                        <span className="text-lg">{t(loading ? "modals.download-maps.loading-maps" : isOnline ? "modals.download-maps.no-maps-found" : "modals.download-maps.no-internet")}</span>
                     </div>
                 ) : (
                     <>

src/renderer/components/version-viewer/slides/mods/mods-slide.component.tsx

@@ -7,6 +7,7 @@ import { ConfigurationService } from "renderer/services/configuration.service";
 import { DefaultConfigKey } from "renderer/config/default-configuration.config";
 import { BsmButton } from "renderer/components/shared/bsm-button.component";
 import BeatWaitingImg from "../../../../../../assets/images/apngs/beat-waiting.png"
+import BeatConflictImg from "../../../../../../assets/images/apngs/beat-conflict.png"
 import { useObservable } from "renderer/hooks/use-observable.hook";
 import { skip, filter } from "rxjs/operators";
 import { Subscription } from "rxjs";
@@ -15,6 +16,7 @@ import { LinkOpenerService } from "renderer/services/link-opener.service";
 import { useInView } from "framer-motion";
 import { ModalExitCode, ModalService } from "renderer/services/modale.service";
 import { ModsDisclaimerModal } from "renderer/components/modal/modal-types/mods-disclaimer-modal.component";
+import { OsDiagnosticService } from "renderer/services/os-diagnostic.service";
  
 export function ModsSlide({version, onDisclamerDecline}: {version: BSVersion, onDisclamerDecline: () => void}) {
 
@@ -24,6 +26,7 @@ export function ModsSlide({version, onDisclamerDecline}: {version: BSVersion, on
     const configService = ConfigurationService.getInstance();
     const linkOpener = LinkOpenerService.getInstance();
     const modals = ModalService.getInsance();
+    const os = OsDiagnosticService.getInstance();
 
     const ref = useRef(null);
     const isVisible = useInView(ref, {amount: .5});
@@ -31,11 +34,13 @@ export function ModsSlide({version, onDisclamerDecline}: {version: BSVersion, on
     const [modsInstalled, setModsInstalled] = useState(null as Map<string, Mod[]>);
     const [modsSelected, setModsSelected] = useState([] as Mod[]);
     const [moreInfoMod, setMoreInfoMod] = useState(null as Mod);
+    const isOnline = useObservable(os.isOnline$);
     const installing = useObservable(modsManager.isInstalling$);
     const t  = useTranslation();
 
     const downloadRef = useRef(null);
     const [downloadWith, setDownloadWidth] = useState(0);
+    
 
     const modsToCategoryMap = (mods: Mod[]): Map<string, Mod[]> => {
         if(!mods){ return new Map<string, Mod[]>(); }
@@ -69,6 +74,8 @@ export function ModsSlide({version, onDisclamerDecline}: {version: BSVersion, on
     }
 
     const loadMods = () => {
+        if(os.isOffline){ return; }
+
         Promise.all([
             modsManager.getAvailableMods(version),
             modsManager.getInstalledMods(version)
@@ -84,7 +91,7 @@ export function ModsSlide({version, onDisclamerDecline}: {version: BSVersion, on
 
         const subs: Subscription[] = [];
 
-        if(isVisible){
+        if(isVisible && isOnline){
 
             const promise = new Promise<boolean>(async resolve => {
                 
@@ -115,7 +122,7 @@ export function ModsSlide({version, onDisclamerDecline}: {version: BSVersion, on
             subs.forEach(s => s.unsubscribe());
         }
         
-    }, [isVisible, version]);
+    }, [isVisible, isOnline, version]);
     
 
     useLayoutEffect(() => {
@@ -128,7 +135,7 @@ export function ModsSlide({version, onDisclamerDecline}: {version: BSVersion, on
     return (
         <div ref={ref} className='shrink-0 w-full h-full px-8 pb-7 flex justify-center'>
             <div className='relative flex flex-col grow-0 bg-light-main-color-2 dark:bg-main-color-2 h-full w-full rounded-md shadow-black shadow-center overflow-hidden'>
-                {modsAvailable ? (
+                {isOnline && modsAvailable ? (
                     <>
                         <div className="overflow-scroll w-full min-h-0 scrollbar-thin scrollbar-thumb-neutral-900 scrollbar-thumb-rounded-full">
                             <ModsGrid modsMap={modsAvailable} installed={modsInstalled} modsSelected={modsSelected} onModChange={handleModChange} moreInfoMod={moreInfoMod} onWantInfos={handleMoreInfo}/>
@@ -142,8 +149,8 @@ export function ModsSlide({version, onDisclamerDecline}: {version: BSVersion, on
                     </>
                 ) : (
                     <div className="w-full h-full flex flex-col items-center justify-center">
-                        <img className="w-32 h-32 spin-loading" src={BeatWaitingImg} alt=" "/>
-                        <span className="text-xl mt-3 h-0 italic">{t("pages.version-viewer.mods.loading-mods")}</span>
+                        <img className={`w-32 h-32 ${isOnline && "spin-loading"}`} src={isOnline ? BeatWaitingImg : BeatConflictImg} alt=" "/>
+                        <span className="text-xl mt-3 h-0 italic">{t(isOnline ? "pages.version-viewer.mods.loading-mods" : "pages.version-viewer.mods.no-internet")}</span>
                     </div>
                 )}
             </div>

src/renderer/services/bs-mods-manager.service.ts

@@ -10,6 +10,7 @@ import { ProgressionInterface } from "shared/models/progress-bar";
 import { IpcService } from "./ipc.service";
 import { ModalExitCode, ModalService } from "./modale.service";
 import { NotificationService, NotificationType } from "./notification.service";
+import { OsDiagnosticService } from "./os-diagnostic.service";
 import { ProgressBarService } from "./progress-bar.service";
 
 export class BsModsManagerService {
@@ -22,6 +23,7 @@ export class BsModsManagerService {
     private readonly progressBar: ProgressBarService;
     private readonly modals: ModalService;
     private readonly notifications: NotificationService;
+    private readonly os: OsDiagnosticService;
 
     public readonly isInstalling$: BehaviorSubject<boolean> = new BehaviorSubject(false);
     public readonly isUninstalling$: BehaviorSubject<boolean> = new BehaviorSubject(false);
@@ -36,17 +38,27 @@ export class BsModsManagerService {
         this.progressBar = ProgressBarService.getInstance();
         this.modals = ModalService.getInsance();
         this.notifications = NotificationService.getInstance();
+        this.os = OsDiagnosticService.getInstance();
     }
 
-    public getAvailableMods(version: BSVersion): Promise<Mod[]>{
+    public async getAvailableMods(version: BSVersion): Promise<Mod[]>{
         return this.ipcService.send<Mod[], BSVersion>("get-available-mods", {args: version}).then(res => res.data);
     }
 
-    public getInstalledMods(version: BSVersion): Promise<Mod[]>{
+    public async getInstalledMods(version: BSVersion): Promise<Mod[]>{
         return this.ipcService.send<Mod[], BSVersion>("get-installed-mods", {args: version}).then(res => res.data);
     }
 
     public installMods(mods: Mod[], version: BSVersion): Promise<void>{
+
+        if(this.os.isOffline){
+            this.notifications.notifyError({
+                title: "notifications.shared.errors.titles.no-internet",
+                desc: "notifications.shared.errors.msg.no-internet"
+            });
+            return new Promise(res => res());
+        }
+
         if(!this.progressBar.require()){ return new Promise(res => res()); }
 
         const progress$: Observable<ProgressionInterface> = this.ipcService.watch<ModInstallProgression>("mod-installed").pipe(map(res => {

src/renderer/services/os-diagnostic.service.ts

@@ -9,7 +9,7 @@ export class OsDiagnosticService {
         return OsDiagnosticService.instance;
     }
 
-    private _isOnline$ = new BehaviorSubject(true);
+    private _isOnline$ = new BehaviorSubject(navigator.onLine);
 
     private constructor(){
 

src/renderer/windows/App.tsx

@@ -20,6 +20,7 @@ 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";
+import { OsDiagnosticService } from "renderer/services/os-diagnostic.service";
 
 export default function App() {
 
@@ -30,6 +31,7 @@ export default function App() {
     const models = ModelsManagerService.getInstance();
     const notification = NotificationService.getInstance();
     const config = ConfigurationService.getInstance();
+    const os = OsDiagnosticService.getInstance();
 
     const location = useLocation();
     const navigate = useNavigate();