kris/roblox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

hello new update

Browse Source
This commit is contained in:
Kris
2025-07-23 23:34:43 +03:00
parent cb2b4f0d86
commit dfc8e21db1
16 changed files with 279 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
app/api/discovery/omni-recommendation/route.ts
View File

@@ -1,52 +0,0 @@
import { type NextRequest, NextResponse } from "next/server"
export async function GET(request: NextRequest) {
const { searchParams } = new URL(request.url);
const apiUrl = "https://apis.roblox.com/discovery-api/omni-recommendation";
const url = `${apiUrl}?${searchParams.toString()}`;
try {
const response = await fetch(url, {
headers: {
"User-Agent": "OCbwoy3ChanAI/1.0",
"Accept": "application/json, text/plain, */*",
"Accept-Encoding": "gzip, deflate, br, zstd",
"Content-Type": "application/json;charset=UTF-8",
"Cookie": request.headers.get("Authorization") || "",
},
});
return NextResponse.json(await response.json());
} catch (error) {
console.error("Error proxying request:", error);
return NextResponse.json({ error: "Internal Server Error" });
}
}
export async function POST(request: NextRequest) {
const { searchParams } = new URL(request.url);
const apiUrl = "https://apis.roblox.com/discovery-api/omni-recommendation";
const url = `${apiUrl}?${searchParams.toString()}`;
try {
const body = await request.json()
const response = await fetch(url, {
method: "POST",
headers: {
"User-Agent": "OCbwoy3ChanAI/1.0",
"Accept": "application/json, text/plain, */*",
"Accept-Encoding": "gzip, deflate, br, zstd",
"Content-Type": "application/json;charset=UTF-8",
"Cookie": request.headers.get("Authorization") || "",
},
body: JSON.stringify(body),
});
return NextResponse.json(await response.json());
} catch (error) {
console.error("Error proxying request:", error);
return NextResponse.json({ error: "Internal Server Error" });
}
}

64
app/api/proxy/route.ts Normal file
View File

@@ -0,0 +1,64 @@
async function proxyRequest(request: Request, method: string) {
const { searchParams } = new URL(request.url);
const target = searchParams.get("url");
if (!target) {
return new Response(
JSON.stringify({ error: "Missing `url` query parameter." }),
{
status: 400,
headers: { "Content-Type": "application/json" },
}
);
}
const targetUrl = new URL(target);
const headers = new Headers(request.headers);
headers.delete("host");
headers.delete("accept-encoding"); // ! important
const init: RequestInit = {
method,
headers,
body: method === "GET" || method === "HEAD" ? undefined : request.body,
};
if (init.body !== undefined) {
(init as any).duplex = "half";
}
const response = await fetch(targetUrl, init);
const responseHeaders = new Headers(response.headers);
responseHeaders.delete("content-encoding"); // ! important
return new Response(response.body, {
status: response.status,
headers: responseHeaders,
});
}
export async function GET(request: Request) {
return proxyRequest(request, "GET");
}
export async function HEAD(request: Request) {
return proxyRequest(request, "HEAD");
}
export async function POST(request: Request) {
return proxyRequest(request, "POST");
}
export async function PUT(request: Request) {
return proxyRequest(request, "PUT");
}
export async function DELETE(request: Request) {
return proxyRequest(request, "DELETE");
}
export async function PATCH(request: Request) {
return proxyRequest(request, "PATCH");
}

52
app/api/thumbnails/batch/route.ts
View File

