From 0019b982e0aeddc3759c4926d3f1e3a54be4ff6c Mon Sep 17 00:00:00 2001
From: Ivan Evans <74743263+Pasithea0@users.noreply.github.com>
Date: Sat, 4 Jan 2025 19:24:18 -0700
Subject: [PATCH] Update popup for new server

---
 src/components/layout/Navigation.tsx         |   2 +
 src/pages/HomePage.tsx                       | 127 +++++++++++++++----
 src/pages/parts/home/PopupModal.tsx          |  21 ++-
 src/pages/parts/settings/ConnectionsPart.tsx |  14 +-
 4 files changed, 131 insertions(+), 33 deletions(-)

diff --git a/src/components/layout/Navigation.tsx b/src/components/layout/Navigation.tsx
index 92ebefa4..7d4355ab 100644
--- a/src/components/layout/Navigation.tsx
+++ b/src/components/layout/Navigation.tsx
@@ -101,6 +101,7 @@ export function Navigation(props: NavigationProps) {
               >
                 <IconPatch icon={Icons.DISCORD} clickable downsized />
               </a>
+              {/* 
               <a
                 onClick={() => handleClick("/discover")}
                 rel="noreferrer"
@@ -108,6 +109,7 @@ export function Navigation(props: NavigationProps) {
               >
                 <IconPatch icon={Icons.RISING_STAR} clickable downsized />
               </a>
+              */}
             </div>
             <div className="relative pointer-events-auto">
               <LinksDropdown>
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 79b5f582..eeebb7dc 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -2,6 +2,8 @@ import { useEffect, useState } from "react";
 import { Helmet } from "react-helmet-async";
 import { useTranslation } from "react-i18next";
 
+import { Icons } from "@/components/Icon";
+import { IconPill } from "@/components/layout/IconPill";
 import { Loading } from "@/components/layout/Loading";
 import { WideContainer } from "@/components/layout/WideContainer";
 import { useDebounce } from "@/hooks/useDebounce";
@@ -65,6 +67,8 @@ export function HomePage() {
     simulateLoading();
   }, []);
 
