pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
revert to OG flix page bc i cant code for shit
+85
-39
+85
-39
src/pages/TopFlix.tsx
+85
-39
src/pages/TopFlix.tsx
···
1
1
import classNames from "classnames";
2
-
import { useEffect, useState } from "react";
2
+
import { ReactNode, useEffect, useState } from "react";
3
+
import { Link } from "react-router-dom"; // Import Link from react-router-dom
3
4
4
-
import { getMediaDetails, getMediaPoster } from "@/backend/metadata/tmdb";
5
-
import { TMDBContentTypes } from "@/backend/metadata/types/tmdb";
6
5
import { ThiccContainer } from "@/components/layout/ThinContainer";
7
-
import { MediaCard } from "@/components/media/MediaCard";
8
-
import { MediaGrid } from "@/components/media/MediaGrid";
6
+
import { Divider } from "@/components/utils/Divider";
9
7
import { Heading1, Paragraph } from "@/components/utils/Text";
10
-
import { MediaItem } from "@/utils/mediaTypes";
11
8
12
9
import { SubPageLayout } from "./layouts/SubPageLayout";
10
+
// import { MediaGrid } from "@/components/media/MediaGrid"
11
+
// import { TopFlixCard } from "@/components/media/FlixCard";
13
12
14
13
function Button(props: {
15
14
className: string;
···
32
31
);
33
32
}
34
33
35
-
function isShowOrMovie(tmdbFullId: string): "show" | "movie" {
34
+
function isShowOrMovie(tmdbFullId: string): "series" | "movie" | "unknown" {
36
35
if (tmdbFullId.includes("show-")) {
37
-
return "show";
36
+
return "series";
38
37
}
39
38
if (tmdbFullId.includes("movie-")) {
40
39
return "movie";
41
40
}
42
-
throw new Error("Invalid tmdbFullId");
41
+
return "unknown";
43
42
}
44
43
45
-
async function getPoster(
46
-
tmdbId: string,
47
-
type: TMDBContentTypes.MOVIE | TMDBContentTypes.TV,
48
-
): Promise<string> {
49
-
const details = await getMediaDetails(tmdbId, type);
50
-
51
-
const posterPath = getMediaPoster(details.poster_path);
44
+
function directLinkToContent(tmdbFullId: string) {
45
+
if (isShowOrMovie(tmdbFullId) === "series") {
46
+
return `${window.location.pathname}#/media/tmdb-movie-${
47
+
tmdbFullId.split("-")[1]
48
+
}`;
49
+
}
50
+
if (isShowOrMovie(tmdbFullId) === "movie") {
51
+
return `${window.location.pathname}#/media/tmdb-tv-${
52
+
tmdbFullId.split("-")[1]
53
+
}`;
54
+
}
55
+
return null;
56
+
}
52
57
53
-
return posterPath || "";
58
+
function ConfigValue(props: {
59
+
name: string;
60
+
id: string;
61
+
children?: ReactNode;
62
+
}) {
63
+
const link = directLinkToContent(props.id);
64
+
return (
65
+
<>
66
+
<div className="flex">
67
+
<p className="flex-1 font-bold text-white pr-5 pl-3">
68
+
{link ? (
69
+
<Link to={link} className="hover:underline">
70
+
{props.name}
71
+
</Link>
72
+
) : (
73
+
<p>{props.name}</p>
74
+
)}
75
+
</p>
76
+
<p className="pr-3">{props.children}</p>
77
+
</div>
78
+
<Divider marginClass="my-3" />
79
+
</>
80
+
);
54
81
}
55
82
56
83
async function getRecentPlayedItems() {
···
112
139
const [totalViews, setTotalViews] = useState<string | null>(null);
113
140
const [loading, setLoading] = useState(true);
114
141
const [currentPage, setCurrentPage] = useState(1);
115
-
const itemsPerPage = 12;
116
-
const maxItemsToShow = 12; // Maximum items to show
142
+
const itemsPerPage = 10;
143
+
const maxItemsToShow = 100; // Maximum items to show
144
+
const maxPageCount = Math.ceil(maxItemsToShow / itemsPerPage); // Calculate max page count based on maxItemsToShow
117
145
118
146
useEffect(() => {
119
147
getRecentPlayedItems()
···
157
185
);
158
186
}
159
187
160
-
// make a object named media and it should be of type MediaItem
161
-
162
188
return (
163
189
<SubPageLayout>
164
190
<ThiccContainer>
···
169
195
the current backend deployment.
170
196
</Paragraph>
171
197
<div className="mt-8 w-auto">
172
-
<div className="bg-buttons-secondary rounded-xl scale-95 py-3 px-5 mb-14 inline-block">
198
+
<div className="bg-buttons-secondary rounded-xl scale-95 py-3 px-5 mb-2 inline-block">
173
199
<p className="font-bold bg-opacity-90 text-buttons-secondaryText">
174
200
Overall Views: {totalViews}
175
201
</p>
176
202
</div>
177
203
</div>
178
204
179
-
<MediaGrid>
180
-
{getItemsForCurrentPage().map((item) => {
181
-
const tmdbId = item.tmdbFullId.split("-")[1];
182
-
const type = isShowOrMovie(item.tmdbFullId);
183
-
const poster = getPoster(tmdbId, type === "movie" ? TMDBContentTypes.MOVIE : TMDBContentTypes.TV);
184
-
console.log(poster);
185
-
const media: MediaItem = {
186
-
id: tmdbId,
187
-
title: item.title,
188
-
type,
189
-
poster,
190
-
// year: 420,
191
-
};
192
-
193
-
return <MediaCard linkable media={media} />;
194
-
})}
195
-
</MediaGrid>
205
+
<Divider marginClass="my-3" />
206
+
{getItemsForCurrentPage().map((item) => {
207
+
return (
208
+
<ConfigValue
209
+
key={item.tmdbFullId}
210
+
id={item.tmdbFullId}
211
+
name={item.title}
212
+
>
213
+
{`${item.providerId}, ${isShowOrMovie(
214
+
item.tmdbFullId,
215
+
)} - Views: `}
216
+
<strong>{item.count}</strong>
217
+
</ConfigValue>
218
+
);
219
+
})}
220
+
</div>
221
+
<div
222
+
style={{ display: "flex", justifyContent: "space-between" }}
223
+
className="mt-5 w-full px-8"
224
+
>
225
+
<Button
226
+
className="py-px box-content bg-buttons-secondary hover:bg-buttons-secondaryHover bg-opacity-90 text-buttons-secondaryText justify-center items-center"
227
+
onClick={() => setCurrentPage(currentPage - 1)}
228
+
disabled={currentPage === 1}
229
+
>
230
+
Previous page
231
+
</Button>
232
+
<div style={{ display: "flex", alignItems: "center" }}>
233
+
{currentPage} / {maxPageCount}
234
+
</div>
235
+
<Button
236
+
className="py-px box-content bg-buttons-secondary hover:bg-buttons-secondaryHover bg-opacity-90 text-buttons-secondaryText justify-center items-center"
237
+
onClick={() => setCurrentPage(currentPage + 1)}
238
+
disabled={currentPage === maxPageCount}
239
+
>
240
+
Next page
241
+
</Button>
196
242
</div>
197
243
</ThiccContainer>
198
244
</SubPageLayout>