mirror of
https://github.com/smolgrrr/TAO.git
synced 2024-09-20 09:21:25 +00:00
add PWA detector
This commit is contained in:
parent
2ad2916d6e
commit
cfda0b75f8
@ -4,6 +4,7 @@ import Settings from "./components/Settings";
|
|||||||
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
|
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
|
||||||
import Thread from "./components/Thread";
|
import Thread from "./components/Thread";
|
||||||
import Header from "./components/Header/Header";
|
import Header from "./components/Header/Header";
|
||||||
|
import AddToHomeScreenPrompt from "./components/Modals/CheckMobile/CheckMobile";
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
|
|
||||||
@ -15,6 +16,7 @@ function App() {
|
|||||||
<Route path="/" element={<Home />} />
|
<Route path="/" element={<Home />} />
|
||||||
<Route path="/thread/:id" element={<Thread />} />
|
<Route path="/thread/:id" element={<Thread />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
|
<AddToHomeScreenPrompt/>
|
||||||
</Router>
|
</Router>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -267,7 +267,7 @@ const NewNoteCard = ({
|
|||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
className={`h-9 inline-flex items-center justify-center px-4 rounded-lg text-white font-medium text-sm ${doingWorkProp || uploadingFile || comment === "" ? 'bg-blue-900 cursor-not-allowed' : 'bg-blue-500 hover:bg-blue-600'}`}
|
className={`h-9 inline-flex items-center justify-center px-4 rounded-lg text-white font-medium text-sm ${doingWorkProp || uploadingFile ? 'bg-blue-900 cursor-not-allowed' : 'bg-blue-500 hover:bg-blue-600'}`}
|
||||||
disabled={doingWorkProp || uploadingFile}
|
disabled={doingWorkProp || uploadingFile}
|
||||||
>
|
>
|
||||||
Submit
|
Submit
|
||||||
|
@ -19,9 +19,6 @@ export default function Header() {
|
|||||||
href="/settings"
|
href="/settings"
|
||||||
className="text-neutral-300 inline-flex gap-4 items-center"
|
className="text-neutral-300 inline-flex gap-4 items-center"
|
||||||
>
|
>
|
||||||
<button>
|
|
||||||
<QuestionMarkCircleIcon className="h-5 w-5" />
|
|
||||||
</button>
|
|
||||||
<button>
|
<button>
|
||||||
<Cog6ToothIcon className="h-5 w-5" />
|
<Cog6ToothIcon className="h-5 w-5" />
|
||||||
</button>
|
</button>
|
||||||
|
73
client/src/components/Modals/CheckMobile/CheckMobile.tsx
Normal file
73
client/src/components/Modals/CheckMobile/CheckMobile.tsx
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { XMarkIcon } from "@heroicons/react/24/solid";
|
||||||
|
import { ArrowUpOnSquareIcon, PlusCircleIcon } from '@heroicons/react/24/outline';
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface Navigator {
|
||||||
|
standalone?: boolean;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const AddToHomeScreenPrompt: React.FC = () => {
|
||||||
|
const [inMobileBrowser, setInMobileBrowser] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const checkPWA = () => {
|
||||||
|
return (
|
||||||
|
!window.navigator.standalone ||
|
||||||
|
!window.matchMedia('(display-mode: standalone)').matches
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Function to detect mobile browser
|
||||||
|
const detectMobileBrowser = () => {
|
||||||
|
return (
|
||||||
|
(navigator.userAgent.match(/Android/i) ||
|
||||||
|
navigator.userAgent.match(/webOS/i) ||
|
||||||
|
navigator.userAgent.match(/iPhone/i) ||
|
||||||
|
navigator.userAgent.match(/iPad/i) ||
|
||||||
|
navigator.userAgent.match(/iPod/i) ||
|
||||||
|
navigator.userAgent.match(/Windows Phone/i))
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const timer = setTimeout(() => {
|
||||||
|
setInMobileBrowser(Boolean(checkPWA() && detectMobileBrowser()));
|
||||||
|
}, 2000); // 3000 milliseconds = 3 seconds
|
||||||
|
|
||||||
|
// Cleanup function to clear the timeout if the component unmounts before the timeout finishes
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
if (!inMobileBrowser) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="overscroll-contain fixed inset-0 bg-gray-800/40 flex items-center justify-center animate-fade-in">
|
||||||
|
<div className="fixed bottom-0 left-0 right-0 p-4 bg-neutral-900 rounded-lg m-2 border border-neutral-700 shadow-md flex justify-between items-center animate-slide-up">
|
||||||
|
<div className="flex flex-col text-white">
|
||||||
|
<span className="font-semibold">Stay Wired</span>
|
||||||
|
<p className="text-xs">Add Wired to your home screen for a better experience</p>
|
||||||
|
<ul className="list-none mt-2 text-sm">
|
||||||
|
<li>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<span className="mr-2">{'>'}</span> Click on <ArrowUpOnSquareIcon className="h-6 w-6 ml-1 text-blue-500" /> <span className="font-semibold text-blue-500">Share</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<span className="mr-2">{'>'}</span> Click <PlusCircleIcon className="h-6 w-6 ml-1 text-blue-500" /> <span className="font-semibold text-blue-500">Add to Home Screen</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<button className="absolute top-2 right-2" onClick={() => {setInMobileBrowser(!inMobileBrowser);}}>
|
||||||
|
<XMarkIcon className="h-6 w-6 text-white" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AddToHomeScreenPrompt;
|
@ -2,7 +2,22 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
content: ["./src/**/*.{js,jsx,ts,tsx}"],
|
content: ["./src/**/*.{js,jsx,ts,tsx}"],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {},
|
extend: {
|
||||||
|
animation: {
|
||||||
|
'fade-in': 'fadeIn 0.25s ease-in-out',
|
||||||
|
'slide-up': 'slideUp 0.25s ease-in-out',
|
||||||
|
},
|
||||||
|
keyframes: {
|
||||||
|
fadeIn: {
|
||||||
|
'0%': { opacity: '0' },
|
||||||
|
'100%': { opacity: '1' },
|
||||||
|
},
|
||||||
|
slideUp: {
|
||||||
|
'0%': { transform: 'translateY(100%)' },
|
||||||
|
'100%': { transform: 'translateY(0)' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
require('@tailwindcss/forms'),
|
require('@tailwindcss/forms'),
|
||||||
|
Loading…
Reference in New Issue
Block a user