Code Monkey home page Code Monkey logo

spicetify's Introduction

Logo

Tool to customize Spotify client UI and expand functionalities. Supports only Windows.

Linux and MacOS users, please check out https://github.com/khanhas/spicetify-cli

GitHub release Github All Releases Join the community on Spectrum

How to use

1. Download and install Rainmeter (require version >= 4.1)
2. Download and install rmskin package in release page
3. Load Spicetify skin in Rainmeter Manage
4. Choose Backup in skin UI to start backing up original Spotify files
5. Pick color scheme, edit CSS then Apply

Note: Only Spotify normal version is supported. Windows Store version is under a write permission required folder so I can't make it work. Normal Spotify installer can be downloaded here.

Demo1

Outline

Custom CSS

To sastify any web developer that has experience with CSS, Inject CSS option will allow you to customize your Spotify client even more.

I included in install package my own CSS theme:

Demo2

Note: If you prefer original Spotify UI, please clear user.css file or uncheck Inject CSS.

To use color variables, check out Custom CSS wiki page.

Themes

If you have multiple themes in Themes folder, click at back and next buttons to rotate through all of them. You also can create new theme and duplicate current theme instantly by using right mouse context menu.

Demo3

Extensions

Spicetify also allows you inject custom Javascript to support your theme or enhance your Spotify client functionalities.

I included some extensions in install package you might find useful, activate them in Spicetify then Apply/Re-apply:

Auto Skip Videos

Videos are unable to play in some regions because of Spotify's policy. Instead of jumping to next song in playlist, it just stops playing. And it's kinda annoying to open up the client to manually click next every times it happens. Use this extension to skip them automatically.

Christian Spotify

Auto skip explicit tracks

Ext_ChristianDemo

DJ Mode

Easily setting up the client for your friends or audiences to choose, add song to queue but prevent them to control player. Plays button in album track list/playlist are re-purposed to add track to queue, instead of play track directly. Hide Controls option also allow you to hide all control button in player bar, Play/More/Follow buttons in cards.

Ext_DJDemo

Queue All

You like using Discover, New Releases page to find new music but adding each one of them to queue takes a lot of effort? If so, activate this extensions and apply. At top of every carousel now has a "Queue All" button to help you add all of them to queue. Note: Not available for playlist carousels. Just songs, albums ones.

QueueAllDemo

Shuffle+

Detect current context (playlist, album, user collection or show), gather all its items and shuffle them with Fisher–Yates algorithm. After injecting this extension, go to Queue and you can find 2 new buttons at page header: - Shuffle Context: detect current context and shuffle all its item. - Shuffle Queue: shuffle only 80 items or less that are visible in Queue page. It's only useful for mixed context queue. For most of the time, just use Shuffle Context.

Shuffle_1 Shuffle_2

Trash Bin

Throw songs/artists to trash bin and never hear them again (automatically skip). This extension will append a trash bin button in player bar and one in every artist page header. Button in player bar will immediately skip and add that song to trash list. Button in artist page will add that artist in trash list and skip whenever his/her songs play.

Ext_Trash1 Ext_Trash2

WebNowPlaying Companion

For Rainmeter user only. Works exactly like WebNowPlaying Companion for browser, get song information and control player directly with WebNowplaying plugin.

Check out Extension wiki page for list of useful functions, object.

Apps

Inject custom apps to Spotify and access them in left sidebar.

I included my own app to demonstrate how to make and inject an app:

Reddit

Fetching top 100 Spotify posts in any subreddit. This app has native feels and behavior just like other Spotify apps: you can follow, save, play, open playlist/track/album directly. Moreover, it also can fetch Youtube posts and play them inside Spotify.

RedditDemo

Check out App wiki page for some app making tips.

Community themes

thicktify

How it works

Spotify UI is HTML/CSS and runs inside Chromium Embedded Framework[1]. All CSS files controlling element attributes and interaction are packed in SPA files (they basically are ZIP).

These CSS files are extracted first then go through a preparation process that finds and replaces almost all colors with specific keywords.

When user applies his/her own colors scheme, all keywords are replaced with actual colors value, both in hex and RRR,GGG,BBB format.

After that, modded CSS and remaining files are transferred back to Spotify directory.

How to contribute

  1. Install Rainmeter if you have not.

  2. Download this repo and unzip to Documents\Rainmeter\Skins.
    or use git:

cd %userprofile%\Documents\Rainmeter\Skins
git clone https://github.com/khanhas/Spicetify.git

Everything you need to run is already in repo.
3. (Optional) Install Nodejs and yarn to run/install some tools and scripts that make development process easier.

Credits

Thanks actionless for his oomoxify script that this skin is based on.
Thanks tjhrulz for his WebNowPlaying Browser Extension and MessagePassing plugin.

spicetify's People

Contributors

khanhas avatar hlqviet avatar vardrop avatar sparoney avatar davidcralph avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.