feat(snippets): hide all images across Spotify

[yacksonn]

This is different from Spicetify-HideImages-Extension. This provides comprehensive blocking of spotify images including:

• Album covers
• Playlist art
• Podcast images
• Artist bios and banners
• All images in the Now Playing sidebar

Summary by CodeRabbit

• New Features
  • Added a new "Hide All Images" snippet that hides images across the Spotify interface; includes a descriptive entry and a preview image for users to evaluate before applying.

[coderabbitai]

Walkthrough

A single new snippet entry, "Hide All Images", was added to resources/snippets.json. The entry contains CSS rules and a preview reference intended to hide images across the Spotify UI.

Changes

Cohort / File(s)	Summary
New Snippet Entry resources/snippets.json	Added "Hide All Images" snippet: JSON entry containing a description, a CSS code block that targets many image/background selectors to hide images, and a preview image reference.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

• Single-file, additive change (JSON entry).
• Quick checks: JSON syntax, correctness of the snippet fields, and the preview image path.

Suggested reviewers

• rxri
• kyrie25

Poem

🐰 I hopped through code to hide each view,
CSS carrots placed — goodbye image zoo,
Quiet UI fields where pixels once played,
A hush of style in the patch I made. 🥕✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat(snippets): hide all images across Spotify' clearly and concisely summarizes the main change—adding a snippet to hide all images across Spotify, which aligns perfectly with the PR objective and the sole functional change in resources/snippets.json.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f39b981 and 06012b1.

📒 Files selected for processing (1)

• resources/snippets.json (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• resources/snippets.json

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

resources/snippets.json (1)

536-541: Refactor CSS for clarity, remove dead code, and reduce selector overlap.

The CSS has several issues that should be addressed:

1. Dead code (line 539): .Root__main-view, .main-view-container, .os-content {} — empty selector block serves no purpose.
2. Redundant properties: display: none !important; visibility: hidden !important; — only display: none is needed.
3. Overly broad catch-all selector at the end: [style*='background-image'], [style*='background:url'], [style*='image-set('] overlaps with earlier, more specific rules and makes the CSS inefficient.
4. Potentially unmatched class names: .artist-image, .card-image appear generic and may not correspond to actual Spotify UI elements. Verify these exist in the DOM.
5. Formatting: The minified single-line CSS is difficult to maintain. Consider formatting it with line breaks for readability.

Additionally, the universal img selector hides all images globally without scoping. If other UI elements rely on images for layout or icons, this could cause unintended side effects.

Consider applying this refactor:

- "code": ".Root__main-view, .main-view-container, .os-content {} .Root__main-view [style*='background-image']:not([class*='Icon']):not([class*='icon']), .Root__main-view [style*='background:url']:not([class*='Icon']):not([class*='icon']), .Root__main-view [style*='image-set(']:not([class*='Icon']):not([class*='icon']) { background: none !important; } img, .cover-art-image, .artist-image, .card-image, .main-nowPlayingWidget-coverArt { display: none !important; visibility: hidden !important; } [aria-label*='Now Playing'] [style*='background-image'], [aria-label*='Now playing'] [style*='background-image'], [aria-label*='Now Playing'] [style*='image-set('], [aria-label*='Now playing'] [style*='image-set('], [aria-label*='Now Playing'] [style*='url('], [aria-label*='Now playing'] [style*='url('], [class^='main-nowPlayingView'] [style*='background-image'], [class^='main-nowPlayingView'] [style*='image-set('], [class^='main-nowPlayingView'] [style*='url('] { background: none !important; -webkit-mask-image: none !important; mask-image: none !important; } [style*='background-image'], [style*='background:url'], [style*='image-set('] { background: none !important; -webkit-mask-image: none !important; mask-image: none !important; }",
+ "code": ".Root__main-view [style*='background-image']:not([class*='Icon']):not([class*='icon']),\n.Root__main-view [style*='background:url']:not([class*='Icon']):not([class*='icon']),\n.Root__main-view [style*='image-set(']:not([class*='Icon']):not([class*='icon']),\nimg,\n.cover-art-image,\n.main-nowPlayingWidget-coverArt {\n  display: none !important;\n}\n\n[aria-label*='Now Playing'] [style*='background-image'],\n[aria-label*='now playing'] [style*='background-image'],\n[class^='main-nowPlayingView'] [style*='background-image'] {\n  background: none !important;\n  -webkit-mask-image: none !important;\n  mask-image: none !important;\n}",

The refactored version:

• Removes the empty selector block
• Removes redundant visibility: hidden
• Consolidates overlapping selectors and removes the catch-all at the end
• Normalizes aria-label matching to lowercase
• Formats for readability and maintainability

Verify that .artist-image and .card-image are actual Spotify classes before removing them.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 16dcd5e and f39b981.

⛔ Files ignored due to path filters (1)

• resources/assets/snippets/Blank-PNG-Pic.png is excluded by !**/*.png

📒 Files selected for processing (1)

• resources/snippets.json (1 hunks)

[yacksonn]

@rxri Can I get a review when you get a chance