Skip to content

Conversation

@dakyneko
Copy link

@dakyneko dakyneko commented Dec 7, 2025

This PR introduces a new minimalist gallery that shows all pictures supported by VRCX. This is a first initial implementation and I think we need some improvements before merging but it's functional to give an idea what's possible. We should discuss the changes to go forward. Preview how it looks with a search filter:

image

The current implementation is very simplistic with only a few minor changes:

  • Refactor the logic for getting the file list into a new GetScreenshotsList that can be used by the gallery
  • Receiving the list through a Promise and showing all pictures with html lazy loading.

Further improvements to discuss:

  • Designwise: how to make it nicer to use. We could check other image gallery software and mimick their design. The gallery can take a lot of space and it would be nicer in full screen before then when we click we show the selected image fullscreen too. However we can take another approach where we show the selected picture big and below we can show the gallery as a scrollable horizontal row.
    • Where to put the "drag and drop" box? Where to put all the image information: below, above the image/gallery? Do we need all those information? Could we put it on the side instead?
    • I think the image viewer should be a new tab in the app: it deserves space it could be a big feature in the future: Organizing and browsing screenshots in VRC with lots of VRCX features.
  • Ensure low memory usage: only load a portion of image. Currently I used <img loading="lazy" for now but maybe we want to do pagination, lazy scrolling or similar ideas?
  • Group images by dates: it would be easier to see images grouped when they were taken. It could be grouped by day: have chunks of images with a title (date of taken) and the corresponding images below. We can also group by week, month etc. We could also group by world. Maybe those would be new options in the UI.

Feel free to give suggestions. Natsumi suggested I open this PR in the current state.

@Map1en
Copy link
Member

Map1en commented Dec 7, 2025

Here are my thoughts and the basic modifications I've made locally (not yet pushed) regarding this feature:

  1. Layout & Viewing:

Adopt a standard photo gallery approach with a thumbnail grid layout.

Include an option or Slider to control the zoom/size of thumbnails, similar to the existing "Friend Location" feature.

  1. Full-Screen Interaction (el-image):

Clicking a thumbnail should open a full-screen view.

We should utilize the el-image component, as it naturally supports left/right switching and lazy loading for thumbnails.

  1. Component Customization:

We need to display metadata and include utility buttons.

Please modify the existing component FullscreenImagePreview.vue or wrap a new one to support this.

Reference: Image | Element Plus

  1. UI Structure:

Arrange the remaining buttons neatly at the top of the interface.

  1. Routing & Navigation:

Route: This will be implemented as a separate page/route, accessible via the "Tools" menu.

Tabs: It will not have a standalone tab in the main NavMenu.

Back Button: Please ensure a "Back" button is added at the top of this page.

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