Merge pull request #5 from mxggle/feature/current-changes-20260311

Release 0.9.0: AI settings overhaul, shadowing simplification, and waveform loading improvements

Author: mxggle

.claude/settings.local.json

@@ -3,7 +3,14 @@
     "allow": [
       "Bash(find:*)",
       "Bash(lsof:*)",
-      "Bash(npm run build)"
+      "Bash(npm run build)",
+      "Bash(npx tsc --noEmit)",
+      "Bash(grep -rn \"SharedArrayBuffer\\\\|crossOriginIsolated\\\\|COOP\\\\|COEP\" /Users/szy/CascadeProjects/modern-ab-loop/ --include=\"*.ts\" --include=\"*.tsx\" --include=\"*.json\" 2>/dev/null | head -10)",
+      "Bash(grep -rn \"audio/wav\\\\|audio/mp3\\\\|audio/mp4\\\\|audio/webm\\\\|audio/ogg\\\\|audio/flac\\\\|type.*audio\" /Users/szy/CascadeProjects/modern-ab-loop/src/ --include=\"*.ts\" --include=\"*.tsx\" 2>/dev/null | head -20)",
+      "Bash(grep -rn \"file.*size\\\\|maxFileSize\\\\|25MB\\\\|25 MB\\\\|fileSize\\\\|MAX_SIZE\" /Users/szy/CascadeProjects/modern-ab-loop/src/ --include=\"*.ts\" --include=\"*.tsx\" 2>/dev/null | head -10)",
+      "Bash(grep -rn \"local.*server\\\\|localhost\\\\|127\\\\.0\\\\.0\\\\.1\\\\|http://\\\\|proxy\\\\|API_URL\\\\|BASE_URL\\\\|VITE_\" /Users/szy/CascadeProjects/modern-ab-loop/src/ --include=\"*.ts\" --include=\"*.tsx\" 2>/dev/null | grep -v \"//.*http\\\\|node_modules\" | head -20)",
+      "Bash(grep -rn \"worker\\\\|Worker\" /Users/szy/CascadeProjects/modern-ab-loop/src/ --include=\"*.ts\" --include=\"*.tsx\" 2>/dev/null | grep -v \"node_modules\\\\|WorkerController\\\\|service-worker\\\\|ServiceWorker\" | head -15)",
+      "Bash(grep -rn \"sampleRate\\\\|48000\\\\|16000\\\\|44100\" /Users/szy/CascadeProjects/modern-ab-loop/src/ --include=\"*.ts\" --include=\"*.tsx\" 2>/dev/null | head -15)"
     ]
   }
 }

CHANGELOG.md

@@ -7,6 +7,47 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.9.0] - 2026-03-12
+
+### Added
+- **Playback controls**:
+  - Added a dedicated "play from start" control in the player UI
+  - Added safer pending-play handling so media can begin automatically once the element is ready
+- **Transcription workflow**:
+  - Added loop-range transcription so the active A-B selection can be sent directly for transcription
+  - Added an explicit full-range transcription action and cancel controls for long-running jobs
+- **Waveform processing**:
+  - Added cached waveform analysis utilities for background generation and progressive loading
+  - Added large-file waveform loading feedback with analysis progress states
+
+### Changed
+- **AI settings overhaul**:
+  - Rebuilt the AI settings page into clearer defaults, providers, and transcription sections
+  - Improved provider selection, model selection, API key handling, and connection testing flows
+  - Expanded translations for the new AI and transcription settings UI
+- **Shadowing workflow simplification**:
+  - Simplified shadowing playback and recording to a single-track model
+  - Refined recorder state handling, cleanup behavior, and waveform rendering for shadowing sessions
+- **Waveform experience**:
+  - Reworked waveform loading and rendering to better handle very large local audio files
+  - Improved waveform caching, zoom behavior, and loading transitions for stored media
+- **Player and media state management**:
+  - Improved playback state synchronization between the media element and the global store
+  - Reduced noisy current-time updates and tightened media cleanup during unmounts
+- **Transcript actions**:
+  - Refined transcript action buttons and range-aware transcription entry points
+
+### Fixed
+- **Playback reliability**:
+  - Fixed cases where play requests could be dropped before media was ready
+  - Fixed store playback state drifting out of sync with the actual media element
+- **Waveform stability**:
+  - Fixed large audio waveform loading regressions and reduced failures during background analysis
+  - Improved recovery and status handling when waveform analysis cannot complete normally
+- **Shadowing and storage cleanup**:
+  - Improved cleanup around shadowing recordings and related persisted media state
+  - Fixed several edge cases in local media storage and waveform cache updates
+
 ## [0.8.1] - 2026-02-17
 
 ### Added
