voldemort/CDRM-Project
1
0
Fork 0
forked from tpd94/CDRM-Project
Code Pull Requests Activity

add prettier formatting

Browse Source
This commit is contained in:
voldemort 2025-07-22 17:45:48 +07:00
parent a82a3fd106
commit 2828edd6b7
22 changed files with 5069 additions and 4906 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
cdrm-frontend/.gitignore vendored
View File

@ -10,6 +10,7 @@ lerna-debug.log*
node_modules node_modules
dist-ssr dist-ssr
*.local *.local
dist
# Editor directories and files # Editor directories and files
.vscode/* .vscode/*

5
cdrm-frontend/.prettierignore Normal file
View File

@ -0,0 +1,5 @@
dist/
node_modules/
src/assets/icons/
src/components/Functions/protobuf.min.js
src/components/Functions/license_protocol.min.js

8
cdrm-frontend/.prettierrc.json Normal file
View File

@ -0,0 +1,8 @@
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": true,
"singleQuote": false,
"useTabs": false,
"printWidth": 100
}

29
cdrm-frontend/eslint.config.js
View File

@ -1,33 +1,30 @@
import js from '@eslint/js' import js from "@eslint/js";
import globals from 'globals' import globals from "globals";
import reactHooks from 'eslint-plugin-react-hooks' import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from 'eslint-plugin-react-refresh' import reactRefresh from "eslint-plugin-react-refresh";
export default [ export default [
{ ignores: ['dist'] }, { ignores: ["dist"] },
{ {
files: ['**/*.{js,jsx}'], files: ["**/*.{js,jsx}"],
languageOptions: { languageOptions: {
ecmaVersion: 2020, ecmaVersion: 2020,
globals: globals.browser, globals: globals.browser,
parserOptions: { parserOptions: {
ecmaVersion: 'latest', ecmaVersion: "latest",
ecmaFeatures: { jsx: true }, ecmaFeatures: { jsx: true },
sourceType: 'module', sourceType: "module",
}, },
}, },
plugins: { plugins: {
'react-hooks': reactHooks, "react-hooks": reactHooks,
'react-refresh': reactRefresh, "react-refresh": reactRefresh,
}, },
rules: { rules: {
...js.configs.recommended.rules, ...js.configs.recommended.rules,
...reactHooks.configs.recommended.rules, ...reactHooks.configs.recommended.rules,
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }], "no-unused-vars": ["error", { varsIgnorePattern: "^[A-Z_]" }],
'react-refresh/only-export-components': [ "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
'warn',
{ allowConstantExport: true },
],
}, },
}, },
] ];

14
cdrm-frontend/index.html
View File

@ -4,13 +4,13 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favico.png" /> <link rel="icon" type="image/svg+xml" href="/favico.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="{{ data.description }}"/> <meta name="description" content="{{ data.description }}" />
<meta name="keywords" content="{{ data.keywords }}"/> <meta name="keywords" content="{{ data.keywords }}" />
<meta property='og:title' content="{{ data.opengraph_title }}" /> <meta property="og:title" content="{{ data.opengraph_title }}" />
<meta property='og:description' content="{{ data.opengraph_description }}" /> <meta property="og:description" content="{{ data.opengraph_description }}" />
<meta property='og:image' content="{{ data.opengraph_image }}" /> <meta property="og:image" content="{{ data.opengraph_image }}" />
<meta property='og:url' content="{{ data.opengraph_url }}" /> <meta property="og:url" content="{{ data.opengraph_url }}" />
<meta property='og:locale' content='en_US' /> <meta property="og:locale" content="en_US" />
<title>{{ data.tab_title }}</title> <title>{{ data.tab_title }}</title>
</head> </head>
<body class="w-full h-full"> <body class="w-full h-full">

875
cdrm-frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

30
cdrm-frontend/package.json
View File

@ -10,24 +10,24 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@tailwindcss/vite": "^4.1.4", "@tailwindcss/vite": "^4.1.11",
"axios": "^1.9.0", "axios": "^1.10.0",
"react": "^19.0.0", "react": "^19.1.0",
"react-dom": "^19.0.0", "react-dom": "^19.1.0",
"react-helmet": "^6.1.0", "react-helmet": "^6.1.0",
"react-router-dom": "^7.5.2", "react-router-dom": "^7.7.0",
"shaka-player": "^4.14.9", "shaka-player": "^4.15.8",
"tailwindcss": "^4.1.4" "tailwindcss": "^4.1.11"
}, },
"devDependencies": { "devDependencies": {
"@eslint/js": "^9.22.0", "@eslint/js": "^9.31.0",
"@types/react": "^19.0.10", "@types/react": "^19.1.8",
"@types/react-dom": "^19.0.4", "@types/react-dom": "^19.1.6",
"@vitejs/plugin-react": "^4.3.4", "@vitejs/plugin-react": "^4.7.0",
"eslint": "^9.22.0", "eslint": "^9.31.0",
"eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.19", "eslint-plugin-react-refresh": "^0.4.20",
"globals": "^16.0.0", "globals": "^16.3.0",
"vite": "^6.3.1" "vite": "^7.0.5"
} }
} }

10
cdrm-frontend/src/App.jsx
View File

@ -17,12 +17,18 @@ function App() {
{/* The SideMenu should be visible when isMenuOpen is true */} {/* The SideMenu should be visible when isMenuOpen is true */}
<SideMenu isMenuOpen={isMenuOpen} setIsMenuOpen={setIsMenuOpen} /> <SideMenu isMenuOpen={isMenuOpen} setIsMenuOpen={setIsMenuOpen} />
<div id="navbarcontainer" className="hidden lg:flex lg:w-2xs bg-gray-950/55 border-r border-white/5 shrink-0"> <div
id="navbarcontainer"
className="hidden lg:flex lg:w-2xs bg-gray-950/55 border-r border-white/5 shrink-0"
>
<NavBar /> <NavBar />
</div> </div>
<div id="maincontainer" className="w-full lg:w-5/6 bg-gray-950/50 flex flex-col grow"> <div id="maincontainer" className="w-full lg:w-5/6 bg-gray-950/50 flex flex-col grow">
<div id="navbarmaincontainer" className="w-full lg:hidden h-16 bg-gray-950/10 border-b border-white/5 sticky top-0 z-10"> <div
id="navbarmaincontainer"
className="w-full lg:hidden h-16 bg-gray-950/10 border-b border-white/5 sticky top-0 z-10"
>
<NavBarMain setIsMenuOpen={setIsMenuOpen} /> <NavBarMain setIsMenuOpen={setIsMenuOpen} />
</div> </div>

48
cdrm-frontend/src/components/Functions/ParseChallenge.jsx
View File

@ -5,8 +5,8 @@ const { SignedMessage, LicenseRequest } = protobuf.roots.default.license_protoco
function uint8ArrayToBase64(uint8Array) { function uint8ArrayToBase64(uint8Array) {
const binaryString = Array.from(uint8Array) const binaryString = Array.from(uint8Array)
.map(b => String.fromCharCode(b)) .map((b) => String.fromCharCode(b))
.join(''); .join("");
return btoa(binaryString); return btoa(binaryString);
} }
@ -17,10 +17,13 @@ function parseFetch(fetchString) {
// Use a more lenient regex to capture the fetch pattern (including complex bodies) // Use a more lenient regex to capture the fetch pattern (including complex bodies)
const fetchRegex = /fetch\(['"](.+?)['"],\s*(\{.+?\})\)/s; // Non-greedy match for JSON const fetchRegex = /fetch\(['"](.+?)['"],\s*(\{.+?\})\)/s; // Non-greedy match for JSON
const lines = fetchString.split('\n').map(line => line.trim()).filter(Boolean); const lines = fetchString
.split("\n")
.map((line) => line.trim())
.filter(Boolean);
const result = { const result = {
method: 'UNDEFINED', method: "UNDEFINED",
url: '', url: "",
headers: {}, headers: {},
body: null, body: null,
}; };
@ -47,9 +50,12 @@ function parseFetch(fetchString) {
return result; return result;
} }
const WIDEVINE_SYSTEM_ID = new Uint8Array([
const WIDEVINE_SYSTEM_ID = new Uint8Array([0xed, 0xef, 0x8b, 0xa9, 0x79, 0xd6, 0x4a, 0xce, 0xa3, 0xc8, 0x27, 0xdc, 0xd5, 0x1d, 0x21, 0xed]); 0xed, 0xef, 0x8b, 0xa9, 0x79, 0xd6, 0x4a, 0xce, 0xa3, 0xc8, 0x27, 0xdc, 0xd5, 0x1d, 0x21, 0xed,
const PLAYREADY_SYSTEM_ID = new Uint8Array([0x9a, 0x04, 0xf0, 0x79, 0x98, 0x40, 0x42, 0x86, 0xab, 0x92, 0xe6, 0x5b, 0xe0, 0x88, 0x5f, 0x95]); ]);
const PLAYREADY_SYSTEM_ID = new Uint8Array([
0x9a, 0x04, 0xf0, 0x79, 0x98, 0x40, 0x42, 0x86, 0xab, 0x92, 0xe6, 0x5b, 0xe0, 0x88, 0x5f, 0x95,
]);
const PSSH_MAGIC = new Uint8Array([0x70, 0x73, 0x73, 0x68]); const PSSH_MAGIC = new Uint8Array([0x70, 0x73, 0x73, 0x68]);
function intToUint8Array(num, endian) { function intToUint8Array(num, endian) {
@ -75,22 +81,22 @@ function psshDataToPsshBoxB64(pssh_data, system_id) {
...new Uint8Array(4), ...new Uint8Array(4),
...system_id, ...system_id,
...intToUint8Array(dataLength, false), ...intToUint8Array(dataLength, false),
...pssh_data ...pssh_data,
]); ]);
return uint8ArrayToBase64(pssh); return uint8ArrayToBase64(pssh);
} }
function wrmHeaderToPlayReadyHeader(wrm_header){ function wrmHeaderToPlayReadyHeader(wrm_header) {
const playready_object = new Uint8Array([ const playready_object = new Uint8Array([
...shortToUint8Array(1, true), ...shortToUint8Array(1, true),
...shortToUint8Array(wrm_header.length, true), ...shortToUint8Array(wrm_header.length, true),
...wrm_header ...wrm_header,
]); ]);
return new Uint8Array([ return new Uint8Array([
...intToUint8Array(playready_object.length + 2 + 4, true), ...intToUint8Array(playready_object.length + 2 + 4, true),
...shortToUint8Array(1, true), ...shortToUint8Array(1, true),
...playready_object ...playready_object,
]); ]);
} }
@ -105,7 +111,7 @@ function encodeUtf16LE(str) {
} }
function stringToUint8Array(string) { function stringToUint8Array(string) {
return Uint8Array.from(string.split("").map(x => x.charCodeAt())); return Uint8Array.from(string.split("").map((x) => x.charCodeAt()));
} }
export async function readTextFromClipboard() { export async function readTextFromClipboard() {
@ -136,11 +142,15 @@ export async function readTextFromClipboard() {
license_request = LicenseRequest.decode(signed_message.msg); license_request = LicenseRequest.decode(signed_message.msg);
} catch (decodeError) { } catch (decodeError) {
// If error occurs during decoding, return an empty pssh // If error occurs during decoding, return an empty pssh
console.error('Decoding failed, returning empty pssh', decodeError); console.error("Decoding failed, returning empty pssh", decodeError);
pssh_data_string = ''; // Empty pssh if decoding fails pssh_data_string = ""; // Empty pssh if decoding fails
} }
if (license_request && license_request.contentId && license_request.contentId.widevinePsshData) { if (
license_request &&
license_request.contentId &&
license_request.contentId.widevinePsshData
) {
const pssh_data = license_request.contentId.widevinePsshData.psshData[0]; const pssh_data = license_request.contentId.widevinePsshData.psshData[0];
pssh_data_string = psshDataToPsshBoxB64(pssh_data, WIDEVINE_SYSTEM_ID); pssh_data_string = psshDataToPsshBoxB64(pssh_data, WIDEVINE_SYSTEM_ID);
} }
@ -160,14 +170,12 @@ export async function readTextFromClipboard() {
document.getElementById("pssh").value = pssh_data_string; document.getElementById("pssh").value = pssh_data_string;
document.getElementById("data").value = payload_string; document.getElementById("data").value = payload_string;
} catch (error) { } catch (error) {
console.error('Failed to read clipboard contents:', error); console.error("Failed to read clipboard contents:", error);
} }
} }
// Helper function to check if the data is binary // Helper function to check if the data is binary
function isBinary(uint8Array) { function isBinary(uint8Array) {
// Check for non-text (non-ASCII) bytes (basic heuristic) // Check for non-text (non-ASCII) bytes (basic heuristic)
return uint8Array.some(byte => byte > 127); // Non-ASCII byte indicates binary return uint8Array.some((byte) => byte > 127); // Non-ASCII byte indicates binary
} }

