Infinite scrolling works

Maybe using Howler for audio?

package-lock.json

@@ -23,6 +23,7 @@
         "electron-util": "^0.17.2",
         "fs": "^0.0.1-security",
         "gh-pages": "^4.0.0",
+        "howler": "^2.2.3",
         "http-browserify": "^1.7.0",
         "https-browserify": "^1.0.0",
         "ipaddr.js": "^2.0.1",
@@ -9984,6 +9985,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/howler": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/howler/-/howler-2.2.3.tgz",
+      "integrity": "sha512-QM0FFkw0LRX1PR8pNzJVAY25JhIWvbKMBFM4gqk+QdV+kPXOhleWGCB6AiAF/goGjIHK2e/nIElplvjQwhr0jg=="
+    },
     "node_modules/hpack.js": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
@@ -14261,9 +14267,9 @@
       }
     },
     "node_modules/plex-api-oauth": {
-      "version": "1.1.98",
+      "version": "1.1.103",
-      "resolved": "https://registry.npmjs.org/plex-api-oauth/-/plex-api-oauth-1.1.98.tgz",
+      "resolved": "https://registry.npmjs.org/plex-api-oauth/-/plex-api-oauth-1.1.103.tgz",
-      "integrity": "sha512-nuH3BJBN/UXGRNp6n2lts/Zw1gpbrXFqLaHS+16UToqjM0v4kk/bjP+nV2LXmAAM+a9uamNLI94oTwZT5tTByg==",
+      "integrity": "sha512-PgUJ62StsmEkzEjWRBXRwRgDe5XUmPB5AxMfBXsrqibduv0upnj3pUvtLWqsPJj3l3+FcTLDw+0Yy2ozvjOWKA==",
       "dependencies": {
         "axios": "^0.27.2",
         "plex-oauth": "^2.0.2",
@@ -26383,6 +26389,11 @@
         "lru-cache": "^6.0.0"
       }
     },
+    "howler": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/howler/-/howler-2.2.3.tgz",
+      "integrity": "sha512-QM0FFkw0LRX1PR8pNzJVAY25JhIWvbKMBFM4gqk+QdV+kPXOhleWGCB6AiAF/goGjIHK2e/nIElplvjQwhr0jg=="
+    },
     "hpack.js": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
@@ -29568,9 +29579,9 @@
       "integrity": "sha512-Igl37++MSa+4H8LNP3Ene9GU0e1YypmXvFVNvVUwoAx44e74jbUlJXy4Q5rLSBisn0O2lBKdE6VkFIwrDl+UnQ=="
     },
     "plex-api-oauth": {
-      "version": "1.1.98",
+      "version": "1.1.103",
-      "resolved": "https://registry.npmjs.org/plex-api-oauth/-/plex-api-oauth-1.1.98.tgz",
+      "resolved": "https://registry.npmjs.org/plex-api-oauth/-/plex-api-oauth-1.1.103.tgz",
-      "integrity": "sha512-nuH3BJBN/UXGRNp6n2lts/Zw1gpbrXFqLaHS+16UToqjM0v4kk/bjP+nV2LXmAAM+a9uamNLI94oTwZT5tTByg==",
+      "integrity": "sha512-PgUJ62StsmEkzEjWRBXRwRgDe5XUmPB5AxMfBXsrqibduv0upnj3pUvtLWqsPJj3l3+FcTLDw+0Yy2ozvjOWKA==",
       "requires": {
         "axios": "^0.27.2",
         "plex-oauth": "^2.0.2",

package.json

@@ -125,6 +125,7 @@
     "electron-util": "^0.17.2",
     "fs": "^0.0.1-security",
     "gh-pages": "^4.0.0",
+    "howler": "^2.2.3",
     "http-browserify": "^1.7.0",
     "https-browserify": "^1.0.0",
     "ipaddr.js": "^2.0.1",

src/renderer/App.jsx

@@ -3,7 +3,7 @@
 /* eslint-disable react/no-array-index-key */
 /* eslint-disable prefer-template */
 import * as React from 'react';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 
 import Box from '@mui/material/Box';
@@ -44,6 +44,7 @@ import {
   Grid,
   Icon,
   IconButton,
+  StepButton,
   TextareaAutosize,
   TextField,
 } from '@mui/material';
@@ -55,7 +56,7 @@ import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import Paper from '@mui/material/Paper';
 
-import ReactJkMusicPlayer from 'react-jinke-music-player';
+import { Howl, Howler } from 'howler';
 import XMLParser from 'react-xml-parser';
 import {
   CreatePlexClientInformation,
@@ -111,6 +112,7 @@ function App() {
 
   const [query, setQuery] = useState('');
   const [pageNumber, setPageNumber] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
   const [topic, setTopic] = useState();
 
   function handleSearch(event) {
@@ -195,6 +197,7 @@ function App() {
   // }, [pageNumber, topic, query, plexSessionData]);
 
   async function UpdateLibrary() {
+    setIsLoading(true);
     console.log("I'M HERE");
     let returnObject = await GetLibraryPages(
       plexServers,
@@ -204,14 +207,29 @@ function App() {
       50
     );
     console.log(returnObject);
-    if (libraryItems.length > 0) {
+    returnObject.items = [...new Set([...libraryItems, ...returnObject.items])];
-      returnObject.items = [...returnObject.items, ...libraryItems];
-    }
 
     setLibraryItems(returnObject.items);
     setLibraryHasMore(returnObject.hasMore);
+    setIsLoading(false);
   }
 
+  const observer = useRef();
+  const lastLibraryItem = useCallback(
+    (node) => {
+      if (isLoading) return;
+      if (observer.current) observer.current.disconnect();
+      observer.current = new IntersectionObserver((entries) => {
+        if (entries[0].isIntersecting && libraryHasMore) {
+          setPageNumber(pageNumber + 1);
+        }
+      });
+      if (node) observer.current.observe(node);
+      console.log(node);
+    },
+    [isLoading, libraryHasMore]
+  );
+
   useEffect(() => {
     setLibraryItems([]);
     setLibraryHasMore(false);
@@ -299,6 +317,7 @@ function App() {
               <ListItemButton
                 onClick={() => {
                   setActivePage(0);
+                  setPageNumber(0);
                 }}
               >
                 <ListItemIcon>{iconindex.Home}</ListItemIcon>
@@ -310,6 +329,7 @@ function App() {
               <ListItemButton
                 onClick={() => {
                   setActivePage(1);
+                  setPageNumber(0);
                 }}
               >
                 <ListItemIcon>{iconindex.Library}</ListItemIcon>
@@ -322,6 +342,7 @@ function App() {
                 onClick={() => {
                   setActivePage(2);
                   topic !== 'artists' && setLibraryItems([]);
+                  setPageNumber(0);
                   setTopic('artists');
                 }}
               >
@@ -335,6 +356,7 @@ function App() {
                 onClick={() => {
                   setActivePage(2);
                   topic !== 'albums' && setLibraryItems([]);
+                  setPageNumber(0);
                   setTopic('albums');
                 }}
               >
@@ -348,6 +370,7 @@ function App() {
                 onClick={() => {
                   setActivePage(2);
                   topic !== 'songs' && setLibraryItems([]);
+                  setPageNumber(0);
                   setTopic('songs');
                 }}
               >
@@ -360,6 +383,7 @@ function App() {
               <ListItemButton
                 onClick={() => {
                   setActivePage(5);
+                  setPageNumber(0);
                 }}
               >
                 <ListItemIcon>{iconindex.Playlists}</ListItemIcon>
@@ -371,6 +395,7 @@ function App() {
               <ListItemButton
                 onClick={() => {
                   setActivePage(6);
+                  setPageNumber(0);
                 }}
               >
                 <ListItemIcon>{iconindex.Settings}</ListItemIcon>
@@ -409,6 +434,7 @@ function App() {
                       <CardActionArea
                         onClick={() => {
                           setActivePage(4);
+                          setPageNumber(0);
                         }}
                       >
                         <CardMedia
@@ -457,7 +483,49 @@ function App() {
           <Toolbar />
           <Box sx={{}} loading="lazy">
             <Grid container spacing={2}>
-              {libraryItems?.map((Obj, index) => (
+              {libraryItems?.sort()?.map((Obj, index) => {
+                if (libraryItems?.length === index + 10) {
+                  return (
+                    <Grid item xs={3} key={Obj.guid + index}>
+                      <Card ref={lastLibraryItem}>
+                        <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>
+                  );
+                }
+                return (
                   <Grid item xs={3} key={Obj.guid + index}>
                     <Card>
                       <CardActionArea
@@ -495,7 +563,8 @@ function App() {
                       </CardActionArea>
                     </Card>
                   </Grid>
-              ))}
+                );
+              })}
             </Grid>
           </Box>
         </Box>

yarn.lock

@@ -5418,6 +5418,11 @@
   dependencies:
     "lru-cache" "^6.0.0"
 
+"howler@^2.2.3":
+  "integrity" "sha512-QM0FFkw0LRX1PR8pNzJVAY25JhIWvbKMBFM4gqk+QdV+kPXOhleWGCB6AiAF/goGjIHK2e/nIElplvjQwhr0jg=="
+  "resolved" "https://registry.npmjs.org/howler/-/howler-2.2.3.tgz"
+  "version" "2.2.3"
+
 "hpack.js@^2.1.6":
   "integrity" "sha512-zJxVehUdMGIKsRaNt7apO2Gqp0BdqW5yaiGHXXmbpvxgBYVZnAql+BJb4RO5ad2MgpbZKn5G6nMnegrH1FcNYQ=="
   "resolved" "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz"
@@ -7870,9 +7875,9 @@
   "version" "1.1.0"
 
 "plex-api-oauth@^1.0.4":
-  "integrity" "sha512-nuH3BJBN/UXGRNp6n2lts/Zw1gpbrXFqLaHS+16UToqjM0v4kk/bjP+nV2LXmAAM+a9uamNLI94oTwZT5tTByg=="
+  "integrity" "sha512-PgUJ62StsmEkzEjWRBXRwRgDe5XUmPB5AxMfBXsrqibduv0upnj3pUvtLWqsPJj3l3+FcTLDw+0Yy2ozvjOWKA=="
-  "resolved" "https://registry.npmjs.org/plex-api-oauth/-/plex-api-oauth-1.1.98.tgz"
+  "resolved" "https://registry.npmjs.org/plex-api-oauth/-/plex-api-oauth-1.1.103.tgz"
-  "version" "1.1.98"
+  "version" "1.1.103"
   dependencies:
     "axios" "^0.27.2"
     "plex-oauth" "^2.0.2"