@@ -214,7 +255,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - Layout optimizations for desktop view
   - TypeScript and React component structure
 
-[Unreleased]: https://github.com/USERNAME/loopmate/compare/v0.8.1...HEAD
+[Unreleased]: https://github.com/USERNAME/loopmate/compare/v0.9.0...HEAD
+[0.9.0]: https://github.com/USERNAME/loopmate/compare/v0.8.1...v0.9.0
 [0.8.1]: https://github.com/USERNAME/loopmate/compare/v0.8.0...v0.8.1
 [0.8.0]: https://github.com/USERNAME/loopmate/compare/v0.7.0...v0.8.0
 [0.7.0]: https://github.com/USERNAME/loopmate/compare/v0.6.1...v0.7.0

package-lock.json

@@ -19,7 +19,7 @@
     "loop-station",
     "media-player"
   ],
-  "version": "0.8.1",
+  "version": "0.9.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -79,4 +79,4 @@
     "typescript": "^5.3.0",
     "vite": "^5.0.0"
   }
-}
+}

package.json

@@ -1,8 +1,7 @@
-import { useState, useEffect, useMemo } from "react";
+import { useState, useEffect } from "react";
 import { usePlayerStore } from "../../stores/playerStore";
 import { useTranslation } from "react-i18next";
 import { formatTime } from "../../utils/formatTime";
-import { checkAudioRecordingSupport, getRecordingUnsupportedMessage } from "../../utils/browserCheck";
 import {
   Play,
   Pause,
@@ -20,11 +19,8 @@ import {
   Bookmark,
   ListMusic,
   X,
-  Mic,
   RotateCcw,
 } from "lucide-react";
-import { useShadowingStore } from "../../stores/shadowingStore";
-import { useShadowingRecorder } from "../../hooks/useShadowingRecorder";
 import { Slider } from "../ui/slider";
 import { Button } from "../ui/button";
 import { Plus } from "lucide-react";
@@ -69,18 +65,8 @@ export const CombinedControls = () => {
     selectedBookmarkId,
   } = usePlayerStore();
 
-  const {
-    isShadowingMode,
-    setShadowingMode,
-    isRecording,
-  } = useShadowingStore();
-
-  // Initialize shadowing recorder
-  useShadowingRecorder();
-
   const [rangeValues, setRangeValues] = useState<[number, number]>([0, 100]);
   const [showABControls, setShowABControls] = useState(false);
-
   // Get current media bookmarks for the bookmark button
   const bookmarks = getCurrentMediaBookmarks();
 
@@ -94,20 +80,6 @@ export const CombinedControls = () => {
     setRangeValues([(start / duration) * 100, (end / duration) * 100]);
   }, [loopStart, loopEnd, duration]);
 
-  // Check if audio recording is supported in this browser
-  const recordingCapabilities = useMemo(() => checkAudioRecordingSupport(), []);
-  const canRecord = recordingCapabilities.supportsAudioRecording;
-
-  // Handle shadowing mode toggle
-  const handleShadowingToggle = () => {
-    if (!isShadowingMode && !canRecord) {
-      const errorMessage = getRecordingUnsupportedMessage(recordingCapabilities);
-      toast.error(errorMessage, { duration: 5000 });
-      return;
-    }
-    setShadowingMode(!isShadowingMode);
-  };
-
   // Toggle play/pause
   const togglePlayPause = () => {
     setIsPlaying(!isPlaying);
@@ -414,23 +386,6 @@ export const CombinedControls = () => {
               )}
             </button>
 
-            {/* Shadowing toggle button */}
-            <button
-              onClick={handleShadowingToggle}
-              className={`p-2.5 rounded-full transition-all duration-150 ${isRecording
-                ? "bg-red-600 text-white animate-pulse"
-                : isShadowingMode
-                  ? "bg-orange-600 text-white hover:bg-orange-700"
-                  : canRecord
-                    ? "bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600"
-                    : "bg-gray-200 dark:bg-gray-700 text-gray-400 dark:text-gray-500 cursor-not-allowed opacity-50"
-                }`}
-              aria-label={isShadowingMode ? t("shadowing.disable") : t("shadowing.enable")}
-              title={!canRecord ? "Audio recording is not supported on this device/browser" : (isShadowingMode ? t("shadowing.disable") : t("shadowing.enable"))}
-            >
-              <Mic size={18} className="sm:w-[20px] sm:h-[20px]" />
-            </button>
-
             <button
               onClick={seekForward}
               className="p-2.5 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 transition-colors"

src/components/controls/CombinedControls.tsx

@@ -1,7 +1,6 @@
-import { useState, useMemo } from "react";
+import { useState } from "react";
 import { usePlayerStore } from "../../stores/playerStore";
 import { useTranslation } from "react-i18next";
