Skip to content

Conversation

@alejoduque
Copy link
Owner

No description provided.

alejoduque and others added 23 commits July 15, 2025 01:48
…ct and user experience. Remove mic button, fix safe area, unify SoundWalk, and robust permission handling. No APKs included.
…goes blank after recording in Collector mode and returning. Extensive debugging overlays, error boundaries, and localStorage handling present. See commit history for context.
…png with relative path, defensive SoundWalkAndroid, and improved build/export scripts for Leaflet compatibility
- Unified marker icons and popups with silhouette image (ultrared.png) and duration-based color/size.
- Map always loads and auto-centers only if GPS position changes by more than 5 meters (both interfaces).
- Manual recenter button (default Leaflet marker icon) overlays map in both interfaces.
- SoundWalk: Modal for sound blob click now floats from click position, defaults to center if unset.
- Play button logic: stops all audio before new playback, and on menu exit.
- GPS button state reflects actual permission/location state on return.
- Default Leaflet marker shows user location.
- General bugfixes and UI/UX polish for map and playback interactions.

Tested: APK builds, map and modal behaviors, recenter logic, and audio playback management.
- Move zoom controls and layer selector from BaseMap to TopBar
- Create unified bottom control bar with Back to Menu, zoom, and layer buttons
- Implement proper map layer switching (OSM, Topo, Carto) with visual feedback
- Position layer buttons to the right of zoom controls for better UX
- Add map instance management in MapContainer for TopBar integration
- Ensure map background loads properly with conditional TileLayer rendering
- Maintain consistent styling across all bottom controls
- Fix layer switching functionality with proper state management

Layout: [Back to Menu] [+/- Zoom] [OSM] [Topo] [Carto]
- All controls use translucent white styling with hover effects
- Active layer button highlighted in green
- Zoom controls in vertical layout for compact design
- Layer buttons positioned inline for easy access

Technical improvements:
- Remove built-in Leaflet ZoomControl and LayersControl
- Add conditional TileLayer rendering for layer switching
- Implement map instance passing from BaseMap to TopBar
- Add proper state management for current layer tracking
- Force re-render on layer changes for immediate visual feedback

APK: biomap-secure-20250718-182032.apk (2MB)
🎯 MAJOR FIXES:
- Fixed zoom in/out buttons functionality by updating react-leaflet v4 API
- Replaced deprecated 'whenCreated' with proper useMap hook approach
- Added MapUpdater component to handle map instance passing correctly
- Fixed map instance availability for zoom controls

🎨 UI/UX IMPROVEMENTS:
- Reduced gap between arrow and 'Back' text in TopBar (4px instead of 8px)
- Moved SoundWalk Android player modal 40px higher to avoid control overlap
- Added visual overlay feedback for zoom button actions
- Enhanced debugging with console logs for map instance tracking

🗺️ MAP OPTIMIZATIONS:
- Implemented debounced GPS updates (7m distance + 30s time threshold)
- Added smarter map recentering logic to reduce visual flicker
- Improved map layer switching with proper state management
- Fixed map background loading issues

📱 ANDROID SPECIFIC:
- Optimized TopBar layout to prevent button wrapping and overflow
- Fixed search input overflow issues
- Improved button alignment and spacing for mobile usability
- Enhanced zoom button visual feedback for Android debugging

🔍 TECHNICAL DETAILS:
- Updated BaseMap.jsx to use modern react-leaflet v4 API
- Added proper map instance management in MapContainer.jsx
- Enhanced TopBar.jsx with better debugging and visual feedback
- Fixed SoundWalkAndroid.jsx modal positioning

✅ TESTING:
- All zoom controls now functional with visual feedback
- Map layer selector working correctly (OSM, Topo, Carto)
- Back button spacing optimized
- SoundWalk modal properly positioned above Android controls
- GPS updates debounced to reduce map flicker
🎯 MAJOR IMPROVEMENTS:

📱 RECORDING VALIDATION CHAIN:
- AudioRecorder: Pre-recording validation with audio data checks
- MapContainer: Pre-save validation with metadata verification
- LocalStorageService: Storage-level validation with blob checks

🛡️ VALIDATION FEATURES:
✅ Audio data validation (size > 0 bytes)
✅ File size limits (50MB max for blobs, 10MB for export)
✅ Duration validation (minimum 1 second)
✅ Metadata completeness checks (location, filename, duration)
✅ Audio blob type validation
✅ Native file verification for Android recordings

🔧 TECHNICAL FIXES:
- Fixed stack overflow in blob-to-base64 conversion using FileReader
- Fixed log file encoding corruption (proper base64 encoding)
- Enhanced error handling and user feedback
- Added comprehensive console logging for debugging

📊 EXPORT IMPROVEMENTS:
- Fixed 'showDirectoryPicker' error handling
- Added detailed progress tracking and verification
- Improved error reporting with specific failure reasons
- Added export log file creation with read-back verification

🎨 UI/UX ENHANCEMENTS:
- Moved export button 120px lower to avoid top bar overlap
- Enhanced GPS status button to request access on click
- Improved dropdown menu spacing and visibility
- Fixed zoom controls in SoundWalk Android interface

📁 STORAGE OPTIMIZATION:
- Renamed export folder to 'BioMapp_Audio'
- Added file size checks to skip large files during export
- Enhanced localStorage validation to prevent corrupted saves
- Added cleanup for incomplete/corrupted recordings

🔍 DEBUGGING FEATURES:
- Added verbose export logging with detailed progress
- Enhanced console output for troubleshooting
- Added filesystem test functionality
- Improved error messages with specific failure details

