Improve image_upload plugin UI with preview gallery and refresh controls #191

andrewginns · 2025-07-03T07:51:49Z

Found your Youtube channel and have been following the video series. Thanks for putting up the code on the repo. Thought I'd contribute a QoL improvement to the Playlist feature.

Image previews for uploaded images
Refresh settings for images in Playlist
If changing settings on active Playlist they take immediate effect

Initial UI after uploading photos:

UI for changing settings of uploaded photo sets:

Problem:

Refresh intervals for plugins and playlists were previously inflexible or not user-customisable per instance.
Users could accidentally upload duplicate images in the image_upload plugin, leading to confusion and wasted storage.
The plugin management UI lacked an image preview/gallery for uploaded images, making it difficult to review or remove images.
The backend logic for handling plugin refreshes and playlist updates was not robust in handling active/selected playlists and plugin instances.

Solution:

Added per-plugin-instance refresh scheduling options, both interval-based and scheduled time, configurable from the UI.
Implemented duplicate image detection both in the frontend and backend, preventing users from uploading the same image multiple times to the same plugin instance.
Enhanced the image_upload plugin settings page with an image preview gallery showing all current and newly added images, allowing easy review and removal.
Improved playlist and plugin update endpoints to trigger immediate refreshes when the currently active playlist or plugin instance is modified.
Refactored backend playlist and refresh logic for better error handling, validation, and user feedback.

Unlocks:

Enables much more flexible scheduling for plugin refreshes, allowing users to fine-tune how and when their display updates.
Reduces clutter and confusion by preventing duplicate images in plugins.
Offers a significantly improved UI/UX for managing plugin content, especially for image-based plugins.
Sets the stage for further enhancements to plugin and playlist management, such as more granular scheduling or richer plugin settings.

Detailed breakdown of changes:

src/blueprints/playlist.py: Refactored playlist endpoints for improved validation, clearer error messages, and added logic to trigger refreshes when active playlists are updated.
src/blueprints/plugin.py: Added duplicate image check for image_upload plugin, made plugin refresh settings user-configurable, and ensured updates trigger refresh if needed.
src/plugins/image_upload/settings.html:
- Built an interactive image gallery with grid layout and hover effects
- Added multi-select functionality with checkbox controls
- Implemented bulk operations (Select All/None/Delete Selected)
- Removed redundant file name lists to streamline the interface
- Added empty state messaging for better user guidance
src/templates/plugin.html:
- Integrated refresh scheduling UI for existing plugin instances
- Pre-populated settings from backend
src/static/styles/main.css: Added styles to support the compacted refresh UI layout.
src/utils/app_utils.py: Minor adjustments to support UI improvements.
src/refresh_task.py: Enhanced interval calculation to respect the minimum required refresh among active plugins and ensured config persistence after updates.
General: Improved error handling, validation, and feedback across plugin and playlist management routes and UI forms.

