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 allows users to customize the Spotify interface by removing all images for a cleaner viewing experience.

[coderabbitai]

Walkthrough

A new snippet entry titled "Hide All Images" was added to resources/snippets.json. This snippet provides CSS rules to hide all images across the Spotify UI using various selectors and techniques, including display manipulation, visibility changes, and background image removal.

Changes

Cohort / File(s)	Summary
New Snippet Entry resources/snippets.json	Added "Hide All Images" snippet with CSS code block to hide images across Spotify UI and corresponding preview image reference

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

• Simple additive change with no modifications to existing entries
• Single file, straightforward JSON structure
• CSS rules are standard image-hiding techniques
• Quick validation needed: confirm JSON syntax integrity, CSS selector accuracy, and preview image path validity

Poem

🐰 A snippet so fine, to hide them all with style,
No images in sight, just vibes for a while!
CSS rules aligned, like carrots in a row,
Spotify's now cleaner—a minimalist's hello! 🎵✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The PR title "feat(snippets): hide all images across Spotify" directly and accurately describes the main change in the pull request: a new snippet entry is being added to resources/snippets.json that implements CSS to hide all images across the Spotify UI. The title is concise, uses clear language, and includes a proper conventional prefix (feat) to indicate a new feature. A teammate reviewing the repository history would immediately understand that this PR introduces functionality to comprehensively hide images throughout the Spotify application, which aligns perfectly with the changeset content.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

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

---

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