feat: Frontend full migration to the new visual language#3436
Draft
zurdi15 wants to merge 212 commits into
Draft
feat: Frontend full migration to the new visual language#3436zurdi15 wants to merge 212 commits into
zurdi15 wants to merge 212 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>
…rd, PlatformTile, and GameList components
…ooltip handling and virtual scrolling support
… improved metadata selection - Refactor ScanPlatform.vue to always use RVirtualScroller for listing ROMs, improving performance and layout consistency. - Introduce a maximum viewport height for the virtual scroller to prevent excessive DOM growth. - Update ScanPlatformRow.vue to make each ROM row a clickable router link, enhancing navigation to ROM details. - Add a synthetic "All" option in RSelect for metadata sources, allowing users to toggle all items in multi-select mode. - Split metadata providers into general and specific categories for clearer organization in the Scan view. - Improve styling and layout of the scan configuration card for better user experience.
…ty for virtual scrolling and padding behavior
- Adjust padding in CollectionPickerRow and NewCollectionRow for a more compact layout. - Introduce GameCard component in ManageCollectionsDialog for better visual representation of single ROMs. - Implement SiblingBadge in GameCard to display sibling versions of ROMs. - Add MainSiblingToggle and VersionSwitcher components to GameHeader for managing default versions and switching between ROM versions. - Refactor CollectionSettingsDrawer to remove delete functionality, moving it to Collection.vue for consistency with other gallery surfaces. - Enhance CollectionsIndex with specific empty state messages based on search and filter criteria. - Update UserInterface settings to remove showSiblings toggle, integrating sibling display into groupRoms functionality.
- Introduced ResumePanel component for managing saves and states in the EmulatorJS player view. - Implemented storybook stories for various scenarios including rich library, overflow states, and fresh game. - Refactored EmulatorJS.vue to utilize AssetList, AssetPreview, and AssetStrip components for improved asset management. - Enhanced layout and styling for better user experience across different screen sizes.
… avatar and updated timestamp
…or better clarity
…e, and enhance package.json with npm version specification
…ling across components
…tering and context handling - Updated CreateSmartCollectionDialog to include current collection and virtual collection IDs for better context. - Enhanced RefreshMetadataDialog with new hash matcher options and improved UI for metadata sources selection. - Improved SearchCoverDialog to conditionally display provider covers based on selected cover type. - Added collection and virtual collection lookups in CollectionSettingsDrawer for better filter summaries. - Updated MatchRom components to handle cases where matches may not have covers, improving user feedback. - Enhanced smart collection criteria handling in utils to support additional context and summary lookups.
…ved UI - Updated UploadFirmwareDialog.vue to implement a primary drop zone for file uploads, enhancing user experience by allowing drag-and-drop functionality. - Removed automatic file picker trigger on dialog open, focusing on the drop zone as the main interaction method. - Improved visual design of the upload area, including empty and filled states, and added animations for better feedback. - Refactored file handling logic to prevent duplicate file selections and streamline the upload process. - Adjusted styles for better alignment and spacing in the upload dialog. feat: add tooltips to game action buttons for better accessibility - Integrated RTooltip into GameActionBtn.vue to provide descriptive tooltips for buttons without labels, improving usability for users relying on screen readers or hover information. refactor: restructure Platform.vue for better tab management and UI consistency - Reorganized Platform.vue to implement a tabbed interface for navigating between Library, Firmware, and Settings views. - Introduced PlatformHead component to encapsulate header functionality, improving code readability and maintainability. - Updated state management for tab selection, ensuring URL persistence and seamless navigation. - Enhanced platform metadata fetching logic to keep the UI in sync with the latest data. - Removed deprecated components and streamlined the layout for better performance and user experience.
- Remove EditPlatformDialog.vue and integrate editing functionality directly into SettingsTab.vue. - Update PlatformHead.vue to remove edit and delete actions, moving them to the Settings tab. - Enhance SettingsTab.vue with editable platform name and danger zone for deletion. - Adjust Collection.vue to reflect changes in settings management and remove unnecessary components. - Refactor CollectionHead.vue to accommodate new settings structure. - Improve ScanPlatformDialog.vue for better ROM count display.
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
|
Warning Review the following alerts detected in dependencies. According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.
|
Contributor
Contributor
Contributor
☂️ Python Coverage
Overall Coverage
New Files
Modified Files
|
…ptions and display in file details
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.
Description
Explain the changes or enhancements you are proposing with this pull request.
Checklist
Please check all that apply.
Screenshots (if applicable)