add notice

src/pages/HomePage.tsx

@@ -15,6 +15,8 @@ import { SearchListPart } from "@/pages/parts/search/SearchListPart";
 import { SearchLoadingPart } from "@/pages/parts/search/SearchLoadingPart";
 import DiscoverContent from "@/utils/discoverContent";
 
+import { PopupModal } from "./parts/home/PopupModal";
+
 function useSearch(search: string) {
   const [searching, setSearching] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(false);
@@ -63,6 +65,22 @@ export function HomePage() {
     simulateLoading();
   }, []);
 
+  const [showModal, setShowModal] = useState(() => {
+    const isSafari =
+      typeof navigator !== "undefined" &&
+      /Safari/.test(navigator.userAgent) &&
+      !/Chrome/.test(navigator.userAgent);
+
+    const isMac =
+      typeof navigator !== "undefined" && /Mac/.test(navigator.platform);
+
+    const isIOS =
+      typeof navigator !== "undefined" &&
+      /iPhone|iPad|iPod/.test(navigator.userAgent);
+
+    return isSafari && (isMac || isIOS);
+  });
+
   return (
     <HomeLayout showBg={showBg}>
       <div className="mb-16 sm:mb-24">
@@ -74,6 +92,42 @@ export function HomePage() {
           `}</style>
           <title>{t("global.name")}</title>
         </Helmet>
+
+        {/* Popup Modal */}
+        {showModal && (
+          <PopupModal
+            title="Issue on Safari (iOS/macOS)"
+            message={
+              <p>
+                Due to a recent update, many P-Stream sources are broken on iOS
+                and macOS.
+                <br />
+                The only available source on Safari right now is SoaperTV.
+                <br />
+                <br />
+                <strong>Workaround: </strong>
+                Please switch to Chrome on desktop where all sources are still
+                working. (And where the extension is available!)
+                <br />
+                <br />
+                I&apos;m working on a fix. For updates on this issue please join
+                the{" "}
+                <a
+                  href="https://discord.com/invite/7z6znYgrTG"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-onboarding-link"
+                >
+                  P-Stream Discord
+                </a>
+                . Sorry for the inconvenience.
+              </p>
+            }
+            onClose={() => setShowModal(false)}
+          />
+        )}
+        {/* END */}
+
         <HeroPart searchParams={searchParams} setIsSticky={setShowBg} />
       </div>
       <WideContainer>

src/pages/parts/home/PopupModal.tsx

@@ -0,0 +1,72 @@
+import classNames from "classnames";
+import { ReactNode, useEffect } from "react";
+
+import { IconPatch } from "@/components/buttons/IconPatch";
+import { Icons } from "@/components/Icon";
+import { Flare } from "@/components/utils/Flare";
+import { Heading2 } from "@/components/utils/Text";
+
+export interface PopupModalProps {
+  title: string;
+  message: ReactNode;
+  closable?: boolean;
+  onClose?: () => void;
+}
+
+export function PopupModal({
+  title,
+  message,
+  closable = true,
+  onClose,
+}: PopupModalProps) {
+  useEffect(() => {
+    document.body.style.overflow = "hidden";
+
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, []);
+
+  return (
+    <div
+      className={classNames(
+        "fixed inset-0 z-[100] flex items-center justify-center",
+        "bg-background-main bg-opacity-75 backdrop-filter backdrop-blur-sm",
+        "transition-opacity duration-400",
+        "pointer-events-auto",
+      )}
+    >
+      <Flare.Base className="group -m-[0.705em] rounded-xl bg-background-main transition-colors duration-300 focus:relative focus:z-10">
+        <div
+          className={classNames(
+            "fixed top-0 left-0 right-0 z-50 p-6 bg-mediaCard-hoverBackground bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg",
+            "max-w-md mx-auto mt-12",
+            "transition-transform duration-300",
+          )}
+        >
+          <Flare.Light
+            flareSize={300}
+            cssColorVar="--colors-mediaCard-hoverAccent"
+            backgroundClass="bg-mediaCard-hoverBackground duration-100"
+            className="rounded-xl bg-background-main group-hover:opacity-100"
+          />
+          <Flare.Child className="pointer-events-auto relative mb-2 p-[0.4em] transition-transform duration-300">
+            <div className="flex justify-between items-center mb-4">
+              <Heading2 className="!mt-0 !mb-0">{title}</Heading2>
+              {closable && (
+                <button
+                  type="button"
+                  className="text-s font-semibold text-type-secondary hover:text-white transition-transform hover:scale-110"
+                  onClick={onClose}
+                >
+                  <IconPatch icon={Icons.X} />
+                </button>
+              )}
+            </div>
+            <p className="text-lg text-type-secondary">{message}</p>
+          </Flare.Child>
+        </div>
+      </Flare.Base>
+    </div>
+  );
+}