feat: Add persistent storage request, enhance player controls, and update manifest shortcuts

Author: macintorsten

.github/workflows/deploy.yml

@@ -26,6 +26,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: 20
+          cache: 'npm'
 
       - name: Install dependencies
         run: npm install

App.tsx

@@ -123,6 +123,13 @@ const App: React.FC = () => {
 
     window.addEventListener('beforeinstallprompt', handleBeforeInstall);
 
+    // Request persistent storage to protect user's library
+    if (navigator.storage && navigator.storage.persist) {
+      navigator.storage.persist().then(persistent => {
+        if (persistent) console.log("AuraPod storage is persistent.");
+      });
+    }
+
     const loadedPodcasts = storageService.getPodcasts();
     setPodcasts(loadedPodcasts);
     setHistory(storageService.getHistory());
@@ -456,7 +463,7 @@ const App: React.FC = () => {
             </button>
             <button 
               onClick={() => { setView('history'); syncHistory(); }} 
-              className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl transition ${view === 'history' ? 'bg-history' === view ? 'bg-indigo-50 dark:bg-zinc-800 text-indigo-600 dark:text-white font-medium' : 'hover:bg-zinc-200/50 dark:hover:bg-zinc-800/50' : 'hover:bg-zinc-200/50 dark:hover:bg-zinc-800/50'}`}
+              className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl transition ${view === 'history' ? 'bg-indigo-50 dark:bg-zinc-800 text-indigo-600 dark:text-white font-medium' : 'hover:bg-zinc-200/50 dark:hover:bg-zinc-800/50'}`}
             >
               <i className="fa-solid fa-clock-rotate-left text-sm"></i> History
             </button>
@@ -500,12 +507,12 @@ const App: React.FC = () => {
             <div className="mt-8 p-4 bg-indigo-500/10 dark:bg-indigo-900/20 border border-indigo-500/20 rounded-2xl animate-fade-in relative overflow-hidden group">
               <div className="absolute inset-0 aura-logo opacity-5 group-hover:opacity-10 transition"></div>
               <p className="text-[10px] font-bold text-indigo-600 dark:text-indigo-400 uppercase tracking-widest mb-2 relative">Always Ready</p>
-              <h4 className="text-xs font-bold text-zinc-900 dark:text-white leading-tight mb-3 relative">Keep AuraPod on your Device</h4>
+              <h4 className="text-xs font-bold text-zinc-900 dark:text-white leading-tight mb-3 relative">Use AuraPod as an App</h4>
               <button 
                 onClick={installApp}
                 className="w-full py-2 bg-indigo-600 text-white text-[10px] font-bold rounded-xl shadow-lg shadow-indigo-500/20 hover:bg-indigo-700 transition relative"
               >
-                SAVE TO DEVICE
+                ADD TO YOUR APPS
               </button>
               <button 
                 onClick={() => setShowInstallBanner(false)}

components/Player.tsx

@@ -14,7 +14,7 @@ interface PlayerProps {
   onClose: () => void;
   onShare: () => void;
   onProgress?: () => void; 
-  autoPlay?: boolean; // New prop to control autoplay
+  autoPlay?: boolean;
 }
 
 const SPEEDS = [0.5, 0.8, 1, 1.2, 1.5, 1.7, 2];
@@ -29,7 +29,7 @@ const Player: React.FC<PlayerProps> = ({
   onClose, 
   onShare,
   onProgress,
-  autoPlay = true // Defaults to true for normal usage
+  autoPlay = true
 }) => {
   const audioRef = useRef<HTMLAudioElement>(null);
   const [isPlaying, setIsPlaying] = useState(false);
@@ -52,6 +52,45 @@ const Player: React.FC<PlayerProps> = ({
     }
   }, [episode, podcast, error, onProgress]);
 
+  const togglePlay = useCallback(() => {
+    if (audioRef.current) {
+      if (isPlaying) {
+        audioRef.current.pause();
+        setIsPlaying(false);
+        saveProgress(); 
+      } else {
+        audioRef.current.play().then(() => setIsPlaying(true)).catch(() => setIsPlaying(false));
+      }
+    }
+  }, [isPlaying, saveProgress]);
+
+  // Media Session API Integration
+  useEffect(() => {
+    if ('mediaSession' in navigator) {
+      navigator.mediaSession.metadata = new MediaMetadata({
+        title: episode.title,
+        artist: podcast.title,
+        album: podcast.title,
+        artwork: [
+          { src: episode.image || podcast.image, sizes: '512x512', type: 'image/png' }
+        ]
+      });
+
+      navigator.mediaSession.setActionHandler('play', () => togglePlay());
+      navigator.mediaSession.setActionHandler('pause', () => togglePlay());
+      navigator.mediaSession.setActionHandler('seekbackward', () => {
+        if (audioRef.current) audioRef.current.currentTime -= 15;
+      });
+      navigator.mediaSession.setActionHandler('seekforward', () => {
+        if (audioRef.current) audioRef.current.currentTime += 30;
+      });
+      navigator.mediaSession.setActionHandler('previoustrack', () => {
+         if (audioRef.current) audioRef.current.currentTime = 0;
+      });
+      navigator.mediaSession.setActionHandler('nexttrack', () => onNext());
+    }
+  }, [episode, podcast, onNext, togglePlay]);
+
   useEffect(() => {
     setError(null);
     if (!episode.audioUrl) {
@@ -108,17 +147,13 @@ const Player: React.FC<PlayerProps> = ({
       const dur = audioRef.current.duration;
       setCurrentTime(cur);
       setDuration(dur);
-    }
-  };
 
-  const togglePlay = () => {
-    if (audioRef.current) {
-      if (isPlaying) {
-        audioRef.current.pause();
-        setIsPlaying(false);
-        saveProgress(); 
-      } else {
-        audioRef.current.play().then(() => setIsPlaying(true)).catch(() => setIsPlaying(false));
+      if ('mediaSession' in navigator && isFinite(dur)) {
+        navigator.mediaSession.setPositionState({
+          duration: dur,
+          playbackRate: playbackRate,
+          position: cur
+        });
       }
     }
   };

manifest.json

@@ -7,6 +7,7 @@
   "start_url": "./",
   "scope": "./",
   "display": "standalone",
+  "display_override": ["window-controls-overlay", "standalone", "minimal-ui"],
   "background_color": "#09090b",
   "theme_color": "#8b5cf6",
   "categories": ["music", "multimedia", "productivity"],
@@ -26,21 +27,21 @@
   ],
   "shortcuts": [
     {
-      "name": "Discover",
+      "name": "Discover New Waves",
       "short_name": "Discover",
-      "description": "Find new waves",
+      "description": "Explore trending and new podcasts",
       "url": "./?view=home",
       "icons": [{ "src": "icon.svg", "sizes": "512x512" }]
     },
     {
-      "name": "History",
+      "name": "Resume History",
       "short_name": "History",
-      "description": "Resume your past waves",
+      "description": "Continue listening to your past waves",
       "url": "./?view=history",
       "icons": [{ "src": "icon.svg", "sizes": "512x512" }]
     },
     {
-      "name": "New Releases",
+      "name": "Fresh Releases",
       "short_name": "New",
       "url": "./?view=new",
       "icons": [{ "src": "icon.svg", "sizes": "512x512" }]