mirror of https://github.com/sussy-code/smov.git
Sexy page :)
This commit is contained in:
Cooper Ransom
parent
0889d7ff27
commit
a3a06b168a
|
|
@ -0,0 +1,20 @@
|
|||
window.__CONFIG__ = {
|
||||
// The URL for the CORS proxy, the URL must NOT end with a slash!
|
||||
// If not specified, the onboarding will not allow a "default setup". The user will have to use the extension or set up a proxy themselves
|
||||
VITE_CORS_PROXY_URL: "https://sudo-proxy.up.railway.app",
|
||||
|
||||
// The READ API key to access TMDB
|
||||
VITE_TMDB_READ_API_KEY: "eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJhZTljNGE2ZDE1ZDFiODZiNzdlMWQyYmI5ZGY0MzdmYyIsInN1YiI6IjY1YjNmMWI0NTk0Yzk0MDE2MzNkZDBjNSIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.kAX7TkbKuJkNty6IsjcCLnoENFicVZn6d6DkLQsy3p8",
|
||||
|
||||
// The DMCA email displayed in the footer, null to hide the DMCA link
|
||||
VITE_DMCA_EMAIL: null,
|
||||
|
||||
// Whether to disable hash-based routing, leave this as false if you don't know what this is
|
||||
VITE_NORMAL_ROUTER: true,
|
||||
|
||||
// The backend URL to communicate with
|
||||
VITE_BACKEND_URL: "https://backend.sudo-flix.lol",
|
||||
|
||||
// A comma separated list of disallowed IDs in the case of a DMCA claim - in the format "series-<id>" and "movie-<id>"
|
||||
VITE_DISALLOWED_IDS: "",
|
||||
};
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="24" fill="#fff" viewBox="0 -960 960 960" width="24"><path d="M300-240q25 0 42.5-17.5T360-300q0-25-17.5-42.5T300-360q-25 0-42.5 17.5T240-300q0 25 17.5 42.5T300-240Zm0-360q25 0 42.5-17.5T360-660q0-25-17.5-42.5T300-720q-25 0-42.5 17.5T240-660q0 25 17.5 42.5T300-600Zm180 180q25 0 42.5-17.5T540-480q0-25-17.5-42.5T480-540q-25 0-42.5 17.5T420-480q0 25 17.5 42.5T480-420Zm180 180q25 0 42.5-17.5T720-300q0-25-17.5-42.5T660-360q-25 0-42.5 17.5T600-300q0 25 17.5 42.5T660-240Zm0-360q25 0 42.5-17.5T720-660q0-25-17.5-42.5T660-720q-25 0-42.5 17.5T600-660q0 25 17.5 42.5T660-600ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Z"/></svg>
|
||||
|
After Width: | Height: | Size: 744 B |
|
|
@ -109,8 +109,6 @@
|
|||
"pages": {
|
||||
"about": "About",
|
||||
"dmca": "DMCA",
|
||||
"topSources": "Top Sources",
|
||||
"topFlix": "Top Flix",
|
||||
"discover": "Discover",
|
||||
"support": "Support",
|
||||
"login": "Login",
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@ export function AboutPage() {
|
|||
className="py-px mt-8 box-content bg-buttons-secondary hover:bg-buttons-secondaryHover bg-opacity-90 text-buttons-secondaryText justify-center items-center"
|
||||
onClick={() => navigate("/flix")}
|
||||
>
|
||||
Top Flix
|
||||
Discover
|
||||
</Button>
|
||||
<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"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import classNames from "classnames";
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { LazyLoadImage } from "react-lazy-load-image-component";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
|
@ -11,6 +10,7 @@ import { WideContainer } from "@/components/layout/WideContainer";
|
|||
import { HomeLayout } from "@/pages/layouts/HomeLayout";
|
||||
import { conf } from "@/setup/config";
|
||||
|
||||
import { PageTitle } from "./parts/util/PageTitle";
|
||||
import { get } from "../backend/metadata/tmdb";
|
||||
import { Icon, Icons } from "../components/Icon";
|
||||
|
||||
|
|
@ -142,7 +142,14 @@ export function TopFlix() {
|
|||
language: "en-US",
|
||||
});
|
||||
|
||||
setTVGenres(data.genres);
|
||||
// Shuffle the array of genres
|
||||
for (let i = data.genres.length - 1; i > 0; i -= 1) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[data.genres[i], data.genres[j]] = [data.genres[j], data.genres[i]];
|
||||
}
|
||||
|
||||
// Fetch only the first 5 TV show genres
|
||||
setTVGenres(data.genres.slice(0, 5));
|
||||
} catch (error) {
|
||||
console.error("Error fetching TV show genres:", error);
|
||||
}
|
||||
|
|
@ -156,7 +163,8 @@ export function TopFlix() {
|
|||
const fetchTVShowsForGenre = async (genreId: number) => {
|
||||
try {
|
||||
const tvShows: any[] = [];
|
||||
for (let page = 1; page <= pagesToFetch; page += 1) {
|
||||
for (let page = 1; page <= 5; page += 1) {
|
||||
// Fetch only 5 pages
|
||||
const data = await get<any>("/discover/tv", {
|
||||
api_key: conf().TMDB_READ_API_KEY,
|
||||
with_genres: genreId.toString(),
|
||||
|
|
@ -236,73 +244,59 @@ export function TopFlix() {
|
|||
? `${category} Programmes`
|
||||
: `${category} Movies`;
|
||||
return (
|
||||
<div className="relative overflow-hidden mt-4">
|
||||
<h2 className="text-2xl font-bold text-white sm:text-3xl md:text-2xl mx-auto pl-10">
|
||||
<div className="relative overflow-hidden mt-4 rounded-xl">
|
||||
<h2 className="text-2xl font-bold text-white sm:text-3xl md:text-2xl mx-auto pl-2">
|
||||
{displayCategory}
|
||||
</h2>
|
||||
<div
|
||||
id={`carousel-${categorySlug}`}
|
||||
className="flex whitespace-nowrap overflow-auto scroll-snap-x-mandatory pb-4 mt-4 pl-10"
|
||||
className="flex whitespace-nowrap overflow-auto scroll-snap-x-mandatory mb-4 mt-4"
|
||||
ref={(el) => {
|
||||
carouselRefs.current[categorySlug] = el;
|
||||
}}
|
||||
style={{ overflowX: "hidden" }}
|
||||
>
|
||||
{medias.slice(0, 5).map((media) => (
|
||||
{medias.slice(0, 20).map((media) => (
|
||||
<a
|
||||
key={media.id}
|
||||
href={`media/tmdb-${isTVShow ? "tv" : "movie"}-${media.id}-${
|
||||
isTVShow ? media.name : media.title
|
||||
}`}
|
||||
rel="noopener noreferrer"
|
||||
className="block text-center relative overflow-hidden transition-transform transform hover:scale-105 mr-4"
|
||||
style={{ flex: "0 0 auto", width: movieWidth }} // Set a fixed width for each movie
|
||||
className="block text-center relative overflow-hidden transition-transform transform hover:scale-95 mr-4"
|
||||
style={{ flex: `0 0 ${movieWidth}` }} // Set a fixed width for each movie
|
||||
>
|
||||
<LazyLoadImage
|
||||
src={`https://image.tmdb.org/t/p/w500${media.poster_path}`}
|
||||
alt={isTVShow ? media.name : media.title}
|
||||
className="rounded-xl mb-2"
|
||||
className="rounded-xl"
|
||||
effect="blur"
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "auto",
|
||||
transform: "scale(1)",
|
||||
height: "100%",
|
||||
transition: "opacity 0.3s, transform 0.3s",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="absolute inset-0 rounded-xl flex items-center justify-center text-white font-bold opacity-0 hover:opacity-100 transition-opacity"
|
||||
style={{
|
||||
backdropFilter: "blur(0px)",
|
||||
transition: "opacity 0.5s",
|
||||
backgroundColor: "rgba(0, 0, 0, 0.5)", // Darkening effect
|
||||
whiteSpace: "normal", // Allow the text to wrap to the next line
|
||||
wordWrap: "break-word", // Break words to prevent overflow
|
||||
}}
|
||||
>
|
||||
<p className="text-sm m-4">
|
||||
{isTVShow ? media.name : media.title}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
type="button" // Added type attribute with value "button"
|
||||
title="Back"
|
||||
className="absolute top-1/2 transform -translate-y-1/2 z-10"
|
||||
className="absolute top-1/2 transform -translate-y-1/2 z-10 left-2"
|
||||
onClick={() => scrollCarousel(categorySlug, "left")}
|
||||
>
|
||||
<div className="cursor-pointer hover:text-white flex justify-center items-center h-10 w-10 rounded-full hover:bg-search-hoverBackground active:scale-110 transition-[transform,background-color] duration-200">
|
||||
<div className="cursor-pointer text-white flex justify-center items-center h-10 w-10 rounded-full bg-search-hoverBackground active:scale-110 transition-[transform,background-color] duration-200">
|
||||
<Icon icon={Icons.ARROW_LEFT} />
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
type="button" // Added type attribute with value "button"
|
||||
title="Next"
|
||||
className="absolute top-1/2 right-4 transform -translate-y-1/2 z-10"
|
||||
className="absolute top-1/2 right-2 transform -translate-y-1/2 z-10"
|
||||
onClick={() => scrollCarousel(categorySlug, "right")}
|
||||
>
|
||||
<div className="cursor-pointer hover:text-white flex justify-center items-center h-10 w-10 rounded-full hover:bg-search-hoverBackground active:scale-110 transition-[transform,background-color] duration-200">
|
||||
<div className="cursor-pointer text-white flex justify-center items-center h-10 w-10 rounded-full bg-search-hoverBackground active:scale-110 transition-[transform,background-color] duration-200">
|
||||
<Icon icon={Icons.ARROW_RIGHT} />
|
||||
</div>
|
||||
</button>
|
||||
|
|
@ -343,7 +337,14 @@ export function TopFlix() {
|
|||
language: "en-US",
|
||||
});
|
||||
|
||||
setGenres(data.genres);
|
||||
// Shuffle the array of genres
|
||||
for (let i = data.genres.length - 1; i > 0; i -= 1) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[data.genres[i], data.genres[j]] = [data.genres[j], data.genres[i]];
|
||||
}
|
||||
|
||||
// Fetch only the first 5 genres
|
||||
setGenres(data.genres.slice(0, 5));
|
||||
} catch (error) {
|
||||
console.error("Error fetching genres:", error);
|
||||
}
|
||||
|
|
@ -357,7 +358,8 @@ export function TopFlix() {
|
|||
const fetchMoviesForGenre = async (genreId: number) => {
|
||||
try {
|
||||
const movies: any[] = [];
|
||||
for (let page = 1; page <= pagesToFetch; page += 1) {
|
||||
for (let page = 1; page <= 5; page += 1) {
|
||||
// Fetch only 5 pages
|
||||
const data = await get<any>("/discover/movie", {
|
||||
api_key: conf().TMDB_READ_API_KEY,
|
||||
with_genres: genreId.toString(),
|
||||
|
|
@ -378,6 +380,7 @@ export function TopFlix() {
|
|||
|
||||
genres.forEach((genre) => fetchMoviesForGenre(genre.id));
|
||||
}, [genres]);
|
||||
|
||||
useEffect(() => {
|
||||
let countdownInterval: NodeJS.Timeout;
|
||||
if (countdown !== null && countdown > 0) {
|
||||
|
|
@ -395,10 +398,8 @@ export function TopFlix() {
|
|||
|
||||
return (
|
||||
<HomeLayout showBg={showBg}>
|
||||
<div className="mb-16 sm:mb-24">
|
||||
<Helmet>
|
||||
<title>{t("global.name")}</title>
|
||||
</Helmet>
|
||||
<div className="mb-16 sm:mb-2">
|
||||
<PageTitle subpage k="global.pages.discover" />
|
||||
<ThinContainer>
|
||||
<div className="mt-44 space-y-16 text-center">
|
||||
<div className="relative z-10 mb-16">
|
||||
|
|
@ -411,25 +412,27 @@ export function TopFlix() {
|
|||
</div>
|
||||
<WideContainer>
|
||||
<>
|
||||
<div className="flex items-center justify-center mt-6 mb-6">
|
||||
<div className="flex items-center justify-center mb-6">
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center space-x-2 rounded-full px-4 text-white py-2 bg-pill-background bg-opacity-50 hover:bg-pill-backgroundHover transition-[background,transform] duration-100 hover:scale-105"
|
||||
onClick={handleRandomMovieClick}
|
||||
disabled={countdown !== null && countdown > 0} // Disable the button during the countdown
|
||||
>
|
||||
<img
|
||||
src="https://cdn-icons-png.flaticon.com/512/4058/4058790.png"
|
||||
alt="Small Image"
|
||||
style={{
|
||||
width: "20px", // Adjust the width as needed
|
||||
height: "20px", // Adjust the height as needed
|
||||
marginRight: "10px", // Add margin-right
|
||||
}}
|
||||
/>
|
||||
{countdown !== null && countdown > 0
|
||||
? `Playing in ${countdown} seconds`
|
||||
: "Watch a Random Movie"}
|
||||
<span className="flex items-center space-x-2">
|
||||
{countdown !== null && countdown > 0
|
||||
? `Playing in ${countdown} seconds`
|
||||
: "Watch Something New"}
|
||||
<img
|
||||
src="/lightbar-images/dice.svg"
|
||||
alt="Small Image"
|
||||
style={{
|
||||
width: "20px", // Adjust the width as needed
|
||||
height: "20px", // Adjust the height as needed
|
||||
marginLeft: "10px", // Add margin-right
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
{randomMovie && (
|
||||
|
|
|
|||
|
|
@ -1,154 +0,0 @@
|
|||
import { ReactNode, useEffect, useState } from "react";
|
||||
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 { PageTitle } from "./parts/util/PageTitle";
|
||||
import { Button } from "./TopFlix";
|
||||
|
||||
function ConfigValue(props: { name: string; children?: ReactNode }) {
|
||||
return (
|
||||
<>
|
||||
<div className="flex">
|
||||
<p className="flex-1 font-bold text-white pr-5 pl-3">
|
||||
<p className="cursor-default">{props.name}</p>
|
||||
</p>
|
||||
<p className="pr-3 cursor-default">{props.children}</p>
|
||||
</div>
|
||||
<Divider marginClass="my-3" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
async function getTopSources() {
|
||||
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[]>([]);
|
||||
const [failStatusCount, setFailStatusCount] = useState<number>(0);
|
||||
const [successStatusCount, setSuccessStatusCount] = useState<number>(0);
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
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);
|
||||
});
|
||||
}, []);
|
||||
|
||||
function getItemsForCurrentPage() {
|
||||
const sortedItems = recentPlayedItems.sort((a, b) => b.count - a.count);
|
||||
|
||||
return sortedItems.map((item, index) => ({
|
||||
...item,
|
||||
rank: index + 1,
|
||||
}));
|
||||
}
|
||||
|
||||
return (
|
||||
<SubPageLayout>
|
||||
<ThiccContainer>
|
||||
<PageTitle subpage k="global.pages.topSources" />
|
||||
<div className="mt-8 w-full px-8 cursor-default">
|
||||
<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 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">
|
||||
<Divider marginClass="my-3" />
|
||||
{getItemsForCurrentPage().map((item) => {
|
||||
return (
|
||||
<ConfigValue
|
||||
key={item.tmdbFullId}
|
||||
name={`${
|
||||
item.providerId.charAt(0).toUpperCase() +
|
||||
item.providerId.slice(1)
|
||||
}`}
|
||||
>
|
||||
{`Requests: `}
|
||||
<strong>{parseInt(item.count, 10).toLocaleString()}</strong>
|
||||
</ConfigValue>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</ThiccContainer>
|
||||
</SubPageLayout>
|
||||
);
|
||||
}
|
||||
|
|
@ -26,7 +26,6 @@ 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";
|
||||
|
|
@ -153,7 +152,6 @@ 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"
|
||||
|
|
|
|||
|
|
@ -26,7 +26,6 @@ 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";
|
||||
|
|
@ -87,7 +86,6 @@ function QueryView() {
|
|||
return null;
|
||||
}
|
||||
|
||||
// Duplicate of @/src/setup/App.tsx
|
||||
function App() {
|
||||
useHistoryListener();
|
||||
useOnlineListener();
|
||||
|
|
@ -154,7 +152,6 @@ 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"
|
||||
|
|
@ -182,3 +179,5 @@ function App() {
|
|||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
|
|
|||
Loading…
Reference in New Issue