feat(ui): expanded thumbnail and preview features #390

CyanVoxel · 2024-08-25T00:55:47Z

NOTE: This PR ended up becoming larger in scope than I originally planned, and normally I would've preferred to separate out some of the specific thumbnail and preview panel additions, however since thumb_renderer.py gets a heavy refactor in this it all ended up piling together in one branch. That being said the changes are at least all relevant to each other, even if the scope is a bit bloated.

This PR introduces several new changes and features for thumbnails and previews:

Thumbnails

Add album cover art thumbnails
Add audio waveform thumbnails for audio files without embedded cover art [Audio Browsing Quality Of Life #31]
Add new default file thumbnails, both for generic and specific file types
Chang the unlinked file icon to better convey its meaning
Update edge style for thumbnails
Restyle font previews
Restyle Blender previews

Preview Panel

Add animated GIF playback in the Preview Panel [[Feature Request]: Make gifs animate in app #338]

Other UI

Add option for multiple thumbnail display sizes
Entry selection colors now follow the system accent color
All thumbnail/preview graphics now have light/dark theme variants
Misc. fixes for certain thumbnail types

Closes #31, Closes #338

- Fix RAW images not being loaded correctly in the preview panel - Fix trying to read size data from null images - Refactor `os.stat` to `<Path object>.stat()` - Remove unnecessary upper/lower conversions - Improve encoding compatibility beyond UTF-8 when reading text files - Code cleanup

The ability to pass a border radius scaling argument is also included.

eivl

Approved when comments are resolved.

eivl · 2024-08-30T17:59:59Z

requirements.txt

+pydub==0.25.1
+mutagen==1.47.0
+numpy==1.26.4
+ffmpeg-python==0.2.0


I see no update to the README to tell the user to install ffmpeg.

Can confirm, video thumbnails/previews do not work without ffmpeg installed. (Fails to find ffprobe). Could this be something looked into being bundled into pyinstaller? Ffmpeg will be an incredibly useful tool for the future (could probably look into dropping opencv potentially)

eivl · 2024-08-30T18:19:10Z

tagstudio/src/core/palette.py

@@ -13,7 +13,7 @@ class ColorType(int, Enum):
    DARK_ACCENT = 4


-_TAG_COLORS = {
+_TAG_COLORS: dict = {


There are other dict like mapping structures that might be more suitable. like defaultdict.

This can solve the keyerror solution from get_tag_color

defaultdict seems like it's well-suited for this, and would indeed replace the need for the try/except block in get_tag_color. However, since #332 is doing some refactor work in palette.py, I feel it would be best to wait until that one is merged to consider switching to defaultdict.

Custom user-defined tag colors is also a feature I've been wanting to add in the near future (post-#332) that would see this getting shaken up once more. Still, it's good to be aware of defaultdict now!

eivl · 2024-08-30T18:21:13Z

tagstudio/src/core/palette.py

+        ColorType.DARK_ACCENT: "#888888",
+    },
+}
+

 def get_tag_color(type, color):


I try not to PEP-8 people, but don't overwrite builtins, it never leads to a good place.

Suggested change

def get_tag_color(type, color):

def get_tag_color(type_, color):

color = color.lower()

try:

if type == ColorType.TEXT:

return get_tag_color(_TAG_COLORS[color][type_], color)

eivl · 2024-08-30T18:21:49Z

tagstudio/src/core/palette.py

+def get_ui_color(type: ColorType, color: str):
+    """Returns a hex value given a color name and ColorType."""
+    color = color.lower()
+    return _UI_COLORS.get(color).get(type)


I try not to PEP-8 people, but don't overwrite builtins, it never leads to a good place.

Suggested change

def get_ui_color(type: ColorType, color: str):

"""Returns a hex value given a color name and ColorType."""

color = color.lower()

return _UI_COLORS.get(color).get(type)

def get_ui_color(type_: ColorType, color: str):

"""Returns a hex value given a color name and ColorType."""

color = color.lower()

return _UI_COLORS.get(color).get(type_)

eivl · 2024-08-30T18:23:09Z

tagstudio/src/qt/helpers/file_tester.py

+    except ffmpeg.Error:
+        return False


is this an exception that is also raised if ffmpeg is not installed on the system? or otherwise not available via PATH ?

That's a great question - If so, it wasn't my intention to catch that with this method

eivl · 2024-08-30T18:42:31Z

tagstudio/src/qt/widgets/collage_icon.py

+                                pic = ImageChops.hard_light(
+                                    pic, Image.new("RGB", size, color)
+                                )
+                            # collage.paste(pic, (y*thumb_size, x*thumb_size))


Is this line needed?

eivl · 2024-08-30T18:43:42Z

tagstudio/src/qt/widgets/fields.py

@@ -47,6 +48,10 @@ def __init__(self, title: str = "Field", inline: bool = True) -> None:
        button_size = 24
        # self.setStyleSheet('border-style:solid;border-color:#1e1a33;border-radius:8px;border-width:2px;')


Is this line needed?

eivl · 2024-08-30T18:50:07Z

tagstudio/src/qt/widgets/thumb_renderer.py

+        """
+        radius_scale: float = 1
+        if scale_radius:
+            radius_scale = max(size[0], size[1]) / 512


Consider a name instead of a magic number.

eivl · 2024-08-30T18:56:07Z

tagstudio/src/qt/widgets/thumb_renderer.py

+                # stroke_width=math.ceil(size / 96),
+                # stroke_fill="#FFFF00",


Are these needed?

I left a note for this one in the surrounding code:

# NOTE: While a stroke effect is desired, the text # method only allows for outer strokes, which looks # a bit weird when rendering fonts.

Essentially it's code I would like to use to style the font previews in a way that matches other previews like the audio waveform, but the way the stroke_width ends up getting applied on the inside makes the previews harder to read. I left it as a quick way to reimplement it in the case a solution to the stroke alignment was found.

eivl · 2024-08-30T19:00:22Z

tagstudio/src/qt/widgets/thumb_renderer.py

+        if ThumbRenderer.FONT_PIXEL_RATIO != pixel_ratio:
+            ThumbRenderer.FONT_PIXEL_RATIO = pixel_ratio
            ThumbRenderer.ext_font = ImageFont.truetype(


This will break the class if you in the future subclass it. Save this to the instance or use a dataclass to store constants or otherwise don't mix class and instance in the same method.

When going in to fix this I discovered that that neither FONT_PIXEL_RATIO nor ext_font are actually being used... Welp, takes care of that issue...

Handle ValueErrors in `render()`. This case was encountered when attempting to render an `XPM` file during testing.

CyanVoxel · 2024-08-31T00:05:27Z

Thank you for the review!

I've pushed some changes that should address most of the comments. The FFmpeg support will probably need to be further resolved/clarified, but for now I've added an additional notice on the README under the installation instructions.

* Fix text and RAW image handling - Fix RAW images not being loaded correctly in the preview panel - Fix trying to read size data from null images - Refactor `os.stat` to `<Path object>.stat()` - Remove unnecessary upper/lower conversions - Improve encoding compatibility beyond UTF-8 when reading text files - Code cleanup * Use chardet for character encoding detection * Add support for waveform + album cover thumbnails * Rename "cover" variables for MyPy * Rename "audio_tags" variables for MyPy + typing * Add # type: ignore to fromstring method * Add GIF preview support * Add rough check for invalid video codecs * Add ".plist" to PLAINTEXT_TYPES * Add readable video tester * Add ".psd" to IMAGE_TYPES; Handle ID3NoHeaderError * Improve and style waveform previews * Add final return statement to _album_artwork() * Add final return statement to _audio_waveform() * Tweak waveform color and size * Fix ItemThumb label text color in light mode * Fix most theme UI legibility issues * Match additional UI to color scheme * ruff format * feat(ui): add UI color palette dict * feat(ui) center and color small font previews * fix(ui): large font previews follow app theme * fix(ui): blender previews follow app theme * feat(ui): add resizable thumbnail options * fix: mkv files with "[0][0][0][0]" codec load properly * fix: missing audio files properly handled * feat(ui): use system accent color for thumb selections * fix(ui): hide gif preview in multi-selections * feat(ui): add dynamic file thumb icons * fix(ui): hide previous thumbnail before resizing * (fix): catch ffmpeg errors in file tester * Squashed commit of the following: commit 9a3c19d Author: Travis Abendshien <[email protected]> Date: Wed Jul 24 22:57:32 2024 -0700 fix: add missing comma + sort extensions commit 53b2db9 Author: Travis Abendshien <[email protected]> Date: Wed Jul 24 14:46:16 2024 -0700 refactor: move type constants to new media classes * feat(ui): add media types and icon resources * feat(ui): add more default media types and icons Add additional default icons for: - Blender - Presentation - Program - Spreadsheet Add/expand additional media types: - PDF - Packages * fix: remove leading dot in preview panel ext * refactor: remove edge from `four_corner_gradient()` * fix: handle missing files in `resource_manager` * fix(ui): thumb edges fading on refresh * feat(ui): add default icons for audio+vector thumbs * feat(ui): apply edge to default icon thumbs * chore: remove unused code * refactor(ui): move loading icon to `ResourceManager` * fix(ui) color for default icons follow theme * fix: remove `theme_color` redef * refactor: make some consts and args clearer * refactor: organize arguments, update docstrings The ability to pass a border radius scaling argument is also included. * chore: format docstrings with ruff * refactor: replace magic numbers with named values * refactor: remove unused code, comments, & imports * refactor: rename args to not shadow builtins * refactor: remove unused vars from `thumb_renderer` * fix: handle ValueError in `render()` Handle ValueErrors in `render()`. This case was encountered when attempting to render an `XPM` file during testing. * docs: add FFmpeg requirement to README

Ports the following thumbnail and related PRs from the `Alpha-v9.4` branch to `main` (v9.5+): - (#273) Blender thumbnail support - (#307) Add font thumbnail preview support - (#331) refactor: move type constants to new media classes - (#390) feat(ui): expanded thumbnail and preview features - (#370) ui: "open in explorer" action follows os name - (#373) feat(ui): preview support for source engine files - (#274) Refactor video_player.py (Fix #270) - (#430) feat(ui): show file creation/modified dates + restyle path label - (#471) fix(ui): use default audio icon if ffmpeg is absent - (#472) fix(ui): use birthtime for creation time on mac & win Co-Authored-By: Ethnogeny <[email protected]> Co-Authored-By: Theasacraft <[email protected]> Co-Authored-By: SupKittyMeow <[email protected]> Co-Authored-By: EJ Stinson <[email protected]> Co-Authored-By: Sean Krueger <[email protected]>

* feat: port v9.4 thumbnail + related feats to v9.5 Ports the following thumbnail and related PRs from the `Alpha-v9.4` branch to `main` (v9.5+): - (#273) Blender thumbnail support - (#307) Add font thumbnail preview support - (#331) refactor: move type constants to new media classes - (#390) feat(ui): expanded thumbnail and preview features - (#370) ui: "open in explorer" action follows os name - (#373) feat(ui): preview support for source engine files - (#274) Refactor video_player.py (Fix #270) - (#430) feat(ui): show file creation/modified dates + restyle path label - (#471) fix(ui): use default audio icon if ffmpeg is absent - (#472) fix(ui): use birthtime for creation time on mac & win Co-Authored-By: Ethnogeny <[email protected]> Co-Authored-By: Theasacraft <[email protected]> Co-Authored-By: SupKittyMeow <[email protected]> Co-Authored-By: EJ Stinson <[email protected]> Co-Authored-By: Sean Krueger <[email protected]> * remove vscode exceptions from `.gitignore` * delete .vscode directory * style: format for `ruff check` * fix(tests): update `test_update_widgets_not_selected` test * remove Send2Trash dependency * refactor: use dataclass for MediaCateogry * refactor: use enums for UI colors * docs: add file docstring for silent_Popen * refactor: replace logger with structlog * use early return inside `ResourceManager.get()` * add `is_ext_in_category()` method to `MediaCategory` Add method to check if an extension is a member of a given MediaCategory. * style: fix docstring style, missing type hints, rename `afm` * fix: use structlog vars in logging * refactor: move platform-dependent strings to PlatformStrings * refactor: move `parents[2]` path to variable * fix: undo logger regressions --------- Co-authored-by: Ethnogeny <[email protected]> Co-authored-by: Theasacraft <[email protected]> Co-authored-by: SupKittyMeow <[email protected]> Co-authored-by: EJ Stinson <[email protected]> Co-authored-by: Sean Krueger <[email protected]>

CyanVoxel added 30 commits July 19, 2024 07:39

Use chardet for character encoding detection

3c27b37

Add support for waveform + album cover thumbnails

7ce3519

Rename "cover" variables for MyPy

6b892ce

Rename "audio_tags" variables for MyPy + typing

ff17b93

Add # type: ignore to fromstring method

c1cd96f

Add GIF preview support

3144440

Add rough check for invalid video codecs

d339f86

Add ".plist" to PLAINTEXT_TYPES

dc135f7

Add readable video tester

10d81b3

Add ".psd" to IMAGE_TYPES; Handle ID3NoHeaderError

087176e

Improve and style waveform previews

cee4254

Add final return statement to _album_artwork()

127fed7

Add final return statement to _audio_waveform()

32257f6

Tweak waveform color and size

3e00a77

Fix ItemThumb label text color in light mode

1529714

Fix most theme UI legibility issues

d2b5e31

Match additional UI to color scheme

05a4860

ruff format

c582f3d

feat(ui): add UI color palette dict

c0e56dc

feat(ui) center and color small font previews

598aa4f

fix(ui): large font previews follow app theme

ffdfd6c

fix(ui): blender previews follow app theme

3bfeb3c

feat(ui): add resizable thumbnail options

086fc1e

fix: mkv files with "[0][0][0][0]" codec load properly

ef8cc6c

fix: missing audio files properly handled

ad53f10

feat(ui): use system accent color for thumb selections

91ee242

fix(ui): hide gif preview in multi-selections

196c1ba

feat(ui): add dynamic file thumb icons

3932414

fix(ui): hide previous thumbnail before resizing

c6a5202

CyanVoxel added 4 commits August 23, 2024 13:10

fix: remove theme_color redef

c377b9d

refactor: make some consts and args clearer

12d69ba

refactor: organize arguments, update docstrings

5c4a3c5

The ability to pass a border radius scaling argument is also included.

chore: format docstrings with ruff

a037a3b

CyanVoxel added Type: Refactor Code that needs to be restructured or cleaned up Type: QoL A quality of life (QoL) enhancement or suggestion Type: UI/UX User interface and/or user experience Priority: Medium An issue that shouldn't be be saved for last labels Aug 25, 2024

CyanVoxel added this to the Alpha v9.4 (Pre-SQL) milestone Aug 25, 2024

CyanVoxel changed the title ~~ui: expanded thumbnail and preview features~~ feat(ui): expanded thumbnail and preview features Aug 25, 2024

CyanVoxel added Type: Enhancement New feature or request Status: Review Needed A review of this is needed labels Aug 25, 2024

CyanVoxel mentioned this pull request Aug 28, 2024

feat: expanded file deletion/trashing #409

Merged

eivl suggested changes Aug 30, 2024

View reviewed changes

CyanVoxel added 6 commits August 30, 2024 14:24

refactor: replace magic numbers with named values

2796db6

refactor: remove unused code, comments, & imports

dd90add

refactor: rename args to not shadow builtins

ad0f472

refactor: remove unused vars from thumb_renderer

2faed27

fix: handle ValueError in render()

69e1b20

Handle ValueErrors in `render()`. This case was encountered when attempting to render an `XPM` file during testing.

docs: add FFmpeg requirement to README

992aa82

CyanVoxel removed the Status: Review Needed A review of this is needed label Aug 31, 2024

CyanVoxel merged commit 4590226 into Alpha-v9.4 Aug 31, 2024
8 checks passed

This was referenced Aug 31, 2024

Audio Browsing Quality Of Life #31

Closed

[Feature Request]: Make gifs animate in app #338

Closed

CyanVoxel deleted the thumbnails branch September 15, 2024 08:55

CyanVoxel mentioned this pull request Sep 22, 2024

feat: port thumbnail (#390) and related features to v9.5 #522

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(ui): expanded thumbnail and preview features #390

feat(ui): expanded thumbnail and preview features #390

CyanVoxel commented Aug 25, 2024 •

edited

Loading

eivl left a comment

eivl Aug 30, 2024

seakrueger Aug 30, 2024

eivl Aug 30, 2024

CyanVoxel Aug 30, 2024

eivl Aug 30, 2024

eivl Aug 30, 2024

eivl Aug 30, 2024

CyanVoxel Aug 30, 2024

eivl Aug 30, 2024

eivl Aug 30, 2024

eivl Aug 30, 2024

eivl Aug 30, 2024

CyanVoxel Aug 30, 2024

eivl Aug 30, 2024

CyanVoxel Aug 30, 2024

CyanVoxel commented Aug 31, 2024

-def get_tag_color(type, color):
+def get_tag_color(type_, color):
+    color = color.lower()
+    try:
+        if type == ColorType.TEXT:
+            return get_tag_color(_TAG_COLORS[color][type_], color)

		@@ -47,6 +48,10 @@ def __init__(self, title: str = "Field", inline: bool = True) -> None:
		button_size = 24
		# self.setStyleSheet('border-style:solid;border-color:#1e1a33;border-radius:8px;border-width:2px;')

		# stroke_width=math.ceil(size / 96),
		# stroke_fill="#FFFF00",

feat(ui): expanded thumbnail and preview features #390

feat(ui): expanded thumbnail and preview features #390

Conversation

CyanVoxel commented Aug 25, 2024 • edited Loading

This PR introduces several new changes and features for thumbnails and previews:

Thumbnails

Preview Panel

Other UI

eivl left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

CyanVoxel commented Aug 31, 2024

CyanVoxel commented Aug 25, 2024 •

edited

Loading