📱 APK BUILD:
- Updated build script with development keywords
- Fixed AndroidManifest.xml debuggable attribute issue
- Enhanced APK naming with timestamps and feature keywords

🎯 EXPECTED RESULTS:
- Prevents incomplete recordings from being saved
- Eliminates 'NO AUDIO BLOB' errors in exports
- Improves export success rate from 10% to 90%+
- Provides clear user feedback for validation failures

Files modified:
- .gitignore: Added APK file exclusions
- src/services/AudioRecorder.tsx: Added comprehensive validation
- src/components/MapContainer.jsx: Enhanced pre-save validation
- src/services/localStorageService.js: Added storage-level validation
- src/utils/recordingExporter.js: Fixed stack overflow and encoding
- src/components/SoundWalkAndroid.jsx: UI improvements and GPS fixes
- src/components/SharedTopBar.jsx: Enhanced GPS button functionality
- build-apk.sh: Updated development keywords

This commit establishes a robust validation system that ensures only complete,
valid recordings are saved, dramatically improving export reliability and user experience.
🎨 UI/UX Enhancements:
- Move info button from bottom bar to top bar next to GPS marker
- Replace redundant green location status icon with info button
- GPS marker changes color from white to blue when GPS is active
- Add click-outside-to-close functionality for info modal
- Double info modal width (600px) for better text readability
- Implement humanitarian-inspired light color palette for info modal
- Reduce font sizes for better information density and readability

🗺️ Map & Navigation Improvements:
- Add breadcrumbs support to all interfaces (Collector, SoundWalk, SoundWalkAndroid)
- Connect breadcrumb controls to topbar for unified experience
- Implement robust layer switching logic using opacity and z-index
- Fix dropdown clipping issues with proper overflow handling
- Add comprehensive bilingual usage guide (English/Spanish)

📝 Content & Branding Updates:
- Fix app name spelling: BioMap → BioMapp throughout interface
- Replace technical layer info with bilingual usage tips
- Add detailed topbar controls documentation table
- Update landing page with correct BioMapp branding

🔧 Technical Improvements:
- Fix info modal click-outside detection to prevent auto-close on button click
- Optimize layer switching performance with conditional rendering
- Improve dropdown positioning and z-index management
- Add proper refs and event handling for modal interactions

📱 Build System:
- Update APK build keywords to reflect current feature focus
- Maintain consistent APK naming with timestamps and feature keywords

🎯 User Experience:
- Cleaner interface with less redundancy
- Better accessibility with logical button placement
- Clear visual feedback for GPS status
- Comprehensive bilingual guidance for users
- Professional appearance matching modern UI standards

Files modified:
- SharedTopBar.jsx: Complete UI overhaul with new info modal and topbar layout
- LandingPage.jsx: BioMapp branding updates
- MapContainer.jsx: Breadcrumbs and layer switching improvements
- SoundWalk.jsx: Breadcrumbs integration and layer switching
- SoundWalkAndroid.jsx: Breadcrumbs integration and layer switching
- BaseMap.jsx: Layer switching optimizations
- build-apk.sh: Updated development keywords
This commit introduces a full Spanish localization for the BioMapp user interface. All user-facing text, including dialogs, buttons, tooltips, popups, and informational modals, has been translated from English to Spanish.

Key changes include:
-   Translation of all major React components.
-   Update of build documentation to reflect a stable, reproducible local and CI environment.
-   Alignment of Capacitor dependencies to v5 to ensure compatibility with Java 17.

This prepares the  branch for Spanish-language APK builds.
- Update LandingPage component with new branding
- Fix JSX structure and syntax errors
- Update UI with new color scheme and styling
- Add radiolibre.xyz branding and links
…e breadcrumbs by default; auto-start breadcrumb tracking
… layer and set as default in SoundWalk, replace ASCII splash with logo
…s tracking

🎯 RESTORED: July working export functionality
- Complete restoration of JSZip-based export that was working reliably
- Single ZIP download instead of complex individual file operations
- No more 'Maximum call stack size exceeded' errors

✨ ENHANCED: Verbose progress and error handling
- Real-time progress tracking (shows every 5 recordings processed)
- Detailed per-recording success/failure logging
- Comprehensive result alerts with file counts, sizes, and locations
- ZIP contains organized /audio/ and /metadata/ folders plus export logs

🔧 PRESERVED: All previous fixes maintained
- localStorage quota error prevention
- Fresh install data cleanup (no restored old recordings)
- Flexible audio playback (blob + native file support)
- Android auto-backup disabled

📦 Export Features:
- Creates biomap_recordings_YYYY-MM-DD.zip
- Individual audio files in /audio/ subfolder
- Metadata JSON files in /metadata/ subfolder
- export_summary.json with statistics
- export_log.txt with detailed per-file results
- Android: saves to Downloads folder, falls back to browser download
- Web: browser download with full ZIP structure

This restores the proven, reliable export approach users had in July
while keeping all the storage and playback improvements from this session.
- Move topbars 40px lower to avoid system UI overlap on both soundwalk and collector interfaces
- Fix landing page padding consistency between interface buttons
- Implement 10% opacity navigation bars using semi-transparent colors instead of dark tint
- Add proper safe area handling with calc() for topbar positioning
- Update build script keyword to android-navbar-transparency-fix

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
@vercel
Copy link

vercel bot commented Aug 20, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
biomap Ready Ready Preview Comment Aug 20, 2025 2:35am

@alejoduque alejoduque merged commit 310bd01 into main Aug 20, 2025
2 of 3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants