pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
Fix banner and direct link to media + improve load time
+58
-53
+7
-22
src/pages/TopFlix.tsx
+7
-22
src/pages/TopFlix.tsx
···
1
1
import classNames from "classnames";
2
2
import { ReactNode, useEffect, useState } from "react";
3
-
import { Link } from "react-router-dom"; // Import Link from react-router-dom
3
+
import { useNavigate } from "react-router-dom"; // Import Link from react-router-dom
4
4
5
5
import { ThiccContainer } from "@/components/layout/ThinContainer";
6
6
import { Divider } from "@/components/utils/Divider";
···
43
43
44
44
function directLinkToContent(tmdbFullId: string) {
45
45
if (isShowOrMovie(tmdbFullId) === "series") {
46
-
return `/media/tmdb-tv-${tmdbFullId.split("-")[1]}#/media/tmdb-tv-${
47
-
tmdbFullId.split("-")[1]
48
-
}`;
46
+
return `/media/tmdb-tv-${tmdbFullId.split("-")[1]}`;
49
47
}
50
48
if (isShowOrMovie(tmdbFullId) === "movie") {
51
-
return `/media/tmdb-movie-${tmdbFullId.split("-")[1]}#/media/tmdb-movie-${
52
-
tmdbFullId.split("-")[1]
53
-
}`;
49
+
return `/media/tmdb-movie-${tmdbFullId.split("-")[1]}`;
54
50
}
55
51
return null;
56
52
}
···
61
57
id: string;
62
58
children?: ReactNode;
63
59
}) {
60
+
const navigate = useNavigate();
64
61
const link = directLinkToContent(props.id);
65
62
return (
66
63
<>
67
64
<div className="flex">
68
65
<p className="flex-1 font-bold text-white pr-5 pl-3">
69
66
{link ? (
70
-
<Link to={link} className="hover:underline">
67
+
<p onClick={() => navigate(link)} className="hover:underline">
71
68
{props.name}
72
-
</Link>
69
+
</p>
73
70
) : (
74
71
<p>{props.name}</p>
75
72
)}
···
160
157
const timeDifference =
161
158
currentTime.getTime() - new Date(processStartTime).getTime();
162
159
163
-
// Convert the time difference to a human-readable format
164
160
const hours = Math.floor(timeDifference / (1000 * 60 * 60));
165
161
const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
166
162
const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);
167
-
const percentageOfHour = Math.ceil(minutes / 60);
168
163
169
164
if (hours > 0) {
170
-
return `${hours}.${percentageOfHour} hours`;
165
+
return `${hours} hours`;
171
166
}
172
167
if (minutes > 0) {
173
168
return `${minutes} minutes`;
···
178
173
export function TopFlix() {
179
174
const [recentPlayedItems, setRecentPlayedItems] = useState<any[]>([]);
180
175
const [totalViews, setTotalViews] = useState<string | null>(null);
181
-
const [loading, setLoading] = useState(true);
182
176
const [currentPage, setCurrentPage] = useState(1);
183
177
const itemsPerPage = 10;
184
178
const maxItemsToShow = 100; // Maximum items to show
···
203
197
})
204
198
.catch((error) => {
205
199
console.error("Error fetching recent played items:", error);
206
-
})
207
-
.finally(() => {
208
-
setLoading(false);
209
200
});
210
201
getTotalViews()
211
202
.then((views) => {
···
235
226
...item,
236
227
rank: startIndex + index + 1,
237
228
}));
238
-
}
239
-
240
-
if (loading) {
241
-
return (
242
-
<p className="flex items-center justify-center h-screen">Loading...</p>
243
-
);
244
229
}
245
230
246
231
return (
-8
src/setup/Layout.tsx
-8
src/setup/Layout.tsx
···
28
28
const location = useBannerStore((s) => s.location);
29
29
const [extensionState, setExtensionState] =
30
30
useState<ExtensionStatus>("unknown");
31
-
const [loading, setLoading] = useState(true);
32
31
const [isMobile, setIsMobile] = useState(false);
33
32
34
33
useEffect(() => {
···
37
36
getExtensionState().then((state) => {
38
37
if (isMounted) {
39
38
setExtensionState(state);
40
-
setLoading(false);
41
39
}
42
40
});
43
41
···
55
53
mediaQuery.removeListener(handleResize);
56
54
};
57
55
}, []);
58
-
59
-
if (loading) {
60
-
return (
61
-
<p className="flex items-center justify-center h-screen">Loading...</p>
62
-
);
63
-
}
64
56
65
57
return (
66
58
<div>