pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
Add server lifetime box to the flix page
+58
-2
+58
-2
src/pages/TopFlix.tsx
+58
-2
src/pages/TopFlix.tsx
···
138
138
throw new Error("TOTAL_VIEWS not found");
139
139
}
140
140
141
+
function getProcessStartTime(): Promise<string> {
142
+
return fetch("https://backend.sudo-flix.lol/metrics")
143
+
.then((response) => response.text())
144
+
.then((text) => {
145
+
const regex = /process_start_time_seconds (\d+)/;
146
+
const match = text.match(regex);
147
+
148
+
if (match) {
149
+
const parsedNum = parseInt(match[1], 10);
150
+
const date = new Date(parsedNum * 1000);
151
+
return date.toISOString();
152
+
}
153
+
throw new Error("PROCESS_START_TIME_SECONDS not found");
154
+
});
155
+
}
156
+
157
+
async function getTimeSinceProcessStart(): Promise<string> {
158
+
const processStartTime = await getProcessStartTime();
159
+
const currentTime = new Date();
160
+
const timeDifference =
161
+
currentTime.getTime() - new Date(processStartTime).getTime();
162
+
163
+
// Convert the time difference to a human-readable format
164
+
const hours = Math.floor(timeDifference / (1000 * 60 * 60));
165
+
const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
166
+
const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);
167
+
168
+
if (hours > 0) {
169
+
return `${hours}:${minutes} hours`;
170
+
}
171
+
if (minutes > 0) {
172
+
return `${minutes} minutes`;
173
+
}
174
+
return `${seconds} seconds`;
175
+
}
176
+
141
177
export function TopFlix() {
142
178
const [recentPlayedItems, setRecentPlayedItems] = useState<any[]>([]);
143
179
const [totalViews, setTotalViews] = useState<string | null>(null);
···
146
182
const itemsPerPage = 10;
147
183
const maxItemsToShow = 100; // Maximum items to show
148
184
const maxPageCount = Math.ceil(maxItemsToShow / itemsPerPage); // Calculate max page count based on maxItemsToShow
185
+
const [timeSinceProcessStart, setTimeSinceProcessStart] = useState<
186
+
string | null
187
+
>(null);
149
188
150
189
useEffect(() => {
151
190
getRecentPlayedItems()
···
176
215
});
177
216
}, []);
178
217
218
+
useEffect(() => {
219
+
getTimeSinceProcessStart()
220
+
.then((time) => {
221
+
setTimeSinceProcessStart(time);
222
+
})
223
+
.catch((error) => {
224
+
console.error("Error fetching time since process start:", error);
225
+
});
226
+
}, []);
227
+
179
228
function getItemsForCurrentPage() {
180
229
const sortedItems = recentPlayedItems.sort((a, b) => b.count - a.count);
181
230
const startIndex = (currentPage - 1) * itemsPerPage;
···
198
247
<ThiccContainer>
199
248
<div className="mt-8 w-full px-8">
200
249
<Heading1>Top flix</Heading1>
201
-
<Paragraph className="mb-18">
250
+
<Paragraph className="mb-6">
202
251
The most popular movies on sudo-flix.lol, this data is fetched from
203
252
the current backend deployment.
204
253
</Paragraph>
205
-
<div className="mt-8 w-auto">
254
+
<div className="mt-8 flex-col gap-2 w-auto">
255
+
<div className="bg-buttons-secondary rounded-xl scale-95 py-3 px-5 mb-2 inline-block">
256
+
<p className="font-bold bg-opacity-90 text-buttons-secondaryText">
257
+
Server Lifetime: {timeSinceProcessStart}
258
+
</p>
259
+
</div>
206
260
<div className="bg-buttons-secondary rounded-xl scale-95 py-3 px-5 mb-2 inline-block">
207
261
<p className="font-bold bg-opacity-90 text-buttons-secondaryText">
208
262
Overall Views: {totalViews}
209
263
</p>
210
264
</div>
211
265
</div>
266
+
</div>
212
267
268
+
<div className="pl-6 pr-6">
213
269
<Divider marginClass="my-3" />
214
270
{getItemsForCurrentPage().map((item) => {
215
271
return (