mirror of https://github.com/sussy-code/smov.git
Remove extension banner and update dropdown
This commit is contained in:
parent
2d1c5a132f
commit
c33efc51ee
|
@ -201,7 +201,8 @@
|
|||
"logout": "Log out",
|
||||
"register": "Sync to sudo-cloud",
|
||||
"settings": "Settings",
|
||||
"support": "Support"
|
||||
"support": "Support",
|
||||
"discover": "Discover"
|
||||
}
|
||||
},
|
||||
"notFound": {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -275,34 +275,32 @@ 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.Light
|
||||
flareSize={300}
|
||||
cssColorVar="--colors-mediaCard-hoverAccent"
|
||||
backgroundClass="bg-mediaCard-hoverBackground duration-200"
|
||||
className="rounded-xl bg-background-main group-hover:opacity-100"
|
||||
/>
|
||||
<img
|
||||
src={`https://image.tmdb.org/t/p/w500${media.poster_path}`}
|
||||
alt="failed to fetch :("
|
||||
loading="lazy"
|
||||
className="rounded-xl relative"
|
||||
/>
|
||||
<h1 className="group relative pt-2 text-[13.5px] whitespace-normal duration-[0.35s] font-semibold text-white opacity-0 group-hover:opacity-100">
|
||||
{isTVShow
|
||||
? (media.name?.length ?? 0) > 32
|
||||
? `${media.name?.slice(0, 32)}...`
|
||||
: media.name
|
||||
: (media.title?.length ?? 0) > 32
|
||||
? `${media.title?.slice(0, 32)}...`
|
||||
: media.title}
|
||||
</h1>
|
||||
</Flare.Base>
|
||||
</div>
|
||||
<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"
|
||||
backgroundClass="bg-mediaCard-hoverBackground duration-200"
|
||||
className="rounded-xl bg-background-main group-hover:opacity-100"
|
||||
/>
|
||||
<img
|
||||
src={`https://image.tmdb.org/t/p/w500${media.poster_path}`}
|
||||
alt="failed to fetch :("
|
||||
loading="lazy"
|
||||
className="rounded-xl relative"
|
||||
/>
|
||||
<h1 className="group relative pt-2 text-[13.5px] whitespace-normal duration-[0.35s] font-semibold text-white opacity-0 group-hover:opacity-100">
|
||||
{isTVShow
|
||||
? (media.name?.length ?? 0) > 32
|
||||
? `${media.name?.slice(0, 32)}...`
|
||||
: media.name
|
||||
: (media.title?.length ?? 0) > 32
|
||||
? `${media.title?.slice(0, 32)}...`
|
||||
: media.title}
|
||||
</h1>
|
||||
</Flare.Base>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in New Issue