mirror of
https://github.com/sussy-code/smov.git
synced 2024-12-20 14:37:43 +01:00
Fix janky code
This commit is contained in:
parent
6e478fd37e
commit
5af78196d1
2 changed files with 8 additions and 9 deletions
|
@ -1,6 +1,5 @@
|
||||||
import { ReactNode, useEffect, useState } from "react";
|
import { ReactNode, useEffect, useState } from "react";
|
||||||
|
|
||||||
import { useIsMobile } from "@/hooks/useIsMobile";
|
|
||||||
import { useBannerSize, useBannerStore } from "@/stores/banner";
|
import { useBannerSize, useBannerStore } from "@/stores/banner";
|
||||||
import { ExtensionBanner } from "@/stores/banner/BannerLocation";
|
import { ExtensionBanner } from "@/stores/banner/BannerLocation";
|
||||||
import { getExtensionState } from "@/utils/extension";
|
import { getExtensionState } from "@/utils/extension";
|
||||||
|
@ -11,7 +10,7 @@ export function Layout(props: { children: ReactNode }) {
|
||||||
const location = useBannerStore((s) => s.location);
|
const location = useBannerStore((s) => s.location);
|
||||||
const [extensionState, setExtensionState] =
|
const [extensionState, setExtensionState] =
|
||||||
useState<ExtensionStatus>("unknown");
|
useState<ExtensionStatus>("unknown");
|
||||||
const { isMobile } = useIsMobile();
|
const [storeLoaded, setStoreLoaded] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let isMounted = true;
|
let isMounted = true;
|
||||||
|
@ -19,6 +18,7 @@ export function Layout(props: { children: ReactNode }) {
|
||||||
getExtensionState().then((state) => {
|
getExtensionState().then((state) => {
|
||||||
if (isMounted) {
|
if (isMounted) {
|
||||||
setExtensionState(state);
|
setExtensionState(state);
|
||||||
|
setStoreLoaded(true);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -29,7 +29,7 @@ export function Layout(props: { children: ReactNode }) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
{extensionState !== "success" ? (
|
{storeLoaded && extensionState !== "success" ? (
|
||||||
<div className="fixed inset-x-0 z-[1000]">
|
<div className="fixed inset-x-0 z-[1000]">
|
||||||
<ExtensionBanner extensionState={extensionState} />
|
<ExtensionBanner extensionState={extensionState} />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -3,7 +3,6 @@ import { Trans, useTranslation } from "react-i18next";
|
||||||
import { useLocation, useNavigate } from "react-router-dom";
|
import { useLocation, useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
import { Icon, Icons } from "@/components/Icon";
|
import { Icon, Icons } from "@/components/Icon";
|
||||||
import { useIsMobile } from "@/hooks/useIsMobile";
|
|
||||||
import { useBannerStore, useRegisterBanner } from "@/stores/banner";
|
import { useBannerStore, useRegisterBanner } from "@/stores/banner";
|
||||||
import type { ExtensionStatus } from "@/utils/extension";
|
import type { ExtensionStatus } from "@/utils/extension";
|
||||||
|
|
||||||
|
@ -66,11 +65,11 @@ export function ExtensionBanner(props: {
|
||||||
const currentLocation = useBannerStore((s) => s.location);
|
const currentLocation = useBannerStore((s) => s.location);
|
||||||
const loc = props.location ?? null;
|
const loc = props.location ?? null;
|
||||||
const { pathname } = useLocation();
|
const { pathname } = useLocation();
|
||||||
const isEligible =
|
const isEligible = !(
|
||||||
/CrOS/.test(navigator.userAgent) ||
|
/CrOS/.test(navigator.userAgent) ||
|
||||||
/TV/.test(navigator.userAgent) ||
|
/TV/.test(navigator.userAgent) ||
|
||||||
/iPhone|iPad|iPod/i.test(navigator.userAgent);
|
/iPhone|iPad|iPod/i.test(navigator.userAgent)
|
||||||
const { isMobile } = useIsMobile();
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (loc) {
|
if (loc) {
|
||||||
|
@ -89,8 +88,8 @@ export function ExtensionBanner(props: {
|
||||||
if (currentLocation !== loc || pathname === "/onboarding/extension")
|
if (currentLocation !== loc || pathname === "/onboarding/extension")
|
||||||
return null;
|
return null;
|
||||||
|
|
||||||
// Show the banner with a 36.5% chance or not if users dont meet requirements
|
// Show the banner with a 36.5% chance or not if users don't meet requirements
|
||||||
if (!isEligible && !isMobile && Math.random() < 0.365) {
|
if (isEligible && Math.random() < 0.365) {
|
||||||
let bannerText = "";
|
let bannerText = "";
|
||||||
switch (props.extensionState) {
|
switch (props.extensionState) {
|
||||||
case "noperms":
|
case "noperms":
|
||||||
|
|
Loading…
Reference in a new issue