…ols (#1) * Improve image_upload plugin UI with preview gallery and refresh controls - Add image preview gallery to display all images in the plugin instance - Images shown in responsive grid with hover effects and click-to-view - Add refresh timing controls directly on plugin settings page for existing instances - Support both interval-based (minutes/hours/days) and scheduled (daily at specific time) refresh - Update backend to properly save and retrieve refresh settings - Pre-populate refresh settings when editing existing instances * Fix playlist image cycling and individual plugin refresh intervals - Persist plugin settings (including image_index) after each refresh to enable proper image rotation - Honor individual plugin refresh intervals instead of only using global plugin_cycle_interval_seconds - Optimize refresh loop to check at the minimum interval among active plugins - Fix plugin cycling logic to find the next plugin that needs refreshing This resolves issues where: - Images in playlists wouldn't cycle even with refresh intervals set - The system would wait for the global interval before checking plugin-specific intervals - The Display Now button would show an image but not advance the rotation * Improve image_upload gallery layout to better utilize screen space - Move "Image Preview Gallery:" title between file list and gallery - Remove scrolling constraint, allow gallery to expand naturally - Increase minimum image preview size from 120px to 150px - Ensure gallery fills entire container width - Improve spacing with larger gaps and padding * Add rejection of duplicates to uploaded files * Active playlist settings take effect immediately * Undo ruff linting changes

phattmatt · 2025-07-14T14:07:36Z

Hi @andrewginns,

I've been running your modifications and they are looking good; I really like the images preview, and the ability to update the refresh settings on playlist entries.

Just got one note so far. The "Refresh Settings" section has the fields 'spreading out' when there is space:

Could you consider updating this so the fields are aligned to the top of the section?

Thanks.

andrewginns · 2025-07-14T14:10:32Z

Could you consider updating this so the fields are aligned to the top of the section?

Thanks.

Will do! Haven't had as much time as I wanted and also was using it daily to ensure no bugs. Will implement your suggestion when I push other changes. Thanks!

andrewginns · 2025-08-10T11:35:19Z

@phattmatt newest changes are more efficient with space used in the "Refresh Settings" UI

GOMMB · 2025-09-29T15:13:46Z

I'm new to this project and found this PR. I will exclusively be using this fork until it's merged since these are much needed improvements to the image upload plugin. The PR has been open for 3 months. Please review it when you get a chance @fatihak.

GOMMB · 2025-09-29T18:12:50Z

src/plugins/image_upload/settings.html

+
+        // Display existing files
+        existingFiles.forEach(filePath => {
+            const fileName = filePath.split('/').pop();


When running the dev environment on Windows, this path parsing doesn't work. I suggest updating all the uses of split('/').pop() to below to support both Windows and Unix paths.

Suggested change

const fileName = filePath.split('/').pop();

const fileName = filePath.replace(/^.*[\\/]/, '');

GOMMB · 2025-09-29T22:41:22Z

src/plugins/image_upload/settings.html

+        }
+
+        selectedImages.forEach(key => {
+            const [type, identifier] = key.split('-', 2);


I did some testing, and this doesn't work if a '-' is anywhere in the path to the image or the image filename. Might be better to just find the first occurrence of '-', then separate the string by that index.

Suggested change

const [type, identifier] = key.split('-', 2);

const idx = key.indexOf('-');

const [type, identifier] = [key.slice(0, idx), key.slice(idx + 1)];

andrewginns added 2 commits July 3, 2025 08:49

Merge branch 'fatihak:main' into main

143be05

andrewginns added 3 commits August 9, 2025 10:10

Merge branch 'fatihak:main' into main

f440af9

feat: Remove redundant UI elements in picker

a67fb84

feat: Compact space used in playlist refresh ui

97a34c0

andrewginns marked this pull request as ready for review August 10, 2025 12:06

GOMMB reviewed Sep 29, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Improve image_upload plugin UI with preview gallery and refresh controls #191

Improve image_upload plugin UI with preview gallery and refresh controls #191

Uh oh!

andrewginns commented Jul 3, 2025 •

edited

Loading

Uh oh!

phattmatt commented Jul 14, 2025

Uh oh!

andrewginns commented Jul 14, 2025

Uh oh!

andrewginns commented Aug 10, 2025

Uh oh!

GOMMB commented Sep 29, 2025

Uh oh!

GOMMB Sep 29, 2025 •

edited

Loading

Uh oh!

GOMMB Sep 29, 2025 •

edited

Loading

Uh oh!

Uh oh!

	const fileName = filePath.split('/').pop();
	const fileName = filePath.replace(/^.*[\\/]/, '');

	const [type, identifier] = key.split('-', 2);
	const idx = key.indexOf('-');
	const [type, identifier] = [key.slice(0, idx), key.slice(idx + 1)];

Uh oh!

Improve image_upload plugin UI with preview gallery and refresh controls #191

Are you sure you want to change the base?

Improve image_upload plugin UI with preview gallery and refresh controls #191

Uh oh!

Conversation

andrewginns commented Jul 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem:

Solution:

Unlocks:

Detailed breakdown of changes:

Uh oh!

phattmatt commented Jul 14, 2025

Uh oh!

andrewginns commented Jul 14, 2025

Uh oh!

andrewginns commented Aug 10, 2025

Uh oh!

GOMMB commented Sep 29, 2025

Uh oh!

GOMMB Sep 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

GOMMB Sep 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

andrewginns commented Jul 3, 2025 •

edited

Loading

GOMMB Sep 29, 2025 •

edited

Loading

GOMMB Sep 29, 2025 •

edited

Loading