feat: implement caching mechanism and refactor player component

Author: 514sid

.env

@@ -3,4 +3,5 @@ VITE_ENABLE_PLAYBACK_TRACKER=false
 VITE_TIMEZONE=America/New_York
 # Available adapters: NetworkFile, GarlicHub
 VITE_CMS_ADAPTER=GarlicHub
-VITE_CMS_ADAPTER_URL=https://garlic-hub.com/
+# URL examples: /demo/playlist_data.json, https://garlic-hub.com
+VITE_CMS_ADAPTER_URL=https://garlic-hub.com

src/App.tsx

@@ -1,39 +1,37 @@
 import { useMemo } from 'react'
 import { useCMSAdapter } from './hooks/useCMSAdapter'
-import { useCurrentTimestamp } from './hooks/useCurrentTimestamp'
-import { usePlaylist } from './hooks/usePlaylist'
-import { usePlaylistCache } from './hooks/usePlaylistCache'
-import { PlaylistRenderer } from './PlaylistRenderer'
 import { getCMSAdapter } from './utils/getCMSAdapter'
+import { Player } from './Player'
+import { useCachedData } from './hooks/useCachedData'
 
 export const App = () => {
     const searchParams = new URLSearchParams(window.location.search)
+    
     const adapterParam = searchParams.get('adapter')
 
     const adapter = useMemo(() => getCMSAdapter(adapterParam), [adapterParam])
+    
     const data = useCMSAdapter({ adapter})
 
-    const timezone = 'America/Los_Angeles'
-    const currentTimestamp = useCurrentTimestamp(timezone)
-    
-    const { currentPlaylist, elapsedSinceStart } = usePlaylist(data, currentTimestamp)
-    const { isPreloaded } = usePlaylistCache(currentPlaylist)
+    const timezone = import.meta.env.VITE_TIMEZONE
 
-    if (!currentPlaylist || elapsedSinceStart === null) {
+    const { cachedData, isCaching } = useCachedData(data)
+
+    if(cachedData.length > 0) return <Player data={ data } timezone={timezone} />
+
+    if (!isCaching) {
         return (
             <div className='bg-black w-screen h-screen overflow-hidden'>
-                <h1 className='text-white text-3xl font-bold'>No active playlist</h1>
+                <h1 className='text-white text-3xl font-bold'>Schedule is empty</h1>
             </div>
         )
     }
 
-    if (!isPreloaded) {
+    if (isCaching) {
         return (
             <div className='bg-black w-screen h-screen overflow-hidden'>
-                <h1 className='text-white text-3xl font-bold'>Loading playlist...</h1>
+                <h1 className='text-white text-3xl font-bold'>Loading...</h1>
             </div>
         )
     }
-
-    return <PlaylistRenderer playlist={ currentPlaylist } elapsedSinceStart={ elapsedSinceStart } />
 }

src/Player.tsx

@@ -0,0 +1,20 @@
+import { useCurrentTimestamp } from './hooks/useCurrentTimestamp'
+import { usePlaylist } from './hooks/usePlaylist'
+import { PlaylistRenderer } from './PlaylistRenderer'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const Player = ({ data, timezone }: { data: any, timezone: string }) => {
+    const currentTimestamp = useCurrentTimestamp(timezone)
+		
+    const { currentPlaylist, elapsedSinceStart } = usePlaylist(data, currentTimestamp)
+		
+	 if (!currentPlaylist || elapsedSinceStart === null) {
+        return (
+            <div className='bg-black w-screen h-screen overflow-hidden'>
+                <h1 className='text-white text-3xl font-bold'>No active playlist</h1>
+            </div>
+        )
+    }
+
+    return <PlaylistRenderer playlist={ currentPlaylist } elapsedSinceStart={ elapsedSinceStart } />
+}

src/hooks/useCachedData.ts

@@ -0,0 +1,59 @@
+import { useEffect, useState } from 'react'
+import type { Playlist } from '../types'
+
+const LOCAL_STORAGE_KEY = 'cached_playlists'
+
+// Mock function for caching, can be replaced with real implementation or for testing
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function mockCachePlaylists(playlists: Playlist[]) {
+    // For now, just log to console
+    console.log('Mock caching playlists')
+    return true
+}
+
+function arePlaylistsEqual(a: Playlist[], b: Playlist[]): boolean {
+    return JSON.stringify(a) === JSON.stringify(b)
+}
+
+export function useCachedData(playlists: Playlist[] | null) {
+    const [cachedPlaylists, setCachedPlaylists] = useState<Playlist[]>(() => {
+        const cachedRaw = localStorage.getItem(LOCAL_STORAGE_KEY)
+
+        return cachedRaw ? JSON.parse(cachedRaw) : []
+    })
+
+    const [loadingPlaylist, setLoadingPlaylist] = useState<boolean>(false)
+
+    useEffect(() => {
+        const updateData = async () => {
+            if(!playlists || !Array.isArray(playlists)) {
+                console.warn('Invalid playlists data, skipping caching.')
+                return
+            }
+			
+            if (!arePlaylistsEqual(playlists, cachedPlaylists)) {
+                setLoadingPlaylist(true)
+
+                console.log('Playlists changed, updating cached data...')
+                
+                const result = mockCachePlaylists(playlists)
+
+                if (result !== false) {
+                    console.warn('Caching function returned false, not updating local storage.')
+                
+                    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(playlists))
+                    setCachedPlaylists(playlists)
+                }
+
+                console.log('Playlists cached:', playlists)
+                
+                setLoadingPlaylist(false)
+            }
+        }
+
+        updateData()
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [playlists])
+
+    return { cachedData: cachedPlaylists, isCaching: loadingPlaylist }
+}

src/hooks/usePlaylistCache.ts

@@ -0,0 +1,20 @@
+export const cacheMediaFile = async (src: string): Promise<void> => {
+    try {
+        const cache = await caches.open('screenlite-cache')
+
+        const cachedResponse = await cache.match(src)
+
+        if (cachedResponse) return
+
+        const response = await fetch(src, { mode: 'no-cors' })
+
+        if (!response.ok && response.type !== 'opaque') {
+            throw new Error(`Failed to fetch ${src}: ${response.statusText}`)
+        }
+
+        await cache.put(src, response.clone())
+    } catch (err) {
+        console.error('Caching error:', err)
+        throw err
+    }
+}

src/utils/cacheMediaFile.ts

@@ -0,0 +1,22 @@
+import type { Playlist } from '../types'
+
+export const isDataCached = async (playlist: Playlist | null): Promise<boolean> => {
+    if (!playlist) return false
+
+    try {
+        const cache = await caches.open('screenlite-cache')
+
+        const allPaths = playlist.sections.flatMap(section =>
+            section.items.map(item => item.content_path)
+        )
+
+        const results = await Promise.all(
+            allPaths.map(path => cache.match(path))
+        )
+
+        return results.every(res => !!res)
+    } catch (err) {
+        console.error('Cache check error:', err)
+        return false
+    }
+}