@@ -1,52 +0,0 @@
import { type NextRequest, NextResponse } from "next/server"
export async function GET(request: NextRequest) {
const { searchParams } = new URL(request.url);
const apiUrl = "https://thumbnails.roblox.com/v1/batch";
const url = `${apiUrl}?${searchParams.toString()}`;
try {
const response = await fetch(url, {
headers: {
"User-Agent": "OCbwoy3ChanAI/1.0",
"Accept": "application/json, text/plain, */*",
"Accept-Encoding": "gzip, deflate, br, zstd",
"Content-Type": "application/json;charset=UTF-8",
"Cookie": request.headers.get("Authorization") || "",
},
});
return NextResponse.json(await response.json());
} catch (error) {
console.error("Error proxying request:", error);
return NextResponse.json({ error: "Internal Server Error" });
}
}
export async function POST(request: NextRequest) {
const { searchParams } = new URL(request.url);
const apiUrl = "https://thumbnails.roblox.com/v1/batch";
const url = `${apiUrl}?${searchParams.toString()}`;
try {
const body = await request.json()
const response = await fetch(url, {
method: "POST",
headers: {
"User-Agent": "OCbwoy3ChanAI/1.0",
"Accept": "application/json, text/plain, */*",
"Accept-Encoding": "gzip, deflate, br, zstd",
"Content-Type": "application/json;charset=UTF-8",
"Cookie": request.headers.get("Authorization") || "",
},
body: JSON.stringify(body),
});
return NextResponse.json(await response.json());
} catch (error) {
console.error("Error proxying request:", error);
return NextResponse.json({ error: "Internal Server Error" });
}
}

25
app/api/user/authenticated/route.ts
View File

@@ -1,25 +0,0 @@
import { type NextRequest, NextResponse } from "next/server"
export async function GET(request: NextRequest) {
const { searchParams } = new URL(request.url);
const apiUrl = "https://users.roblox.com/v1/users/authenticated";
const url = `${apiUrl}?${searchParams.toString()}`;
try {
const response = await fetch(url, {
headers: {
"User-Agent": "OCbwoy3ChanAI/1.0",
"Accept": "application/json, text/plain, */*",
"Accept-Encoding": "gzip, deflate, br, zstd",
"Content-Type": "application/json;charset=UTF-8",
"Cookie": request.headers.get("Authorization") || "",
},
});
return NextResponse.json(await response.json());
} catch (error) {
console.error("Error proxying request:", error);
return NextResponse.json({ error: "Internal Server Error" });
}
}

23
app/api/user/route.ts
View File

@@ -1,23 +0,0 @@
import { NextRequest, NextResponse } from 'next/server';
export async function GET(request: NextRequest) {
const u = new URL(request.url);
const apiUrl = `https://users.roblox.com/v1/users/${u.searchParams.get("id")}`;
try {
const response = await fetch(apiUrl, {
headers: {
"User-Agent": "OCbwoy3ChanAI/1.0",
"Accept": "application/json, text/plain, */*",
"Accept-Encoding": "gzip, deflate, br, zstd",
"Content-Type": "application/json;charset=UTF-8",
"Cookie": request.headers.get("Authorization") || "",
},
});
return NextResponse.json(await response.json());
} catch (error) {
console.error("Error proxying request:", error);
return NextResponse.json({ error: "Internal Server Error" });
}
}

40
app/page.tsx
View File

