Add top sources page (/flix/sources)

src/pages/TopFlix.tsx

@@ -1,6 +1,6 @@
 import classNames from "classnames";
 import { ReactNode, useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom"; // Import Link from react-router-dom
+import { Link, useNavigate } from "react-router-dom"; // Import Link from react-router-dom
 
 import { ThiccContainer } from "@/components/layout/ThinContainer";
 import { Divider } from "@/components/utils/Divider";
@@ -183,6 +183,7 @@ export function TopFlix() {
   const [timeSinceProcessStart, setTimeSinceProcessStart] = useState<
     string | null
   >(null);
+  const navigate = useNavigate();
 
   useEffect(() => {
     getRecentPlayedItems()
@@ -252,6 +253,12 @@ export function TopFlix() {
               </p>
             </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">

src/pages/TopSources.tsx

@@ -0,0 +1,115 @@
+import { ReactNode, useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom"; // Import Link 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 { 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>
+        <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() {
+  const response = await fetch("https://backend.sudo-flix.lol/metrics");
+  const text = await response.text();
+
+  const regex =
+    /mw_provider_status_count{provider_id="([^"]+)",status="([^"]+)"} (\d+)/g;
+  let match = regex.exec(text);
+  const items: { [key: string]: any } = {};
+
+  while (match !== null) {
+    const [_, providerId, status, count] = match;
+    if (items[providerId]) {
+      items[providerId].count += parseInt(count, 10);
+    } else {
+      items[providerId] = {
+        providerId,
+        status,
+        count: parseInt(count, 10),
+      };
+    }
+    match = regex.exec(text);
+  }
+
+  if (Object.keys(items).length > 0) {
+    return Object.values(items);
+  }
+  throw new Error("RECENT_PLAYED_ITEMS not found");
+}
+
+export function TopSources() {
+  const [recentPlayedItems, setRecentPlayedItems] = useState<any[]>([]);
+
+  useEffect(() => {
+    getRecentPlayedItems()
+      .then((items) => {
+        const limitedItems = items.filter(
+          (item, index, self) =>
+            index === self.findIndex((t2) => t2.providerId === item.providerId),
+        );
+        setRecentPlayedItems(limitedItems);
+      })
+      .catch((error) => {
+        console.error("Error fetching recent played items:", error);
+      });
+  }, []);
+
+  function getItemsForCurrentPage() {
+    const sortedItems = recentPlayedItems.sort((a, b) => b.count - a.count);
+
+    return sortedItems.map((item, index) => ({
+      ...item,
+      rank: index + 1,
+    }));
+  }
+
+  return (
+    <SubPageLayout>
+      <ThiccContainer>
+        <div className="mt-8 w-full px-8">
+          <Heading1>Top sources</Heading1>
+          <Paragraph className="mb-6">
+            The most used providers on sudo-flix.lol, this data is fetched from
+            the current backend deployment too.
+          </Paragraph>
+        </div>
+
+        <div className="pl-6 pr-6">
+          <Divider marginClass="my-3" />
+          {getItemsForCurrentPage().map((item) => {
+            return (
+              <ConfigValue
+                key={item.tmdbFullId}
+                name={`${
+                  item.providerId.charAt(0).toUpperCase() +
+                  item.providerId.slice(1)
+                }`}
+              >
+                {`Requests: `}
+                <strong>{item.count}</strong>
+              </ConfigValue>
+            );
+          })}
+        </div>
+      </ThiccContainer>
+    </SubPageLayout>
+  );
+}

src/setup/App.tsx

@@ -26,6 +26,7 @@ import { OnboardingProxyPage } from "@/pages/onboarding/OnboardingProxy";
 import { RegisterPage } from "@/pages/Register";
 import { SupportPage } from "@/pages/Support";
 import { TopFlix } from "@/pages/TopFlix";
+import { TopSources } from "@/pages/TopSources";
 import { Layout } from "@/setup/Layout";
 import { useHistoryListener } from "@/stores/history";
 import { LanguageProvider } from "@/stores/language";
@@ -152,6 +153,7 @@ function App() {
           <Route path="/support" element={<SupportPage />} />
           {/* Top flix page */}
           <Route path="/flix" element={<TopFlix />} />
+          <Route path="/flix/sources" element={<TopSources />} />
           {/* Settings page */}
           <Route
             path="/settings"