-import { checkAudioRecordingSupport, getRecordingUnsupportedMessage } from "../../utils/browserCheck";
 
 import { toast } from "react-hot-toast";
 import {
@@ -21,18 +20,12 @@ import {
   ChevronLeft,
   ChevronRight,
   ChevronsRight,
-  Mic,
 } from "lucide-react";
 import { Button } from "../ui/button";
-import { useShadowingStore } from "../../stores/shadowingStore";
-import { useShadowingRecorder } from "../../hooks/useShadowingRecorder";
 
 export const MobileControls = () => {
   const { t } = useTranslation();
 
-  // Initialize shadowing recorder
-  useShadowingRecorder();
-
   const {
     isPlaying,
     duration,
@@ -69,20 +62,10 @@ export const MobileControls = () => {
     toggleLooping,
   } = usePlayerStore();
 
-  const {
-    isShadowingMode,
-    setShadowingMode,
-    isRecording,
-  } = useShadowingStore();
-
   const [showSpeedControls, setShowSpeedControls] = useState(false);
   const [showVolumeDrawer, setShowVolumeDrawer] = useState(false);
   const [showPlaylistDrawer, setShowPlaylistDrawer] = useState(false);
 
-  // Check if audio recording is supported in this browser
-  const recordingCapabilities = useMemo(() => checkAudioRecordingSupport(), []);
-  const canRecord = recordingCapabilities.supportsAudioRecording;
-
   // Get current media bookmarks for the bookmark button
   const bookmarks = getCurrentMediaBookmarks();
 
@@ -236,19 +219,6 @@ export const MobileControls = () => {
 
   // Clear loop points function moved to waveform footer
 
-  // Handle shadowing mode toggle
-  const handleShadowingToggle = () => {
-    // If trying to enable shadowing mode, check browser support first
-    if (!isShadowingMode && !canRecord) {
-      const errorMessage = getRecordingUnsupportedMessage(recordingCapabilities);
-      toast.error(errorMessage, { duration: 5000 });
-      return;
-    }
-
-    // Toggle shadowing mode
-    setShadowingMode(!isShadowingMode);
-  };
-
   // Note: Loop jump functions removed as they're not used in the mobile interface
 
   return (
@@ -293,23 +263,6 @@ export const MobileControls = () => {
               )}
             </button>
 
-            {/* Shadowing toggle button */}
-            <button
-              onClick={handleShadowingToggle}
-              className={`p-3 rounded-full transition-all duration-150 ${isRecording
-                  ? "bg-red-600 text-white animate-pulse"
-                  : isShadowingMode
-                    ? "bg-orange-600 text-white hover:bg-orange-700"
-                    : canRecord
-                      ? "bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600"
-                      : "bg-gray-200 dark:bg-gray-700 text-gray-400 dark:text-gray-500 cursor-not-allowed opacity-50"
-                }`}
-              aria-label={isShadowingMode ? t("shadowing.disable") : t("shadowing.enable")}
-              title={!canRecord ? "Audio recording is not supported on this device/browser" : undefined}
-            >
-              <Mic size={24} />
-            </button>
-
             <button
               onClick={seekForward}
               className="p-3 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700"

src/components/controls/MobileControls.tsx

@@ -2,6 +2,7 @@ import { useState, Dispatch, SetStateAction } from "react";
 import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { usePlayerStore } from "../../stores/playerStore";
+import { useShallow } from "zustand/react/shallow";
 import { SettingsDrawer } from "./SettingsDrawer";
 import { Moon, Sun, Info, Settings, Layout, Eye, EyeOff, Music, Video, Youtube } from "lucide-react";
 import * as Dialog from "@radix-ui/react-dialog";
@@ -31,7 +32,23 @@ export const AppLayout = ({
   const [isSettingsDrawerOpen, setIsSettingsDrawerOpen] = useState(false);
   const [isLayoutPopoverOpen, setIsLayoutPopoverOpen] = useState(false);
 
-  const { currentFile, currentYouTube, theme, setTheme, seekStepSeconds, seekSmallStepSeconds } = usePlayerStore();
+  const {
+    currentFile,
+    currentYouTube,
+    theme,
+    setTheme,
+    seekStepSeconds,
+    seekSmallStepSeconds,
+  } = usePlayerStore(
+    useShallow((state) => ({
+      currentFile: state.currentFile,
+      currentYouTube: state.currentYouTube,
+      theme: state.theme,
+      setTheme: state.setTheme,
+      seekStepSeconds: state.seekStepSeconds,
+      seekSmallStepSeconds: state.seekSmallStepSeconds,
+    }))
+  );
 
   // Toggle theme
   const toggleTheme = () => {