Woot Woot

This commit is contained in:
Luke Hagar
2022-07-30 23:52:15 -05:00
parent f8ae059bcc
commit b1f0addc88
3 changed files with 195 additions and 88 deletions

12
package-lock.json generated
View File

@@ -14261,9 +14261,9 @@
} }
}, },
"node_modules/plex-api-oauth": { "node_modules/plex-api-oauth": {
"version": "1.1.58", "version": "1.1.97",
"resolved": "https://registry.npmjs.org/plex-api-oauth/-/plex-api-oauth-1.1.58.tgz", "resolved": "https://registry.npmjs.org/plex-api-oauth/-/plex-api-oauth-1.1.97.tgz",
"integrity": "sha512-R0m9xQ24qLQgMLROzppY6OtvWQoSwxH3UPrQ4UCFCvN14ROVQqlC5pqbG7ufGldcA7zGWD+RxLWxOs5GOF7Jjg==", "integrity": "sha512-rBUlBHX5SEdmOoTRKFl/0DBJ0G5gR3dEaAKyFLAGeeKjuyJR7MbIgyMIM4nbYMAY7CUBA7cE/9bB7unjlkTYbg==",
"dependencies": { "dependencies": {
"axios": "^0.27.2", "axios": "^0.27.2",
"plex-oauth": "^2.0.2", "plex-oauth": "^2.0.2",
@@ -29568,9 +29568,9 @@
"integrity": "sha512-Igl37++MSa+4H8LNP3Ene9GU0e1YypmXvFVNvVUwoAx44e74jbUlJXy4Q5rLSBisn0O2lBKdE6VkFIwrDl+UnQ==" "integrity": "sha512-Igl37++MSa+4H8LNP3Ene9GU0e1YypmXvFVNvVUwoAx44e74jbUlJXy4Q5rLSBisn0O2lBKdE6VkFIwrDl+UnQ=="
}, },
"plex-api-oauth": { "plex-api-oauth": {
"version": "1.1.58", "version": "1.1.97",
"resolved": "https://registry.npmjs.org/plex-api-oauth/-/plex-api-oauth-1.1.58.tgz", "resolved": "https://registry.npmjs.org/plex-api-oauth/-/plex-api-oauth-1.1.97.tgz",
"integrity": "sha512-R0m9xQ24qLQgMLROzppY6OtvWQoSwxH3UPrQ4UCFCvN14ROVQqlC5pqbG7ufGldcA7zGWD+RxLWxOs5GOF7Jjg==", "integrity": "sha512-rBUlBHX5SEdmOoTRKFl/0DBJ0G5gR3dEaAKyFLAGeeKjuyJR7MbIgyMIM4nbYMAY7CUBA7cE/9bB7unjlkTYbg==",
"requires": { "requires": {
"axios": "^0.27.2", "axios": "^0.27.2",
"plex-oauth": "^2.0.2", "plex-oauth": "^2.0.2",

View File

@@ -1,3 +1,4 @@
/* eslint-disable @typescript-eslint/no-unused-expressions */
/* eslint-disable react/jsx-no-bind */ /* eslint-disable react/jsx-no-bind */
/* eslint-disable react/no-array-index-key */ /* eslint-disable react/no-array-index-key */
/* eslint-disable prefer-template */ /* eslint-disable prefer-template */
@@ -83,10 +84,29 @@ function App() {
const [activePage, setActivePage] = useState(0); const [activePage, setActivePage] = useState(0);
const [plexStateTracker, setPlexStateTracker] = useState(0); const [plexStateTracker, setPlexStateTracker] = useState(0);
const [plexSession, setPlexSession] = useState(LoadPlexSession()); let loadedSession = LoadPlexSession();
const [plexSessionData, setPlexSessionData] = useState(); console.log(loadedSession);
if (
loadedSession.plexClientInformation === null ||
loadedSession.plexClientInformation === undefined
) {
loadedSession.plexClientInformation = CreatePlexClientInformation();
}
const [plexLibraryData, setPlexLibraryData] = useState(); console.log(loadedSession);
const [plexClientInformation, setPlexClientInformation] = useState(
loadedSession.plexClientInformation
);
const [plexTVAuthToken, setPlexTVAuthToken] = useState(
loadedSession.plexTVAuthToken
);
const [plexServers, setPlexServers] = useState();
const [plexTVUserData, setPlexTVUserData] = useState();
const [plexLibraries, setPlexLibraries] = useState();
const [libraryItems, setLibraryItems] = useState([]);
const [libraryHasMore, setLibraryHasMore] = useState(false);
const [searchData, setSearchData] = useState(); const [searchData, setSearchData] = useState();
const [query, setQuery] = useState(''); const [query, setQuery] = useState('');
@@ -95,7 +115,6 @@ function App() {
function handleSearch(event) { function handleSearch(event) {
setQuery(event.target.value); setQuery(event.target.value);
setPageNumber(1);
} }
if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') { if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
@@ -125,45 +144,100 @@ function App() {
// console.log(activeTheme); // console.log(activeTheme);
async function PlexLoginButton() { async function PlexLoginButton() {
setPlexSession(await PlexLogin()); const tempPlexTVAuthToken = await PlexLogin(plexClientInformation);
SavePlexSession(plexSession); const tempPlexTVUserData = await GetPlexUserData(
const plexTVUserData = await GetPlexUserData(plexSession); plexClientInformation,
const plexServers = await GetPlexServers(plexSession); tempPlexTVAuthToken
const plexLibraries = await GetPlexLibraries(plexServers); );
setPlexSessionData({ plexTVUserData, plexServers, plexLibraries }); const tempPlexServers = await GetPlexServers(
plexClientInformation,
tempPlexTVAuthToken
);
const tempPlexLibraries = await GetPlexLibraries(tempPlexServers);
setPlexTVAuthToken(tempPlexTVAuthToken);
setPlexServers(tempPlexServers);
setPlexTVUserData(tempPlexTVUserData);
setPlexLibraries(tempPlexLibraries);
SavePlexSession(plexClientInformation, tempPlexTVAuthToken);
} }
async function PlexLogoutButton() { async function PlexLogoutButton() {
setPlexStateTracker(plexStateTracker + 1); setPlexStateTracker(plexStateTracker + 1);
} }
useEffect(() => { async function Refresh() {
const { searchItems, searchHasMore, searchLoading, searchError } = const tempPlexTVUserData = await GetPlexUserData(
GetLibraryPages(plexSessionData, topic, query, pageNumber); plexClientInformation,
setSearchData({ searchItems, searchHasMore, searchLoading, searchError }); plexTVAuthToken
}, [pageNumber, topic, query, plexSessionData]); );
const tempPlexServers = await GetPlexServers(
plexClientInformation,
plexTVAuthToken
);
const tempPlexLibraries = await GetPlexLibraries(tempPlexServers);
setPlexServers(tempPlexServers);
setPlexTVUserData(tempPlexTVUserData);
setPlexLibraries(tempPlexLibraries);
}
// useEffect(() => {
// const { searchItems, searchHasMore, searchLoading, searchError } =
// GetLibraryPages(
// {
// servers: plexSessionData.plexServers,
// libraries: plexSessionData.plexLibraries,
// },
// topic,
// query,
// pageNumber
// );
// setSearchData({ searchItems, searchHasMore, searchLoading, searchError });
// }, [pageNumber, topic, query, plexSessionData]);
async function UpdateLibrary() {
console.log("I'M HERE");
let returnObject = await GetLibraryPages(
plexServers,
plexLibraries,
topic,
pageNumber,
50
);
console.log(returnObject);
if (libraryItems.length > 0) {
returnObject.items = [...returnObject.items, ...libraryItems];
}
setLibraryItems(returnObject.items);
setLibraryHasMore(returnObject.hasMore);
}
useEffect(() => { useEffect(() => {
const { libraryItems, libraryHasMore, libraryLoading, libraryError } = setLibraryItems([]);
GetLibraryPages(plexSessionData, topic, '', pageNumber); setLibraryHasMore(false);
setPlexLibraryData({ }, [topic]);
libraryItems,
libraryHasMore, useEffect(() => {
libraryLoading, UpdateLibrary();
libraryError, }, [pageNumber, plexServers, plexLibraries, topic]);
});
}, [pageNumber, plexSessionData, topic]); useEffect(() => {
Refresh();
}, []);
console.log('Plex Session:'); console.log('Plex Session:');
console.log(plexSession); console.log(plexTVAuthToken);
console.log(plexClientInformation);
console.log('Plex Session Data:'); console.log('Plex Session Data:');
console.log(plexSessionData); console.log(plexTVUserData);
console.log('query'); console.log(plexServers);
console.log(query); console.log(plexLibraries);
console.log('topic'); console.log('topic');
console.log(topic); console.log(topic);
console.log(pageNumber);
console.log('Plex Library Data:'); console.log('Plex Library Data:');
console.log(plexLibraryData); console.log(libraryItems);
console.log(libraryHasMore);
console.log('Search Data:'); console.log('Search Data:');
console.log(searchData); console.log(searchData);
@@ -306,6 +380,51 @@ function App() {
label="Library" label="Library"
> >
<Toolbar /> <Toolbar />
<Box sx={{}} loading="lazy">
<Grid container spacing={2}>
{plexLibraries
?.filter((Obj) => Obj.type === 'artist')
?.map((Obj, index) => (
<Grid item xs={2} key={Obj.guid + index}>
<Card>
<CardActionArea
onClick={() => {
setActivePage(4);
}}
>
<CardMedia
loading="lazy"
component="img"
height="240"
image={
Obj.server.preferredConnection.uri +
'/photo/:/transcode?' +
qs.stringify({
width: 240,
height: 240,
minSize: 1,
upscale: 1,
url:
Obj.thumb +
'?X-Plex-Token=' +
Obj.server.accessToken,
'X-Plex-Token': Obj.server.accessToken,
}) || NoArt
}
onError={({ currentTarget }) => {
currentTarget.onerror = null; // prevents looping
currentTarget.src = NoArt;
}}
/>
<CardContent>
<Typography noWrap>{Obj.title}</Typography>
</CardContent>
</CardActionArea>
</Card>
</Grid>
))}
</Grid>
</Box>
</Box> </Box>
<Box <Box
hidden={isHidden(2)} hidden={isHidden(2)}
@@ -319,7 +438,7 @@ function App() {
<Toolbar /> <Toolbar />
<Box sx={{}} loading="lazy"> <Box sx={{}} loading="lazy">
<Grid container spacing={2}> <Grid container spacing={2}>
{plexLibraryData?.libraryItems?.map((Obj, index) => ( {libraryItems?.map((Obj, index) => (
<Grid item xs={2} key={Obj.guid + index}> <Grid item xs={2} key={Obj.guid + index}>
<Card> <Card>
<CardActionArea <CardActionArea
@@ -353,9 +472,6 @@ function App() {
/> />
<CardContent> <CardContent>
<Typography noWrap>{Obj.title}</Typography> <Typography noWrap>{Obj.title}</Typography>
<div>
{plexLibraryData?.libraryLoading && 'Loading....'}
</div>
</CardContent> </CardContent>
</CardActionArea> </CardActionArea>
</Card> </Card>
@@ -406,7 +522,7 @@ function App() {
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
<Typography sx={{ flexGrow: 1 }} component="div"> <Typography sx={{ flexGrow: 1 }} component="div">
UUID:{plexSession?.plexClientInformation?.clientIdentifier} UUID:{plexClientInformation?.clientIdentifier}
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
@@ -425,8 +541,8 @@ function App() {
<CardHeader <CardHeader
avatar={ avatar={
<Avatar <Avatar
alt={plexSessionData?.plexTVUserData?.friendlyName} alt={plexTVUserData?.friendlyName}
src={plexSessionData?.plexTVUserData?.thumb} src={plexTVUserData?.thumb}
sx={{ width: 56, height: 56 }} sx={{ width: 56, height: 56 }}
/> />
} }
@@ -452,8 +568,8 @@ function App() {
} }
title="Plex Account" title="Plex Account"
subheader={`Username: ${ subheader={`Username: ${
plexSessionData?.plexTVUserData?.username plexTVUserData?.username
? plexSessionData?.plexTVUserData?.username ? plexTVUserData?.username
: null : null
}`} }`}
/> />
@@ -480,8 +596,7 @@ function App() {
sx={{ flexGrow: 1 }} sx={{ flexGrow: 1 }}
component="div" component="div"
> >
Username:{' '} Username: {plexTVUserData?.username}
{plexSessionData?.plexTVUserData?.username}
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
@@ -489,8 +604,7 @@ function App() {
sx={{ flexGrow: 1 }} sx={{ flexGrow: 1 }}
component="div" component="div"
> >
Email:{' '} Email: {plexTVUserData?.email}
{plexSessionData?.plexTVUserData?.email}
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
@@ -499,10 +613,7 @@ function App() {
component="div" component="div"
> >
Account Status:{' '} Account Status:{' '}
{ {plexTVUserData?.subscriptionDescription}
plexSessionData?.plexTVUserData
?.subscriptionDescription
}
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
@@ -510,8 +621,7 @@ function App() {
sx={{ flexGrow: 1 }} sx={{ flexGrow: 1 }}
component="div" component="div"
> >
Plex Auth Token:{' '} Plex Auth Token: {plexTVAuthToken || null}
{plexSession?.plexTVAuthToken || null}
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
@@ -552,37 +662,34 @@ function App() {
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
{plexSessionData?.plexServers?.map( {plexServers?.map((row) => (
(row) => ( <TableRow
<TableRow key={row.name}
key={row.name} sx={{
sx={{ '&:last-child td, &:last-child th': {
'&:last-child td, &:last-child th': border: 0,
{ },
border: 0, }}
}, >
}} <TableCell component="th" scope="row">
> {row?.name}
<TableCell component="th" scope="row"> </TableCell>
{row?.name} <TableCell align="right">
</TableCell> {row?.publicAddress}
<TableCell align="right"> </TableCell>
{row?.publicAddress} <TableCell align="right">
</TableCell> {row?.platform}
<TableCell align="right"> </TableCell>
{row?.platform} <TableCell align="right">
</TableCell> {row?.owned ? 'Yes' : 'No'}
<TableCell align="right"> </TableCell>
{row?.owned ? 'Yes' : 'No'} <TableCell align="right">
</TableCell> {row?.publicAddressMatches
<TableCell align="right"> ? 'Local'
{row?.publicAddressMatches : 'Remote'}
? 'Local' </TableCell>
: 'Remote'} </TableRow>
</TableCell> ))}
</TableRow>
)
)}
</TableBody> </TableBody>
</Table> </Table>
</TableContainer> </TableContainer>

View File

@@ -7870,9 +7870,9 @@
"version" "1.1.0" "version" "1.1.0"
"plex-api-oauth@^1.0.4": "plex-api-oauth@^1.0.4":
"integrity" "sha512-R0m9xQ24qLQgMLROzppY6OtvWQoSwxH3UPrQ4UCFCvN14ROVQqlC5pqbG7ufGldcA7zGWD+RxLWxOs5GOF7Jjg==" "integrity" "sha512-rBUlBHX5SEdmOoTRKFl/0DBJ0G5gR3dEaAKyFLAGeeKjuyJR7MbIgyMIM4nbYMAY7CUBA7cE/9bB7unjlkTYbg=="
"resolved" "https://registry.npmjs.org/plex-api-oauth/-/plex-api-oauth-1.1.58.tgz" "resolved" "https://registry.npmjs.org/plex-api-oauth/-/plex-api-oauth-1.1.97.tgz"
"version" "1.1.58" "version" "1.1.97"
dependencies: dependencies:
"axios" "^0.27.2" "axios" "^0.27.2"
"plex-oauth" "^2.0.2" "plex-oauth" "^2.0.2"