+  /* 
+  // Safari Notice
   const [showModal, setShowModal] = useState(() => {
     const isSafari =
       typeof navigator !== "undefined" &&
@@ -80,9 +84,34 @@ export function HomePage() {
 
     return isSafari && (isMac || isIOS);
   });
+  */
+
+  // One time notice
+  const [showModal, setShowModal] = useState(false);
+
+  useEffect(() => {
+    const isDismissed = localStorage.getItem("popupDismissed");
+    if (!isDismissed) {
+      setShowModal(true);
+    }
+  }, []);
+
+  const handleCloseModal = () => {
+    setShowModal(false);
+    localStorage.setItem("popupDismissed", "true");
+  };
 
   return (
     <HomeLayout showBg={showBg}>
+      <a
+        onClick={() => setShowModal(true)}
+        className="text-l lg:text-lg text-white tabbable rounded-full z-50 fixed top-5 right-[7.5rem]"
+        style={{ animation: "pulse 1s infinite" }}
+      >
+        <IconPill icon={Icons.WARNING}>
+          <span className="font-bold select-none">READ</span>
+        </IconPill>
+      </a>
       <div className="mb-16 sm:mb-24">
         <Helmet>
           <style type="text/css">{`
@@ -93,40 +122,90 @@ export function HomePage() {
           <title>{t("global.name")}</title>
         </Helmet>
 
-        {/* Popup Modal 
         {showModal && (
           <PopupModal
-            title="Issue on Safari (iOS/macOS)"
+            styles="max-w-2xl" // max-w-md for short
+            title="We’re changing our backend server!"
             message={
-              <p>
-                Due to a recent update, many P-Stream sources are broken on iOS
-                and macOS.
+              <div>
+                <p>
+                  On <strong>January 8th</strong>, the backend server will
+                  change from:
+                </p>
+                <p>
+                  <strong>server.vidbinge.com</strong> →{" "}
+                  <strong>server.fifthwit.tech</strong>
+                </p>
                 <br />
-                The only available source on Safari right now is Autoembed.
+                <p>
+                  You will need to <strong>manually move your data</strong> to
+                  the new server or choose to continue using the old server by
+                  updating your settings.
+                </p>
                 <br />
+                <p>
+                  <strong>What You Need to Know:</strong>
+                </p>
+                <ul>
+                  <li>
+                    1. <strong>Manually Moving Data:</strong> Your data (e.g.,
+                    bookmarks) will not be automatically transferred. You’ll
+                    need to re-create it on the new server. Follow the steps
+                    below to move your data.
+                  </li>
+                  <li>
+                    2. <strong>Staying on the Old Server:</strong> If you don’t
+                    want to change to the new server, your data will remain safe
+                    on <strong>server.vidbinge.com</strong>. You can change the
+                    Backend URL in your settings to
+                    &quot;https://server.vidbinge.com&quot;.
+                  </li>
+                </ul>
                 <br />
-                <strong>Workaround: </strong>
-                Please switch to <u>Chrome on desktop</u> where all sources are
-                still working. (And where the extension is available!)
+                <p>
+                  <strong>Steps to Move Your Data:</strong>
+                </p>
+                <ol>
+                  <li>
+                    1. Screenshot or write down your bookmarked shows and
+                    movies.
+                  </li>
+                  <li>
+                    2. Go to the <strong>Settings</strong> page.
+                  </li>
+                  <li>
+                    3. Scroll down to{" "}
+                    <strong>Connections &gt; Custom Server</strong>.
+                  </li>
+                  <li>
+                    4. Input the new server URL:{" "}
+                    <strong>https://server.fifthwit.tech</strong>
+                  </li>
+                  <li>
+                    5. Create a <strong>new account</strong> on the new server.
+                  </li>
+                  <li>6. Find your media and rebookmark it.</li>
+                </ol>
                 <br />
-                <br />
-                I&apos;m looking into 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>
+                <p>
+                  Thank you for your understanding and support during this
+                  transition! If you have questions or need help, feel free to
+                  reach out on the{" "}
+                  <a
+                    href="https://discord.com/invite/7z6znYgrTG"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-type-link"
+                  >
+                    P-Stream Discord
+                  </a>
+                  !
+                </p>
+              </div>
             }
-            onClose={() => setShowModal(false)}
+            onClose={handleCloseModal}
           />
         )}
-        END */}
 
         <HeroPart searchParams={searchParams} setIsSticky={setShowBg} />
       </div>
diff --git a/src/pages/parts/home/PopupModal.tsx b/src/pages/parts/home/PopupModal.tsx
index 0b269f77..70e66da9 100644
--- a/src/pages/parts/home/PopupModal.tsx
+++ b/src/pages/parts/home/PopupModal.tsx
@@ -11,6 +11,7 @@ export interface PopupModalProps {
   message: ReactNode;
   closable?: boolean;
   onClose?: () => void;
+  styles?: string;
 }
 
 export function PopupModal({
@@ -18,6 +19,7 @@ export function PopupModal({
   message,
   closable = true,
   onClose,
+  styles,
 }: PopupModalProps) {
   useEffect(() => {
     document.body.style.overflow = "hidden";
@@ -36,27 +38,32 @@ export function PopupModal({
         "pointer-events-auto",
       )}
     >
-      <Flare.Base className="group -m-[0.705em] rounded-xl bg-background-main transition-colors duration-300 focus:relative focus:z-10">
+      <Flare.Base
+        className={classNames(
+          "group -m-[0.705em] rounded-3xl bg-background-main transition-colors duration-300 focus:relative focus:z-10",
+          "fixed top-0 left-0 right-0 z-50 p-6 bg-mediaCard-hoverBackground bg-opacity-60 backdrop-filter backdrop-blur-lg shadow-lg mx-auto",
+        )}
+      >
         <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",
+            "overflow-y-scroll max-h-[90dvh] md:max-h-[90dvh] scrollbar-none",
+            styles,
           )}
         >
           <Flare.Light
             flareSize={300}
             cssColorVar="--colors-mediaCard-hoverAccent"
             backgroundClass="bg-mediaCard-hoverBackground duration-100"
-            className="rounded-xl bg-background-main group-hover:opacity-100"
+            className="rounded-3xl bg-background-main group-hover:opacity-100"
           />
-          <Flare.Child className="pointer-events-auto relative mb-2 p-[0.4em] transition-transform duration-300">
+          <Flare.Child className="pointer-events-auto relative mb-2p-[0.4em] transition-transform duration-300">
             <div className="flex justify-between items-center mb-4">
-              <Heading2 className="!mt-0 !mb-0">{title}</Heading2>
+              <Heading2 className="!mt-0 !mb-0 pr-6">{title}</Heading2>
               {closable && (
                 <button
                   type="button"
-                  className="text-s font-semibold text-type-secondary hover:text-white transition-transform hover:scale-110"
+                  className="fixed right-4 text-s font-semibold text-type-secondary hover:text-white transition-transform hover:scale-110"
                   onClick={onClose}
                 >
                   <IconPatch icon={Icons.X} />
diff --git a/src/pages/parts/settings/ConnectionsPart.tsx b/src/pages/parts/settings/ConnectionsPart.tsx
index e0215eec..1a28c20b 100644
--- a/src/pages/parts/settings/ConnectionsPart.tsx
+++ b/src/pages/parts/settings/ConnectionsPart.tsx
@@ -143,8 +143,18 @@ function BackendEdit({ backendUrl, setBackendUrl }: BackendEditProps) {
           <Divider marginClass="my-6 px-8 box-content -mx-8" />
           <p className="text-white font-bold mb-3">
             {t("settings.connections.server.urlLabel")}
+            <p className="font-medium text-type-link">
+              New default server: https://server.fifthwit.tech
+            </p>
+            <p className="font-medium text-type-secondary">
+              Old default server: https://server.vidbinge.com
+            </p>
           </p>
-          <AuthInputBox onChange={setBackendUrl} value={backendUrl ?? ""} />
+          <AuthInputBox
+            onChange={setBackendUrl}
+            value={backendUrl ?? ""}
+            placeholder="https://"
+          />
         </>
       ) : null}
     </SettingsCard>
@@ -157,7 +167,7 @@ export function ConnectionsPart(props: BackendEditProps & ProxyEditProps) {
     <div>
       <Heading1 border>{t("settings.connections.title")}</Heading1>
       <div className="space-y-6">
-        <SetupPart /> {/* I was wondering what heppened to this badddev >:( */}
+        <SetupPart /> {/* I was wondering what happened to this badddev >:( */}
         <ProxyEdit
           proxyUrls={props.proxyUrls}
           setProxyUrls={props.setProxyUrls}