diff --git a/README.md b/README.md index 4ca0c9b..08dd754 100644 --- a/README.md +++ b/README.md @@ -13,13 +13,11 @@ Examples Assume React Syntax ### Loading a Saved Session -The LoadPlexSession Function returns an object that contains the plexClientInformation and plexTVAuthToken keys/values according to how they were created +LoadPlexSession: +Function returns an object that contains the plexClientInformation and plexTVAuthToken keys/values according to how they were created ``` JavaScript - const loadedSession = LoadPlexSession(); -if ( - loadedSession.plexClientInformation === null || - loadedSession.plexClientInformation === undefined -){ +const loadedSession = LoadPlexSession(); +if (loadedSession.plexClientInformation == null){ loadedSession.plexClientInformation = CreatePlexClientInformation(); } @@ -51,3 +49,121 @@ const [plexTVAuthToken, setPlexTVAuthToken] = useState( SavePlexSession(plexClientInformation, tempPlexTVAuthToken); } ``` + +### Refresh Data with Saved Session +``` JavaScript + async function Refresh() { + const tempPlexTVUserData = await GetPlexUserData( + plexClientInformation, + plexTVAuthToken + ); + const tempPlexServers = await GetPlexServers( + plexClientInformation, + plexTVAuthToken + ); + const tempPlexDevices = await GetPlexDevices( + plexClientInformation, + plexTVAuthToken + ); + const tempPlexLibraries = await GetPlexLibraries(tempPlexServers); + UpdateHubs(tempPlexServers, tempPlexLibraries); + setPlexServers(tempPlexServers); + setPlexDevices(tempPlexDevices); + setPlexTVUserData(tempPlexTVUserData); + setPlexLibraries(tempPlexLibraries); + setIsRefreshing(false); + } +``` + +### Update Library list when the topic is changed (artists. albums, songs) +``` JavaScript + async function UpdateLibrary() { + setIsLoading(true); + const returnObject = await GetLibraryPages( + plexServers, + plexLibraries, + topic, + pageNumber, + 250 + ); + console.log(returnObject); + const tempItemArray = Array.from([ + ...new Set([...libraryItems, ...returnObject.items]), + ]); + + setLibraryItems(tempItemArray); + setLibraryHasMore(returnObject.hasMore); + setIsLoading(false); + } +``` + +### Intersection observer to load more library items when the callbackref object comes into view +``` JavaScript + 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] + ); +``` + +### Intersection observer Callback usage +``` JavaScript + if (libraryItems?.length === index + 100) { + return ( + + + + + + + {Obj.title} - {Obj.grandparentTitle} -{' '} + {Obj.parentTitle} + + + + ); + } +``` + +### Intersection observer to load more library items when the callbackref object comes into view +``` JavaScript + 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] + ); +``` + +### Get Plex Music Hub data +``` 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 + plexLibraries + ); + setMusicHubs(tempMusicHubs); + } +``` + +