Mega push (change a lot of stuff to be epic)

src/assets/locales/en.json

@@ -7,18 +7,22 @@
       "title": "Where does the content come from?"
     },
     "q2": {
+      "body": "I do not collect donations for sudo-flix. All donations go directly to the movie-web team's kofi",
+      "title": "Where do my donations go?"
+    },
+    "q3": {
       "body": "It's not possible to request a show or movie, sudo-flix does not manage any content. All content is viewed through sources on the internet.",
       "title": "Where can I request a show or movie?"
     },
-    "q3": {
+    "q4": {
       "body": "Our search results are powered by The Movie Database (TMDB) and display regardless of whether our sources actually have the content.",
       "title": "The search results display the show or movie, why can't I play it?"
     },
-    "q4": {
+    "q5": {
       "body": "All data is synced to the sudo-backend which is different than the community backend and is independently hosted by me, anyone is free to use this as well.",
       "title": "What about my data and stuff?"
     },
-    "q5": {
+    "q6": {
       "body": "Well sudo-flix has a twitter account that can be found in the footer of this page as well as a link to the source code on Github.",
       "title": "How can I find out more?"
     },

src/pages/About.tsx

@@ -67,11 +67,14 @@ export function AboutPage() {
             <Question title={t("about.q5.title")}>
               {t("about.q5.body")}
             </Question>,
+            <Question title={t("about.q6.title")}>
+              {t("about.q6.body")}
+            </Question>,
           ]}
         />
         <div
           style={{ display: "flex", justifyContent: "space-between" }}
-          className="w-full"
+          className="pt-2 w-full"
         >
           <Button
             className="py-px mt-8 box-content bg-buttons-secondary hover:bg-buttons-secondaryHover bg-opacity-90 text-buttons-secondaryText justify-center items-center"

src/pages/Support.tsx

@@ -7,6 +7,7 @@ import { ThinContainer } from "@/components/layout/ThinContainer";
 import { MwLink } from "@/components/text/Link";
 import { Heading1, Paragraph } from "@/components/utils/Text";
 import { PageTitle } from "@/pages/parts/util/PageTitle";
+import { Button } from "@/pages/TopFlix";
 import { conf } from "@/setup/config";
 
 import { SubPageLayout } from "./layouts/SubPageLayout";
@@ -70,6 +71,16 @@ export function SupportPage() {
               bold: <span className="font-bold" style={{ color: "#cfcfcf" }} />,
             }}
           />
+          <div className="pt-6">
+            <Button
+              className="py px-4 box-content bg-buttons-secondary hover:bg-buttons-secondaryHover bg-opacity-90 text-buttons-secondaryText justify-center items-center inline-block"
+              onClick={() =>
+                window.open("https://movie-web.github.io/docs", "_blank")
+              }
+            >
+              Movie-Web Docs
+            </Button>
+          </div>
         </Paragraph>
         <Ol
           items={[

src/pages/TopFlix.tsx

@@ -1,6 +1,6 @@
 import classNames from "classnames";
 import { ReactNode, useEffect, useState } from "react";
-import { Link, useNavigate } from "react-router-dom"; // Import Link from react-router-dom
+import { useNavigate } from "react-router-dom"; // Import Link from react-router-dom
 
 import { ThiccContainer } from "@/components/layout/ThinContainer";
 import { Divider } from "@/components/utils/Divider";
@@ -10,7 +10,7 @@ import { SubPageLayout } from "./layouts/SubPageLayout";
 // import { MediaGrid } from "@/components/media/MediaGrid"
 // import { TopFlixCard } from "@/components/media/FlixCard";
 
-function Button(props: {
+export function Button(props: {
   className: string;
   onClick?: () => void;
   children: React.ReactNode;
@@ -66,7 +66,7 @@ function ConfigValue(props: {
           {link ? (
             <p
               onClick={() => navigate(link)}
-              className="cursor-pointer hover:underline"
+              className="transition duration-200 hover:underline cursor-pointer"
             >
               {props.name}
             </p>
@@ -204,7 +204,7 @@ export function TopFlix() {
       });
     getTotalViews()
       .then((views) => {
-        setTotalViews(views);
+        setTotalViews(parseInt(views, 10).toLocaleString());
       })
       .catch((error) => {
         console.error("Error fetching total views:", error);
@@ -241,24 +241,28 @@ export function TopFlix() {
             The most popular movies on sudo-flix.lol, this data is fetched from
             the current backend deployment.
           </Paragraph>
-          <div className="mt-8 flex gap-2 w-auto">
+          <div className="mt-2 w-full">
-            <div className="bg-buttons-secondary rounded-xl scale-95 py-3 px-5 mb-2 inline-block">
+            <div className="flex justify-center">
-              <p className="font-bold bg-opacity-90 text-buttons-secondaryText">
+              <div className="bg-buttons-secondary rounded-xl scale-95 py-3 px-5 mb-2">
-                Server Lifetime: {timeSinceProcessStart}
+                <p className="font-bold text-buttons-secondaryText">
-              </p>
+                  Server Lifetime: {timeSinceProcessStart}
+                </p>
+              </div>
+              <div className="bg-buttons-secondary rounded-xl scale-95 py-3 px-5 mb-2">
+                <p className="font-bold text-buttons-secondaryText">
+                  Overall Views: {totalViews}
+                </p>
+              </div>
             </div>
-            <div className="bg-buttons-secondary rounded-xl scale-95 py-3 px-5 mb-2 inline-block">
+            <div className="flex justify-center">
-              <p className="font-bold bg-opacity-90 text-buttons-secondaryText">
+              <Button
-                Overall Views: {totalViews}
+                className="py-px w-60 box-content bg-buttons-secondary hover:bg-buttons-secondaryHover bg-opacity-90 text-buttons-secondaryText justify-center items-center inline-block"
-              </p>
+                onClick={() => navigate("/flix/sources")}
+              >
+                Most used providers
+              </Button>
             </div>
           </div>
-          {/* <Button
-            className="py-px w-60 box-content bg-buttons-secondary hover:bg-buttons-secondaryHover bg-opacity-90 text-buttons-secondaryText justify-center items-center"
-            onClick={() => navigate("/sources")}
-          >
-            Most used providers
-          </Button> */}
         </div>
 
         <div className="pl-6 pr-6">
@@ -276,7 +280,7 @@ export function TopFlix() {
                   item.providerId.slice(1)
                 }`}{" "}
                 <strong>-</strong> {`Views: `}
-                <strong>{item.count}</strong>
+                <strong>{parseInt(item.count, 10).toLocaleString()}</strong>
               </ConfigValue>
             );
           })}

src/pages/TopSources.tsx

@@ -1,32 +1,28 @@
 import { ReactNode, useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom"; // Import Link from react-router-dom
+import { useNavigate } from "react-router-dom";
 
 import { ThiccContainer } from "@/components/layout/ThinContainer";
 import { Divider } from "@/components/utils/Divider";
 import { Heading1, Paragraph } from "@/components/utils/Text";
 
 import { SubPageLayout } from "./layouts/SubPageLayout";
-// import { MediaGrid } from "@/components/media/MediaGrid"
+import { Button } from "./TopFlix";
-// import { TopFlixCard } from "@/components/media/FlixCard";
 
 function ConfigValue(props: { name: string; children?: ReactNode }) {
   return (
     <>
       <div className="flex">
         <p className="flex-1 font-bold text-white pr-5 pl-3">
-          <p>{props.name}</p>
+          <p className="cursor-default">{props.name}</p>
         </p>
         <p className="pr-3 cursor-default">{props.children}</p>
       </div>
-      <p className="pr-5 pl-3 cursor-default">
-        {/* props.type.charAt(0).toUpperCase() + props.type.slice(1) */}
-      </p>
       <Divider marginClass="my-3" />
     </>
   );
 }
 
-async function getRecentPlayedItems() {
+async function getTopSources() {
   const response = await fetch("https://backend.sudo-flix.lol/metrics");
   const text = await response.text();
 
@@ -57,15 +53,34 @@ async function getRecentPlayedItems() {
 
 export function TopSources() {
   const [recentPlayedItems, setRecentPlayedItems] = useState<any[]>([]);
+  const [failStatusCount, setFailStatusCount] = useState<number>(0);
+  const [successStatusCount, setSuccessStatusCount] = useState<number>(0);
+  const navigate = useNavigate();
 
   useEffect(() => {
-    getRecentPlayedItems()
+    getTopSources()
       .then((items) => {
         const limitedItems = items.filter(
           (item, index, self) =>
             index === self.findIndex((t2) => t2.providerId === item.providerId),
         );
         setRecentPlayedItems(limitedItems);
+
+        // Calculate fail and success status counts
+        const failCount = limitedItems.reduce(
+          (acc, item) =>
+            item.status === "failed" || item.status === "notfound"
+              ? acc + parseInt(item.count, 10)
+              : acc,
+          0,
+        );
+        const successCount = limitedItems.reduce(
+          (acc, item) =>
+            item.status === "success" ? acc + parseInt(item.count, 10) : acc,
+          0,
+        );
+        setFailStatusCount(failCount.toLocaleString());
+        setSuccessStatusCount(successCount.toLocaleString());
       })
       .catch((error) => {
         console.error("Error fetching recent played items:", error);
@@ -90,6 +105,28 @@ export function TopSources() {
             The most used providers on sudo-flix.lol, this data is fetched from
             the current backend deployment too.
           </Paragraph>
+          <div className="mt-2 w-full">
+            <div className="flex justify-center">
+              <div className="bg-buttons-secondary rounded-xl scale-95 py-3 px-5 mb-2">
+                <p className="font-bold text-buttons-secondaryText">
+                  Fail Count: {failStatusCount}
+                </p>
+              </div>
+              <div className="bg-buttons-secondary rounded-xl scale-95 py-3 px-5 mb-2">
+                <p className="font-bold text-buttons-secondaryText">
+                  Success Count: {successStatusCount}
+                </p>
+              </div>
+            </div>
+            <div className="flex justify-center">
+              <Button
+                className="py-px w-40 box-content bg-buttons-secondary hover:bg-buttons-secondaryHover bg-opacity-90 text-buttons-secondaryText justify-center items-center inline-block"
+                onClick={() => navigate("/flix")}
+              >
+                Go back
+              </Button>
+            </div>
+          </div>
         </div>
 
         <div className="pl-6 pr-6">
@@ -104,7 +141,7 @@ export function TopSources() {
                 }`}
               >
                 {`Requests: `}
-                <strong>{item.count}</strong>
+                <strong>{parseInt(item.count, 10).toLocaleString()}</strong>
               </ConfigValue>
             );
           })}