LukeParke/Warden
1
0
Fork 0
mirror of https://github.com/LukeHagar/Warden.git synced 2025-12-06 04:22:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Formatting and library collection

Browse Source 
Made formatting adjustments and began considering creating a standalone Plex-API-OAuth npm module
This commit is contained in:
luke-hagar-sp
2022-07-21 20:02:43 -05:00
parent 2b81ba3d2f
commit 7912a7cb15
1 changed files with 236 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

300
src/renderer/App.jsx
View File

@@ -54,6 +54,7 @@ import ReactJkMusicPlayer from 'react-jinke-music-player';
import { PlexOauth, IPlexClientDetails } from 'plex-oauth'; import { PlexOauth, IPlexClientDetails } from 'plex-oauth';
import XMLParser from 'react-xml-parser'; import XMLParser from 'react-xml-parser';
import ipaddr from 'ipaddr.js'; import ipaddr from 'ipaddr.js';
import { contextIsolated } from 'process';
const drawerWidth = 240; const drawerWidth = 240;
@@ -68,21 +69,21 @@ function App() {
const [activePage, setActivePage] = useState(0); const [activePage, setActivePage] = useState(0);
if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') { if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
console.log('🎉 Dark mode is supported'); //console.log('🎉 Dark mode is supported');
} }
const MediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); const MediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
let activeTheme; let activeTheme;
if (MediaQuery.matches) { if (MediaQuery.matches) {
console.log('🎉 Dark mode is preferred'); //console.log('🎉 Dark mode is preferred');
activeTheme = createTheme({ activeTheme = createTheme({
palette: { palette: {
mode: 'dark', mode: 'dark',
}, },
}); });
} else { } else {
console.log('🎉 Light mode is preferred'); //console.log('🎉 Light mode is preferred');
activeTheme = createTheme({ activeTheme = createTheme({
palette: { palette: {
mode: 'light', mode: 'light',
@@ -90,9 +91,6 @@ function App() {
}); });
} }
console.log('Theme');
console.log(activeTheme);
function openInNewTab(url) { function openInNewTab(url) {
var win = window.open(url, '_blank'); var win = window.open(url, '_blank');
win?.focus; win?.focus;
@@ -107,30 +105,21 @@ function App() {
setClientID(uuid); setClientID(uuid);
} }
const [plexAuthToken, setPlexAuthToken] = useState( const [plexData, setPlexData] = useState(
localStorage.getItem('plex-authToken') localStorage.getItem('plex-database')
); );
const [plexUserData, setPlexUserData] = useState( // console.log('Theme');
localStorage.getItem('plex-userData') // console.log(activeTheme);
);
const [plexServers, setPlexServers] = useState( // console.log('Auth Token At Creation:');
localStorage.getItem('plex-servers') // console.log(plexAuthToken);
);
const [plexLibraries, setPlexLibraries] = useState( // console.log('Plex User Data At Creation:');
localStorage.getItem('plex-libraries') // console.log(plexUserData);
);
console.log('Auth Token At Creation:'); // console.log('Plex Servers At Creation:');
console.log(plexAuthToken); // console.log(plexServers);
console.log('Plex User Data At Creation:');
console.log(plexUserData);
console.log('Plex Servers At Creation:');
console.log(plexServers);
let clientInformation = { let clientInformation = {
clientIdentifier: clientId, // This is a unique identifier used to identify your app with Plex. clientIdentifier: clientId, // This is a unique identifier used to identify your app with Plex.
@@ -201,15 +190,16 @@ function App() {
console.log(response); console.log(response);
console.log(response.status); console.log(response.status);
if (response.status === 200) { if (response.status === 200) {
localStorage.setItem('plex-userData', response.data); let tempData = plexData;
localStorage.setItem('plex-authToken', authToken); tempData.plexUserData = response.data;
setPlexUserData(response.data); tempData.plexAuthToken = authToken;
setPlexAuthToken(authToken); setPlexData(tempData);
getPlexServers();
return true; getPlexLibraries();
getPlexMusicLibraries();
savePlexState();
} }
if (response.status === 401) { if (response.status === 401) {
return false;
} }
}) })
.catch(function (error) { .catch(function (error) {
@@ -233,31 +223,60 @@ function App() {
} }
function plexLogout() { function plexLogout() {
localStorage.setItem('plex-authToken', null); localStorage.setItem('plex-database', null);
localStorage.setItem('plex-userData', null); setPlexData({
localStorage.setItem('plex-servers', null); plexAuthToken: null,
setPlexAuthToken(null); plexUserData: null,
setPlexUserData(null); plexServers: null,
setPlexServers([]); plexLibraries: null,
plexMusicLibraries: null,
});
} }
function getPlexLibraries() { // function testPlexServer(ipAddress, accessToken) {
plexServers?.map((obj) => { // obj?.connections
axios({ // ?.filter((ipEntry) => ipEntry?.local === true)
method: 'GET', // ?.map((localIP) => {
url: // console.log(localIP);
'http://' + // axios({
obj.publicAddress + // method: 'GET',
':32400/library/sections/?' + // timeout: 100,
require('qs').stringify({ // url:
'X-Plex-Token': obj.accessToken, // 'http://' +
}), // localIP.address +
headers: { accept: 'application/json' }, // ':32400?' +
}).then((response) => { // require('qs').stringify({
console.log(response); // 'X-Plex-Token': obj?.accessToken,
}); // }),
}); // })
} // .catch(function (error) {
// if (error.response) {
// // The request was made and the server responded with a status code
// // that falls out of the range of 2xx
// console.log(error.response.data);
// console.log(error.response.status);
// console.log(error.response.headers);
// } else if (error.request) {
// // The request was made but no response was received
// // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
// // http.ClientRequest in node.js
// console.log(error.request);
// } else {
// // Something happened in setting up the request that triggered an Error
// console.log('Error', error.message);
// }
// console.log(error.config);
// })
// .then((response) => {
// console.log();
// if (response?.status === 200) {
// localArray = [...localArray, localIP];
// } else {
// return null;
// }
// });
// });
// }
function getPlexServers() { function getPlexServers() {
axios({ axios({
@@ -276,27 +295,75 @@ function App() {
}).then((response) => { }).then((response) => {
console.log('Plex Devices:'); console.log('Plex Devices:');
console.log(response); console.log(response);
localStorage.setItem( console.log();
'plex-servers', let tempData = plexData;
response?.data.filter((obj) => tempData.plexServers = response?.data
obj.product.includes('Plex Media Server') ?.filter((obj) => obj.product.includes('Plex Media Server'))
) ?.map((obj) => {
); console.log(obj);
setPlexServers( return {
response?.data.filter((obj) => accessToken: obj?.accessToken,
obj.product.includes('Plex Media Server') relay: obj?.connections?.filter(
) (ipEntry) => ipEntry?.relay === true
),
local: obj?.connections?.filter(
(ipEntry) => ipEntry?.local === true
),
};
});
});
setPlexData(tempData);
}
function getPlexLibraries() {
let tempData = plexData;
plexData?.plexServers?.map((server) => {
server?.relay?.map((relay) =>
axios({
method: 'GET',
url:
relay.address +
'/library/sections/?' +
require('qs').stringify({
'X-Plex-Token': server.accessToken,
}),
headers: { accept: 'application/json' },
}).then((response) => {
response?.data?.MediaContainer?.Directory?.map((entry) => {
if (tempData.plexServers.some((e) => e.uuid === entry.uuid)) {
} else {
tempData.plexServers = [...tempData.plexServers, entry];
}
});
})
); );
}); });
setPlexData(tempData);
} }
useEffect(() => { function savePlexState() {
if (plexAuthToken !== null) { if (plexData === null) {
getPlexServers(); plexLogin();
} else {
localStorage.setItem('plex-database', plexData);
console.log('Plex Database:');
console.log(localStorage.getItem('plex-database'));
}
} }
}, [plexAuthToken]);
getPlexLibraries(); function getPlexMusicLibraries() {
setPlexMusicLibraries(
plexLibraries?.filter((obj) => obj?.type === 'artist')
);
}
if (plexData.authToken !== null) {
console.log(plexData.authToken);
validatePlexAuthToken(plexData.authToken);
} else {
plexLogout();
}
// if (!authToken) { // if (!authToken) {
// plexLogin(); // plexLogin();
@@ -308,19 +375,28 @@ function App() {
// getPlexServers(); // getPlexServers();
// } // }
console.log('Main Body'); // console.log('Main Body');
console.log('clientId:'); // console.log('clientId:');
console.log(clientId); // console.log(clientId);
console.log('Plex Auth Token:'); // console.log('Plex Auth Token:');
console.log(plexAuthToken); // console.log(plexAuthToken);
console.log('Plex User Data:'); // console.log('Plex User Data:');
console.log(plexUserData); // console.log(plexUserData);
console.log('Plex Servers:'); // console.log('Plex Servers:');
console.log(plexServers); // console.log(plexServers);
// console.log('Plex Libraries:');
// console.log(plexLibraries);
// console.log('Plex Music Libraries:');
// console.log(plexMusicLibraries);
console.log('Plex DataBase');
console.log(plexData);
function isHidden(id) { function isHidden(id) {
if (activePage === id) { if (activePage === id) {
@@ -367,14 +443,41 @@ function App() {
</Toolbar> </Toolbar>
<Divider /> <Divider />
<List> <List>
{['Home', 'Library', 'Playlists', 'Settings'].map((text, index) => ( <ListItem key={'Home'} disablePadding>
<ListItem key={text} disablePadding> <ListItemButton onClick={() => setActivePage(0)}>
<ListItemButton onClick={() => setActivePage(index)}> <ListItemIcon>{iconindex['Home']}</ListItemIcon>
<ListItemIcon>{iconindex[text]}</ListItemIcon> <ListItemText primary={'Home'} />
<ListItemText primary={text} /> </ListItemButton>
</ListItem>
<Divider />
<ListItem key={'Libraries'} disablePadding>
<ListItemButton onClick={() => setActivePage(1)}>
<ListItemIcon>{iconindex['Library']}</ListItemIcon>
<ListItemText primary={'Libraries'} />
</ListItemButton>
</ListItem>
{plexData?.plexMusicLibraries?.map((obj) => (
<ListItem key={obj.uuid} disablePadding>
<ListItemButton onClick={() => setMusicFilter(obj)}>
<ListItemIcon>{iconindex['Library']}</ListItemIcon>
<ListItemText primary={obj.title} />
</ListItemButton> </ListItemButton>
</ListItem> </ListItem>
))} ))}
<Divider />
<ListItem key={'Playlists'} disablePadding>
<ListItemButton onClick={() => setActivePage(2)}>
<ListItemIcon>{iconindex['Playlists']}</ListItemIcon>
<ListItemText primary={'Playlists'} />
</ListItemButton>
</ListItem>
<Divider />
<ListItem key={'Settings'} disablePadding>
<ListItemButton onClick={() => setActivePage(3)}>
<ListItemIcon>{iconindex['Settings']}</ListItemIcon>
<ListItemText primary={'Settings'} />
</ListItemButton>
</ListItem>
</List> </List>
</Drawer> </Drawer>
<Box <Box
@@ -450,8 +553,8 @@ function App() {
<CardHeader <CardHeader
avatar={ avatar={
<Avatar <Avatar
alt={plexUserData?.friendlyName} alt={plexData?.plexUserData?.friendlyName}
src={plexUserData?.thumb} src={plexData?.plexUserData?.thumb}
sx={{ width: 56, height: 56 }} sx={{ width: 56, height: 56 }}
/> />
} }
@@ -477,8 +580,8 @@ function App() {
} }
title="Plex Account" title="Plex Account"
subheader={ subheader={
'Username: ' + plexUserData?.username 'Username: ' + plexData?.plexUserData?.username
? plexUserData?.username ? plexData?.plexUserData?.username
: null : null
} }
/> />
@@ -500,7 +603,7 @@ function App() {
sx={{ flexGrow: 1 }} sx={{ flexGrow: 1 }}
component="div" component="div"
> >
Username: {plexUserData?.username} Username: {plexData?.plexUserData?.username}
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
@@ -508,7 +611,7 @@ function App() {
sx={{ flexGrow: 1 }} sx={{ flexGrow: 1 }}
component="div" component="div"
> >
Email: {plexUserData?.email} Email: {plexData?.plexUserData?.email}
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
@@ -517,7 +620,10 @@ function App() {
component="div" component="div"
> >
Account Status:{' '} Account Status:{' '}
{plexUserData?.subscriptionDescription} {
plexData?.plexUserData
?.subscriptionDescription
}
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
@@ -526,7 +632,9 @@ function App() {
component="div" component="div"
> >
Plex Auth Token:{' '} Plex Auth Token:{' '}
{plexAuthToken ? plexAuthToken : null} {plexData?.plexAuthToken
? plexAuthToken
: null}
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
@@ -567,8 +675,9 @@ function App() {
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
{plexServers {plexData?.plexServers
? [...plexServers]?.map((row) => ( ? [...plexData?.plexServers]?.map(
(row) => (
<TableRow <TableRow
key={row.name} key={row.name}
sx={{ sx={{
@@ -599,7 +708,8 @@ function App() {
: 'Remote'} : 'Remote'}
</TableCell> </TableCell>
</TableRow> </TableRow>
)) )
)
: null} : null}
</TableBody> </TableBody>
</Table> </Table>