Card view: add file selection collapsing OR a new "Better" intermediate view

[avczar]

As already described in issue #8, but applied to the files sections of the card view.

Filter field

---

[ /my/file/path/.../.../ ] my-video-1.mkv .......................................................................... [Actions buttons]
General: 1, Video: 1, Audio:1, Text: 10

---

[ /my/file/path/.../.../ ] my-video-2.mkv .......................................................................... [Actions buttons]
General: 1, Video: 1, Audio:2, Text: 20

---

[ /my/file/path/.../.../ ] my-video-3.mkv .......................................................................... [Actions buttons]
General: 1, Video: 1, Audio:3, Text: 30

---

Notes:

• [...] for display on hover (tooltip) or click to show/hide: avoid long path combined with long filename, so better for responsive ;)
• For General: 1, number is useless, because is always to 1 per file.

---

Or a new "Better" alternative / intermediate view

Between the actual card and list views, more condensed than card view and more detailed than list view.
Some previews with a realistic example:

1. Using just text and standard symbols, no more

Close to the existing, with symbols as separator (instead | ; ,), for a Better readability :

Better.Media.Info.2025.BluRay.2160p.TrueHD.Atmos.7.1.DV.HDR10p.HEVC.REMUX-CAOCCAO.mkv ... [Actions btn]
/home/caoccao/Videos/Best Collection/ ▪️ MKV ▪️ 56.3 GB ➖ 75.1 Mbps ▪️ tt14260836
Video (1) ......... HEVC ▪️ 70.11 Mbps ▪️ 3840x2160 ▪️ P7 DV
Audio (3) ......... [en] Dolby TrueHD 7.1 Atmos @ 3.94M ▪️ [en] Dolby Digital 5.1 Atmos @ 768 Kbps ▪️ [en] Dolby Digital 2.0 @ 224 Kbps
Subtitles (9) ... PGS (2) ; SRT/UTF-8 (7) ➖ en▪️en▪️zh-Hant▪️da▪️fi▪️de▪️no▪️es-419▪️sv
Chapters (8)

2. Using more stylished components

Markdown oriented, with badges style, icons/logos (SVG, font)...
Examples below using shields.io badges, but it should be considered more as a CSS framework component (Bootstrap or other).

For dark theme/mode

Static & Neutral, full audio labels:

Better.Media.Info.2025.BluRay.2160p.TrueHD.Atmos.7.1.DV.HDR10p.HEVC.REMUX-CAOCCAO.mkv ... [Actions btn]
➖ ▪️▪️ ➖ ▪️
And just below:

meta group	meta data
	▪️
	▪️▪️
	▪️▪️▪️▪️▪️▪️▪️▪️

Dynamic, short audio labels:

Better.Media.Info.2025.BluRay.2160p.TrueHD.Atmos.7.1.DV.HDR10p.HEVC.REMUX-CAOCCAO.mkv ... [Actions btn]
➖ ▪️▪️ ➖ ▪️

➖ ▪️
➖ ▪️ ▪️
➖ ▪️▪️▪️▪️▪️▪️▪️▪️

For light theme/mode

Read next, and you'll see ;)

Global note:

• It's usefull to display bitrate from loss formats like DD/P and AAC because it's variable, especially for dubbed tracks: 768, 640, 256, 128, 64 Kbps... personally, this is typically one of the things I check with the format (because we sometimes have surprises)
• I highly recommend to use tag/badges style, classic or image. Not with too many colors of course: find different values listed at first glance, that's good, but too much color would make the thing unreadable! Some can be usefully colored, maybe... More real-world testing is required to determine this accurately.
• Of course, I did my best to represent my ideas with the means at my disposal; I think it would give a much better impression in the real context of the app environment.

---

Style references

Based on WCAG 2.1 AA accessibility compliance, as best I could ; some may not be 100% AA level compliant (but it's better for sure than the often used combinations on GitHub, which are not, with aggressive colors)...

Useful resources to considering for helping you to compare next stuff:

• https://webaim.org/resources/contrastchecker/
• https://darkreader.org/

Colors pallet & associations

Especially good for light theme/mode:

1. White attenuated:
2. Lightgrey:

Especially good for dark theme/mode:

3. Darkgrey:
4. Greyblue:

Neutral associations

Especially good for light theme/mode:

• ➖
• ➖

Especially good for dark theme/mode:

• ➖
• ➖

Others associations (to use sparingly):

• ➖
• ➖

Dynamical associations, highlight for special/quality data

Can imagine that some main characteristics are highlighted, like...

SDR / HDR distinctions (cold colors: HDR ; warm colors: DV):

< < < < <

PGS (incrusted, not stylishable) vs SRT:

• ▪️
• ▪️

4 classes for quality ranges (tier), according to the AV bitrate : C1 for the better, C4 for the worst

For video: > > >

For audio: C1 = lossless/best, C2 = lossy/good, C3 = lossy/acceptable, C4 = lossy/poor
Typically: C1 = BR sourced, C2 = WEB sourced, C3 = WEB/TV/DVD sourced, C4 = WEB/TV/DVD for B-movie/series and old content

Formats sorted by recommended bitrate:

Commercial name	Format abr.	Codec	Channels	Bitr. min	Recommended	Bitr. max
DTS:X (vs. Atmos)	DTS:X	DTS-HD MA	7(+).2	1.5 Mbps	3–8 Mbps	24.5 Mbps
DTS-HD Master Audio	DTS-HD MA	DTS-HD MA	5.1, 7.1	1.5 Mbps	3–8 Mbps	24.5 Mbps
Dolby TrueHD Atmos	TrueHD Atmos	MLP + Atmos	5.1.2	1.5 Mbps	3–8 Mbps	18 Mbps
Dolby TrueHD	TrueHD	MLP	5.1, 7.1	1.5 Mbps	3–8 Mbps	18 Mbps
DTS-HD High Res	DTS-HD HR	DTS-HD HR	5.1, 7.1	1.5 Mbps	3–6 Mbps	6 Mbps
DTS	DTS	DTS Core	5.1	768 Kbps	1509 Kbps	1509 Kbps
Dolby Digital Plus Atmos	DDPA	E-AC3 + Atmos	5.1.2	384 Kbps	448–640 Kbps	768 Kbps
Dolby Digital Plus	DDP	E-AC3	5.1	192 Kbps	384–640 Kbps	768 Kbps
Dolby Digital	DD	AC3	5.1	384 Kbps	448 Kbps	640 Kbps
Dolby Digital Plus	DDP	E-AC3	2.0	96 Kbps	128–192 Kbps	256 Kbps
Dolby Digital	DD	AC3	2.0	128 Kbps	192 Kbps	256 Kbps
AAC-LC	AAC	AAC-LC	2.0	96 Kbps	128–192 Kbps	320 Kbps
HE-AAC v2	HE-AAC	AAC-HE	2.0	32 Kbps	64–96 Kbps	128 Kbps

Examples of classifications:

[caoccao]

Thank you.

For now, this app presents the data from MediaInfoLib in a quite direct way. These suggestions require extraordinary amount of time to polish the app UI. I hope someone is going to sponsor them one by one.

I think one of the reasons that the official MediaInfo UI is so tech oriented is no one sponsors the UI improvements. Don't get me wrong: MediaInfo gets huge amount of donations for the development. I created this app for free, where free means the UI taste is from me. If someone wants a better UI, that is doable, but that will be most probably not free.