72
cdrm-frontend/src/components/NavBar.jsx
View File

@ -1,26 +1,26 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from "react";
import { NavLink } from 'react-router-dom'; import { NavLink } from "react-router-dom";
import homeIcon from '../assets/icons/home.svg'; import homeIcon from "../assets/icons/home.svg";
import cacheIcon from '../assets/icons/cache.svg'; import cacheIcon from "../assets/icons/cache.svg";
import apiIcon from '../assets/icons/api.svg'; import apiIcon from "../assets/icons/api.svg";
import testPlayerIcon from '../assets/icons/testplayer.svg'; import testPlayerIcon from "../assets/icons/testplayer.svg";
import accountIcon from '../assets/icons/account.svg'; import accountIcon from "../assets/icons/account.svg";
import discordIcon from '../assets/icons/discord.svg'; import discordIcon from "../assets/icons/discord.svg";
import telegramIcon from '../assets/icons/telegram.svg'; import telegramIcon from "../assets/icons/telegram.svg";
import giteaIcon from '../assets/icons/gitea.svg'; import giteaIcon from "../assets/icons/gitea.svg";
function NavBar() { function NavBar() {
const [externalLinks, setExternalLinks] = useState({ const [externalLinks, setExternalLinks] = useState({
discord: '#', discord: "#",
telegram: '#', telegram: "#",
gitea: '#', gitea: "#",
}); });
useEffect(() => { useEffect(() => {
fetch('/api/links') fetch("/api/links")
.then(response => response.json()) .then((response) => response.json())
.then(data => setExternalLinks(data)) .then((data) => setExternalLinks(data))
.catch(error => console.error('Error fetching links:', error)); .catch((error) => console.error("Error fetching links:", error));
}, []); }, []);
return ( return (
@ -40,8 +40,8 @@ function NavBar() {
className={({ isActive }) => className={({ isActive }) =>
`flex flex-row p-3 border-l-3 ${ `flex flex-row p-3 border-l-3 ${
isActive isActive
? 'border-l-sky-500/50 bg-black/50' ? "border-l-sky-500/50 bg-black/50"
: 'hover:border-l-sky-500/50 hover:bg-white/5' : "hover:border-l-sky-500/50 hover:bg-white/5"
}` }`
} }
> >
@ -58,8 +58,8 @@ function NavBar() {
className={({ isActive }) => className={({ isActive }) =>
`flex flex-row p-3 border-l-3 ${ `flex flex-row p-3 border-l-3 ${
isActive isActive
? 'border-l-emerald-500/50 bg-black/50' ? "border-l-emerald-500/50 bg-black/50"
: 'hover:border-l-emerald-500/50 hover:bg-white/5' : "hover:border-l-emerald-500/50 hover:bg-white/5"
}` }`
} }
> >
@ -76,8 +76,8 @@ function NavBar() {
className={({ isActive }) => className={({ isActive }) =>
`flex flex-row p-3 border-l-3 ${ `flex flex-row p-3 border-l-3 ${
isActive isActive
? 'border-l-indigo-500/50 bg-black/50' ? "border-l-indigo-500/50 bg-black/50"
: 'hover:border-l-indigo-500/50 hover:bg-white/5' : "hover:border-l-indigo-500/50 hover:bg-white/5"
}` }`
} }
> >
@ -94,13 +94,17 @@ function NavBar() {
className={({ isActive }) => className={({ isActive }) =>
`flex flex-row p-3 border-l-3 ${ `flex flex-row p-3 border-l-3 ${
isActive isActive
? 'border-l-rose-500/50 bg-black/50' ? "border-l-rose-500/50 bg-black/50"
: 'hover:border-l-rose-500/50 hover:bg-white/5' : "hover:border-l-rose-500/50 hover:bg-white/5"
}` }`
} }
> >
<button className="w-1/3 p-3 flex flex-col items-center justify-center cursor-pointer"> <button className="w-1/3 p-3 flex flex-col items-center justify-center cursor-pointer">
<img src={testPlayerIcon} alt="Test Player" className="w-1/2 cursor-pointer" /> <img
src={testPlayerIcon}
alt="Test Player"
className="w-1/2 cursor-pointer"
/>
</button> </button>
<p className="grow text-white md:text-2xl font-bold flex items-center justify-start"> <p className="grow text-white md:text-2xl font-bold flex items-center justify-start">
Test Player Test Player
@ -114,8 +118,8 @@ function NavBar() {
className={({ isActive }) => className={({ isActive }) =>
`flex flex-row p-3 border-l-3 ${ `flex flex-row p-3 border-l-3 ${
isActive isActive
? 'border-l-yellow-500/50 bg-black/50' ? "border-l-yellow-500/50 bg-black/50"
: 'hover:border-l-yellow-500/50 hover:bg-white/5' : "hover:border-l-yellow-500/50 hover:bg-white/5"
}` }`
} }
> >
@ -137,7 +141,11 @@ function NavBar() {
rel="noopener noreferrer" rel="noopener noreferrer"
className="w-1/3 p-3 flex flex-col items-center justify-center cursor-pointer hover:bg-blue-950 group" className="w-1/3 p-3 flex flex-col items-center justify-center cursor-pointer hover:bg-blue-950 group"
> >
<img src={discordIcon} alt="Discord" className="w-1/2 group-hover:animate-bounce" /> <img
src={discordIcon}
alt="Discord"
className="w-1/2 group-hover:animate-bounce"
/>
</a> </a>
<a <a
href={externalLinks.telegram} href={externalLinks.telegram}
@ -145,7 +153,11 @@ function NavBar() {
rel="noopener noreferrer" rel="noopener noreferrer"
className="w-1/3 p-3 flex flex-col items-center justify-center cursor-pointer hover:bg-blue-400 group" className="w-1/3 p-3 flex flex-col items-center justify-center cursor-pointer hover:bg-blue-400 group"
> >
<img src={telegramIcon} alt="Telegram" className="w-1/2 group-hover:animate-bounce" /> <img
src={telegramIcon}
alt="Telegram"
className="w-1/2 group-hover:animate-bounce"
/>
</a> </a>
<a <a
href={externalLinks.gitea} href={externalLinks.gitea}

94
cdrm-frontend/src/components/Pages/API.jsx
View File

@ -1,61 +1,61 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from "react";
import { Helmet } from 'react-helmet'; // Import Helmet import { Helmet } from "react-helmet"; // Import Helmet
const { protocol, hostname, port } = window.location; const { protocol, hostname, port } = window.location;
let fullHost = `${protocol}//${hostname}`; let fullHost = `${protocol}//${hostname}`;
if ( if (
(protocol === 'http:' && port !== '80') || (protocol === "http:" && port !== "80") ||
(protocol === 'https:' && port !== '443' && port !== '') (protocol === "https:" && port !== "443" && port !== "")
) { ) {
fullHost += `:${port}`; fullHost += `:${port}`;
} }
function API() { function API() {
const [deviceInfo, setDeviceInfo] = useState({ const [deviceInfo, setDeviceInfo] = useState({
device_type: '', device_type: "",
system_id: '', system_id: "",
security_level: '', security_level: "",
host: '', host: "",
secret: '', secret: "",
device_name: '' device_name: "",
}); });
const [prDeviceInfo, setPrDeviceInfo] = useState({ const [prDeviceInfo, setPrDeviceInfo] = useState({
security_level: '', security_level: "",
host: '', host: "",
secret: '', secret: "",
device_name: '' device_name: "",
}); });
useEffect(() => { useEffect(() => {
// Fetch Widevine info // Fetch Widevine info
fetch('/remotecdm/widevine/deviceinfo') fetch("/remotecdm/widevine/deviceinfo")
.then(response => response.json()) .then((response) => response.json())
.then(data => { .then((data) => {
setDeviceInfo({ setDeviceInfo({
device_type: data.device_type, device_type: data.device_type,
system_id: data.system_id, system_id: data.system_id,
security_level: data.security_level, security_level: data.security_level,
host: data.host, host: data.host,
secret: data.secret, secret: data.secret,
device_name: data.device_name device_name: data.device_name,
}); });
}) })
.catch(error => console.error('Error fetching Widevine info:', error)); .catch((error) => console.error("Error fetching Widevine info:", error));
// Fetch PlayReady info // Fetch PlayReady info
fetch('/remotecdm/playready/deviceinfo') fetch("/remotecdm/playready/deviceinfo")
.then(response => response.json()) .then((response) => response.json())
.then(data => { .then((data) => {
setPrDeviceInfo({ setPrDeviceInfo({
security_level: data.security_level, security_level: data.security_level,
host: data.host, host: data.host,
secret: data.secret, secret: data.secret,
device_name: data.device_name device_name: data.device_name,
}); });
}) })
.catch(error => console.error('Error fetching PlayReady info:', error)); .catch((error) => console.error("Error fetching PlayReady info:", error));
}, []); }, []);
return ( return (
@ -63,10 +63,10 @@ function API() {
<Helmet> <Helmet>
<title>API</title> <title>API</title>
</Helmet> </Helmet>
<details open className='w-full list-none'> <details open className="w-full list-none">
<summary className='text-2xl'>Sending a decryption request</summary> <summary className="text-2xl">Sending a decryption request</summary>
<div className='mt-5 p-5 rounded-lg border-2 border-indigo-500/50'> <div className="mt-5 p-5 rounded-lg border-2 border-indigo-500/50">
<pre className='rounded-lg font-mono whitespace-pre-wrap text-white overflow-auto'> <pre className="rounded-lg font-mono whitespace-pre-wrap text-white overflow-auto">
{`import requests {`import requests
print(requests.post( print(requests.post(
@ -87,11 +87,11 @@ print(requests.post(
</pre> </pre>
</div> </div>
</details> </details>
<details open className='w-full list-none mt-5'> <details open className="w-full list-none mt-5">
<summary className='text-2xl'>Sending a search request</summary> <summary className="text-2xl">Sending a search request</summary>
<div className='mt-5 border-2 border-indigo-500/50 p-5 rounded-lg'> <div className="mt-5 border-2 border-indigo-500/50 p-5 rounded-lg">
<pre className="rounded-lg font-mono whitespace-pre text-white overflow-x-auto max-w-full p-5"> <pre className="rounded-lg font-mono whitespace-pre text-white overflow-x-auto max-w-full p-5">
{`import requests {`import requests
print(requests.post( print(requests.post(
url='${fullHost}/api/cache/search', url='${fullHost}/api/cache/search',
@ -99,34 +99,38 @@ print(requests.post(
'input': 'AAAAW3Bzc2gAAAAA7e+LqXnWSs6jyCfc1R0h7QAAADsIARIQ62dqu8s0Xpa7z2FmMPGj2hoNd2lkZXZpbmVfdGVzdCIQZmtqM2xqYVNkZmFsa3IzaioCSEQyAA==' 'input': 'AAAAW3Bzc2gAAAAA7e+LqXnWSs6jyCfc1R0h7QAAADsIARIQ62dqu8s0Xpa7z2FmMPGj2hoNd2lkZXZpbmVfdGVzdCIQZmtqM2xqYVNkZmFsa3IzaioCSEQyAA=='
} }
).json())`} ).json())`}
</pre> </pre>
</div> </div>
</details> </details>
<details open className='w-full list-none mt-5'> <details open className="w-full list-none mt-5">
<summary className='text-2xl'>PyWidevine RemoteCDM info</summary> <summary className="text-2xl">PyWidevine RemoteCDM info</summary>
<div className='mt-5 border-2 border-indigo-500/50 p-5 rounded-lg overflow-x-auto'> <div className="mt-5 border-2 border-indigo-500/50 p-5 rounded-lg overflow-x-auto">
<p> <p>
<strong>Device Type:</strong> '{deviceInfo.device_type}'<br /> <strong>Device Type:</strong> '{deviceInfo.device_type}'<br />
<strong>System ID:</strong> {deviceInfo.system_id}<br /> <strong>System ID:</strong> {deviceInfo.system_id}
<strong>Security Level:</strong> {deviceInfo.security_level}<br /> <br />
<strong>Host:</strong> {fullHost}/remotecdm/widevine<br /> <strong>Security Level:</strong> {deviceInfo.security_level}
<br />
<strong>Host:</strong> {fullHost}/remotecdm/widevine
<br />
<strong>Secret:</strong> '{deviceInfo.secret}'<br /> <strong>Secret:</strong> '{deviceInfo.secret}'<br />
<strong>Device Name:</strong> {deviceInfo.device_name} <strong>Device Name:</strong> {deviceInfo.device_name}
</p> </p>
</div> </div>
</details> </details>
<details open className='w-full list-none mt-5'> <details open className="w-full list-none mt-5">
<summary className='text-2xl'>PyPlayready RemoteCDM info</summary> <summary className="text-2xl">PyPlayready RemoteCDM info</summary>
<div className='mt-5 border-2 border-indigo-500/50 p-5 rounded-lg overflow-x-auto'> <div className="mt-5 border-2 border-indigo-500/50 p-5 rounded-lg overflow-x-auto">
<p> <p>
<strong>Security Level:</strong> {prDeviceInfo.security_level}<br /> <strong>Security Level:</strong> {prDeviceInfo.security_level}
<strong>Host:</strong> {fullHost}/remotecdm/playready<br /> <br />
<strong>Host:</strong> {fullHost}/remotecdm/playready
<br />
<strong>Secret:</strong> '{prDeviceInfo.secret}'<br /> <strong>Secret:</strong> '{prDeviceInfo.secret}'<br />
<strong>Device Name:</strong> {prDeviceInfo.device_name} <strong>Device Name:</strong> {prDeviceInfo.device_name}
</p> </p>
</div> </div>
</details> </details>
</div> </div>
); );
} }

14
cdrm-frontend/src/components/Pages/Account.jsx
View File

@ -6,19 +6,19 @@ function Account() {
const [isLoggedIn, setIsLoggedIn] = useState(null); // null = loading state const [isLoggedIn, setIsLoggedIn] = useState(null); // null = loading state
useEffect(() => { useEffect(() => {
fetch('/login/status', { fetch("/login/status", {
method: 'POST', method: "POST",
credentials: 'include', // Sends cookies with request credentials: "include", // Sends cookies with request
}) })
.then(res => res.json()) .then((res) => res.json())
.then(data => { .then((data) => {
if (data.message === 'True') { if (data.message === "True") {
setIsLoggedIn(true); setIsLoggedIn(true);
} else { } else {
setIsLoggedIn(false); setIsLoggedIn(false);
} }
}) })
.catch(err => { .catch((err) => {
console.error("Error checking login status:", err); console.error("Error checking login status:", err);
setIsLoggedIn(false); // Assume not logged in on error setIsLoggedIn(false); // Assume not logged in on error
}); });

20
cdrm-frontend/src/components/Pages/Cache.jsx
View File

@ -1,8 +1,8 @@
import { useState, useEffect, useRef } from 'react'; import { useState, useEffect, useRef } from "react";
import { Helmet } from 'react-helmet'; // Import Helmet import { Helmet } from "react-helmet"; // Import Helmet
function Cache() { function Cache() {
const [searchQuery, setSearchQuery] = useState(''); const [searchQuery, setSearchQuery] = useState("");
const [cacheData, setCacheData] = useState([]); const [cacheData, setCacheData] = useState([]);
const [keyCount, setKeyCount] = useState(0); // New state to store the key count const [keyCount, setKeyCount] = useState(0); // New state to store the key count
const debounceTimeout = useRef(null); const debounceTimeout = useRef(null);
@ -11,11 +11,11 @@ function Cache() {
useEffect(() => { useEffect(() => {
const fetchKeyCount = async () => { const fetchKeyCount = async () => {
try { try {
const response = await fetch('/api/cache/keycount'); const response = await fetch("/api/cache/keycount");
const data = await response.json(); const data = await response.json();
setKeyCount(data.count); // Update key count setKeyCount(data.count); // Update key count
} catch (error) { } catch (error) {
console.error('Error fetching key count:', error); console.error("Error fetching key count:", error);
} }
}; };
@ -33,7 +33,7 @@ function Cache() {
// Set a new timeout to send the API call after 1 second of no typing // Set a new timeout to send the API call after 1 second of no typing
debounceTimeout.current = setTimeout(() => { debounceTimeout.current = setTimeout(() => {
if (query.trim() !== '') { if (query.trim() !== "") {
sendApiCall(query); // Only call the API if the query is not empty sendApiCall(query); // Only call the API if the query is not empty
} else { } else {
setCacheData([]); // Clear results if query is empty setCacheData([]); // Clear results if query is empty
@ -42,14 +42,14 @@ function Cache() {
}; };
const sendApiCall = (text) => { const sendApiCall = (text) => {
fetch('/api/cache/search', { fetch("/api/cache/search", {
method: 'POST', method: "POST",
headers: { 'Content-Type': 'application/json' }, headers: { "Content-Type": "application/json" },
body: JSON.stringify({ input: text }), body: JSON.stringify({ input: text }),
}) })
.then((response) => response.json()) .then((response) => response.json())
.then((data) => setCacheData(data)) // Update cache data with the results .then((data) => setCacheData(data)) // Update cache data with the results
.catch((error) => console.error('Error:', error)); .catch((error) => console.error("Error:", error));
}; };
return ( return (

130
cdrm-frontend/src/components/Pages/HomePage.jsx
View File

@ -1,18 +1,18 @@
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from "react";
import { readTextFromClipboard } from '../Functions/ParseChallenge'; import { readTextFromClipboard } from "../Functions/ParseChallenge";
import { Helmet } from 'react-helmet'; // Import Helmet import { Helmet } from "react-helmet"; // Import Helmet
function HomePage() { function HomePage() {
const [pssh, setPssh] = useState(''); const [pssh, setPssh] = useState("");
const [licurl, setLicurl] = useState(''); const [licurl, setLicurl] = useState("");
const [proxy, setProxy] = useState(''); const [proxy, setProxy] = useState("");
const [headers, setHeaders] = useState(''); const [headers, setHeaders] = useState("");
const [cookies, setCookies] = useState(''); const [cookies, setCookies] = useState("");
const [data, setData] = useState(''); const [data, setData] = useState("");
const [message, setMessage] = useState(''); const [message, setMessage] = useState("");
const [isVisible, setIsVisible] = useState(false); const [isVisible, setIsVisible] = useState(false);
const [devices, setDevices] = useState([]); const [devices, setDevices] = useState([]);
const [selectedDevice, setSelectedDevice] = useState('default'); const [selectedDevice, setSelectedDevice] = useState("default");
const bottomRef = useRef(null); const bottomRef = useRef(null);
const messageRef = useRef(null); // Reference to result container const messageRef = useRef(null); // Reference to result container
@ -21,21 +21,21 @@ function HomePage() {
if (isVisible) { if (isVisible) {
setIsVisible(false); setIsVisible(false);
} }
setPssh(''); setPssh("");
setLicurl(''); setLicurl("");
setProxy(''); setProxy("");
setHeaders(''); setHeaders("");
setCookies(''); setCookies("");
setData(''); setData("");
}; };
const handleSubmitButton = (event) => { const handleSubmitButton = (event) => {
event.preventDefault(); event.preventDefault();
fetch('/api/decrypt', { fetch("/api/decrypt", {
method: 'POST', method: "POST",
headers: { headers: {
'Content-Type': 'application/json', "Content-Type": "application/json",
}, },
body: JSON.stringify({ body: JSON.stringify({
pssh: pssh, pssh: pssh,
@ -47,15 +47,15 @@ function HomePage() {
device: selectedDevice, // Include selected device in the request device: selectedDevice, // Include selected device in the request
}), }),
}) })
.then(response => response.json()) .then((response) => response.json())
.then(data => { .then((data) => {
const resultMessage = data['message'].replace(/\n/g, '<br />'); const resultMessage = data["message"].replace(/\n/g, "<br />");
setMessage(resultMessage); setMessage(resultMessage);
setIsVisible(true); setIsVisible(true);
}) })
.catch((error) => { .catch((error) => {
console.error('Error during decryption request:', error); console.error("Error during decryption request:", error);
setMessage('Error: Unable to process request.'); setMessage("Error: Unable to process request.");
setIsVisible(true); setIsVisible(true);
}); });
}; };
@ -64,8 +64,8 @@ function HomePage() {
event.preventDefault(); event.preventDefault();
if (messageRef.current) { if (messageRef.current) {
const textToCopy = messageRef.current.innerText; // Grab the plain text (with visual line breaks) const textToCopy = messageRef.current.innerText; // Grab the plain text (with visual line breaks)
navigator.clipboard.writeText(textToCopy).catch(err => { navigator.clipboard.writeText(textToCopy).catch((err) => {
alert('Failed to copy!'); alert("Failed to copy!");
console.error(err); console.error(err);
}); });
} }
@ -73,36 +73,38 @@ function HomePage() {
const handleFetchPaste = () => { const handleFetchPaste = () => {
event.preventDefault(); event.preventDefault();
readTextFromClipboard().then(() => { readTextFromClipboard()
.then(() => {
setPssh(document.getElementById("pssh").value); setPssh(document.getElementById("pssh").value);
setLicurl(document.getElementById("licurl").value); setLicurl(document.getElementById("licurl").value);
setHeaders(document.getElementById("headers").value); setHeaders(document.getElementById("headers").value);
setData(document.getElementById("data").value); setData(document.getElementById("data").value);
}).catch(err => { })
alert('Failed to paste from fetch!'); .catch((err) => {
alert("Failed to paste from fetch!");
}); });
}; };
useEffect(() => { useEffect(() => {
if (isVisible && bottomRef.current) { if (isVisible && bottomRef.current) {
bottomRef.current.scrollIntoView({ behavior: 'smooth' }); bottomRef.current.scrollIntoView({ behavior: "smooth" });
} }
}, [message, isVisible]); }, [message, isVisible]);
useEffect(() => { useEffect(() => {
fetch('/login/status', { fetch("/login/status", {
method: 'POST', method: "POST",
}) })
.then(res => res.json()) .then((res) => res.json())
.then(statusData => { .then((statusData) => {
if (statusData.message === 'True') { if (statusData.message === "True") {
return fetch('/userinfo', { method: 'POST' }); return fetch("/userinfo", { method: "POST" });
} else { } else {
throw new Error('Not logged in'); throw new Error("Not logged in");
} }
}) })
.then(res => res.json()) .then((res) => res.json())
.then(deviceData => { .then((deviceData) => {
const combinedDevices = [ const combinedDevices = [
...deviceData.Widevine_Devices, ...deviceData.Widevine_Devices,
...deviceData.Playready_Devices, ...deviceData.Playready_Devices,
@ -117,12 +119,12 @@ function HomePage() {
// Set devices and select a device if logged in // Set devices and select a device if logged in
setDevices(allDevices.length > 0 ? allDevices : []); setDevices(allDevices.length > 0 ? allDevices : []);
setSelectedDevice(allDevices.length > 0 ? allDevices[0] : 'default'); setSelectedDevice(allDevices.length > 0 ? allDevices[0] : "default");
}) })
.catch(() => { .catch(() => {
// User isn't logged in, set default device to 'default' // User isn't logged in, set default device to 'default'
setDevices([]); // Don't display devices list setDevices([]); // Don't display devices list
setSelectedDevice('default'); setSelectedDevice("default");
}); });
}, []); }, []);
@ -133,7 +135,9 @@ function HomePage() {
<title>CDRM-Project</title> <title>CDRM-Project</title>
</Helmet> </Helmet>
<form className="flex flex-col w-full h-full bg-black/5 p-4 overflow-y-auto"> <form className="flex flex-col w-full h-full bg-black/5 p-4 overflow-y-auto">
<label htmlFor="pssh" className="text-white w-8/10 self-center">PSSH: </label> <label htmlFor="pssh" className="text-white w-8/10 self-center">
PSSH:{" "}
</label>
<input <input
type="text" type="text"
id="pssh" id="pssh"
@ -141,7 +145,9 @@ function HomePage() {
value={pssh} value={pssh}
onChange={(e) => setPssh(e.target.value)} onChange={(e) => setPssh(e.target.value)}
/> />
<label htmlFor="licurl" className="text-white w-8/10 self-center">License URL: </label> <label htmlFor="licurl" className="text-white w-8/10 self-center">
License URL:{" "}
</label>
<input <input
type="text" type="text"
id="licurl" id="licurl"
@ -149,7 +155,9 @@ function HomePage() {
value={licurl} value={licurl}
onChange={(e) => setLicurl(e.target.value)} onChange={(e) => setLicurl(e.target.value)}
/> />
<label htmlFor="proxy" className="text-white w-8/10 self-center">Proxy: </label> <label htmlFor="proxy" className="text-white w-8/10 self-center">
Proxy:{" "}
</label>
<input <input
type="text" type="text"
id="proxy" id="proxy"
@ -157,21 +165,27 @@ function HomePage() {
value={proxy} value={proxy}
onChange={(e) => setProxy(e.target.value)} onChange={(e) => setProxy(e.target.value)}
/> />
<label htmlFor="headers" className="text-white w-8/10 self-center">Headers: </label> <label htmlFor="headers" className="text-white w-8/10 self-center">
Headers:{" "}
</label>
<textarea <textarea
id="headers" id="headers"
className="w-8/10 border-2 border-sky-500/25 rounded-xl self-center m-2 text-white p-1 h-48" className="w-8/10 border-2 border-sky-500/25 rounded-xl self-center m-2 text-white p-1 h-48"
value={headers} value={headers}
onChange={(e) => setHeaders(e.target.value)} onChange={(e) => setHeaders(e.target.value)}
/> />
<label htmlFor="cookies" className="text-white w-8/10 self-center">Cookies: </label> <label htmlFor="cookies" className="text-white w-8/10 self-center">
Cookies:{" "}
</label>
<textarea <textarea
id="cookies" id="cookies"
className="w-8/10 border-2 border-sky-500/25 rounded-xl self-center m-2 text-white p-1 h-48" className="w-8/10 border-2 border-sky-500/25 rounded-xl self-center m-2 text-white p-1 h-48"
value={cookies} value={cookies}
onChange={(e) => setCookies(e.target.value)} onChange={(e) => setCookies(e.target.value)}
/> />
<label htmlFor="data" className="text-white w-8/10 self-center">Data: </label> <label htmlFor="data" className="text-white w-8/10 self-center">
Data:{" "}
</label>
<textarea <textarea
id="data" id="data"
className="w-8/10 border-2 border-sky-500/25 rounded-xl self-center m-2 text-white p-1 h-48" className="w-8/10 border-2 border-sky-500/25 rounded-xl self-center m-2 text-white p-1 h-48"
@ -182,7 +196,9 @@ function HomePage() {
{/* Device Selection Dropdown, only show if logged in */} {/* Device Selection Dropdown, only show if logged in */}
{devices.length > 0 && ( {devices.length > 0 && (
<> <>
<label htmlFor="device" className="text-white w-8/10 self-center">Select Device:</label> <label htmlFor="device" className="text-white w-8/10 self-center">
Select Device:
</label>
<select <select
id="device" id="device"
className="w-8/10 border-2 border-sky-500/25 rounded-xl h-10 self-center m-2 text-white bg-black p-1" className="w-8/10 border-2 border-sky-500/25 rounded-xl h-10 self-center m-2 text-white bg-black p-1"
@ -190,7 +206,9 @@ function HomePage() {
onChange={(e) => setSelectedDevice(e.target.value)} onChange={(e) => setSelectedDevice(e.target.value)}
> >
{devices.map((device, index) => ( {devices.map((device, index) => (
<option key={index} value={device}>{device}</option> <option key={index} value={device}>
{device}
</option>
))} ))}
</select> </select>
</> </>
@ -204,7 +222,10 @@ function HomePage() {
> >
Submit Submit
</button> </button>
<button onClick={handleFetchPaste} className="bg-yellow-500/50 rounded-xl text-white text-bold text-xl p-1 lg:w-1/5 lg:h-12 truncate mt-5 w-1/2 lg:mt-0"> <button
onClick={handleFetchPaste}
className="bg-yellow-500/50 rounded-xl text-white text-bold text-xl p-1 lg:w-1/5 lg:h-12 truncate mt-5 w-1/2 lg:mt-0"
>
Paste from fetch Paste from fetch
</button> </button>
<button <button
@ -219,9 +240,12 @@ function HomePage() {
</div> </div>
{isVisible && ( {isVisible && (
<div id="main_content" className="flex-col w-full h-full p-10 items-center justify-center self-center"> <div
id="main_content"
className="flex-col w-full h-full p-10 items-center justify-center self-center"
>
<div className="flex flex-col w-full h-full overflow-y-auto items-center"> <div className="flex flex-col w-full h-full overflow-y-auto items-center">
<div className='w-8/10 grow p-4 text-white text-bold text-center text-xl md:text-3xl border-2 border-sky-500/25 rounded-xl bg-black/5'> <div className="w-8/10 grow p-4 text-white text-bold text-center text-xl md:text-3xl border-2 border-sky-500/25 rounded-xl bg-black/5">
<p className="w-full border-b-2 border-white/75 pb-2">Results:</p> <p className="w-full border-b-2 border-white/75 pb-2">Results:</p>
<p <p
className="w-full grow pt-10 break-words overflow-y-auto" className="w-full grow pt-10 break-words overflow-y-auto"

143
cdrm-frontend/src/components/Pages/MyAccount.jsx
View File

@ -1,27 +1,27 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from "react";
import axios from 'axios'; import axios from "axios";
function MyAccount() { function MyAccount() {
const [wvList, setWvList] = useState([]); const [wvList, setWvList] = useState([]);
const [prList, setPrList] = useState([]); const [prList, setPrList] = useState([]);
const [uploading, setUploading] = useState(false); const [uploading, setUploading] = useState(false);
const [username, setUsername] = useState(''); const [username, setUsername] = useState("");
const [apiKey, setApiKey] = useState(''); const [apiKey, setApiKey] = useState("");
const [password, setPassword] = useState(''); const [password, setPassword] = useState("");
const [passwordError, setPasswordError] = useState(''); const [passwordError, setPasswordError] = useState("");
const [newApiKey, setNewApiKey] = useState(''); const [newApiKey, setNewApiKey] = useState("");
const [apiKeyError, setApiKeyError] = useState(''); const [apiKeyError, setApiKeyError] = useState("");
// Fetch user info // Fetch user info
const fetchUserInfo = async () => { const fetchUserInfo = async () => {
try { try {
const response = await axios.post('/userinfo'); const response = await axios.post("/userinfo");
setWvList(response.data.Widevine_Devices || []); setWvList(response.data.Widevine_Devices || []);
setPrList(response.data.Playready_Devices || []); setPrList(response.data.Playready_Devices || []);
setUsername(response.data.Styled_Username || ''); setUsername(response.data.Styled_Username || "");
setApiKey(response.data.API_Key || ''); setApiKey(response.data.API_Key || "");
} catch (err) { } catch (err) {
console.error('Failed to fetch user info', err); console.error("Failed to fetch user info", err);
} }
}; };
@ -34,22 +34,25 @@ function MyAccount() {
const file = event.target.files[0]; const file = event.target.files[0];
if (!file) return; if (!file) return;
const extension = file.name.split('.').pop(); const extension = file.name.split(".").pop();
if ((cdmType === 'PR' && extension !== 'prd') || (cdmType === 'WV' && extension !== 'wvd')) { if (
alert(`Please upload a .${cdmType === 'PR' ? 'prd' : 'wvd'} file.`); (cdmType === "PR" && extension !== "prd") ||
(cdmType === "WV" && extension !== "wvd")
) {
alert(`Please upload a .${cdmType === "PR" ? "prd" : "wvd"} file.`);
return; return;
} }
const formData = new FormData(); const formData = new FormData();
formData.append('file', file); formData.append("file", file);
setUploading(true); setUploading(true);
try { try {
await axios.post(`/upload/${cdmType}`, formData); await axios.post(`/upload/${cdmType}`, formData);
await fetchUserInfo(); // Refresh list after upload await fetchUserInfo(); // Refresh list after upload
} catch (err) { } catch (err) {
console.error('Upload failed', err); console.error("Upload failed", err);
alert('Upload failed'); alert("Upload failed");
} finally { } finally {
setUploading(false); setUploading(false);
} }
@ -58,75 +61,80 @@ function MyAccount() {
// Handle logout // Handle logout
const handleLogout = async () => { const handleLogout = async () => {
try { try {
await axios.post('/logout'); await axios.post("/logout");
window.location.reload(); window.location.reload();
} catch (error) { } catch (error) {
console.error('Logout failed:', error); console.error("Logout failed:", error);
alert('Logout failed!'); alert("Logout failed!");
} }
}; };
// Handle change password // Handle change password
const handleChangePassword = async () => { const handleChangePassword = async () => {
if (passwordError || password === '') { if (passwordError || password === "") {
alert('Please enter a valid password.'); alert("Please enter a valid password.");
return; return;
} }
try { try {
const response = await axios.post('/user/change_password', { const response = await axios.post("/user/change_password", {
new_password: password new_password: password,
}); });
if (response.data.message === 'True') { if (response.data.message === "True") {
alert('Password changed successfully.'); alert("Password changed successfully.");
setPassword(''); setPassword("");
} else { } else {
alert('Failed to change password.'); alert("Failed to change password.");
} }
} catch (error) { } catch (error) {
if (error.response && error.response.data?.message === 'Invalid password format') { if (error.response && error.response.data?.message === "Invalid password format") {
alert('Password format is invalid. Please try again.'); alert("Password format is invalid. Please try again.");
} else { } else {
alert('Error occurred while changing password.'); alert("Error occurred while changing password.");
} }
} }
}; };
// Handle change API key // Handle change API key
const handleChangeApiKey = async () => { const handleChangeApiKey = async () => {
if (apiKeyError || newApiKey === '') { if (apiKeyError || newApiKey === "") {
alert('Please enter a valid API key.'); alert("Please enter a valid API key.");
return; return;
} }
try { try {
const response = await axios.post('/user/change_api_key', { const response = await axios.post("/user/change_api_key", {
new_api_key: newApiKey, new_api_key: newApiKey,
}); });
if (response.data.message === 'True') { if (response.data.message === "True") {
alert('API key changed successfully.'); alert("API key changed successfully.");
setApiKey(newApiKey); setApiKey(newApiKey);
setNewApiKey(''); setNewApiKey("");
} else { } else {
alert('Failed to change API key.'); alert("Failed to change API key.");
} }
} catch (error) { } catch (error) {
alert('Error occurred while changing API key.'); alert("Error occurred while changing API key.");
console.error(error); console.error(error);
} }
}; };
return ( return (
<div id="myaccount" className="flex flex-col lg:flex-row gap-4 w-full min-h-full overflow-y-auto p-4"> <div
id="myaccount"
className="flex flex-col lg:flex-row gap-4 w-full min-h-full overflow-y-auto p-4"
>
<div className="flex-col w-full min-h-164 lg:h-full lg:w-96 border-2 border-yellow-500/50 rounded-2xl p-4 flex items-center overflow-y-auto"> <div className="flex-col w-full min-h-164 lg:h-full lg:w-96 border-2 border-yellow-500/50 rounded-2xl p-4 flex items-center overflow-y-auto">
<h1 className="text-2xl font-bold text-white border-b-2 border-white p-2 w-full text-center mb-2"> <h1 className="text-2xl font-bold text-white border-b-2 border-white p-2 w-full text-center mb-2">
{username ? `${username}` : 'My Account'} {username ? `${username}` : "My Account"}
</h1> </h1>
{/* API Key Section */} {/* API Key Section */}
<div className="w-full flex flex-col items-center"> <div className="w-full flex flex-col items-center">
<label htmlFor="apiKey" className="text-white font-semibold mb-1">API Key</label> <label htmlFor="apiKey" className="text-white font-semibold mb-1">
API Key
</label>
<input <input
id="apiKey" id="apiKey"
type="text" type="text"
@ -136,7 +144,9 @@ function MyAccount() {
/> />
{/* New API Key Section */} {/* New API Key Section */}
<label htmlFor="newApiKey" className="text-white font-semibold mt-4 mb-1">New API Key</label> <label htmlFor="newApiKey" className="text-white font-semibold mt-4 mb-1">
New API Key
</label>
<input <input
id="newApiKey" id="newApiKey"
type="text" type="text"
@ -145,9 +155,9 @@ function MyAccount() {
const value = e.target.value; const value = e.target.value;
const isValid = /^[^\s]+$/.test(value); // No spaces const isValid = /^[^\s]+$/.test(value); // No spaces
if (!isValid) { if (!isValid) {
setApiKeyError('API key must not contain spaces.'); setApiKeyError("API key must not contain spaces.");
} else { } else {
setApiKeyError(''); setApiKeyError("");
} }
setNewApiKey(value); setNewApiKey(value);
}} }}
@ -163,18 +173,23 @@ function MyAccount() {
</button> </button>
{/* Change Password Section */} {/* Change Password Section */}
<label htmlFor="password" className="text-white font-semibold mt-4 mb-1">Change Password</label> <label htmlFor="password" className="text-white font-semibold mt-4 mb-1">
Change Password
</label>
<input <input
id="password" id="password"
type="password" type="password"
value={password} value={password}
onChange={(e) => { onChange={(e) => {
const value = e.target.value; const value = e.target.value;
const isValid = /^[A-Za-z0-9!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?`~]*$/.test(value); const isValid =
/^[A-Za-z0-9!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?`~]*$/.test(value);
if (!isValid) { if (!isValid) {
setPasswordError('Password must not contain spaces or invalid characters.'); setPasswordError(
"Password must not contain spaces or invalid characters."
);
} else { } else {
setPasswordError(''); setPasswordError("");
} }
setPassword(value); setPassword(value);
}} }}
@ -201,15 +216,19 @@ function MyAccount() {
<div className="flex flex-col w-full lg:ml-2 mt-2 lg:mt-0"> <div className="flex flex-col w-full lg:ml-2 mt-2 lg:mt-0">
{/* Widevine Section */} {/* Widevine Section */}
<div className="border-2 border-yellow-500/50 flex flex-col w-full min-h-1/2 text-center rounded-2xl lg:p-4 p-2 overflow-y-auto"> <div className="border-2 border-yellow-500/50 flex flex-col w-full min-h-1/2 text-center rounded-2xl lg:p-4 p-2 overflow-y-auto">
<h1 className="bg-black text-2xl font-bold text-white border-b-2 border-white p-2">Widevine CDMs</h1> <h1 className="bg-black text-2xl font-bold text-white border-b-2 border-white p-2">
Widevine CDMs
</h1>
<div className="flex flex-col w-full grow p-2 bg-white/5 rounded-2xl mt-2 text-white text-left"> <div className="flex flex-col w-full grow p-2 bg-white/5 rounded-2xl mt-2 text-white text-left">
{wvList.length === 0 ? ( {wvList.length === 0 ? (
<div className="text-white text-center font-bold">No Widevine CDMs uploaded.</div> <div className="text-white text-center font-bold">
No Widevine CDMs uploaded.
</div>
) : ( ) : (
wvList.map((filename, i) => ( wvList.map((filename, i) => (
<div <div
key={i} key={i}
className={`text-center font-bold text-white p-2 rounded ${i % 2 === 0 ? 'bg-black/30' : 'bg-black/60'}`} className={`text-center font-bold text-white p-2 rounded ${i % 2 === 0 ? "bg-black/30" : "bg-black/60"}`}
> >
{filename} {filename}
</div> </div>
@ -217,27 +236,31 @@ function MyAccount() {
)} )}
</div> </div>
<label className="bg-yellow-500 text-white w-full min-h-16 lg:min-h-16 mt-4 rounded-2xl flex items-center justify-center cursor-pointer"> <label className="bg-yellow-500 text-white w-full min-h-16 lg:min-h-16 mt-4 rounded-2xl flex items-center justify-center cursor-pointer">
{uploading ? 'Uploading...' : 'Upload CDM'} {uploading ? "Uploading..." : "Upload CDM"}
<input <input
type="file" type="file"
accept=".wvd" accept=".wvd"
hidden hidden
onChange={(e) => handleUpload(e, 'WV')} onChange={(e) => handleUpload(e, "WV")}
/> />
</label> </label>
</div> </div>
{/* Playready Section */} {/* Playready Section */}
<div className="border-2 border-yellow-500/50 flex flex-col w-full min-h-1/2 text-center rounded-2xl p-2 mt-2 lg:mt-2 overflow-y-auto"> <div className="border-2 border-yellow-500/50 flex flex-col w-full min-h-1/2 text-center rounded-2xl p-2 mt-2 lg:mt-2 overflow-y-auto">
<h1 className="text-2xl font-bold text-white border-b-2 border-white p-2 bg-black">Playready CDMs</h1> <h1 className="text-2xl font-bold text-white border-b-2 border-white p-2 bg-black">
Playready CDMs
</h1>
<div className="flex flex-col w-full bg-white/5 grow rounded-2xl mt-2 text-white text-left p-2"> <div className="flex flex-col w-full bg-white/5 grow rounded-2xl mt-2 text-white text-left p-2">
{prList.length === 0 ? ( {prList.length === 0 ? (
<div className="text-white text-center font-bold">No Playready CDMs uploaded.</div> <div className="text-white text-center font-bold">
No Playready CDMs uploaded.
</div>
) : ( ) : (
prList.map((filename, i) => ( prList.map((filename, i) => (
<div <div
key={i} key={i}
className={`text-center font-bold text-white p-2 rounded ${i % 2 === 0 ? 'bg-black/30' : 'bg-black/60'}`} className={`text-center font-bold text-white p-2 rounded ${i % 2 === 0 ? "bg-black/30" : "bg-black/60"}`}
> >
{filename} {filename}
</div> </div>
@ -245,12 +268,12 @@ function MyAccount() {
)} )}
</div> </div>
<label className="bg-yellow-500 text-white w-full min-h-16 lg:min-h-16 mt-4 rounded-2xl flex items-center justify-center cursor-pointer"> <label className="bg-yellow-500 text-white w-full min-h-16 lg:min-h-16 mt-4 rounded-2xl flex items-center justify-center cursor-pointer">
{uploading ? 'Uploading...' : 'Upload CDM'} {uploading ? "Uploading..." : "Upload CDM"}
<input <input
type="file" type="file"
accept=".prd" accept=".prd"
hidden hidden
onChange={(e) => handleUpload(e, 'PR')} onChange={(e) => handleUpload(e, "PR")}
/> />
</label> </label>
</div> </div>

48
cdrm-frontend/src/components/Pages/Register.jsx
View File

@ -1,9 +1,9 @@
import React, { useState } from 'react'; import React, { useState } from "react";
function Register() { function Register() {
const [username, setUsername] = useState(''); const [username, setUsername] = useState("");
const [password, setPassword] = useState(''); const [password, setPassword] = useState("");
const [status, setStatus] = useState(''); const [status, setStatus] = useState("");
// Validation functions // Validation functions
const validateUsername = (name) => /^[A-Za-z0-9_-]+$/.test(name); const validateUsername = (name) => /^[A-Za-z0-9_-]+$/.test(name);
@ -20,12 +20,12 @@ function Register() {
} }
try { try {
const response = await fetch('/register', { const response = await fetch("/register", {
method: 'POST', method: "POST",
headers: { headers: {
'Content-Type': 'application/json' "Content-Type": "application/json",
}, },
body: JSON.stringify({ username, password }) body: JSON.stringify({ username, password }),
}); });
const data = await response.json(); const data = await response.json();
if (data.message) { if (data.message) {
@ -34,7 +34,7 @@ function Register() {
setStatus(data.error); setStatus(data.error);
} }
} catch (err) { } catch (err) {
setStatus('An error occurred while registering.'); setStatus("An error occurred while registering.");
} }
}; };
@ -49,13 +49,13 @@ function Register() {
} }
try { try {
const response = await fetch('/login', { const response = await fetch("/login", {
method: 'POST', method: "POST",
headers: { headers: {
'Content-Type': 'application/json' "Content-Type": "application/json",
}, },
credentials: 'include', // Important to send cookies credentials: "include", // Important to send cookies
body: JSON.stringify({ username, password }) body: JSON.stringify({ username, password }),
}); });
const data = await response.json(); const data = await response.json();
if (data.message) { if (data.message) {
@ -65,7 +65,7 @@ function Register() {
setStatus(data.error); setStatus(data.error);
} }
} catch (err) { } catch (err) {
setStatus('An error occurred while logging in.'); setStatus("An error occurred while logging in.");
} }
}; };
@ -73,19 +73,23 @@ function Register() {
<div className="flex flex-col w-full h-full items-center justify-center p-4"> <div className="flex flex-col w-full h-full items-center justify-center p-4">
<div className="flex flex-col w-full h-full lg:w-1/2 lg:h-96 border-2 border-yellow-500/50 rounded-2xl p-4 overflow-x-auto justify-center items-center"> <div className="flex flex-col w-full h-full lg:w-1/2 lg:h-96 border-2 border-yellow-500/50 rounded-2xl p-4 overflow-x-auto justify-center items-center">
<div className="flex flex-col w-full"> <div className="flex flex-col w-full">
<label htmlFor="username" className="text-lg font-bold mb-2 text-white">Username:</label> <label htmlFor="username" className="text-lg font-bold mb-2 text-white">
Username:
</label>
<input <input
type="text" type="text"
value={username} value={username}
onChange={e => setUsername(e.target.value)} onChange={(e) => setUsername(e.target.value)}
placeholder="Username" placeholder="Username"
className="mb-4 p-2 border border-gray-300 rounded text-white bg-transparent" className="mb-4 p-2 border border-gray-300 rounded text-white bg-transparent"
/> />
<label htmlFor="password" className="text-lg font-bold mb-2 text-white">Password:</label> <label htmlFor="password" className="text-lg font-bold mb-2 text-white">
Password:
</label>
<input <input
type="password" type="password"
value={password} value={password}
onChange={e => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
placeholder="Password" placeholder="Password"
className="mb-4 p-2 border border-gray-300 rounded text-white bg-transparent" className="mb-4 p-2 border border-gray-300 rounded text-white bg-transparent"
/> />
@ -104,11 +108,7 @@ function Register() {
Register Register
</button> </button>
</div> </div>
{status && ( {status && <p className="text-sm text-white mt-4 p-4">{status}</p>}
<p className="text-sm text-white mt-4 p-4">
{status}
</p>
)}
</div> </div>
</div> </div>
); );

48
cdrm-frontend/src/components/Pages/TestPlayer.jsx
View File

@ -1,12 +1,12 @@
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from "react";
import shaka from 'shaka-player'; import shaka from "shaka-player";
import { Helmet } from 'react-helmet'; // Import Helmet import { Helmet } from "react-helmet"; // Import Helmet
function TestPlayer() { function TestPlayer() {
const [mpdUrl, setMpdUrl] = useState(''); // State to hold the MPD URL const [mpdUrl, setMpdUrl] = useState(""); // State to hold the MPD URL
const [kids, setKids] = useState(''); // State to hold KIDs (separated by line breaks) const [kids, setKids] = useState(""); // State to hold KIDs (separated by line breaks)
const [keys, setKeys] = useState(''); // State to hold Keys (separated by line breaks) const [keys, setKeys] = useState(""); // State to hold Keys (separated by line breaks)
const [headers, setHeaders] = useState(''); // State to hold request headers const [headers, setHeaders] = useState(""); // State to hold request headers
const videoRef = useRef(null); // Ref for the video element const videoRef = useRef(null); // Ref for the video element
const playerRef = useRef(null); // Ref for Shaka Player instance const playerRef = useRef(null); // Ref for Shaka Player instance
@ -38,8 +38,8 @@ function TestPlayer() {
playerRef.current = player; playerRef.current = player;
// Add error listener // Add error listener
player.addEventListener('error', (event) => { player.addEventListener("error", (event) => {
console.error('Error code', event.detail.code, 'object', event.detail); console.error("Error code", event.detail.code, "object", event.detail);
}); });
} }
} }
@ -78,13 +78,16 @@ function TestPlayer() {
player.configure(config); player.configure(config);
// Load the video stream with MPD URL // Load the video stream with MPD URL
player.load(mpdUrl).then(() => { player
console.log('Video loaded'); .load(mpdUrl)
}).catch((error) => { .then(() => {
console.error('Error loading the video', error); console.log("Video loaded");
})
.catch((error) => {
console.error("Error loading the video", error);
}); });
} else { } else {
console.error('MPD URL, KIDs, and Keys are required.'); console.error("MPD URL, KIDs, and Keys are required.");
} }
}; };
@ -95,10 +98,10 @@ function TestPlayer() {
// Helper function to parse headers from the textarea input // Helper function to parse headers from the textarea input
const parseHeaders = (headersText) => { const parseHeaders = (headersText) => {
const headersArr = headersText.split('\n'); const headersArr = headersText.split("\n");
const headersObj = {}; const headersObj = {};
headersArr.forEach((line) => { headersArr.forEach((line) => {
const [key, value] = line.split(':'); const [key, value] = line.split(":");
if (key && value) { if (key && value) {
headersObj[key.trim()] = value.trim(); headersObj[key.trim()] = value.trim();
} }
@ -112,13 +115,7 @@ function TestPlayer() {
<title>Test Player</title> <title>Test Player</title>
</Helmet> </Helmet>
<div className="w-full flex flex-col"> <div className="w-full flex flex-col">
<video <video ref={videoRef} width="100%" height="auto" controls className="h-96" />
ref={videoRef}
width="100%"
height="auto"
controls
className="h-96"
/>
<input <input
type="text" type="text"
value={mpdUrl} value={mpdUrl}
@ -144,10 +141,7 @@ function TestPlayer() {
onChange={handleHeadersChange} onChange={handleHeadersChange}
className="border-2 border-rose-700/50 mt-2 text-white p-1 overflow-y-auto rounded transition-all ease-in-out focus:outline-none focus:ring-2 focus:ring-rose-700/50 duration-200" className="border-2 border-rose-700/50 mt-2 text-white p-1 overflow-y-auto rounded transition-all ease-in-out focus:outline-none focus:ring-2 focus:ring-rose-700/50 duration-200"
/> />
<button <button onClick={handleSubmit} className="mt-4 p-2 bg-blue-500 text-white rounded">
onClick={handleSubmit}
className="mt-4 p-2 bg-blue-500 text-white rounded"
>
Submit Submit
</button> </button>
</div> </div>

62
cdrm-frontend/src/components/SideMenu.jsx
View File

@ -1,35 +1,35 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from "react";
import { NavLink } from 'react-router-dom'; import { NavLink } from "react-router-dom";
import closeIcon from '../assets/icons/close.svg'; import closeIcon from "../assets/icons/close.svg";
import homeIcon from '../assets/icons/home.svg'; import homeIcon from "../assets/icons/home.svg";
import cacheIcon from '../assets/icons/cache.svg'; import cacheIcon from "../assets/icons/cache.svg";
import apiIcon from '../assets/icons/api.svg'; import apiIcon from "../assets/icons/api.svg";
import testPlayerIcon from '../assets/icons/testplayer.svg'; import testPlayerIcon from "../assets/icons/testplayer.svg";
import accountIcon from '../assets/icons/account.svg'; import accountIcon from "../assets/icons/account.svg";
import discordIcon from '../assets/icons/discord.svg'; import discordIcon from "../assets/icons/discord.svg";
import telegramIcon from '../assets/icons/telegram.svg'; import telegramIcon from "../assets/icons/telegram.svg";
import giteaIcon from '../assets/icons/gitea.svg'; import giteaIcon from "../assets/icons/gitea.svg";
function SideMenu({ isMenuOpen, setIsMenuOpen }) { function SideMenu({ isMenuOpen, setIsMenuOpen }) {
const [externalLinks, setExternalLinks] = useState({ const [externalLinks, setExternalLinks] = useState({
discord: '#', discord: "#",
telegram: '#', telegram: "#",
gitea: '#', gitea: "#",
}); });
useEffect(() => { useEffect(() => {
fetch('/api/links') fetch("/api/links")
.then((res) => res.json()) .then((res) => res.json())
.then((data) => setExternalLinks(data)) .then((data) => setExternalLinks(data))
.catch((err) => console.error('Failed to fetch links:', err)); .catch((err) => console.error("Failed to fetch links:", err));
}, []); }, []);
return ( return (
<div <div
className={`flex flex-col fixed top-0 left-0 w-full h-full bg-black transition-transform transform ${ className={`flex flex-col fixed top-0 left-0 w-full h-full bg-black transition-transform transform ${
isMenuOpen ? 'translate-x-0' : '-translate-x-full' isMenuOpen ? "translate-x-0" : "-translate-x-full"
} z-50`} } z-50`}
style={{ transitionDuration: '0.3s' }} style={{ transitionDuration: "0.3s" }}
> >
<div className="flex flex-col bg-gray-950/55 h-full"> <div className="flex flex-col bg-gray-950/55 h-full">
{/* Header */} {/* Header */}
@ -43,7 +43,11 @@ function SideMenu({ isMenuOpen, setIsMenuOpen }) {
className="w-full h-full flex items-center justify-center" className="w-full h-full flex items-center justify-center"
onClick={() => setIsMenuOpen(false)} onClick={() => setIsMenuOpen(false)}
> >
<img src={closeIcon} alt="Close" className="w-1/2 h-1/2 cursor-pointer" /> <img
src={closeIcon}
alt="Close"
className="w-1/2 h-1/2 cursor-pointer"
/>
</button> </button>
</div> </div>
</div> </div>
@ -56,8 +60,8 @@ function SideMenu({ isMenuOpen, setIsMenuOpen }) {
className={({ isActive }) => className={({ isActive }) =>
`flex flex-row items-center gap-3 p-3 border-l-4 ${ `flex flex-row items-center gap-3 p-3 border-l-4 ${
isActive isActive
? 'border-l-sky-500/50 bg-black/50 text-white' ? "border-l-sky-500/50 bg-black/50 text-white"
: 'border-transparent hover:border-l-sky-500/50 hover:bg-white/5 text-white/80' : "border-transparent hover:border-l-sky-500/50 hover:bg-white/5 text-white/80"
}` }`
} }
onClick={() => setIsMenuOpen(false)} onClick={() => setIsMenuOpen(false)}
@ -71,8 +75,8 @@ function SideMenu({ isMenuOpen, setIsMenuOpen }) {
className={({ isActive }) => className={({ isActive }) =>
`flex flex-row items-center gap-3 p-3 border-l-4 ${ `flex flex-row items-center gap-3 p-3 border-l-4 ${
isActive isActive
? 'border-l-emerald-500/50 bg-black/50 text-white' ? "border-l-emerald-500/50 bg-black/50 text-white"
: 'border-transparent hover:border-l-emerald-500/50 hover:bg-white/5 text-white/80' : "border-transparent hover:border-l-emerald-500/50 hover:bg-white/5 text-white/80"
}` }`
} }
onClick={() => setIsMenuOpen(false)} onClick={() => setIsMenuOpen(false)}
@ -86,8 +90,8 @@ function SideMenu({ isMenuOpen, setIsMenuOpen }) {
className={({ isActive }) => className={({ isActive }) =>
`flex flex-row items-center gap-3 p-3 border-l-4 ${ `flex flex-row items-center gap-3 p-3 border-l-4 ${
isActive isActive
? 'border-l-indigo-500/50 bg-black/50 text-white' ? "border-l-indigo-500/50 bg-black/50 text-white"
: 'border-transparent hover:border-l-indigo-500/50 hover:bg-white/5 text-white/80' : "border-transparent hover:border-l-indigo-500/50 hover:bg-white/5 text-white/80"
}` }`
} }
onClick={() => setIsMenuOpen(false)} onClick={() => setIsMenuOpen(false)}
@ -101,8 +105,8 @@ function SideMenu({ isMenuOpen, setIsMenuOpen }) {
className={({ isActive }) => className={({ isActive }) =>
`flex flex-row items-center gap-3 p-3 border-l-4 ${ `flex flex-row items-center gap-3 p-3 border-l-4 ${
isActive isActive
? 'border-l-rose-700/50 bg-black/50 text-white' ? "border-l-rose-700/50 bg-black/50 text-white"
: 'border-transparent hover:border-l-rose-700/50 hover:bg-white/5 text-white/80' : "border-transparent hover:border-l-rose-700/50 hover:bg-white/5 text-white/80"
}` }`
} }
onClick={() => setIsMenuOpen(false)} onClick={() => setIsMenuOpen(false)}
@ -119,8 +123,8 @@ function SideMenu({ isMenuOpen, setIsMenuOpen }) {
className={({ isActive }) => className={({ isActive }) =>
`flex flex-row items-center gap-3 p-3 border-l-4 ${ `flex flex-row items-center gap-3 p-3 border-l-4 ${
isActive isActive
? 'border-l-yellow-500/50 bg-black/50 text-white' ? "border-l-yellow-500/50 bg-black/50 text-white"
: 'border-transparent hover:border-l-yellow-500/50 hover:bg-white/5 text-white/80' : "border-transparent hover:border-l-yellow-500/50 hover:bg-white/5 text-white/80"
}` }`
} }
onClick={() => setIsMenuOpen(false)} onClick={() => setIsMenuOpen(false)}

6
cdrm-frontend/src/index.css
View File

@ -2,9 +2,9 @@
details summary::-webkit-details-marker { details summary::-webkit-details-marker {
display: none; display: none;
} }
details summary { details summary {
list-style: none; list-style: none;
cursor: pointer; cursor: pointer;
} }

14
cdrm-frontend/src/main.jsx
View File

@ -1,13 +1,13 @@
import { StrictMode } from 'react' import { StrictMode } from "react";
import { createRoot } from 'react-dom/client' import { createRoot } from "react-dom/client";
import { BrowserRouter } from 'react-router-dom' import { BrowserRouter } from "react-router-dom";
import './index.css' import "./index.css";
import App from './App.jsx' import App from "./App.jsx";
createRoot(document.getElementById('root')).render( createRoot(document.getElementById("root")).render(
<StrictMode> <StrictMode>
<BrowserRouter> <BrowserRouter>
<App /> <App />
</BrowserRouter> </BrowserRouter>
</StrictMode> </StrictMode>
) );

8
cdrm-frontend/vite.config.js
View File

@ -1,8 +1,8 @@
import { defineConfig } from 'vite' import { defineConfig } from "vite";
import react from '@vitejs/plugin-react' import react from "@vitejs/plugin-react";
import tailwindcss from '@tailwindcss/vite' import tailwindcss from "@tailwindcss/vite";
// https://vite.dev/config/ // https://vite.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [react(), tailwindcss()], plugins: [react(), tailwindcss()],
}) });