Update README.md

README.md

@@ -1,4 +1,5 @@
 # plex-api-oauth
+
 An NPM Module designed to make Plex Media Server and plex.tv API calls easier to implement in JavaScript and React projects
 
 <img src="https://img.shields.io/lgtm/grade/javascript/github/LukeHagar/plex-api-oauth" /> <img src="https://img.shields.io/npm/dw/plex-api-oauth" />
@@ -7,6 +8,8 @@ https://www.npmjs.com/package/plex-api-oauth
 
 This is a JavaScript Module written to take the OAuth Module written by @Dmbob https://github.com/Dmbob/plex-oauth and incorporate it into a front end friend frame work to make development of Plex API Based applications better
 
+# Interactive API Explorer: https://lukehagar.com/plex-api-oauth
+
 ## How to Use
 
 Examples Assume React Syntax
@@ -15,7 +18,8 @@ Examples Assume React Syntax
 
 LoadPlexSession:  
 Function returns an object that contains the plexClientInformation and plexTVAuthToken keys/values according to how they were created
-``` JavaScript
+
+```JavaScript
 const loadedSession = LoadPlexSession();
 if (loadedSession.plexClientInformation == null){
     loadedSession.plexClientInformation = CreatePlexClientInformation();
@@ -30,7 +34,8 @@ const [plexTVAuthToken, setPlexTVAuthToken] = useState(
 ```
 
 ### Login Button + Save Session
-``` JavaScript
+
+```JavaScript
  async function PlexLoginButton() {
     const tempPlexTVAuthToken = await PlexLogin(plexClientInformation);
     const tempPlexTVUserData = await GetPlexUserData(
@@ -51,7 +56,8 @@ const [plexTVAuthToken, setPlexTVAuthToken] = useState(
 ```
 
 ### Refresh Data with Saved Session
-``` JavaScript
+
+```JavaScript
  async function Refresh() {
     const tempPlexTVUserData = await GetPlexUserData(
       plexClientInformation,
@@ -76,7 +82,8 @@ const [plexTVAuthToken, setPlexTVAuthToken] = useState(
 ```
 
 ### Update Library list when the topic is changed (artists. albums, songs)
-``` JavaScript
+
+```JavaScript
  async function UpdateLibrary() {
     setIsLoading(true);
     const returnObject = await GetLibraryPages(
@@ -98,7 +105,8 @@ const [plexTVAuthToken, setPlexTVAuthToken] = useState(
 ```
 
 ### Intersection observer to load more library items when the callbackref object comes into view
-``` JavaScript
+
+```JavaScript
  const observer = useRef();
   const lastLibraryItem = useCallback(
     (node) => {
@@ -117,26 +125,28 @@ const [plexTVAuthToken, setPlexTVAuthToken] = useState(
 ```
 
 ### Intersection observer Callback usage
-``` JavaScript
+
-                    if (libraryItems?.length === index + 100) {
+```JavaScript
-                      return (
+  if (libraryItems?.length === index + 100) {
-                        <Grid item xs="12" key={Obj.guid + index}>
+    return (
-                          <ListItem ref={lastLibraryItem}>
+          <Grid item xs="12" key={Obj.guid + index}>
-                            <ListItemAvatar>
+            <ListItem ref={lastLibraryItem}>
-                              <Avatar alt={NoArt} src={Obj.thumb} />
+              <ListItemAvatar>
-                            </ListItemAvatar>
+                <Avatar alt={NoArt} src={Obj.thumb} />
-                            <Typography variant="h6" noWrap>
+              </ListItemAvatar>
-                              {Obj.title} - {Obj.grandparentTitle} -{' '}
+              <Typography variant="h6" noWrap>
-                              {Obj.parentTitle}
+                {Obj.title} - {Obj.grandparentTitle} -{' '}
-                            </Typography>
+                {Obj.parentTitle}
-                          </ListItem>
+              </Typography>
-                        </Grid>
+            </ListItem>
-                      );
+        </Grid>
-                    }
+      );
+    }
 ```
 
 ### Intersection observer to load more library items when the callbackref object comes into view
-``` JavaScript
+
+```JavaScript
  const observer = useRef();
   const lastLibraryItem = useCallback(
     (node) => {
@@ -155,15 +165,209 @@ const [plexTVAuthToken, setPlexTVAuthToken] = useState(
 ```
 
 ### Get Plex Music Hub data
-``` JavaScript
+
+```JavaScript
  async function UpdateHubs(plexClientInformation, plexServers, plexLibraries) {
     const tempMusicHubs = await GetMusicHub(
       plexClientInformation,
-      plexServers, // No Auth Token is needed since the server entries have their own access tokens
+      plexServers, // No Auth Token is needed since the server objects have their own access tokens
       plexLibraries
     );
     setMusicHubs(tempMusicHubs);
   }
 ```
 
+## Commands:
 
+### CreatePlexClientInformation
+
+Accepts: input values
+
+Generates the Client Information to uniquely identify the Authenticated client
+Save between sessions for consistency
+
+```JavaScript
+input = {product:"LukeHagar.com"}
+plexClientInformation = CreatePlexClientInformation(input);
+```
+
+### PlexLogin
+
+Accepts: plexClientInformation
+
+If command is run in a browser window it will open the new login window automatically
+
+```JavaScript
+plexTVAuthToken = PlexLogin(plexClientInformation);
+```
+
+### GetPlexUserData
+
+Accepts: plexClientInformation, plexTVAuthToken
+
+Queries the plex.tv api to get information on the authenticated user
+
+```JavaScript
+plexUserData = GetPlexUserData(plexClientInformation, plexTVAuthToken);
+```
+
+### GetPlexServers
+
+Accepts an Object with partial client values, will populate the remaining ones left blank if needed
+
+```JavaScript
+plexServers = GetPlexServers(plexClientInformation, plexTVAuthToken);
+```
+
+### GetPlexMovies
+
+Accepts an Object with partial client values, will populate the remaining ones left blank if needed
+
+```JavaScript
+input = {product:"LukeHagar.com"}
+plexClientInformation = CreatePlexClientInformation(input);
+```
+
+### GetPlexShows
+
+Accepts an Object with partial client values, will populate the remaining ones left blank if needed
+
+```JavaScript
+input = {product:"LukeHagar.com"}
+plexClientInformation = CreatePlexClientInformation(input);
+```
+
+### GetPlexSeasons
+
+Accepts an Object with partial client values, will populate the remaining ones left blank if needed
+
+```JavaScript
+input = {product:"LukeHagar.com"}
+plexClientInformation = CreatePlexClientInformation(input);
+```
+
+### GetPlexEpisodes
+
+Accepts an Object with partial client values, will populate the remaining ones left blank if needed
+
+```JavaScript
+input = {product:"LukeHagar.com"}
+plexClientInformation = CreatePlexClientInformation(input);
+```
+
+### GetPlexMovieLibraries
+
+Accepts an Object with partial client values, will populate the remaining ones left blank if needed
+
+```JavaScript
+input = {product:"LukeHagar.com"}
+plexClientInformation = CreatePlexClientInformation(input);
+```
+
+### GetPlexMusicLibraries
+
+Accepts an Object with partial client values, will populate the remaining ones left blank if needed
+
+```JavaScript
+input = {product:"LukeHagar.com"}
+plexClientInformation = CreatePlexClientInformation(input);
+```
+
+### GetPlexTVShowLibraries
+
+Accepts an Object with partial client values, will populate the remaining ones left blank if needed
+
+```JavaScript
+input = {product:"LukeHagar.com"}
+plexClientInformation = CreatePlexClientInformation(input);
+```
+
+### GetPlexArtists
+
+Accepts an Object with partial client values, will populate the remaining ones left blank if needed
+
+```JavaScript
+input = {product:"LukeHagar.com"}
+plexClientInformation = CreatePlexClientInformation(input);
+```
+
+### GetPlexAlbums
+
+Accepts an Object with partial client values, will populate the remaining ones left blank if needed
+
+```JavaScript
+input = {product:"LukeHagar.com"}
+plexClientInformation = CreatePlexClientInformation(input);
+```
+
+### GetPlexSongs
+
+Accepts an Object with partial client values, will populate the remaining ones left blank if needed
+
+```JavaScript
+input = {product:"LukeHagar.com"}
+plexClientInformation = CreatePlexClientInformation(input);
+```
+
+### GetPlexLibraries
+
+Accepts an Object with partial client values, will populate the remaining ones left blank if needed
+
+```JavaScript
+input = {product:"LukeHagar.com"}
+plexClientInformation = CreatePlexClientInformation(input);
+```
+
+### GetPlexDevices
+
+Accepts an Object with partial client values, will populate the remaining ones left blank if needed
+
+```JavaScript
+input = {product:"LukeHagar.com"}
+plexClientInformation = CreatePlexClientInformation(input);
+```
+
+### ### GetLibraryPages
+
+Accepts an Object with partial client values, will populate the remaining ones left blank if needed
+
+```JavaScript
+input = {product:"LukeHagar.com"}
+plexClientInformation = CreatePlexClientInformation(input);
+```
+
+### LoadPlexSession
+
+Accepts an Object with partial client values, will populate the remaining ones left blank if needed
+
+```JavaScript
+input = {product:"LukeHagar.com"}
+plexClientInformation = CreatePlexClientInformation(input);
+```
+
+### SavePlexSession
+
+Accepts an Object with partial client values, will populate the remaining ones left blank if needed
+
+```JavaScript
+input = {product:"LukeHagar.com"}
+plexClientInformation = CreatePlexClientInformation(input);
+```
+
+### GetMusicHub
+
+Accepts an Object with partial client values, will populate the remaining ones left blank if needed
+
+```JavaScript
+input = {product:"LukeHagar.com"}
+plexClientInformation = CreatePlexClientInformation(input);
+```
+
+### GetArtistPage
+
+Accepts an Object with partial client values, will populate the remaining ones left blank if needed
+
+```JavaScript
+input = {product:"LukeHagar.com"}
+plexClientInformation = CreatePlexClientInformation(input);
+```