Skip to content

Commit ce0f44d

Browse files
stronk-devstronk-dev
committed
Skeleton - everything except the specific components for each KPI view
1 parent 1c8b660 commit ce0f44d

26 files changed

+964
-2
lines changed

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
package-lock.json

‎README.md

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +0,0 @@
1-
# LivepeerPerformanceTranscoder
2-
Dashboard for transcoders, their pricing and performance

‎package.json

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "LivepeerDashboardTranscoder",
3+
"version": "0.0.1",
4+
"private": true,
5+
"dependencies": {
6+
"http": "^0.0.1-security",
7+
"https": "^1.0.0",
8+
"react": "^18.2.0",
9+
"react-dom": "^18.2.0",
10+
"react-router-dom": "^6.0.2",
11+
"react-scripts": "^5.0.1"
12+
},
13+
"scripts": {
14+
"start": "react-scripts start",
15+
"build": "react-scripts build",
16+
"test": "react-scripts test",
17+
"eject": "react-scripts eject"
18+
},
19+
"eslintConfig": {
20+
"extends": "react-app"
21+
},
22+
"browserslist": {
23+
"production": [
24+
">0.2%",
25+
"not dead",
26+
"not op_mini all"
27+
],
28+
"development": [
29+
"last 1 chrome version",
30+
"last 1 firefox version",
31+
"last 1 safari version"
32+
]
33+
}
34+
}

‎public/50x.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Error</title>
5+
<style>
6+
body {
7+
width: 35em;
8+
margin: 0 auto;
9+
font-family: Tahoma, Verdana, Arial, sans-serif;
10+
}
11+
</style>
12+
</head>
13+
<body>
14+
<h1>An error occurred.</h1>
15+
<p>Sorry, the page you are looking for is currently unavailable.<br/>
16+
Please try again later.</p>
17+
<p>If you are the system administrator of this resource then you should check
18+
the error log for details.</p>
19+
<p><em>Faithfully yours, nginx.</em></p>
20+
</body>
21+
</html>

‎public/android-chrome-192x192.png

40.4 KB
Loading

‎public/android-chrome-512x512.png

213 KB
Loading

‎public/apple-touch-icon.png

36.3 KB
Loading

‎public/favicon-16x16.png

909 Bytes
Loading

‎public/favicon-32x32.png

2.28 KB
Loading

‎public/favicon.ico

15 KB
Binary file not shown.

‎public/index.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#855dfe" />
8+
<meta
9+
name="Transcoder Performance"
10+
content="marco@stronk.rocks"
11+
/>
12+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
13+
<title>Livepeer AI</title>
14+
<meta name="title" content="Livepeer Transcoder" />
15+
<meta name="description" content="Overview of transcoder performance on the Livepeer network." />
16+
</head>
17+
<body>
18+
<noscript>You need to enable JavaScript to run this app.</noscript>
19+
<div id="root"></div>
20+
</body>
21+
</html>

‎public/livepeer.png

70.4 KB
Loading

‎public/logo.png

782 KB
Loading

‎public/logo_centered.png

685 KB
Loading

‎public/manifest.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"short_name": "Livepeer-Transcoder-Dashboard",
3+
"name": "stronk.rocks/ai",
4+
"icons": [
5+
{
6+
"src": "favicon.ico",
7+
"type": "image/x-icon"
8+
}
9+
],
10+
"start_url": ".",
11+
"display": "standalone",
12+
"theme_color": "#855dfe",
13+
"background_color": "#020643"
14+
}

‎public/robots.txt

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# https://www.robotstxt.org/robotstxt.html
2+
User-agent: *

‎src/App.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import * as React from "react";
2+
import Home from './pages/home.js';
3+
import "./shared.css";
4+
5+
import {
6+
BrowserRouter as Router,
7+
Routes,
8+
Route
9+
} from "react-router-dom";
10+
11+
export default function App() {
12+
return (
13+
<Router>
14+
<Routes>
15+
<Route path='/' element={<Home />} />
16+
</Routes>
17+
</Router>
18+
);
19+
}

