change tab description to tagline in en.json and turn maintace page into route and add twitter link to footer!

index.html

@@ -14,7 +14,7 @@
   <link rel="icon" href="/favicon.ico" />
   <meta name="viewport"
     content="width=device-width, initial-scale=1, viewport-fit=cover, maximum-scale=1.0, user-scalable=no" />
-  <meta name="description" content="A mirror of the place for your favourite movies & shows" />
+  <meta name="description" content="Watch your favorite shows and movies for free with no ads ever! (っ'ヮ'c)" />
   <link rel="manifest" href="/manifest.json" />
 
   <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

manifest.json

@@ -6,7 +6,7 @@
   "background_color": "#120f1d",
   "lang": "en",
   "scope": "/",
-  "description": "A mirror of the place for your favourite movies & shows",
+  "description": "Watch your favorite shows and movies for free with no ads ever! (っ'ヮ'c)",
   "theme_color": "#120f1d",
   "icons": [
     {

src/assets/locales/en.json

@@ -87,7 +87,8 @@
     "links": {
       "discord": "Discord",
       "dmca": "DMCA",
-      "github": "GitHub"
+      "github": "GitHub",
+      "twitter": "Twitter"
     },
     "tagline": "Watch your favorite shows and movies for free with no ads ever! (っ'ヮ'c)"
   },

src/components/Icon.tsx

@@ -19,6 +19,7 @@ export enum Icons {
   DRAGON = "dragon",
   WARNING = "warning",
   MOVIE_WEB = "movieWeb",
+  TWITTER = "twitter",
   DISCORD = "discord",
   GITHUB = "github",
   PLAY = "play",
@@ -89,6 +90,7 @@ const iconList: Record<Icons, string> = {
   arrowRight: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>`,
   movieWeb: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20.927 20.927"><path d="M18.186,4.5V6.241H16.445V4.5H9.482V6.241H7.741V4.5H6V20.168H7.741V18.427H9.482v1.741h6.964V18.427h1.741v1.741h1.741V4.5Zm-8.7,12.186H7.741V14.945H9.482Zm0-3.482H7.741V11.464H9.482Zm0-3.482H7.741V7.982H9.482Zm8.7,6.964H16.445V14.945h1.741Zm0-3.482H16.445V11.464h1.741Zm0-3.482H16.445V7.982h1.741Z" transform="translate(10.018 -7.425) rotate(45)" fill="currentColor"/></svg>`,
   discord: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path fill="currentColor" d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"/></svg>`,
+  twitter: `<svg xmlns="http://www.w3.org/2000/svg" width="0.93em" height="0.93em" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="currentColor" d="M459.4 151.7c.3 4.5 .3 9.1 .3 13.6 0 138.7-105.6 298.6-298.6 298.6-59.5 0-114.7-17.2-161.1-47.1 8.4 1 16.6 1.3 25.3 1.3 49.1 0 94.2-16.6 130.3-44.8-46.1-1-84.8-31.2-98.1-72.8 6.5 1 13 1.6 19.8 1.6 9.4 0 18.8-1.3 27.6-3.6-48.1-9.7-84.1-52-84.1-103v-1.3c14 7.8 30.2 12.7 47.4 13.3-28.3-18.8-46.8-51-46.8-87.4 0-19.5 5.2-37.4 14.3-53 51.7 63.7 129.3 105.3 216.4 109.8-1.6-7.8-2.6-15.9-2.6-24 0-57.8 46.8-104.9 104.9-104.9 30.2 0 57.5 12.7 76.7 33.1 23.7-4.5 46.5-13.3 66.6-25.3-7.8 24.4-24.4 44.8-46.1 57.8 21.1-2.3 41.6-8.1 60.4-16.2-14.3 20.8-32.2 39.3-52.6 54.3z"/></svg>`,
   github: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 496 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>`,
   play: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" style="transform: translateX(5%)" height="1em" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path fill="currentColor" d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg>`,
   pause: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path fill="currentColor" d="M48 64C21.5 64 0 85.5 0 112V400c0 26.5 21.5 48 48 48H80c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H48zm192 0c-26.5 0-48 21.5-48 48V400c0 26.5 21.5 48 48 48h32c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H240z"/></svg>`,

src/components/layout/Footer.tsx

@@ -58,6 +58,7 @@ function Dmca() {
 
 export function Footer() {
   const { t } = useTranslation();
+  const TWITTER_LINK = "https://twitter.com/SudoFlix";
 
   return (
     <footer className="mt-16 border-t border-type-divider py-16 md:py-8">
@@ -81,6 +82,9 @@ export function Footer() {
           <FooterLink icon={Icons.DISCORD} href={conf().DISCORD_LINK}>
             {t("footer.links.discord")}
           </FooterLink>
+          <FooterLink icon={Icons.TWITTER} href={conf().TWITTER_LINK}>
+            {t("footer.links.twitter")}
+          </FooterLink>
           <div className="inline md:hidden">
             <Dmca />
           </div>

src/pages/errors/MaintenancePage.tsx

@@ -0,0 +1,57 @@
+import { Helmet } from "react-helmet-async";
+import { Trans, useTranslation } from "react-i18next";
+
+import { Button } from "@/components/buttons/Button";
+import { Icons } from "@/components/Icon";
+import { IconPill } from "@/components/layout/IconPill";
+import { Navigation } from "@/components/layout/Navigation";
+import { Title } from "@/components/text/Title";
+import { Paragraph } from "@/components/utils/Text";
+import { ErrorContainer, ErrorLayout } from "@/pages/layouts/ErrorLayout";
+
+type MaintenancePageProps = {
+  onHomeButtonClick: () => void;
+};
+
+function MaintenancePage({ onHomeButtonClick }: MaintenancePageProps) {
+  const { t } = useTranslation();
+
+  return (
+    <div className="relative flex flex-1 flex-col">
+      <Navigation />
+      <Helmet>
+        <title>{t("downtimeNotice.title")}</title>
+      </Helmet>
+      <div className="flex h-full flex-1 flex-col items-center justify-center p-5 text-center">
+        <ErrorLayout>
+          <ErrorContainer>
+            <IconPill icon={Icons.WARNING}>
+              {t("downtimeNotice.badge")}
+            </IconPill>
+            <Title>{t("downtimeNotice.title")}</Title>
+            <Paragraph>{t("downtimeNotice.message")}</Paragraph>
+            <Trans
+              i18nKey="downtimeNotice.timeFrame"
+              components={{
+                bold: (
+                  <span className="font-bold" style={{ color: "#cfcfcf" }} />
+                ),
+              }}
+            />
+            <div className="flex gap-3">
+              <Button
+                onClick={onHomeButtonClick}
+                theme="purple"
+                className="mt-6"
+              >
+                {t("downtimeNotice.goHome")}
+              </Button>
+            </div>
+          </ErrorContainer>
+        </ErrorLayout>
+      </div>
+    </div>
+  );
+}
+
+export default MaintenancePage;

src/setup/App.tsx

@@ -1,7 +1,5 @@
 import { Analytics } from "@vercel/analytics/react";
 import { ReactElement, Suspense, lazy, useEffect, useState } from "react";
-import { Helmet } from "react-helmet-async";
-import { Trans, useTranslation } from "react-i18next";
 import { lazyWithPreload } from "react-lazy-with-preload";
 import {
   Navigate,
@@ -14,20 +12,14 @@ import {
 
 import { convertLegacyUrl, isLegacyUrl } from "@/backend/metadata/getmeta";
 import { generateQuickSearchMediaUrl } from "@/backend/metadata/tmdb";
-import { Button } from "@/components/buttons/Button";
-import { Icons } from "@/components/Icon";
-import { IconPill } from "@/components/layout/IconPill";
-import { Navigation } from "@/components/layout/Navigation";
-import { Title } from "@/components/text/Title";
-import { Paragraph } from "@/components/utils/Text";
 import { useOnlineListener } from "@/hooks/usePing";
 import { AboutPage } from "@/pages/About";
 import { AdminPage } from "@/pages/admin/AdminPage";
 import VideoTesterView from "@/pages/developer/VideoTesterView";
 import { DmcaPage, shouldHaveDmcaPage } from "@/pages/Dmca";
+import MaintenancePage from "@/pages/errors/MaintenancePage";
 import { NotFoundPage } from "@/pages/errors/NotFoundPage";
 import { HomePage } from "@/pages/HomePage";
-import { ErrorContainer, ErrorLayout } from "@/pages/layouts/ErrorLayout";
 import { LoginPage } from "@/pages/Login";
 import { OnboardingPage } from "@/pages/onboarding/Onboarding";
 import { OnboardingExtensionPage } from "@/pages/onboarding/OnboardingExtension";
@@ -96,8 +88,7 @@ function QueryView() {
 function App() {
   useHistoryListener();
   useOnlineListener();
-  const { t } = useTranslation();
+  const maintenance = false; // Changing to true shows maintenance page
-  const maintenance = false;
   const [showDowntime, setShowDowntime] = useState(maintenance);
 
   const handleButtonClick = () => {
@@ -178,43 +169,7 @@ function App() {
         </Routes>
       )}
       {showDowntime && (
-        <div className="relative flex flex-1 flex-col">
+        <MaintenancePage onHomeButtonClick={handleButtonClick} />
-          <Navigation />
-          <Helmet>
-            <title>{t("downtimeNotice.title")}</title>
-          </Helmet>
-          <div className="flex h-full flex-1 flex-col items-center justify-center p-5 text-center">
-            <ErrorLayout>
-              <ErrorContainer>
-                <IconPill icon={Icons.WARNING}>
-                  {t("downtimeNotice.badge")}
-                </IconPill>
-                <Title>{t("downtimeNotice.title")}</Title>
-                <Paragraph>{t("downtimeNotice.message")}</Paragraph>
-                <Trans
-                  i18nKey="downtimeNotice.timeFrame"
-                  components={{
-                    bold: (
-                      <span
-                        className="font-bold"
-                        style={{ color: "#cfcfcf" }}
-                      />
-                    ),
-                  }}
-                />
-                <div className="flex gap-3">
-                  <Button
-                    onClick={handleButtonClick}
-                    theme="purple"
-                    className="mt-6"
-                  >
-                    {t("downtimeNotice.goHome")}
-                  </Button>
-                </div>
-              </ErrorContainer>
-            </ErrorLayout>
-          </div>
-        </div>
       )}
       <Analytics />
     </Layout>

src/setup/config.ts

@@ -4,6 +4,7 @@ import {
   DISCORD_LINK,
   DONATION_LINK,
   GITHUB_LINK,
+  TWITTER_LINK,
 } from "./constants";
 
 interface Config {
@@ -12,6 +13,7 @@ interface Config {
   DONATION_LINK: string;
   DISCORD_LINK: string;
   DMCA_EMAIL: string;
+  TWITTER_LINK: string;
   TMDB_READ_API_KEY: string;
   CORS_PROXY_URL: string;
   NORMAL_ROUTER: boolean;
@@ -31,6 +33,7 @@ export interface RuntimeConfig {
   DONATION_LINK: string;
   DISCORD_LINK: string;
   DMCA_EMAIL: string | null;
+  TWITTER_LINK: string;
   TMDB_READ_API_KEY: string | null;
   NORMAL_ROUTER: boolean;
   PROXY_URLS: string[];
@@ -50,6 +53,7 @@ const env: Record<keyof Config, undefined | string> = {
   GITHUB_LINK: undefined,
   DONATION_LINK: undefined,
   DISCORD_LINK: undefined,
+  TWITTER_LINK: undefined,
   ONBOARDING_CHROME_EXTENSION_INSTALL_LINK:
     "https://chrome.google.com/webstore/detail/movie-web-extension/hoffoikpiofojilgpofjhnkkamfnnhmm?hl=en-GB",
   ONBOARDING_FIREFOX_EXTENSION_INSTALL_LINK: import.meta.env
@@ -91,6 +95,7 @@ export function conf(): RuntimeConfig {
     GITHUB_LINK,
     DONATION_LINK,
     DISCORD_LINK,
+    TWITTER_LINK,
     DMCA_EMAIL: getKey("DMCA_EMAIL"),
     ONBOARDING_CHROME_EXTENSION_INSTALL_LINK: getKey(
       "ONBOARDING_CHROME_EXTENSION_INSTALL_LINK",

src/setup/constants.ts

@@ -1,6 +1,7 @@
 export const APP_VERSION = import.meta.env.PACKAGE_VERSION;
 export const DISCORD_LINK = "https://movie-web.github.io/links/discord";
 export const GITHUB_LINK = "https://github.com/sudo-flix/sudo-source";
+export const TWITTER_LINK = "https://twitter.com/SudoFlix";
 export const DONATION_LINK = "https://ko-fi.com/movieweb";
 export const GA_ID = import.meta.env.VITE_GA_ID;
 export const BACKEND_URL = import.meta.env.VITE_BACKEND_URL;