@@ -2,35 +2,29 @@
import { GameCard } from "@/components/gameCard";
import { HomeLoggedInHeader } from "@/components/loggedInHeader";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Card, CardContent } from "@/components/ui/card";
import {
getOmniRecommendationsHome,
OmniRecommendation,
} from "@/lib/omniRecommendation";
import { getCookie } from "@/lib/roblox";
import { loadThumbnails, ThumbnailRequest } from "@/lib/thumbnailLoader";
import { loadThumbnails } from "@/lib/thumbnailLoader";
import { useEffect, useState } from "react";
export default function Home() {
const [rec, setRec] = useState<OmniRecommendation | null>(null);
const SORTS_ALLOWED_IDS = [100000003, 100000001];
const [rec, setRec] = useState<OmniRecommendation | null>(null);
useEffect(() => {
(async () => {
const r = await getOmniRecommendationsHome();
console.log("[ROBLOX]", "got omni recommendation from api", r);
let th: ThumbnailRequest[] = [];
r.sorts.filter(a=>SORTS_ALLOWED_IDS.includes(a.topicId)).forEach(b=>{
(b.recommendationList || []).forEach(c=>{
th.push({
type: "GameThumbnail",
targetId: r.contentMetadata.Game[c.contentId.toString()].rootPlaceId,
format: "webp",
size: "384x216"
})
})
});
setRec(r);
loadThumbnails(th).catch(a=>console.error(a))
loadThumbnails(
Object.entries(r.contentMetadata.Game).map((a) => ({
type: "GameThumbnail",
targetId: Number(a[1].rootPlaceId),
format: "webp",
size: "384x216",
}))
).catch((a) => {});
})();
}, []);
@@ -41,7 +35,7 @@ export default function Home() {
<CardContent className="p-4">
<div className="h-[200px] flex items-center justify-center">
<div className="animate-pulse text-muted-foreground">
Loading...
{"Loading..."}
</div>
</div>
</CardContent>
@@ -52,15 +46,13 @@ export default function Home() {
return (
<div className="overflow-scroll no-scrollbar w-screen max-h-screen h-screen">
<HomeLoggedInHeader/>
{"roblox in nextjs"}<br/>
<span className="font-mono">{"require(\"@/lib/roblox\").getCookie().length = "}{getCookie().length}{";"}</span>
<HomeLoggedInHeader />
<div className="p-4 space-y-8 no-scrollbar">
{rec.sorts
.filter((a) => SORTS_ALLOWED_IDS.includes(a.topicId))
.map((sort, idx) => (
<div key={idx}>
<h1 className="text-2xl">{sort.topic}</h1>
<h1 className="text-2xl pb-2">{sort.topic}</h1>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
{(sort.recommendationList || []).map(
(recommendation, idxb) => {
@@ -68,7 +60,9 @@ export default function Home() {
rec.contentMetadata.Game[
recommendation.contentId.toString()
];
return <GameCard key={idxb} game={game} />;
return (
<GameCard key={idxb} game={game} />
);
}
)}
</div>

26
components/RobloxIcons.tsx Normal file
View File

@@ -0,0 +1,26 @@
import React from 'react';
const PremiumIcon = (props: React.SVGProps<SVGSVGElement>) => (
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 16 16"
{...props}
>
<defs>
<clipPath id="clip-path">
<path
d="M14,14V2H2V16a2,2,0,0,1-2-2V2A2,2,0,0,1,2,0H14a2,2,0,0,1,2,2V14a2,2,0,0,1-2,2H8V14ZM12,6v6H8V10h2V6H6V16H4V4h8Z"
/>
</clipPath>
</defs>
<title>premium_small</title>
<g id="premium">
<g clipPath="url(#clip-path)">
<rect x="-5" y="-5" width="26" height="26" fill="currentColor" />
</g>
</g>
</svg>
);
export default PremiumIcon;

30
components/gameCard.tsx
View File

@@ -1,14 +1,16 @@
import { useThumbnailLazyLoad } from "@/hooks/use-lazy-load";
"use client";
import { ContentMetadata } from "@/lib/omniRecommendation";
import LazyLoadedImage from "./lazyLoadedImage";
import { ContextMenu, ContextMenuContent, ContextMenuSeparator, ContextMenuTrigger } from "./ui/context-menu";
import { ContextMenuItem } from "@radix-ui/react-context-menu";
import React from "react";
interface GameCardProps {
game: ContentMetadata;
}
export function GameCard({ game }: GameCardProps) {
export const GameCard = React.memo(function GameCard({ game }: GameCardProps) {
return (
<ContextMenu>
<ContextMenuTrigger>
@@ -22,43 +24,37 @@ export function GameCard({ game }: GameCardProps) {
/>
) : (
<div className="w-full h-full flex items-center justify-center bg-muted">
<span className="text-muted-foreground">No image</span>
<span className="text-muted-foreground">{":("}</span>
</div>
)}
</div>
<div className="bg-muted-foreground flex right-2 bottom-2 absolute rounded-lg p-1 py-0">
<div className="bg-base flex right-2 bottom-2 absolute rounded-lg p-1 py-0">
{game.playerCount.toLocaleString()}
</div>
</div>
</ContextMenuTrigger>
<ContextMenuContent className="w-64">
<ContextMenuContent className="w-64 p-2 space-y-1">
<ContextMenuItem disabled className="text-xs text-muted-foreground">
{game.name}
</ContextMenuItem>
<ContextMenuItem disabled className="text-xs text-muted-foreground">
{Math.round((game.totalUpVotes/(game.totalUpVotes+game.totalDownVotes))*100)}% rating - {game.playerCount} players
{Math.round((game.totalUpVotes/(game.totalUpVotes+game.totalDownVotes))*100)}% rating - {game.playerCount.toLocaleString()} playing
</ContextMenuItem>
<ContextMenuSeparator/>
<ContextMenuItem onClick={()=>{window.location.href = (`https://roblox.com/games/${game.rootPlaceId}`)}}>
Open
<ContextMenuItem>
<a href={`https://roblox.com/games/${game.rootPlaceId}`}>Open URL</a>
</ContextMenuItem>
<ContextMenuItem onClick={()=>{window.location.href = (`roblox://placeId=${game.rootPlaceId}`)}}>
Play
</ContextMenuItem>
<ContextMenuSeparator/>
<ContextMenuItem onClick={()=>{navigator.clipboard.writeText(`https://roblox.com/games/${game.rootPlaceId}`)}}>
copy game url
</ContextMenuItem>
<ContextMenuItem onClick={()=>{navigator.clipboard.writeText(`${game.rootPlaceId}`)}}>
copy game id
Copy rootPlaceId
</ContextMenuItem>
<ContextMenuItem onClick={()=>{navigator.clipboard.writeText(`${game.universeId}`)}}>
copy universe id
</ContextMenuItem>
<ContextMenuItem onClick={()=>{navigator.clipboard.writeText(`roblox://placeId=${game.rootPlaceId}`)}}>
copy roblox:// uri
Copy universeId
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
);
}
});

13
components/lazyLoadedImage.tsx
View File

@@ -1,5 +1,6 @@
import React from 'react';
import { useThumbnailLazyLoad } from '@/hooks/use-lazy-load';
import { useThumbnailURL } from '@/hooks/use-lazy-load';
import { Skeleton } from './ui/skeleton';
interface LazyLoadedImageProps {
imgId: string;
@@ -7,15 +8,19 @@ interface LazyLoadedImageProps {
[prop: string]: string
}
const LazyLoadedImage: React.FC<LazyLoadedImageProps> = ({ imgId, alt, ...props }: LazyLoadedImageProps) => {
const imgUrl = useThumbnailLazyLoad(imgId);
const LazyLoadedImage: React.FC<React.ImgHTMLAttributes<HTMLImageElement> & LazyLoadedImageProps> = ({
imgId,
alt,
...props
}) => {
const imgUrl = useThumbnailURL(imgId);
return (
<div>
{imgUrl ? (
<img src={imgUrl} alt={alt} {...props} />
) : (
<p>Loading...</p>
<Skeleton {...props} />
)}
</div>
);

42
components/loggedInHeader.tsx
View File

@@ -1,11 +1,16 @@
"use client";
import {
getLoggedInUser,
getUserByUserId,
UserProfileDetails,
} from "@/lib/profile";
import { useEffect, useState } from "react";
import React, { useEffect, useState } from "react";
import LazyLoadedImage from "./lazyLoadedImage";
import { loadThumbnails } from "@/lib/thumbnailLoader";
import PremiumIcon from "./RobloxIcons";
export function HomeLoggedInHeader() {
export const HomeLoggedInHeader = React.memo(function HomeLoggedInHeader() {
const [profileDetails, setProfileDetails] =
useState<UserProfileDetails | null>(null);
@@ -17,15 +22,34 @@ export function HomeLoggedInHeader() {
}, []);
if (!profileDetails) {
return (<></>)
return <></>;
}
loadThumbnails([
{
type: "AvatarHeadShot",
targetId: profileDetails.id,
format: "webp",
size: "720x720",
},
]).catch(a => {});
return (
<div>
<span className="text-xl">Hello, {profileDetails.displayName}</span>
<span className="text-muted-foreground text-sm text-blue">{"@"}{profileDetails.name}</span>
<br/>
{profileDetails.id}
<div className="flex items-center gap-6 bg-base rounded-xl px-8 py-6 w-fit mt-8 ml-0">
<LazyLoadedImage
imgId={`AvatarHeadShot_${profileDetails.id}`}
alt=""
className="w-28 h-28 rounded-full border-4 border-base bg-base shadow-lg"
/>
<div className="flex flex-col justify-center">
<span className="text-3xl font-bold text-text flex items-center gap-2">
Hello, {profileDetails.displayName}
<PremiumIcon className="w-6 h-6 fill-transparent"/>
</span>
<span className="text-base text-subtext0 mt-1">
@{profileDetails.name}
</span>
</div>
</div>
);
}
});

30
hooks/use-lazy-load.ts
View File

@@ -1,24 +1,32 @@
import { useState, useEffect } from 'react';
let gameImages: { [id: string]: string } = {};
// Shared cache and listeners
const gameImages: { [id: string]: string } = {};
const listeners: { [id: string]: Set<(url: string) => void> } = {};
export function useThumbnailLazyLoad(img: string) {
const [status, setStatus] = useState<string | undefined>(undefined);
export function useThumbnailURL(img: string) {
const [status, setStatus] = useState<string | undefined>(gameImages[img]);
useEffect(() => {
const interval = setInterval(() => {
if (gameImages[img]) {
setStatus(gameImages[img]);
clearInterval(interval);
}
}, 100);
if (!listeners[img]) listeners[img] = new Set();
const update = (url: string) => setStatus(url);
listeners[img].add(update);
return () => clearInterval(interval);
}, []);
// If the image is already available, set it immediately
if (gameImages[img]) setStatus(gameImages[img]);
return () => {
listeners[img].delete(update);
if (listeners[img].size === 0) delete listeners[img];
};
}, [img]);
return status;
}
export function addThumbnail(id: string, url: string) {
gameImages[id] = url;
if (listeners[id]) {
listeners[id].forEach(cb => cb(url));
}
}

11
lib/omniRecommendation.ts
View File

@@ -1,6 +1,7 @@
"use client";
import { getCookie } from "./roblox";
import { proxyFetch } from "./utils";
type RecommendationEntry = {
contentType: "Game"|string,
@@ -59,11 +60,8 @@ export type OmniRecommendation = {
}
export async function getOmniRecommendationsHome(): Promise<OmniRecommendation> {
const data = await fetch(`${document.baseURI}api/discovery/omni-recommendation`,{
const data = await proxyFetch(`https://apis.roblox.com/discovery-api/omni-recommendation`,{
method: "POST",
headers: {
Authorization: `${getCookie()}`
},
body: JSON.stringify({
pageType: "Home",
sessionId: crypto.randomUUID(),
@@ -72,7 +70,10 @@ export async function getOmniRecommendationsHome(): Promise<OmniRecommendation>
cpuCores: 4,
maxResolution: "1920x1080",
maxMemory: 8192
})
}),
headers: {
"Content-Type": "application/json"
}
})
return await data.json() as OmniRecommendation
}

13
lib/profile.ts
View File

@@ -1,4 +1,5 @@
import { getCookie } from "./roblox"
import { proxyFetch } from "./utils"
export type UserProfileDetails = {
description: string,
@@ -16,11 +17,11 @@ export async function getLoggedInUser(): Promise<{
name: string,
displayName: string
}> {
const data = await fetch(`${document.baseURI}api/user/authenticated`, {
const data = await proxyFetch(`https://users.roblox.com/v1/users/authenticated`, {
method: "GET",
headers: {
Authorization: `${getCookie()}`
},
"Content-Type": "application/json"
}
})
return (await data.json() as any) as {
id: number,
@@ -30,11 +31,11 @@ export async function getLoggedInUser(): Promise<{
}
export async function getUserByUserId(userid: string): Promise<UserProfileDetails> {
const data = await fetch(`${document.baseURI}api/user?id=${userid}`, {
const data = await proxyFetch(`https://users.roblox.com/v1/users/${userid}`, {
method: "GET",
headers: {
Authorization: `${getCookie()}`
},
"Content-Type": "application/json"
}
})
return (await data.json() as any) as UserProfileDetails
}

10
lib/roblox.ts
View File

@@ -1,9 +1,5 @@
"use client";
export function setCookie(cookie: string): void {}
export function setCookie(cookie: string): void {
window.localStorage.roblosecurity = cookie;
}
export function getCookie() {
return window.localStorage.roblosecurity
export async function getCookie(): Promise<string> {
return "";
}

75
lib/thumbnailLoader.ts
View File

@@ -1,54 +1,67 @@
"use client";
import { addThumbnail } from "@/hooks/use-lazy-load";
import { getCookie } from "./roblox";
import { proxyFetch } from "./utils";
export type AssetThumbnail = {
requestId: string,
errorCode: number,
errorMessage: string,
targetId: number,
state: "Completed" | string,
imageUrl: string,
version: string
}
requestId: string;
errorCode: number;
errorMessage: string;
targetId: number;
state: "Completed" | string;
imageUrl: string;
version: string;
};
export type ThumbnailRequest = {
type: "GameThumbnail",
targetId: number,
format: "webp",
size: string
}
type: "GameThumbnail" | "AvatarHeadShot";
targetId: number;
format: "webp";
size: string;
};
export async function getThumbnails(b: ThumbnailRequest[]): Promise<AssetThumbnail[]> {
const data = await fetch(`${document.baseURI}api/thumbnails/batch`,{
/*
! WARNING: DO NOT USE
*/
export async function getThumbnails(
b: ThumbnailRequest[]
): Promise<AssetThumbnail[]> {
const batchSize = 50;
const results: AssetThumbnail[] = [];
for (let i = 0; i < b.length; i += batchSize) {
const batch = b.slice(i, i + batchSize);
const data = await proxyFetch(
`https://thumbnails.roblox.com/v1/batch`,
{
method: "POST",
headers: {
Authorization: `${getCookie()}`
},
body: JSON.stringify(
b.map(a=>{
return {
batch.map((a) => ({
requestId: `${a.targetId}::${a.type}:${a.size}:${a.format}:regular`,
type: a.type,
targetId: a.targetId,
token: "",
format: a.format,
size: a.size
size: a.size,
}))
),
headers: {
"Content-Type": "application/json",
},
}
})
)
})
return (await data.json() as any).data as AssetThumbnail[]
);
const json = await data.json();
json.data.forEach((a: AssetThumbnail) => {
// match GameThumbnail from 4972273297::GameThumbnail:384x216:webp:regular and any like- string
const ty = b.find((c) => c.targetId == a.targetId)!;
addThumbnail(ty.type + "_" + a.targetId.toString(), a.imageUrl);
});
results.push(...(json.data as AssetThumbnail[]));
}
return results;
}
export async function loadThumbnails(b: ThumbnailRequest[]): Promise<void> {
const th = await getThumbnails(b);
th.forEach(a=>{
// match GameThumbnail from 4972273297::GameThumbnail:384x216:webp:regular and any like- string
const ty = b.find(c=>c.targetId==a.targetId)!
addThumbnail(ty.type+'_'+a.targetId.toString(), a.imageUrl)
})
}
// https://apis.roblox.com/discovery-api/omni-recommendation

32
lib/utils.ts
View File

@@ -1,6 +1,32 @@
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
return twMerge(clsx(inputs));
}
export async function proxyFetch(
input: RequestInfo | URL,
init?: RequestInit
): Promise<Response> {
const url =
typeof input === "string"
? input
: input instanceof Request
? input.url
: "";
const proxyUrl = `/api/proxy?url=${encodeURIComponent(url)}`;
// fix headers
const headers = new Headers(init?.headers || {});
headers.delete("accept-encoding"); // prevent stupid encoding bug
const fetchInit: RequestInit = {
...init,
method: init?.method || "GET",
headers,
body: init?.body,
};
return window.fetch(proxyUrl, fetchInit);
}