Merge pull request #8 from mxggle/feat/route

feat: persistent player, transcript UI overhaul, and storage fixes (v0.9.2)

Author: mxggle

CHANGELOG.md

@@ -7,6 +7,28 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.9.2] - 2026-03-15
+
+### Added
+- **Persistent player**:
+  - Persistent media player that survives page navigation, preserving playback state across routes
+  - Virtualized transcript list for smooth rendering of long transcripts without performance degradation
+
+### Changed
+- **Transcript controls**:
+  - Merged transcript action buttons directly into the header for a cleaner, more accessible layout
+  - Replaced individual export buttons with a single dropdown menu to reduce toolbar clutter
+- **Storage cleanup**:
+  - Transcript records are now deleted atomically alongside media files using a shared `deleteMediaRecords` helper
+  - `clearAllMediaFiles` now clears both the media store and transcript store in a single transaction
+  - Cleanup routine removes orphaned transcript records when old media files are purged
+
+### Fixed
+- **AI settings**:
+  - AI provider and model selections now initialize correctly from localStorage on first render
+- **Storage**:
+  - Removed obsolete v3 migration block that incorrectly wiped `mediaTranscripts` on store rehydration
+
 ## [0.9.1] - 2026-03-14
 
 ### Added

package-lock.json

@@ -19,7 +19,7 @@
     "loop-station",
     "media-player"
   ],
-  "version": "0.9.1",
+  "version": "0.9.2",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -36,6 +36,7 @@
     "@radix-ui/react-toggle": "^1.1.9",
     "@radix-ui/themes": "^3.2.1",
     "@tanstack/react-query": "^5.76.2",
+    "@tanstack/react-virtual": "^3.13.22",
     "@types/node": "^22.15.21",
     "@types/react-router-dom": "^5.3.3",
     "@vercel/analytics": "^1.5.0",

package.json

@@ -111,11 +111,13 @@ export const MediaPlayer = ({ hiddenMode = false }: MediaPlayerProps) => {
     };
   }, [currentFile, setIsPlaying]);
 
-  // Pause playback when the component unmounts so the store stays in sync
+  // Pause playback when the component unmounts only if media has been cleared.
+  // During navigation (settings → player), currentFile stays set so we preserve playback.
   useEffect(() => {
     return () => {
-      const { isPlaying: stillPlaying } = usePlayerStore.getState();
-      if (stillPlaying) {
+      const { isPlaying: stillPlaying, currentFile: fileAtUnmount } =
+        usePlayerStore.getState();
+      if (stillPlaying && !fileAtUnmount) {
         usePlayerStore.getState().setIsPlaying(false);
       }
     };

src/components/player/MediaPlayer.tsx

@@ -10,53 +10,20 @@ import {
   normalizeModelId,
 } from "../../types/aiService";
 import { aiService } from "../../services/aiService";
+import {
+  ExplanationResult,
+  globalExplanationListeners,
+  explanationCache,
+  setGlobalExplanationState,
+  getGlobalExplanationState,
+} from "./explanationState";
 
 interface ExplanationDrawerProps {
   isOpen: boolean;
   onClose: () => void;
   text: string;
 }
 
-interface ExplanationResult {
-  explanation: string;
-  usage?: {
-    promptTokens: number;
-    completionTokens: number;
-    totalTokens: number;
-  };
-  model: string;
-  provider: AIProvider;
-}
-
-// Global explanation state management (shared with TranscriptSegment)
-interface ExplanationState {
-  text: string;
-  status: "idle" | "loading" | "completed" | "error";
-  result?: ExplanationResult;
-  error?: string;
-}
-
-const globalExplanationStates = new Map<string, ExplanationState>();
-const globalExplanationListeners = new Set<() => void>();
-
-const setGlobalExplanationState = (
-  text: string,
-  state: Partial<ExplanationState>
-) => {
-  const existing = globalExplanationStates.get(text) || {
-    text,
-    status: "idle",
-  };
-  globalExplanationStates.set(text, { ...existing, ...state });
-  globalExplanationListeners.forEach((listener) => listener());
-};
-
-const getGlobalExplanationState = (text: string): ExplanationState => {
-  return globalExplanationStates.get(text) || { text, status: "idle" };
-};
-
-const explanationCache = new Map<string, ExplanationResult>();
-
 export const ExplanationDrawer: React.FC<ExplanationDrawerProps> = ({
   isOpen,
   onClose,
@@ -67,9 +34,19 @@ export const ExplanationDrawer: React.FC<ExplanationDrawerProps> = ({
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  const [selectedProvider, setSelectedProvider] = useState<AIProvider>("openai");
-  const [selectedModel, setSelectedModel] = useState("");
-  const [targetLanguage, setTargetLanguage] = useState("English");
+  const [selectedProvider, setSelectedProvider] = useState<AIProvider>(
+    () => (localStorage.getItem("preferred_ai_provider") as AIProvider) || "openai"
+  );
+  const [targetLanguage, setTargetLanguage] = useState(
+    () => localStorage.getItem("target_language") || "English"
+  );
+  const [selectedModel, setSelectedModel] = useState(() => {
+    const provider = (localStorage.getItem("preferred_ai_provider") as AIProvider) || "openai";
+    return normalizeModelId(
+      provider,
+      localStorage.getItem(`${provider}_model`) || DEFAULT_MODELS[provider]
+    );
+  });
 
   // Handle ESC key
   useEffect(() => {