mirror of
https://github.com/sussy-code/smov.git
synced 2024-12-20 14:37:43 +01:00
Make the top-flix page
This commit is contained in:
Cooper Ransom
parent
2a5fc9a851
commit
22041f67d0
4 changed files with 184 additions and 145 deletions
|
|
@ -18,6 +18,18 @@ export function ThinContainer(props: ThinContainerProps) {
|
|||
);
|
||||
}
|
||||
|
||||
export function ThiccContainer(props: ThinContainerProps) {
|
||||
return (
|
||||
<div
|
||||
className={`mx-auto w-[1250px] max-w-full px-8 sm:px-0 ${
|
||||
props.classNames || ""
|
||||
}`}
|
||||
>
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function CenterContainer(props: ThinContainerProps) {
|
||||
return (
|
||||
<div
|
||||
|
|
|
|||
169
src/pages/TopFlix.tsx
Normal file
169
src/pages/TopFlix.tsx
Normal file
|
|
@ -0,0 +1,169 @@
|
|||
import classNames from "classnames";
|
||||
import { ReactNode, useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { getMediaPoster } from "@/backend/metadata/tmdb";
|
||||
import { Icon, Icons } from "@/components/Icon";
|
||||
import { ThiccContainer } from "@/components/layout/ThinContainer";
|
||||
import { Divider } from "@/components/utils/Divider";
|
||||
import { Heading1, Heading2, Paragraph } from "@/components/utils/Text";
|
||||
import { ConfigValuesPart } from "@/pages/parts/admin/ConfigValuesPart";
|
||||
import { TMDBTestPart } from "@/pages/parts/admin/TMDBTestPart";
|
||||
import { WorkerTestPart } from "@/pages/parts/admin/WorkerTestPart";
|
||||
|
||||
import { SubPageLayout } from "./layouts/SubPageLayout";
|
||||
|
||||
function Button(props: {
|
||||
className: string;
|
||||
onClick?: () => void;
|
||||
children: React.ReactNode;
|
||||
disabled?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
className={classNames(
|
||||
"font-bold rounded h-10 w-40 scale-95 hover:scale-100 transition-all duration-200",
|
||||
props.className,
|
||||
)}
|
||||
type="button"
|
||||
onClick={props.onClick}
|
||||
disabled={props.disabled}
|
||||
>
|
||||
{props.children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function ConfigValue(props: { name: string; children?: ReactNode }) {
|
||||
return (
|
||||
<>
|
||||
<div className="flex">
|
||||
<p className="flex-1 font-bold text-white pr-5">{props.name}</p>
|
||||
<p>{props.children}</p>
|
||||
</div>
|
||||
<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_media_watch_count{tmdb_full_id="([^"]+)",provider_id="([^"]+)",title="([^"]+)",success="([^"]+)"} (\d+)/g;
|
||||
let match;
|
||||
const loop = true;
|
||||
const items: { [key: string]: any } = {};
|
||||
|
||||
while (loop) {
|
||||
match = regex.exec(text);
|
||||
if (match === null) break;
|
||||
|
||||
const [_, tmdbFullId, providerId, title, success, count] = match;
|
||||
if (items[tmdbFullId]) {
|
||||
items[tmdbFullId].count += parseInt(count, 10);
|
||||
} else {
|
||||
items[tmdbFullId] = {
|
||||
tmdbFullId,
|
||||
providerId,
|
||||
title,
|
||||
success: success === "true",
|
||||
count: parseInt(count, 10),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
if (Object.keys(items).length > 0) {
|
||||
return Object.values(items);
|
||||
}
|
||||
throw new Error("RECENT_PLAYED_ITEMS not found");
|
||||
}
|
||||
|
||||
export function TopFlix() {
|
||||
const [recentPlayedItems, setRecentPlayedItems] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const { t } = useTranslation();
|
||||
const itemsPerPage = 10;
|
||||
|
||||
useEffect(() => {
|
||||
getRecentPlayedItems()
|
||||
.then((items) => {
|
||||
const uniqueItems = items.filter(
|
||||
(item, index, self) =>
|
||||
index === self.findIndex((t2) => t2.tmdbFullId === item.tmdbFullId),
|
||||
);
|
||||
|
||||
setRecentPlayedItems(uniqueItems);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error fetching recent played items:", error);
|
||||
})
|
||||
.finally(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
function getItemsForCurrentPage() {
|
||||
const sortedItems = recentPlayedItems.sort((a, b) => b.count - a.count);
|
||||
const startIndex = (currentPage - 1) * itemsPerPage;
|
||||
const endIndex = startIndex + itemsPerPage;
|
||||
return sortedItems.slice(startIndex, endIndex);
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<p className="flex items-center justify-center h-screen">Loading...</p>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<SubPageLayout>
|
||||
<ThiccContainer>
|
||||
<Heading1>Top flix</Heading1>
|
||||
<Paragraph className="mb-18">
|
||||
The most popular movies on sudo-flix.lol, this data is fetched from
|
||||
the current backend deployment.
|
||||
</Paragraph>
|
||||
|
||||
<div className="mt-8 w-full max-w-none">
|
||||
<Divider marginClass="my-3" />
|
||||
{getItemsForCurrentPage().map((item) => {
|
||||
const successText = item.success ? "Yes" : "No"; // Convert bool to "Yes" or "No"
|
||||
const coverUrl = getMediaPoster(item.tmdbFullId);
|
||||
return (
|
||||
<ConfigValue key={item.tmdbFullId} name={item.title}>
|
||||
{`${item.providerId} - Provided: ${successText}, Views: ${item.count}`}
|
||||
<img src={coverUrl} alt={item.title} />
|
||||
</ConfigValue>
|
||||
);
|
||||
})}
|
||||
<div style={{ display: "flex", justifyContent: "space-between" }}>
|
||||
<Button
|
||||
className="py-px box-content bg-buttons-secondary hover:bg-buttons-secondaryHover bg-opacity-90 text-buttons-secondaryText justify-center items-center"
|
||||
onClick={() => setCurrentPage(currentPage - 1)}
|
||||
disabled={currentPage === 1}
|
||||
>
|
||||
Previous page
|
||||
</Button>
|
||||
<div>
|
||||
Page {currentPage} of{" "}
|
||||
{Math.ceil(recentPlayedItems.length / itemsPerPage)}
|
||||
</div>
|
||||
<Button
|
||||
className="py-px box-content bg-buttons-secondary hover:bg-buttons-secondaryHover bg-opacity-90 text-buttons-secondaryText justify-center items-center"
|
||||
onClick={() => setCurrentPage(currentPage + 1)}
|
||||
disabled={
|
||||
currentPage ===
|
||||
Math.ceil(recentPlayedItems.length / itemsPerPage)
|
||||
}
|
||||
>
|
||||
Next page
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</ThiccContainer>
|
||||
</SubPageLayout>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,10 +1,4 @@
|
|||
import classNames from "classnames";
|
||||
import { ReactNode, useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { Icon, Icons } from "@/components/Icon";
|
||||
import { ThinContainer } from "@/components/layout/ThinContainer";
|
||||
import { Divider } from "@/components/utils/Divider";
|
||||
import { Heading1, Heading2, Paragraph } from "@/components/utils/Text";
|
||||
import { SubPageLayout } from "@/pages/layouts/SubPageLayout";
|
||||
import { ConfigValuesPart } from "@/pages/parts/admin/ConfigValuesPart";
|
||||
|
|
@ -13,109 +7,7 @@ import { WorkerTestPart } from "@/pages/parts/admin/WorkerTestPart";
|
|||
|
||||
import { BackendTestPart } from "../parts/admin/BackendTestPart";
|
||||
|
||||
function Button(props: {
|
||||
className: string;
|
||||
onClick?: () => void;
|
||||
children: React.ReactNode;
|
||||
disabled?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
className={classNames(
|
||||
"font-bold rounded h-10 w-40 scale-95 hover:scale-100 transition-all duration-200",
|
||||
props.className,
|
||||
)}
|
||||
type="button"
|
||||
onClick={props.onClick}
|
||||
disabled={props.disabled}
|
||||
>
|
||||
{props.children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function ConfigValue(props: { name: string; children?: ReactNode }) {
|
||||
return (
|
||||
<>
|
||||
<div className="flex">
|
||||
<p className="flex-1 font-bold text-white pr-5">{props.name}</p>
|
||||
<p>{props.children}</p>
|
||||
</div>
|
||||
<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_media_watch_count{tmdb_full_id="([^"]+)",provider_id="([^"]+)",title="([^"]+)",success="([^"]+)"} (\d+)/g;
|
||||
let match;
|
||||
const loop = true;
|
||||
const items: { [key: string]: any } = {};
|
||||
|
||||
while (loop) {
|
||||
match = regex.exec(text);
|
||||
if (match === null) break;
|
||||
|
||||
const [_, tmdbFullId, providerId, title, success, count] = match;
|
||||
if (items[tmdbFullId]) {
|
||||
items[tmdbFullId].count += parseInt(count, 10);
|
||||
} else {
|
||||
items[tmdbFullId] = {
|
||||
tmdbFullId,
|
||||
providerId,
|
||||
title,
|
||||
success: success === "true",
|
||||
count: parseInt(count, 10),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
if (Object.keys(items).length > 0) {
|
||||
return Object.values(items);
|
||||
}
|
||||
throw new Error("RECENT_PLAYED_ITEMS not found");
|
||||
}
|
||||
|
||||
export function AdminPage() {
|
||||
const [recentPlayedItems, setRecentPlayedItems] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const { t } = useTranslation();
|
||||
const itemsPerPage = 10;
|
||||
|
||||
useEffect(() => {
|
||||
getRecentPlayedItems()
|
||||
.then((items) => {
|
||||
const uniqueItems = items.filter(
|
||||
(item, index, self) =>
|
||||
index === self.findIndex((t2) => t2.tmdbFullId === item.tmdbFullId),
|
||||
);
|
||||
|
||||
setRecentPlayedItems(uniqueItems);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error fetching recent played items:", error);
|
||||
})
|
||||
.finally(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
function getItemsForCurrentPage() {
|
||||
const sortedItems = recentPlayedItems.sort((a, b) => b.count - a.count);
|
||||
const startIndex = (currentPage - 1) * itemsPerPage;
|
||||
const endIndex = startIndex + itemsPerPage;
|
||||
return sortedItems.slice(startIndex, endIndex);
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return <p>Loading...</p>;
|
||||
}
|
||||
|
||||
return (
|
||||
<SubPageLayout>
|
||||
<ThinContainer>
|
||||
|
|
@ -126,43 +18,6 @@ export function AdminPage() {
|
|||
<BackendTestPart />
|
||||
<WorkerTestPart />
|
||||
<TMDBTestPart />
|
||||
<div className="mt-8 w-full max-w-none">
|
||||
<Heading2 className="mb-8">Recently Played List</Heading2>
|
||||
<p className="mb-8">
|
||||
This data is fetched from the current backend deployment.
|
||||
</p>
|
||||
{getItemsForCurrentPage().map((item) => {
|
||||
const successText = item.success ? "Yes" : "No"; // Convert bool to "Yes" or "No"
|
||||
return (
|
||||
<ConfigValue key={item.tmdbFullId} name={item.title}>
|
||||
{`${item.providerId} - Provided: ${successText}, Views: ${item.count}`}
|
||||
</ConfigValue>
|
||||
);
|
||||
})}
|
||||
<div style={{ display: "flex", justifyContent: "space-between" }}>
|
||||
<Button
|
||||
className="py-px box-content bg-buttons-secondary hover:bg-buttons-secondaryHover bg-opacity-90 text-buttons-secondaryText justify-center items-center"
|
||||
onClick={() => setCurrentPage(currentPage - 1)}
|
||||
disabled={currentPage === 1}
|
||||
>
|
||||
Previous page
|
||||
</Button>
|
||||
<div>
|
||||
Page {currentPage} of{" "}
|
||||
{Math.ceil(recentPlayedItems.length / itemsPerPage)}
|
||||
</div>
|
||||
<Button
|
||||
className="py-px box-content bg-buttons-secondary hover:bg-buttons-secondaryHover bg-opacity-90 text-buttons-secondaryText justify-center items-center"
|
||||
onClick={() => setCurrentPage(currentPage + 1)}
|
||||
disabled={
|
||||
currentPage ===
|
||||
Math.ceil(recentPlayedItems.length / itemsPerPage)
|
||||
}
|
||||
>
|
||||
Next page
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</ThinContainer>
|
||||
</SubPageLayout>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ import { OnboardingExtensionPage } from "@/pages/onboarding/OnboardingExtension"
|
|||
import { OnboardingProxyPage } from "@/pages/onboarding/OnboardingProxy";
|
||||
import { RegisterPage } from "@/pages/Register";
|
||||
import { SupportPage } from "@/pages/Support";
|
||||
import { TopFlix } from "@/pages/TopFlix";
|
||||
import { Layout } from "@/setup/Layout";
|
||||
import { useHistoryListener } from "@/stores/history";
|
||||
import { LanguageProvider } from "@/stores/language";
|
||||
|
|
@ -149,6 +150,8 @@ function App() {
|
|||
) : null}
|
||||
{/* Support page */}
|
||||
<Route path="/support" element={<SupportPage />} />
|
||||
{/* Top flix page */}
|
||||
<Route path="/flix" element={<TopFlix />} />
|
||||
{/* Settings page */}
|
||||
<Route
|
||||
path="/settings"
|
||||
|
|
|
|||
Loading…
Reference in a new issue