Mirrors/colanode
1
0
Fork 0
mirror of https://github.com/colanode/colanode.git synced 2025-12-16 11:47:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add a message that Colanode is not supported in mobile devices (#143)

Browse Source
This commit is contained in:
Hakan Shehu
2025-07-21 10:17:45 +02:00
committed by GitHub
parent 24a91fc154
commit 3f3aa3c79a
3 changed files with 39 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
apps/web/src/components/mobile-not-supported.tsx Normal file
View File

@@ -0,0 +1,23 @@
import { Smartphone } from 'lucide-react';
export const MobileNotSupported = () => {
return (
<div className="min-w-screen flex h-full min-h-screen w-full items-center justify-center">
<div className="flex flex-col items-center gap-8 text-center w-128">
<Smartphone className="h-10 w-10 text-gray-800" />
<h2 className="text-4xl text-gray-800">Mobile not supported</h2>
<p className="text-sm text-gray-500">
Hey there! Thanks for checking out Colanode.
</p>
<p className="text-sm text-gray-500">
Right now, Colanode is not quite ready for mobile devices just yet.
For the best experience, please hop onto a desktop or laptop. We're
working hard to bring you an awesome mobile experience soon.
</p>
<p className="text-sm text-gray-500 mt-4">
Thanks for your patience and support!
</p>
</div>
</div>
);
};

7
apps/web/src/lib/utils.ts
View File

@@ -16,3 +16,10 @@ export const isOpfsSupported = async (): Promise<boolean> => {
return false;
}
};
const mobileDeviceRegex =
/Android|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i;
export const isMobileDevice = (): boolean => {
return mobileDeviceRegex.test(navigator.userAgent);
};

11
apps/web/src/main.tsx
View File

@@ -3,14 +3,21 @@ import { createRoot } from 'react-dom/client';
import { eventBus } from '@colanode/client/lib';
import { BrowserNotSupported } from '@colanode/web/components/browser-not-supported';
import { MobileNotSupported } from '@colanode/web/components/mobile-not-supported';
import { ColanodeWorkerApi } from '@colanode/web/lib/types';
import { isOpfsSupported } from '@colanode/web/lib/utils';
import { isMobileDevice, isOpfsSupported } from '@colanode/web/lib/utils';
import { Root } from '@colanode/web/root';
import DedicatedWorker from '@colanode/web/workers/dedicated?worker';
const initializeApp = async () => {
const hasOpfsSupport = await isOpfsSupported();
const isMobile = isMobileDevice();
if (isMobile) {
const root = createRoot(document.getElementById('root') as HTMLElement);
root.render(<MobileNotSupported />);
return;
}
const hasOpfsSupport = await isOpfsSupported();
if (!hasOpfsSupport) {
const root = createRoot(document.getElementById('root') as HTMLElement);
root.render(<BrowserNotSupported />);