Frontend migration to the new visual language#3436
Open
zurdi15 wants to merge 250 commits into
Open
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>
…te MetadataSources.vue for API key handling
…croll remains at the top for better user experience
…er readability in AuthLayout
…imations in ScanPlatformRow
…re in AppNav and SettingsSidebar
…s layout and remove LibraryToolsLayout component
- Updated localization files for multiple languages to include new keys for collection kinds (standard, smart, virtual) and visibility (public, private). - Enhanced CollectionListHeader and CollectionListRow components to support sorting by visibility and display appropriate labels. - Modified CollectionTile component to show visibility status for owner-managed collections. - Updated CollectionsIndex view to implement segmented filters for kind and visibility, allowing users to filter collections based on these criteria. - Adjusted styles for new visibility and kind indicators in collection components.
Adopt master's ROM schema design (sibling_roms + files, batched
get_files_for_roms / get_siblings_for_roms) while preserving the v2-branch
features master lacks: per-user is_main_sibling on siblings and audio_meta
on rom files.
Conflict resolution:
- responses/rom.py: keep master's sibling_roms/files fields; re-graft
is_main_sibling via SiblingRomSchema.from_rom(rom, is_main_sibling=...);
restore the eager-relationship fallback in
SimpleRomSchema.from_orm_with_request (None sentinel) so the v2
/{id}/simple endpoint still returns siblings/files.
- roms_handler.py: get_siblings_for_roms now left-joins RomUser and returns
(Rom, is_main_sibling) tuples; keep both branch and master file helpers.
- drop the redundant branch-only sibling_ids field and
get_sibling_data_for_roms.
- generated types resolved to match (sibling_roms + files; RomFileSchema
keeps audio_meta and gains archive_members).
- update v2 components and the RelatedGameCard mock to read sibling_roms.
- fix stale exclude={"siblings"} -> "sibling_roms" in scan emit payloads.
- re-chain the audio_meta migration as 0083 (after master's 0082) to keep a
single Alembic head.
- package.json: union of branch tooling + master dependency bumps; lock
regenerated.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
gantoine
changed the title
gantoine
removed
the
on-hold
…timization - Deleted the V2_PLAN.md file which contained the full UI overhaul plan for the RomM frontend. - Updated vite.config.js to exclude vue-i18n from pre-bundling to fix issues with Vite 8's Rolldown dependency optimizer.
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)