finalized domain redirect modal

Co-authored-by: Jip Frijlink <JipFr@users.noreply.github.com> Co-authored-by: James Hawkins <jhawki2005@gmail.com>
2 years ago · 0c57aa1a73
7 changed files with 106 additions and 22 deletions
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@ -7,17 +7,15 @@ interface Props {
				@@ -7,17 +7,15 @@ interface Props {
  children?: ReactNode;
 }

-// TODO style button
-// TODO transition modal
 export function Button(props: Props) {
  return (
    <button
      type="button"
      onClick={props.onClick}
-      className="inline-flex items-center justify-center"
+      className="inline-flex items-center justify-center rounded-lg bg-white px-8 py-3 font-bold text-black transition-[transform,background-color] duration-100 hover:bg-gray-200 active:scale-105 md:px-16"
    >
      {props.icon ? (
-        <span className="mr-3">
+        <span className="mr-3 hidden md:inline-block">
          <Icon icon={props.icon} />
        </span>
      ) : null}
--- a/src/components/Overlay.tsx
+++ b/src/components/Overlay.tsx
@ -1,3 +1,4 @@
				@@ -1,3 +1,4 @@
+import { Transition } from "@/components/Transition";
 import { Helmet } from "react-helmet";

 export function Overlay(props: { children: React.ReactNode }) {
@ -6,7 +7,12 @@ export function Overlay(props: { children: React.ReactNode }) {
				@@ -6,7 +7,12 @@ export function Overlay(props: { children: React.ReactNode }) {
      <Helmet>
        <body data-no-scroll />
      </Helmet>
-      <div className="fixed inset-0 z-[99999] flex h-full w-full items-center justify-center bg-[rgba(8,6,18,0.85)]">
+      <div className="fixed inset-0 z-[99999]">
+        <Transition
+          animation="fade"
+          className="absolute inset-0 bg-[rgba(8,6,18,0.85)]"
+          isChild
+        />
        {props.children}
      </div>
    </>
--- a/src/components/Transition.tsx
+++ b/src/components/Transition.tsx
@ -4,14 +4,16 @@ import {
				@@ -4,14 +4,16 @@ import {
  TransitionClasses,
 } from "@headlessui/react";

-type TransitionAnimations = "slide-down" | "slide-up" | "fade";
+type TransitionAnimations = "slide-down" | "slide-up" | "fade" | "none";

 interface Props {
-  show: boolean;
+  show?: boolean;
  durationClass?: string;
  animation: TransitionAnimations;
  className?: string;
  children?: ReactNode;
+  appearOnMount?: boolean;
+  isChild?: boolean;
 }

 function getClasses(
@ -58,8 +60,25 @@ export function Transition(props: Props) {
				@@ -58,8 +60,25 @@ export function Transition(props: Props) {
  const duration = props.durationClass ?? "duration-200";
  const classes = getClasses(props.animation, duration);

+  if (props.isChild) {
    return (
-    <HeadlessTransition show={props.show} as={Fragment} {...classes}>
+      <HeadlessTransition.Child
+        as={Fragment}
+        appear={props.appearOnMount}
+        {...classes}
+      >
+        <div className={props.className}>{props.children}</div>
+      </HeadlessTransition.Child>
+    );
+  }
+
+  return (
+    <HeadlessTransition
+      show={props.show}
+      as={Fragment}
+      appear={props.appearOnMount}
+      {...classes}
+    >
      <div className={props.className}>{props.children}</div>
    </HeadlessTransition>
  );
--- a/src/components/layout/Modal.tsx
+++ b/src/components/layout/Modal.tsx
@ -1,4 +1,5 @@
				@@ -1,4 +1,5 @@
 import { Overlay } from "@/components/Overlay";
+import { Transition } from "@/components/Transition";
 import { ReactNode } from "react";
 import { createPortal } from "react-dom";

@ -7,18 +8,38 @@ interface Props {
				@@ -7,18 +8,38 @@ interface Props {
  children?: ReactNode;
 }

-export function ModalFrame(props: { children?: ReactNode }) {
-  return <Overlay>{props.children}</Overlay>;
+export function ModalFrame(props: Props) {
+  return (
+    <Transition
+      className="fixed inset-0 z-[9999]"
+      animation="none"
+      appearOnMount
+      show={props.show}
+    >
+      <Overlay>
+        <Transition
+          isChild
+          appearOnMount
+          className="flex h-full w-full items-center justify-center"
+          animation="slide-up"
+        >
+          {props.children}
+        </Transition>
+      </Overlay>
+    </Transition>
+  );
 }

 export function Modal(props: Props) {
-  if (!props.show) return null;
-  return createPortal(<ModalFrame>{props.children}</ModalFrame>, document.body);
+  return createPortal(
+    <ModalFrame show={props.show}>{props.children}</ModalFrame>,
+    document.body
+  );
 }

 export function ModalCard(props: { children?: ReactNode }) {
  return (
-    <div className="relative w-4/5 max-w-[600px] overflow-hidden rounded-lg bg-denim-200 px-10 py-10">
+    <div className="relative mx-2 max-w-[600px] overflow-hidden rounded-lg bg-denim-200 px-10 py-10">
      {props.children}
    </div>
  );
--- a/src/setup/locales/en/translation.json
+++ b/src/setup/locales/en/translation.json
@ -79,9 +79,9 @@
				@@ -79,9 +79,9 @@
    }
  },
  "v3": {
-    "newSiteTitle": "We have a new site!",
+    "newSiteTitle": "Version 3 has released!",
    "newDomain": "https://movie-web.app",
-    "newDomainText": "We've moved from domain, you can now access our website on <0>https://movie-web.app</0>. Make sure to change all your bookmarks as <1>the old link will stop working on 25 Febuary 2023.</1>",
+    "newDomainText": "We have a new domain. You can now access our website on <0>https://movie-web.app</0>. Make sure to update all your bookmarks as <1>the old link will stop working on {{date}}.</1>",
    "tireless": "We've worked tirelessly on this new update, we hope you will enjoy what we've been cooking up for the past months."
  }
 }
--- a/src/views/other/v2Migration.tsx
+++ b/src/views/other/v2Migration.tsx
@ -1,5 +1,7 @@
				@@ -1,5 +1,7 @@
 import { useEffect, useState } from "react";
 import pako from "pako";
+import { MWMediaType } from "@/backend/metadata/types";
+import { conf } from "@/setup/config";

 function fromBinary(str: string): Uint8Array {
  const result = new Uint8Array(str.length);
@ -57,8 +59,13 @@ export function V2MigrationView() {
				@@ -57,8 +59,13 @@ export function V2MigrationView() {
    const newParams = [] as string[];
    newUrl.searchParams.forEach((_, key) => newParams.push(key));
    newParams.forEach((v) => newUrl.searchParams.delete(v));
+    newUrl.searchParams.append("migrated", "1");

-    newUrl.hash = "";
+    // hash router compatibility
+    newUrl.hash = conf().NORMAL_ROUTER ? "" : `/search/${MWMediaType.MOVIE}`;
+    newUrl.pathname = conf().NORMAL_ROUTER
+      ? `/search/${MWMediaType.MOVIE}`
+      : "";

    window.location.href = newUrl.toString();
  }, [done]);
--- a/src/views/search/HomeView.tsx
+++ b/src/views/search/HomeView.tsx
@ -1,5 +1,5 @@
				@@ -1,5 +1,5 @@
 import { Trans, useTranslation } from "react-i18next";
-import { Icon, Icons } from "@/components/Icon";
+import { Icons } from "@/components/Icon";
 import { SectionHeading } from "@/components/layout/SectionHeading";
 import { MediaGrid } from "@/components/media/MediaGrid";
 import {
@ -86,6 +86,7 @@ function NewDomainModal() {
				@@ -86,6 +86,7 @@ function NewDomainModal() {
  const [show, setShow] = useState(
    new URLSearchParams(window.location.search).get("migrated") === "1"
  );
+  const [loaded, setLoaded] = useState(false);
  const history = useHistory();
  const { t } = useTranslation();

@ -97,9 +98,41 @@ function NewDomainModal() {
				@@ -97,9 +98,41 @@ function NewDomainModal() {
    });
  }, [history]);

-  // Hi Isra! (TODO remove this in the future lol)
+  useEffect(() => {
+    setTimeout(() => {
+      setLoaded(true);
+    }, 500);
+  }, []);
+
+  // If you see this bit of code, don't snitch!
+  // We need to urge users to update their bookmarks and usage,
+  // so we're putting a fake deadline that's only 2 weeks away.
+  const day = 1e3 * 60 * 60 * 24;
+  const months = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
+  const firstVisitToSite = new Date(
+    localStorage.getItem("firstVisitToSite") || Date.now()
+  );
+  localStorage.setItem("firstVisitToSite", firstVisitToSite.toISOString());
+  const fakeEndResult = new Date(firstVisitToSite.getTime() + 14 * day);
+  const endDateString = `${fakeEndResult.getDate()} ${
+    months[fakeEndResult.getMonth()]
+  } ${fakeEndResult.getFullYear()}`;
+
  return (
-    <Modal show={show}>
+    <Modal show={show && loaded}>
      <ModalCard>
        <div className="mb-12">
          <div
@ -109,7 +142,7 @@ function NewDomainModal() {
				@@ -109,7 +142,7 @@ function NewDomainModal() {
            }}
          />
          <div className="relative flex items-center justify-center">
-            <div className="rounded-full bg-bink-200 py-4 px-12 text-xl font-bold text-white">
+            <div className="rounded-full bg-bink-200 py-4 px-12 text-center text-sm font-bold text-white md:text-xl">
              {t("v3.newDomain")}
            </div>
          </div>
@ -119,8 +152,8 @@ function NewDomainModal() {
				@@ -119,8 +152,8 @@ function NewDomainModal() {
            {t("v3.newSiteTitle")}
          </h2>
          <p className="leading-7">
-            <Trans i18nKey="v3.newDomainText">
-              <span className="font-bold text-white" />
+            <Trans i18nKey="v3.newDomainText" values={{ date: endDateString }}>
+              <span className="text-slate-300" />
              <span className="font-bold text-white" />
            </Trans>
          </p>