Woot Woot

2025-12-06 04:22:06 +00:00 · 2022-07-30 23:52:15 -05:00
parent f8ae059bcc
commit b1f0addc88
3 changed files with 195 additions and 88 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -14261,9 +14261,9 @@
      }
    },
    "node_modules/plex-api-oauth": {
-      "version": "1.1.58",
-      "resolved": "https://registry.npmjs.org/plex-api-oauth/-/plex-api-oauth-1.1.58.tgz",
-      "integrity": "sha512-R0m9xQ24qLQgMLROzppY6OtvWQoSwxH3UPrQ4UCFCvN14ROVQqlC5pqbG7ufGldcA7zGWD+RxLWxOs5GOF7Jjg==",
+      "version": "1.1.97",
+      "resolved": "https://registry.npmjs.org/plex-api-oauth/-/plex-api-oauth-1.1.97.tgz",
+      "integrity": "sha512-rBUlBHX5SEdmOoTRKFl/0DBJ0G5gR3dEaAKyFLAGeeKjuyJR7MbIgyMIM4nbYMAY7CUBA7cE/9bB7unjlkTYbg==",
      "dependencies": {
        "axios": "^0.27.2",
        "plex-oauth": "^2.0.2",
@@ -29568,9 +29568,9 @@
      "integrity": "sha512-Igl37++MSa+4H8LNP3Ene9GU0e1YypmXvFVNvVUwoAx44e74jbUlJXy4Q5rLSBisn0O2lBKdE6VkFIwrDl+UnQ=="
    },
    "plex-api-oauth": {
-      "version": "1.1.58",
-      "resolved": "https://registry.npmjs.org/plex-api-oauth/-/plex-api-oauth-1.1.58.tgz",
-      "integrity": "sha512-R0m9xQ24qLQgMLROzppY6OtvWQoSwxH3UPrQ4UCFCvN14ROVQqlC5pqbG7ufGldcA7zGWD+RxLWxOs5GOF7Jjg==",
+      "version": "1.1.97",
+      "resolved": "https://registry.npmjs.org/plex-api-oauth/-/plex-api-oauth-1.1.97.tgz",
+      "integrity": "sha512-rBUlBHX5SEdmOoTRKFl/0DBJ0G5gR3dEaAKyFLAGeeKjuyJR7MbIgyMIM4nbYMAY7CUBA7cE/9bB7unjlkTYbg==",
      "requires": {
        "axios": "^0.27.2",
        "plex-oauth": "^2.0.2",
--- a/src/renderer/App.jsx
+++ b/src/renderer/App.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 /* eslint-disable react/jsx-no-bind */
 /* eslint-disable react/no-array-index-key */
 /* eslint-disable prefer-template */
@@ -83,10 +84,29 @@ function App() {
  const [activePage, setActivePage] = useState(0);
  const [plexStateTracker, setPlexStateTracker] = useState(0);

-  const [plexSession, setPlexSession] = useState(LoadPlexSession());
-  const [plexSessionData, setPlexSessionData] = useState();
+  let loadedSession = LoadPlexSession();
+  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 [query, setQuery] = useState('');
@@ -95,7 +115,6 @@ function App() {

  function handleSearch(event) {
    setQuery(event.target.value);
-    setPageNumber(1);
  }

  if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
@@ -125,45 +144,100 @@ function App() {
  // console.log(activeTheme);

  async function PlexLoginButton() {
-    setPlexSession(await PlexLogin());
-    SavePlexSession(plexSession);
-    const plexTVUserData = await GetPlexUserData(plexSession);
-    const plexServers = await GetPlexServers(plexSession);
-    const plexLibraries = await GetPlexLibraries(plexServers);
-    setPlexSessionData({ plexTVUserData, plexServers, plexLibraries });
+    const tempPlexTVAuthToken = await PlexLogin(plexClientInformation);
+    const tempPlexTVUserData = await GetPlexUserData(
+      plexClientInformation,
+      tempPlexTVAuthToken
+    );
+    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() {
    setPlexStateTracker(plexStateTracker + 1);
  }

-  useEffect(() => {
-    const { searchItems, searchHasMore, searchLoading, searchError } =
-      GetLibraryPages(plexSessionData, topic, query, pageNumber);
-    setSearchData({ searchItems, searchHasMore, searchLoading, searchError });
-  }, [pageNumber, topic, query, plexSessionData]);
+  async function Refresh() {
+    const tempPlexTVUserData = await GetPlexUserData(
+      plexClientInformation,
+      plexTVAuthToken
+    );
+    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(() => {
-    const { libraryItems, libraryHasMore, libraryLoading, libraryError } =
-      GetLibraryPages(plexSessionData, topic, '', pageNumber);
-    setPlexLibraryData({
-      libraryItems,
-      libraryHasMore,
-      libraryLoading,
-      libraryError,
-    });
-  }, [pageNumber, plexSessionData, topic]);
+    setLibraryItems([]);
+    setLibraryHasMore(false);
+  }, [topic]);
+
+  useEffect(() => {
+    UpdateLibrary();
+  }, [pageNumber, plexServers, plexLibraries, topic]);
+
+  useEffect(() => {
+    Refresh();
+  }, []);

  console.log('Plex Session:');
-  console.log(plexSession);
+  console.log(plexTVAuthToken);
+  console.log(plexClientInformation);
  console.log('Plex Session Data:');
-  console.log(plexSessionData);
-  console.log('query');
-  console.log(query);
+  console.log(plexTVUserData);
+  console.log(plexServers);
+  console.log(plexLibraries);
  console.log('topic');
  console.log(topic);
+  console.log(pageNumber);
  console.log('Plex Library Data:');
-  console.log(plexLibraryData);
+  console.log(libraryItems);
+  console.log(libraryHasMore);
  console.log('Search Data:');
  console.log(searchData);

@@ -304,22 +378,67 @@ function App() {
          component="main"
          sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
          label="Library"
-        >
-          <Toolbar />
-        </Box>
-        <Box
-          hidden={isHidden(2)}
-          component="main"
-          sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
-          label="ItemLibrary"
-          TransitionProps={{
-            timeout: 100,
-          }}
        >
          <Toolbar />
          <Box sx={{}} loading="lazy">
            <Grid container spacing={2}>
-              {plexLibraryData?.libraryItems?.map((Obj, index) => (
+              {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
+          hidden={isHidden(2)}
+          component="main"
+          sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
+          label="ItemLibrary"
+          TransitionProps={{
+            timeout: 100,
+          }}
+        >
+          <Toolbar />
+          <Box sx={{}} loading="lazy">
+            <Grid container spacing={2}>
+              {libraryItems?.map((Obj, index) => (
                <Grid item xs={2} key={Obj.guid + index}>
                  <Card>
                    <CardActionArea
@@ -353,9 +472,6 @@ function App() {
                      />
                      <CardContent>
                        <Typography noWrap>{Obj.title}</Typography>
-                        <div>
-                          {plexLibraryData?.libraryLoading && 'Loading....'}
-                        </div>
                      </CardContent>
                    </CardActionArea>
                  </Card>
@@ -406,7 +522,7 @@ function App() {
            </Grid>
            <Grid item xs={12}>
              <Typography sx={{ flexGrow: 1 }} component="div">
-                UUID:{plexSession?.plexClientInformation?.clientIdentifier}
+                UUID:{plexClientInformation?.clientIdentifier}
              </Typography>
            </Grid>
            <Grid item xs={12}>
@@ -425,8 +541,8 @@ function App() {
                      <CardHeader
                        avatar={
                          <Avatar
-                            alt={plexSessionData?.plexTVUserData?.friendlyName}
-                            src={plexSessionData?.plexTVUserData?.thumb}
+                            alt={plexTVUserData?.friendlyName}
+                            src={plexTVUserData?.thumb}
                            sx={{ width: 56, height: 56 }}
                          />
                        }
@@ -452,8 +568,8 @@ function App() {
                        }
                        title="Plex Account"
                        subheader={`Username: ${
-                          plexSessionData?.plexTVUserData?.username
-                            ? plexSessionData?.plexTVUserData?.username
+                          plexTVUserData?.username
+                            ? plexTVUserData?.username
                            : null
                        }`}
                      />
@@ -480,8 +596,7 @@ function App() {
                                  sx={{ flexGrow: 1 }}
                                  component="div"
                                >
-                                  Username:{' '}
-                                  {plexSessionData?.plexTVUserData?.username}
+                                  Username: {plexTVUserData?.username}
                                </Typography>
                              </Grid>
                              <Grid item xs={12}>
@@ -489,8 +604,7 @@ function App() {
                                  sx={{ flexGrow: 1 }}
                                  component="div"
                                >
-                                  Email:{' '}
-                                  {plexSessionData?.plexTVUserData?.email}
+                                  Email: {plexTVUserData?.email}
                                </Typography>
                              </Grid>
                              <Grid item xs={12}>
@@ -499,10 +613,7 @@ function App() {
                                  component="div"
                                >
                                  Account Status:{' '}
-                                  {
-                                    plexSessionData?.plexTVUserData
-                                      ?.subscriptionDescription
-                                  }
+                                  {plexTVUserData?.subscriptionDescription}
                                </Typography>
                              </Grid>
                              <Grid item xs={12}>
@@ -510,8 +621,7 @@ function App() {
                                  sx={{ flexGrow: 1 }}
                                  component="div"
                                >
-                                  Plex Auth Token:{' '}
-                                  {plexSession?.plexTVAuthToken || null}
+                                  Plex Auth Token: {plexTVAuthToken || null}
                                </Typography>
                              </Grid>
                              <Grid item xs={12}>
@@ -552,13 +662,11 @@ function App() {
                                    </TableRow>
                                  </TableHead>
                                  <TableBody>
-                                    {plexSessionData?.plexServers?.map(
-                                      (row) => (
+                                    {plexServers?.map((row) => (
                                      <TableRow
                                        key={row.name}
                                        sx={{
-                                            '&:last-child td, &:last-child th':
-                                              {
+                                          '&:last-child td, &:last-child th': {
                                            border: 0,
                                          },
                                        }}
@@ -581,8 +689,7 @@ function App() {
                                            : 'Remote'}
                                        </TableCell>
                                      </TableRow>
-                                      )
-                                    )}
+                                    ))}
                                  </TableBody>
                                </Table>
                              </TableContainer>
--- a/yarn.lock
+++ b/yarn.lock
@@ -7870,9 +7870,9 @@
  "version" "1.1.0"

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