feat(project): cache media items from playlists

src/hooks/useEntitlement.ts

@@ -46,6 +46,8 @@ const useEntitlement: UseEntitlement = (playlistItem) => {
   const isPreEntitled = playlistItem && !isLocked(accessModel, !!user, !!subscription, playlistItem);
   const mediaOffers = playlistItem?.mediaOffers || [];
 
+  // This entitlement query is invalidated by adding all transaction IDs to the queryKey. Perhaps a more optimal way is
+  // to invalidate the query cache after the payment.
   const mediaEntitlementQueries = useQueries(
     mediaOffers.map(({ offerId }) => ({
       queryKey: ['mediaOffer', offerId, transactions?.map((t) => t.transactionId).join(',')],

src/hooks/usePlaylist.ts

@@ -2,6 +2,7 @@ import useContentProtection from '#src/hooks/useContentProtection';
 import { generatePlaylistPlaceholder } from '#src/utils/collection';
 import type { GetPlaylistParams, Playlist } from '#types/playlist';
 import { getPlaylistById } from '#src/services/api.service';
+import { queryClient } from '#src/providers/QueryProvider';
 
 const placeholderData = generatePlaylistPlaceholder(30);
 
@@ -16,12 +17,18 @@ const filterMediaItem = (playlist: Playlist | undefined, mediaId?: string) => {
   return playlist;
 };
 
-export default function usePlaylist (playlistId: string, params: GetPlaylistParams = {}, enabled: boolean = true, usePlaceholderData: boolean = true) {
+export default function usePlaylist(playlistId: string, params: GetPlaylistParams = {}, enabled: boolean = true, usePlaceholderData: boolean = true) {
   const callback = async (token?: string, drmPolicyId?: string) => {
     const playlist = await getPlaylistById(playlistId, { token, ...params }, drmPolicyId);
 
+    // This pre-caches all playlist items and makes navigating a lot faster. This doesn't work when DRM is enabled
+    // because of the token mechanism.
+    playlist?.playlist?.forEach((playlistItem) => {
+      queryClient.setQueryData(['media', playlistItem.mediaid, {}, undefined], playlistItem);
+    });
+
     return filterMediaItem(playlist);
-  }
+  };
 
   return useContentProtection('playlist', playlistId, callback, params, enabled, usePlaceholderData ? placeholderData : undefined);
 }

src/providers/QueryProvider.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
 
-const queryClient = new QueryClient({
+export const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       staleTime: 60 * 60 * 1000,