Major UI improvements

package-lock.json

@@ -35,6 +35,7 @@
         "qs": "^6.11.0",
         "react": "^18.2.0",
         "react-dom": "^18.1.0",
+        "react-icons": "^4.4.0",
         "react-infinite-scroller": "^1.2.6",
         "react-intl": "^6.0.5",
         "react-jinke-music-player": "^4.24.2",
@@ -14119,9 +14120,9 @@
       }
     },
     "node_modules/plex-api-oauth": {
-      "version": "1.1.114",
+      "version": "1.1.116",
-      "resolved": "https://registry.npmjs.org/plex-api-oauth/-/plex-api-oauth-1.1.114.tgz",
+      "resolved": "https://registry.npmjs.org/plex-api-oauth/-/plex-api-oauth-1.1.116.tgz",
-      "integrity": "sha512-oru0+xa/65fVQNJrt236VhYacGO2y5o8dgkqVhR2yf79txNESVIP+5We/HLeaRflEV+kuP5O2zuUg8tyZQ0IWQ==",
+      "integrity": "sha512-bj509pQ4YVvkn1kytMUd8bvMqOAn7Q1VunGn+abX/yDCTjF7z9H3qyDLNBRNy2VhQ7lGSSFQE4LHJ//NXJZxDA==",
       "dependencies": {
         "axios": "^0.27.2",
         "plex-oauth": "^2.0.2",
@@ -15186,6 +15187,14 @@
         "react-dom": ">= 16.3.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz",
+      "integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-infinite-scroller": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/react-infinite-scroller/-/react-infinite-scroller-1.2.6.tgz",
@@ -29230,9 +29239,9 @@
       "integrity": "sha512-Igl37++MSa+4H8LNP3Ene9GU0e1YypmXvFVNvVUwoAx44e74jbUlJXy4Q5rLSBisn0O2lBKdE6VkFIwrDl+UnQ=="
     },
     "plex-api-oauth": {
-      "version": "1.1.114",
+      "version": "1.1.116",
-      "resolved": "https://registry.npmjs.org/plex-api-oauth/-/plex-api-oauth-1.1.114.tgz",
+      "resolved": "https://registry.npmjs.org/plex-api-oauth/-/plex-api-oauth-1.1.116.tgz",
-      "integrity": "sha512-oru0+xa/65fVQNJrt236VhYacGO2y5o8dgkqVhR2yf79txNESVIP+5We/HLeaRflEV+kuP5O2zuUg8tyZQ0IWQ==",
+      "integrity": "sha512-bj509pQ4YVvkn1kytMUd8bvMqOAn7Q1VunGn+abX/yDCTjF7z9H3qyDLNBRNy2VhQ7lGSSFQE4LHJ//NXJZxDA==",
       "requires": {
         "axios": "^0.27.2",
         "plex-oauth": "^2.0.2",
@@ -29968,6 +29977,12 @@
         "prop-types": "^15.8.1"
       }
     },
+    "react-icons": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz",
+      "integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==",
+      "requires": {}
+    },
     "react-infinite-scroller": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/react-infinite-scroller/-/react-infinite-scroller-1.2.6.tgz",

package.json

@@ -47,6 +47,7 @@
     "start:preload": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.preload.dev.ts",
     "start:renderer": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack serve --config ./.erb/configs/webpack.config.renderer.dev.ts",
     "test": "jest",