‎src/components/DvdLogo.js

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import React, { useEffect, useState } from "react";
2+
3+
const DvdLogo = ({ parentRef }) => {
4+
const [position, setPosition] = useState({ top: 0, left: 0 });
5+
const [velocity, setVelocity] = useState({ x: 3, y: 3 });
6+
7+
const getRandomColor = (currentColor) => {
8+
const colors = ["#7aa2f7", "#bb9af7", "#9ece6a", "#e0af68", "#f7768e"];
9+
let newColor;
10+
do {
11+
newColor = colors[Math.floor(Math.random() * colors.length)];
12+
} while (newColor === currentColor);
13+
return newColor;
14+
};
15+
16+
const [color, setColor] = useState(getRandomColor());
17+
18+
// Set initial position once when parentRef becomes available
19+
useEffect(() => {
20+
if (parentRef.current) {
21+
setPosition({
22+
top: Math.random() * (parentRef.current.clientHeight - 69),
23+
left: Math.random() * (parentRef.current.clientWidth - 153),
24+
});
25+
}
26+
}, [parentRef]);
27+
28+
// Update position continuously for bouncing
29+
useEffect(() => {
30+
const updatePosition = () => {
31+
setPosition((prevPosition) => {
32+
if (!parentRef.current) return prevPosition;
33+
34+
const newTop = prevPosition.top + velocity.y;
35+
const newLeft = prevPosition.left + velocity.x;
36+
37+
let newVelocity = { ...velocity };
38+
let newColor = color;
39+
40+
// Check for collision with the edges of the parent component
41+
if (newTop <= 0 || newTop >= parentRef.current.clientHeight - 69) {
42+
newVelocity.y = -newVelocity.y;
43+
newColor = getRandomColor(color);
44+
}
45+
if (newLeft <= 0 || newLeft >= parentRef.current.clientWidth - 153) {
46+
newVelocity.x = -newVelocity.x;
47+
newColor = getRandomColor(color);
48+
}
49+
50+
setVelocity(newVelocity);
51+
setColor(newColor);
52+
53+
return { top: newTop, left: newLeft };
54+
});
55+
};
56+
57+
if (parentRef.current) {
58+
const interval = setInterval(updatePosition, 16);
59+
return () => clearInterval(interval);
60+
}
61+
}, [velocity, color, parentRef]);
62+
63+
return (
64+
<div
65+
className="dvd-logo"
66+
style={{
67+
position: "absolute",
68+
top: `${position.top}px`,
69+
left: `${position.left}px`,
70+
width: "153px",
71+
height: "69px",
72+
}}
73+
>
74+
<svg width="153px" height="69px" fill={color}>
75+
<g>
76+
<path d="M140.186,63.52h-1.695l-0.692,5.236h-0.847l0.77-5.236h-1.693l0.076-0.694h4.158L140.186,63.52L140.186,63.52z M146.346,68.756h-0.848v-4.545l0,0l-2.389,4.545l-1-4.545l0,0l-1.462,4.545h-0.771l1.924-5.931h0.695l0.924,4.006l2.078-4.006 h0.848V68.756L146.346,68.756z M126.027,0.063H95.352c0,0-8.129,9.592-9.654,11.434c-8.064,9.715-9.523,12.32-9.779,13.02 c0.063-0.699-0.256-3.304-3.686-13.148C71.282,8.7,68.359,0.062,68.359,0.062H57.881V0L32.35,0.063H13.169l-1.97,8.131 l14.543,0.062h3.365c9.336,0,15.055,3.747,13.467,10.354c-1.717,7.24-9.91,10.416-18.545,10.416h-3.24l4.191-17.783H10.502 L4.34,37.219h20.578c15.432,0,30.168-8.13,32.709-18.608c0.508-1.906,0.443-6.67-0.764-9.527c0-0.127-0.063-0.191-0.127-0.444 c-0.064-0.063-0.127-0.509,0.127-0.571c0.128-0.062,0.383,0.189,0.445,0.254c0.127,0.317,0.19,0.57,0.19,0.57l13.083,36.965 l33.344-37.6h14.1h3.365c9.337,0,15.055,3.747,13.528,10.354c-1.778,7.24-9.972,10.416-18.608,10.416h-3.238l4.191-17.783h-14.481 l-6.159,25.976h20.576c15.434,0,30.232-8.13,32.709-18.608C152.449,8.193,141.523,0.063,126.027,0.063L126.027,0.063z M71.091,45.981c-39.123,0-70.816,4.512-70.816,10.035c0,5.59,31.693,10.034,70.816,10.034c39.121,0,70.877-4.444,70.877-10.034 C141.968,50.493,110.212,45.981,71.091,45.981L71.091,45.981z M68.55,59.573c-8.956,0-16.196-1.523-16.196-3.365 c0-1.84,7.239-3.303,16.196-3.303c8.955,0,16.195,1.463,16.195,3.303C84.745,58.05,77.505,59.573,68.55,59.573L68.55,59.573z" />
77+
</g>
78+
</svg>
79+
</div>
80+
);
81+
};
82+
83+
export default DvdLogo;

‎src/components/loadingScreen.css

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
.loading-screen-container {
2+
display: flex;
3+
flex-direction: column;
4+
align-items: center;
5+
justify-content: center;
6+
height: 100vh;
7+
background: linear-gradient(135deg, var(--darkest), var(--darker));
8+
color: var(--text-color);
9+
position: relative;
10+
overflow: hidden;
11+
}
12+
13+
.loading-screen-row {
14+
display: flex;
15+
justify-content: center;
16+
margin-bottom: 2rem;
17+
animation: fadeIn 1.5s ease-in-out;
18+
}
19+
20+
.loading-screen-logo {
21+
width: 150px;
22+
height: 150px;
23+
border-radius: 2em;
24+
z-index: 20; /* Ensures it is always on top */
25+
animation: logoGrow 4s infinite alternate ease-in-out, fadeIn 1.5s ease-in-out;
26+
filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.6)); /* Added depth */
27+
}
28+
29+
.loading-vertical-divider {
30+
width: 100%;
31+
height: 1px;
32+
background-color: var(--grey);
33+
animation: grow 3s ease-in-out forwards;
34+
}
35+
36+
.loading-screen-message {
37+
background-color: var(--darker);
38+
padding: 1.5rem;
39+
border-radius: 12px;
40+
text-align: center;
41+
box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
42+
position: absolute;
43+
z-index: 1;
44+
text-wrap: nowrap;
45+
animation: fadeIn 0.5s ease-in-out;
46+
transition: transform 2s ease-in-out;
47+
}
48+
49+
/* Keyframes for animations */
50+
@keyframes logoGrow {
51+
0% { transform: scale(1); }
52+
100% { transform: scale(2.5); }
53+
}
54+
55+
@keyframes fadeIn {
56+
0% { opacity: 0; }
57+
100% { opacity: 1; }
58+
}
59+
60+
@keyframes fadeIn {
61+
0% { opacity: 0; }
62+
20% { opacity: 0.4; }
63+
100% { opacity: 1; }
64+
}
65+
66+
@keyframes grow {
67+
0% { height: 0; }
68+
100% { height: 60%; }
69+
}

0 commit comments

Comments
 (0)