dev
/
sudo-archive
mirror of https://github.com/sussy-code/smov.git
2
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Remove extension banner and update dropdown

This commit is contained in:
Captain Jack Sparrow 2024-04-29 02:49:43 +00:00
parent 2d1c5a132f
commit c33efc51ee
5 changed files with 35 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/locales/en.json
View File

@ -201,7 +201,8 @@
"logout": "Log out",
"register": "Sync to sudo-cloud",
"settings": "Settings",
"support": "Support"
"support": "Support",
"discover": "Discover"
}
},
"notFound": {

7
src/components/LinksDropdown.tsx
View File

@ -142,6 +142,9 @@ export function LinksDropdown(props: { children: React.ReactNode }) {
<DropdownLink href="/about" icon={Icons.CIRCLE_QUESTION}>
{t("navigation.menu.about")}
</DropdownLink>
<DropdownLink href="/discover" icon={Icons.RISING_STAR}>
{t("navigation.menu.discover")}
</DropdownLink>
{deviceName ? (
<DropdownLink
className="!text-type-danger opacity-75 hover:opacity-100"
@ -158,6 +161,10 @@ export function LinksDropdown(props: { children: React.ReactNode }) {
icon={Icons.DISCORD}
/>
<CircleDropdownLink href={conf().GITHUB_LINK} icon={Icons.GITHUB} />
<CircleDropdownLink
href={conf().TWITTER_LINK}
icon={Icons.TWITTER}
/>
<CircleDropdownLink href="/support" icon={Icons.MAIL} />
</div>
</div>

6
src/pages/Discover.tsx
View File

@ -275,11 +275,10 @@ export function Discover() {
}`,
)
}
className="text-center relative mt-3 ml-[0.285em] mb-3 mr-[0.2em]"
className="text-center relative mt-3 ml-[0.285em] mb-3 mr-[0.2em] transition-transform hover:scale-105 duration-[0.45s]"
style={{ flex: `0 0 ${movieWidth}` }} // Set a fixed width for each movie
>
<div className="relative transition-transform hover:scale-105 duration-[0.45s]">
<Flare.Base className="group cursor-pointer rounded-xl relative p-[0.65em] bg-background-main transition-colors duration-300">
<Flare.Base className="group cursor-pointer rounded-xl relative p-[0.65em] bg-background-main transition-colors duration-300 bg-transparent">
<Flare.Light
flareSize={300}
cssColorVar="--colors-mediaCard-hoverAccent"
@ -302,7 +301,6 @@ export function Discover() {
: media.title}
</h1>
</Flare.Base>
</div>
</a>
))}
</div>

28
src/setup/Layout.tsx
View File

@ -1,39 +1,13 @@
import { ReactNode, useEffect, useState } from "react";
import { ReactNode } from "react";
import { useBannerSize, useBannerStore } from "@/stores/banner";
import { ExtensionBanner } from "@/stores/banner/BannerLocation";
import { getExtensionState } from "@/utils/extension";
import type { ExtensionStatus } from "@/utils/extension";
export function Layout(props: { children: ReactNode }) {
const bannerSize = useBannerSize();
const location = useBannerStore((s) => s.location);
const [extensionState, setExtensionState] =
useState<ExtensionStatus>("unknown");
const [storeLoaded, setStoreLoaded] = useState(false);
useEffect(() => {
let isMounted = true;
getExtensionState().then((state) => {
if (isMounted) {
setExtensionState(state);
setStoreLoaded(true);
}
});
return () => {
isMounted = false;
};
}, []);
return (
<div>
{storeLoaded && extensionState !== "success" ? (
<div className="fixed inset-x-0 z-[1000]">
<ExtensionBanner extensionState={extensionState} />
</div>
) : null}
<div
style={{
paddingTop: location === null ? `${bannerSize}px` : "0px",

81
src/stores/banner/BannerLocation.tsx
View File

@ -1,10 +1,8 @@
import { useEffect } from "react";
import { Trans, useTranslation } from "react-i18next";
import { useLocation, useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { Icon, Icons } from "@/components/Icon";
import { useBannerStore, useRegisterBanner } from "@/stores/banner";
import type { ExtensionStatus } from "@/utils/extension";
export function Banner(props: {
children: React.ReactNode;
@ -55,83 +53,6 @@ export function Banner(props: {
);
}
// This jawn is for advertising the extension for le skids
export function ExtensionBanner(props: {
location?: string;
extensionState: ExtensionStatus;
}) {
const navigate = useNavigate();
const setLocation = useBannerStore((s) => s.setLocation);
const currentLocation = useBannerStore((s) => s.location);
const loc = props.location ?? null;
const { pathname } = useLocation();
const isEligible = !(
/CrOS/.test(navigator.userAgent) ||
/TV/.test(navigator.userAgent) ||
/iPhone|iPad|iPod/i.test(navigator.userAgent)
);
useEffect(() => {
if (loc) {
setLocation(loc);
return () => {
setLocation(null);
};
}
}, [setLocation, loc]);
const hideBannerFlag = sessionStorage.getItem("hideBanner");
if (hideBannerFlag) {
return null;
}
if (currentLocation !== loc || pathname === "/onboarding/extension")
return null;
// Show the banner with a 36.5% chance or not if users don't meet requirements
if (isEligible && Math.random() < 0.365) {
let bannerText = "";
switch (props.extensionState) {
case "noperms":
bannerText = "The extension does'nt have the necessary permissions.";
break;
case "outdated":
bannerText =
"Your extension is outdated. Please update it <bold>here</bold>.";
break;
case "disallowed":
bannerText =
"The extension is not enabled, click <bold>here</bold> to fix it.";
break;
case "failed":
bannerText =
"The extension is broken... Please click <bold>here</bold>.";
break;
default:
bannerText =
"You don't have the extension! Download it <bold>here</bold> for better quality.";
break;
}
return (
<Banner id="extension" type="info">
<div
onClick={() => navigate("/onboarding/extension")}
style={{ cursor: "pointer" }}
>
<Trans
i18nKey={bannerText}
components={{
bold: <span className="font-bold" />,
}}
/>
</div>
</Banner>
);
}
return null;
}
export function BannerLocation(props: { location?: string }) {
const { t } = useTranslation();
const isOnline = useBannerStore((s) => s.isOnline);