feat: Frontend full migration to the new visual language#3436
Open
zurdi15 wants to merge 235 commits into
Open
feat: Frontend full migration to the new visual language#3436zurdi15 wants to merge 235 commits into
zurdi15 wants to merge 235 commits into
Conversation
Backend
- Extract audio tags + duration via mutagen at upload/scan time, store as
rom_files.audio_meta JSON. Frontend reads everything from the DB instead of
downloading every blob to parse ID3 client-side.
- Persist embedded cover art under resources/roms/{platform_id}/{rom_id}/
soundtracks/{file_id}.{ext} on upload/scan; store relative path in
audio_meta.cover_path. Cleaned up on delete. Removed the on-the-fly
/soundtracks/{file_id}/cover endpoint (DB is source of truth).
- New GET /roms/{id}/soundtracks/metadata returns the compact per-ROM
metadata payload.
- Fix /files/content/{name}: serve audio inline with proper MIME
(audio/flac, audio/ogg, audio/mp4, ...) and let Starlette handle Range
natively in DEV_MODE. Browsers can now seek and progressively stream;
scrubbing returns 206 Partial Content instead of pulling the whole file.
- Squashed the audio_meta column into the existing 0080 migration.
Frontend
- Drop jsmediatags entirely.
- New persistent SoundtrackMiniPlayer + reusable VolumeControl components.
- Pinia store: loadPlaylistForRom, activePlaylistRomId, throttled
reportCurrentTime (200 ms), isBuffering driven by waiting/canplay events.
- SoundtrackPlayer reads metadata via one JSON request (AbortController on
unmount/track change), shows per-track + total durations, lazy-loads
thumbnails, resolves covers via the static resources path.
- Wrap most scoped CSS into Vuetify utility classes.
Tests
- 12 backend tests covering upload extraction + cover persist, metadata
endpoint shape, delete cleanup, range support.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…layer functionality - Introduced a new fixture `multi_file_rom` in `conftest.py` to create a ROM with multiple files for testing purposes. - Updated `test_manual.py` and `test_soundtrack.py` to utilize the new fixture for testing manual uploads and soundtrack functionalities. - Enhanced the audio tag extraction logic in `audio_tags.py` to handle oversized audio files and added a function to check allowed audio file extensions. - Modified `nginx.py` to support inline file serving for audio files, allowing for better streaming capabilities. - Improved error handling in the Vue components for soundtrack management, including user feedback for playback errors and metadata loading issues. - Refactored the soundtrack player store to use local storage for volume and mute settings, simplifying state management. - Added new localization strings for soundtrack player actions and error messages in both English (US and GB) locale files.
…ndtrackMiniPlayer
…for soundtrack and manual entries
Bring in manual/soundtrack backend + shared frontend code so v2 can expose the new media features. Resolved RomM.vue by keeping both the v2 gate and the app-wide SoundtrackMiniPlayer; took the branch's uv.lock.
…ton styles feat: add PlatformsIndex.vue for displaying a grid of platforms with loading skeletons fix: update bcrypt version to 4.0.1 and adjust dependencies in uv.lock
… and usability - Introduced AuthCard component to standardize the layout of authentication views. - Added AuthBackLink component for consistent navigation back to the login page. - Replaced password input fields in Login, Register, and ResetPassword views with PasswordField component for better encapsulation of show/hide functionality. - Removed GameContextMenu component and related context menu logic, transitioning to MoreMenu for per-ROM actions. - Updated AppLayout and AuthLayout to utilize useThemeClass for theme management. - Cleaned up unused variables and styles across various components to enhance maintainability.
…ndex and PlatformsIndex to use new components
…brary management, metadata sources, server stats, user interface, and user profile - Implemented Administration view with UsersTable, TokensTable, and Tasks components. - Created ClientApiTokens view with ClientTokensTable component. - Developed LibraryManagement view with tabs for FolderMappings, Excluded, and MissingGames. - Added MetadataSources view displaying API key and connection status for various metadata providers. - Introduced ServerStats view for displaying library-wide totals and per-platform breakdowns. - Established UserInterface view for toggling between v1 and v2 UI versions, theme selection, and language settings. - Rewrote UserProfile view for managing account details, avatar, and linked services, integrating RetroAchievements component.
…ialog functionality
…ss collection components
… scrollbar color in RDialog
- Implemented RSliderBtnGroup as a segmented/tab control with a sliding indicator. - Created stories for different variants: Segmented, Tab, and Disabled. - Added types for SliderBtnGroupItem to define item structure. - Introduced RSpinner component for inline loading states with stories. - Developed RList and RListItem components with stories for list display. - Created RToolbar component for toolbar layout with customizable properties. - Added RTooltip component for tooltips with various activator patterns. - Updated imports in EmulatorJS and LibraryManagement views to reflect new component paths.
…m styling Co-authored-by: Copilot <copilot@github.com>
…ptions and display in file details
- Integrated vue-i18n for translations in Search, GameDetails, Home, NotReady, Pair, Patcher, PlatformsIndex, Player (EmulatorJS and Ruffle), Scan, Settings (ClientApiTokens, UserInterface, UserProfile), and Upload views. - Updated static text to use translation keys for better localization. - Enhanced user experience by providing localized messages for errors, prompts, and UI elements.
- Added `useWrapGridNav` composable for spatial 2D arrow navigation in CSS grids. - Integrated `useWrapGridNav` in `CollectionsIndex.vue` and `PlatformsIndex.vue` for improved navigation experience. - Enhanced `useGridNav` to support custom row selectors and cell retrieval functions. - Introduced `focusRestoration` store to remember last focused tile across routes. - Updated global styles to hide mouse cursor when using gamepad for better UI clarity. - Refactored `useInputModality` to improve modality detection and handling. - Cleaned up `ControllerDebug.vue` by extracting controller pad rendering into a separate component.
… and update platform handling
- Implement LibraryStatsWidget to display an overview of library statistics with compact and extended modes. - Implement RandomPickWidget to randomly select a ROM from the library and display it on the Home dashboard. - Create WidgetBar to manage the display of Home widgets based on user settings. - Add WidgetCard as a shared component for widget display. - Introduce WidgetReorderList for users to customize the order of Home widgets. - Update UserInterface settings to include toggles for new Home widgets and their configurations. - Enhance SettingsToggleRow to support inline controls for widget settings. - Add SettingsSubsection for better organization of Home settings. - Update Home view to conditionally render the widget bar based on user preferences.
…improved consistency
…te MetadataSources.vue for API key handling
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
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.
Description
Explain the changes or enhancements you are proposing with this pull request.
alphasoundtrackfolder for a multi-part game and will be able to play them directly from RomMscreenshotsfolder and show them in the game detailsgamepad debugsection in the settings to check the controler works properly (New UI only)NOTE
New UI is not responsive yet. Mobile version is on the works but won't be released with the first iteration of the New UI.
Next step
Migrate the New UI from plain css to tailwind
Checklist
Please check all that apply.
Screenshots (if applicable)