feat: restore and refine loop feature in BeatPlayer#11
Open
daksh006v wants to merge 38 commits into
Open
Conversation
- Reintegrate loop logic into useAudioEngine rAF loop for zero-latency execution - Add EPSILON buffer and isSeeking guard for smooth looping - Conditionally render loop UI only for upload and external beat sources
- Add semantic CSS variables (--bg-base, --bg-panel, --bg-elevated, --border-subtle, --text-main, --text-muted, --accent-focus, --accent-soft) for both light and dark modes with a deep teal (#091413) palette - Remove glassmorphism utilities (.glass-panel, .text-gradient) from index.css - Strip all radial gradient backgrounds from body/dark body - Rewrite Navbar: sticky top-0, solid bg-base, border-bottom, no glass - Rewrite SessionCard: flat var(--bg-panel) card with hover bg shift - Create Dropdown.jsx reusable component with CSS-variable-driven styling - Apply subtle glow and hover shadows to BeatPlayer controls
- Remove all backdrop-blur, bg-white/*, gradient overlays, and orbs - Home: new headline, solid teal CTA buttons, flat layout - Login/Signup: replace glass card with solid --bg-elevated card, 12px border-radius, focus-driven border-color transitions - No hardcoded slate/indigo/purple colors remain
- Remove background orbs and glass-panel containers - Dashboard: flat --bg-panel session grid, teal CTA, solid inputs - NewSession: flat --bg-elevated form card, solid Dropdown integration - All empty states and error panels use border-subtle tokens
- Delete fixed background orbs (indigo/purple blur divs) - Replace glass-panel header + editor wrapper with flat --bg-panel cards - Save Session button: solid --accent-focus, no gradient/shadow - Export TXT button: transparent, --border-subtle border - Dashboard back button: --text-muted → teal hover via inline handler - Title input: remove indigo focus glow, use --text-main color - Section headers (.cm-section-header): use var(--accent-focus) teal - Active section highlight: teal rgba tint + teal left border - Rhyme scheme badge: teal color + teal bg tint - Replace native <select> dropdowns with custom Dropdown component - metronome.js: upgraded to Web Audio API lookahead scheduler
- overhaul global index color mappings away from default tints - implement layered z-space hierarchy for primary editor pane - eliminate auto-focus glow and background dimming mechanics - redesign Recorded Takes component interface using deep contrast layout - remap + Draft tab interaction per layout constraints
- api.js: replace hardcoded localhost with VITE_API_URL env var - api.js: add 401 interceptor to auto-redirect on expired JWT - authController.js: replace 8x localhost URLs with SERVER_URL/CLIENT_URL env vars - server.js: CORS origin env-driven via CLIENT_URL - server/.env: add SERVER_URL and CLIENT_URL for local dev - vercel.json: add SPA rewrite so deep links don't 404 - Login.jsx + Signup.jsx: Google OAuth URL uses VITE_API_URL - SessionEditor.jsx: specific mic error messages per failure type - App.jsx: add 404 catch-all route with NotFound page - vite.config.js: add /api dev proxy - Add client/.env.example and server/.env.example
- Add useServerWarmup hook that silently pings /api/health on page mount to pre-warm the Render free-tier server before the user clicks login - Add ServerWarmingOverlay: animated spinner, progressive status messages, elapsed timer, and cancel button shown during Google OAuth cold start - Wire both into Login and Signup pages so users see a branded loading screen instead of Render's bare terminal cold-start page
- Add missing CSS variables to :root that were only defined in .dark: --take-container-bg, --take-container-border, --take-container-shadow, --take-header-color, --take-bg-hover, --take-progress-bg - Without these, the takes accordion rendered with a black/transparent container background and invisible text in light mode
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR introduces a massive suite of features and refinements aimed at lowering the friction for new users, professionalizing the visual identity of the studio, and expanding our core authentication capabilities.
Key Additions & Changes:
👤 Low-Friction Guest Workflow
Instant Guest Sessions: Users can now click "Try without an account" (Landing) or "Continue as Guest" (Login/Signup) to instantly jump into the editor.
Backend JWT Integration: The backend dynamically generates a placeholder user (Guest_...) and securely signs a guest-flagged JWT.
Recording Restrictions: Guest users are prevented from recording audio to save our Cloudinary storage bandwidth. The recording buttons are replaced with an interactive "Sign Up To Record" badge that routes directly to the registration flow.
🔐 Authentication Upgrades
Developed a complete, seamless Google OAuth integration from scratch (Backend token handling + Frontend redirection).
Refactored the traditional Login and Signup interfaces into clean, card-based layouts.
🎨 Studio UI & Brand Refinement
Stripped away the bright glassmorphism elements in favor of a muted, professional, deep-teal color palette.
Replaced the generic logo with the new heavy, geometric DRAFT16 typography.
Built a fluid writing canvas layout with active focus states for the SessionEditor.
Restored and refined the loop feature inside the BeatPlayer.
Added hold-to-repeat, hover-activated custom BPM spinner controls.
⚙️ Production & Docs
Resolved critical pre-deployment routing configurations.
Updated README.md with high-quality screenshots and removed outdated placeholder text.
Uploaded our custom favicon and finalized SEO/meta tags.