+    "predeploy": "npm run build",
     "deploy": "gh-pages -d './release/app/dist/renderer'"
   },
   "lint-staged": {
@@ -137,6 +138,7 @@
     "qs": "^6.11.0",
     "react": "^18.2.0",
     "react-dom": "^18.1.0",
+    "react-icons": "^4.4.0",
     "react-infinite-scroller": "^1.2.6",
     "react-intl": "^6.0.5",
     "react-jinke-music-player": "^4.24.2",

src/renderer/App.css

@@ -70,3 +70,11 @@ a:hover {
 .site-layout .site-layout-background {
   background: #fff;
 }
+
+.container {
+  -ms-overflow-style: none; /* Internet Explorer 10+ */
+  scrollbar-width: none; /* Firefox */
+}
+.container::-webkit-scrollbar {
+  display: none; /* Safari and Chrome */
+}

src/renderer/App.jsx

@@ -22,6 +22,8 @@ import ListItemText from '@mui/material/ListItemText';
 import HomeIcon from '@mui/icons-material/Home';
 import LibraryMusicIcon from '@mui/icons-material/LibraryMusic';
 import FeaturedPlayListIcon from '@mui/icons-material/FeaturedPlayList';
+import AlbumIcon from '@mui/icons-material/Album';
+import MusicNoteIcon from '@mui/icons-material/MusicNote';
 import SettingsIcon from '@mui/icons-material/Settings';
 import LockOpenIcon from '@mui/icons-material/LockOpen';
 import DarkModeIcon from '@mui/icons-material/DarkMode';
@@ -49,6 +51,12 @@ import {
   Stack,
   ImageList,
   ImageListItem,
+  Skeleton,
+  Snackbar,
+  Alert,
+  Grow,
+  Slide,
+  SnackbarContent,
 } from '@mui/material';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
@@ -77,6 +85,8 @@ const drawerWidth = 240;
 const iconindex = {
   Home: <HomeIcon />,
   Library: <LibraryMusicIcon />,
+  Album: <AlbumIcon />,
+  Song: <MusicNoteIcon />,
   Playlists: <FeaturedPlayListIcon />,
   Settings: <SettingsIcon />,
 };
@@ -115,6 +125,7 @@ function App() {
   const [query, setQuery] = useState('');
   const [pageNumber, setPageNumber] = useState(0);
   const [isLoading, setIsLoading] = useState(false);
+  const [isRefreshing, setIsRefreshing] = useState(true);
   const [topic, setTopic] = useState();
 
   function handleSearch(event) {
@@ -154,6 +165,10 @@ function App() {
   console.log('Theme');
   console.log(activeTheme);
 
+  function SlideTransition(props) {
+    return <Slide {...props} direction="left" />;
+  }
+
   async function PlexLoginButton() {
     const tempPlexTVAuthToken = await PlexLogin(plexClientInformation);
     const tempPlexTVUserData = await GetPlexUserData(
@@ -195,6 +210,7 @@ function App() {
     setPlexServers(tempPlexServers);
     setPlexTVUserData(tempPlexTVUserData);
     setPlexLibraries(tempPlexLibraries);
+    setIsRefreshing(false);
   }
 
   // useEffect(() => {
@@ -211,6 +227,21 @@ function App() {
   //   setSearchData({ searchItems, searchHasMore, searchLoading, searchError });
   // }, [pageNumber, topic, query, plexSessionData]);
 
+  function ShowArtist(Obj) {
+    setActiveArtist(Obj);
+    setActivePage(7);
+  }
+
+  function ShowAlbum(Obj) {
+    setActiveAlbum(Obj);
+    setActivePage(8);
+  }
+
+  function ShowPlaylist(Obj) {
+    setActivePlaylist(Obj);
+    setActivePage(9);
+  }
+
   async function UpdateLibrary() {
     setIsLoading(true);
     let returnObject = await GetLibraryPages(
@@ -218,7 +249,7 @@ function App() {
       plexLibraries,
       topic,
       pageNumber,
-      50
+      100
     );
     console.log(returnObject);
     returnObject.items = [...new Set([...libraryItems, ...returnObject.items])];
@@ -254,6 +285,7 @@ function App() {
   }, [pageNumber, plexServers, plexLibraries, topic]);
 
   useEffect(() => {
+    setIsRefreshing(true);
     Refresh();
   }, []);
 
@@ -332,6 +364,7 @@ function App() {
             <List>
               <ListItem key="HomeTab" disablePadding>
                 <ListItemButton
+                  selected={activePage === 0}
                   onClick={() => {
                     setActivePage(0);
                     setPageNumber(0);
@@ -344,6 +377,7 @@ function App() {
               <Divider />
               <ListItem key="LibrariesTab" disablePadding>
                 <ListItemButton
+                  selected={activePage === 1}
                   onClick={() => {
                     setActivePage(1);
                     setPageNumber(0);
@@ -356,6 +390,7 @@ function App() {
               <Divider />
               <ListItem key="ArtistsTab" disablePadding>
                 <ListItemButton
+                  selected={topic === 'artists' && activePage === 2}
                   onClick={() => {
                     setActivePage(2);
                     topic !== 'artists' && setLibraryItems([]);
@@ -370,6 +405,7 @@ function App() {
               <Divider />
               <ListItem key="AlbumsTab" disablePadding>
                 <ListItemButton
+                  selected={topic === 'albums' && activePage === 2}
                   onClick={() => {
                     setActivePage(2);
                     topic !== 'albums' && setLibraryItems([]);
@@ -377,13 +413,14 @@ function App() {
                     setTopic('albums');
                   }}
                 >
-                  <ListItemIcon>{iconindex.Library}</ListItemIcon>
+                  <ListItemIcon>{iconindex.Album}</ListItemIcon>
                   <ListItemText primary="Albums" />
                 </ListItemButton>
               </ListItem>
               <Divider />
               <ListItem key="SongsTab" disablePadding>
                 <ListItemButton
+                  selected={topic === 'songs' && activePage === 2}
                   onClick={() => {
                     setActivePage(2);
                     topic !== 'songs' && setLibraryItems([]);
@@ -391,13 +428,14 @@ function App() {
                     setTopic('songs');
                   }}
                 >
-                  <ListItemIcon>{iconindex.Library}</ListItemIcon>
+                  <ListItemIcon>{iconindex.Song}</ListItemIcon>
                   <ListItemText primary="Songs" />
                 </ListItemButton>
               </ListItem>
               <Divider />
               <ListItem key="PlaylistsTab" disablePadding>
                 <ListItemButton
+                  selected={activePage === 5}
                   onClick={() => {
                     setActivePage(5);
                     setPageNumber(0);
@@ -410,6 +448,7 @@ function App() {
               <Divider />
               <ListItem key="SettingsTab" disablePadding>
                 <ListItemButton
+                  selected={activePage === 6}
                   onClick={() => {
                     setActivePage(6);
                     setPageNumber(0);
@@ -425,7 +464,7 @@ function App() {
             hidden={isHidden(0)}
             component="main"
             sx={{
-              overflow: 'hidden',
+              overflow: 'auto',
               flexGrow: 1,
               maxWidth: self.innerWidth - drawerWidth,
               bgcolor: 'background.default',
@@ -444,9 +483,10 @@ function App() {
                   <div>
                     {Obj.title}
                     <ImageList
+                      gap={15}
                       direction="row"
                       sx={{
-                        overflow: 'scroller',
+                        'overflow-x': 'scroll',
                         flexGrow: 1,
                         margin: 4,
                         gridAutoFlow: 'column',
@@ -463,6 +503,7 @@ function App() {
                                 component="img"
                                 height="240"
                                 width="240"
+                                loading="lazy"
                                 image={listItem.thumb || NoArt}
                                 onError={({ currentTarget }) => {
                                   currentTarget.onerror = null; // prevents looping
@@ -470,7 +511,13 @@ function App() {
                                 }}
                               />
                               <CardContent>
-                                <Typography noWrap>{listItem.title}</Typography>
+                                <Typography
+                                  variant="h6"
+                                  justifyContent="center"
+                                  noWrap
+                                >
+                                  {listItem.title}
+                                </Typography>
                               </CardContent>
                             </Card>
                           </ImageListItem>
@@ -590,6 +637,19 @@ function App() {
                     </Grid>
                   );
                 })}
+                {isLoading &&
+                  [0, 1, 2, 3].map((Obj, index) => {
+                    return (
+                      <Grid item xs="auto" key={`Skeleton${index}`}>
+                        <Skeleton
+                          animation="wave"
+                          variant="rectangular"
+                          width={240}
+                          height={240}
+                        />
+                      </Grid>
+                    );
+                  })}
               </Grid>
             </Box>
           </Box>
@@ -662,7 +722,10 @@ function App() {
                           action={
                             <div>
                               <Button
-                                onClick={() => Refresh()}
+                                onClick={() => {
+                                  setIsRefreshing(true);
+                                  Refresh();
+                                }}
                                 variant="outlined"
                                 sx={{ margin: 1 }}
                               >
@@ -827,6 +890,14 @@ function App() {
             </Grid>
           </Box>
         </Box>
+        <Snackbar
+          TransitionComponent={SlideTransition}
+          open={isRefreshing}
+          autoHideDuration={10000}
+          anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+        >
+          <Alert severity="info">Refreshing Data</Alert>
+        </Snackbar>
       </CssBaseline>
     </ThemeProvider>
   );

yarn.lock

@@ -7787,9 +7787,9 @@
   "version" "1.1.0"
 
 "plex-api-oauth@^1.0.4":
-  "integrity" "sha512-oru0+xa/65fVQNJrt236VhYacGO2y5o8dgkqVhR2yf79txNESVIP+5We/HLeaRflEV+kuP5O2zuUg8tyZQ0IWQ=="
+  "integrity" "sha512-bj509pQ4YVvkn1kytMUd8bvMqOAn7Q1VunGn+abX/yDCTjF7z9H3qyDLNBRNy2VhQ7lGSSFQE4LHJ//NXJZxDA=="
-  "resolved" "https://registry.npmjs.org/plex-api-oauth/-/plex-api-oauth-1.1.114.tgz"
+  "resolved" "https://registry.npmjs.org/plex-api-oauth/-/plex-api-oauth-1.1.116.tgz"
-  "version" "1.1.114"
+  "version" "1.1.116"
   dependencies:
     "axios" "^0.27.2"
     "plex-oauth" "^2.0.2"
@@ -8342,6 +8342,11 @@
     "clsx" "^1.1.1"
     "prop-types" "^15.8.1"
 
+"react-icons@^4.4.0":
+  "integrity" "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg=="
+  "resolved" "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz"
+  "version" "4.4.0"
+
 "react-infinite-scroller@^1.2.6":
   "integrity" "sha512-mGdMyOD00YArJ1S1F3TVU9y4fGSfVVl6p5gh/Vt4u99CJOptfVu/q5V/Wlle72TMgYlBwIhbxK5wF0C/R33PXQ=="
   "resolved" "https://registry.npmjs.org/react-infinite-scroller/-/react-infinite-scroller-1.2.6.tgz"