Spotlight-like search bar for spotify

Related tags

Video/Audio spotify search-bar spicetify-cli spicetify-extensions power-bar
Overview

Spicetify power bar

Spotlight-like quick search bar to navigate to tracks, albums, artists and playlists.

power bar

Table of contents

Installation

Install via spicetify-marketplace

Or the manual way:
Copy power-bar.js to the spicetify extenstions folder

Platform Path
MacOs/Linux ~/.config/spicetify/Extensions
Windows %userprofile%/.spicetify/Extensions/

Run the following commands

spicetify config extensions power-bar.js
spicetify apply

Usage

Activate using the shortcut. These are defaults. Can be changed in the settings.

Platform Shortcut
Windows/Linux ctrl+space
MacOs alt+space

In the suggestion list you can jump back and forth between categories by pressing tab and shift+tab.

To play a suggestion immediately (not navigating to it), hold ctrl (windows/linux) or cmd (macOs) when selecting the suggestion.

Settings

Settings for the power bar can be found on spotify's settings page. There are settings for the following things:

  • Activation key combo. Defaults are alt+space on MacOs, and ctrl+space on other operating systems. Can be changed to anything in to following format: modifier+key. A modifier key is one of the following:
    • Shift
    • Control
    • Alt
    • Cmd/Windows
  • Amount of suggestions per category. How many suggestions to show per per category. Default is 3. Technically this can be set to 50, but in the power bar it's limited to 10 per category due to it being a better user experience.
  • Add to queue. Add the selected suggestion to the queue instead of playing it. When enabled hold ctrl (windows/linux) or cmd (macOs) when selecting the suggestion to add it to the playback queue.
Comments
  • Add ability to play a song without navigating

    Add ability to play a song without navigating

    This adds a new setting toggle to allow you to hold the "CTRL" key down while in the search bar to play a song without navigating away from your current page. (I thought it was neat feature and wanted to share)

    opened by ItsErikSquared 4
  • Add support for non-english characters

    Add support for non-english characters

    It's annoying i even cannot search with artist's original name.

    https://user-images.githubusercontent.com/94017480/151990782-8cc757b7-66e7-4f9d-a9bb-6171dcb7ef39.mov

    bug 
    opened by SupLiCatinG 3
  • Change the background color of search

    Change the background color of search

    Shadow seems like a weird var to use as many themes don't have a shadow (therefore shadow color will be set to the same as main color, causing search to look odd). Some ideas of what to use instead include misc, or notification

    opened by CharlieS1103 3
  • Key Presses are not being detected in MacOS

    Key Presses are not being detected in MacOS

    Describe the bug I cannot summon Spicetify Power Bar, nor can I change the Keys that are needed for this. This is probably a MacOS limitation of sorts, but I haven't seen anyone complaint, so I am not 100% that is the case.

    Expected behavior Being able to summon power bar/change the keys.

    Screenshots image

    Device info (please complete the following information):

    • OS: MacOS 12.4
    • Spicetify version: 2.13.0
    • Spotify version: 1.1.92
    bug 
    opened by afonsojramos 2
  • Add a Setting to Customize Power-Bar Colours.

    Add a Setting to Customize Power-Bar Colours.

    Right now, I think it just borrows from the current custom theme, this looks really ugly for a few themes and it would be a life saver to change it either from in-built settings or in a config file.

    For reference, this is what power-bar looks like for me:

    image

    opened by niv-dev 2
  • Straight up doesn't work

    Straight up doesn't work

    I clicked the Search button and searched for a song and it's still the same and the hotkey doesn't work. Only thing it did was add a 'Power bar settings' section in Settings

    bug 
    opened by 57ryk3r 2
  • Add

    Add "Save to library /add to playlist" buttons next to Tracks

    It would be great to have Save to library and add to playlist buttons right side to the track(songs) because if else we need to click songs one by one and add it to library or playlists ! Thank You!

    enhancement 
    opened by foco76 1
  • Improve search

    Improve search

    The power bar currently uses the spotify search v1 endpoint, but for their own search page they seem to be using a different endpoint, yielding better search results/suggestions.

    I'd like to improve the search functionality, but am not sure how to approach that exactly. Any help or info on the subject is greatly appreciated.

    enhancement help wanted 
    opened by jeroentvb 1
  • Clean code

    Clean code

    Since it's all vanilla JS in a single file, the code is a bit messy. JSDo does help a bit but ideally I'd want to use a framework with some typescript. This project looks promising, but is currently only for custom apps.

    Adding some linting also wouldn't hurt.

    opened by jeroentvb 1
  • Improve styling

    Improve styling

    I'm not 100% happy with the current looks of the power bar. But I'm not entirely sure how to improve it. I would like it to match with Spotify' styling, but the black on black doesn't seem to work very well contrast wise..

    I'm open to suggestions/ideas/PR's considering sytling.

    enhancement help wanted 
    opened by jeroentvb 1
  • refactor: remove play immediately setting

    refactor: remove play immediately setting

    Default behaviour is navigating to a suggestion. This can be modified by holding ctrl/cmd when selecting an item. When doing so the item will be played while not navigating to it.

    Also updating spcr-settings to make the settings work again.

    opened by jeroentvb 0
  • [feat] Add translations ?

    [feat] Add translations ?

    Hi

    It could be possible to add a translations system to this great extension ?

    There is not much things to translate, but it would be nice to implement it, but i can understand if it's too hard to implement.

    Thanks in advance.

    enhancement 
    opened by xerta555 0
  • Add suggestion to queue instead of playing it when holding ctrl (windows/linux) or cm (mac) is not working on mac

    Add suggestion to queue instead of playing it when holding ctrl (windows/linux) or cm (mac) is not working on mac

    cant add songs to queue using cmd key

    idk i was doing it wrong but all i was doing is holding cmd and hit enter

    • OS: mac os 12.6
    • Spicetify version: 1.1.94.870.gf994cb0b
    • Spotify version: 2.13.1
    bug 
    opened by Climax-Arc 11
Releases(v1.6.1)

  • v1.6.1(Sep 28, 2022)

    What's Changed

    • Improve error handling when adding an item to the queue fails by @jeroentvb in https://github.com/jeroentvb/spicetify-power-bar/pull/33

    Full Changelog: https://github.com/jeroentvb/spicetify-power-bar/compare/v1.6.0...v1.6.1

    Source code(tar.gz)
    Source code(zip)

  • v1.6.0(Jun 26, 2022)

    What's Changed

    • Allow overwriting power bar colors - closes #28 by @jeroentvb in https://github.com/jeroentvb/spicetify-power-bar/pull/29

    Full Changelog: https://github.com/jeroentvb/spicetify-power-bar/compare/v1.5.0...v1.6.0

    Source code(tar.gz)
    Source code(zip)

  • v1.5.0(May 4, 2022)

    What's Changed

    • feat: setting to add item to queue instead of playing it by @jeroentvb in https://github.com/jeroentvb/spicetify-power-bar/pull/26

    Full Changelog: https://github.com/jeroentvb/spicetify-power-bar/compare/v1.4.0...v1.5.0

    Source code(tar.gz)
    Source code(zip)

  • v1.4.0(May 2, 2022)

    What's Changed

    • refactor: remove play immediately setting by @jeroentvb in https://github.com/jeroentvb/spicetify-power-bar/pull/25
      • Default behaviour is navigating to the selected suggestion
      • To just play and not navigate, hold `ctrl` (windows/linux) or `cmd` (mac) when selecting it

    Full Changelog: https://github.com/jeroentvb/spicetify-power-bar/compare/v1.3.0...v1.4.0

    Source code(tar.gz)
    Source code(zip)

  • v1.3.0(Apr 19, 2022)

    What's Changed

    • Add ability to play a song without navigating by @ItsErikSquared in https://github.com/jeroentvb/spicetify-power-bar/pull/24

    New Contributors

    • @ItsErikSquared made their first contribution in https://github.com/jeroentvb/spicetify-power-bar/pull/24

    Full Changelog: https://github.com/jeroentvb/spicetify-power-bar/compare/v1.2.0...v1.3.0

    Source code(tar.gz)
    Source code(zip)

  • v1.2.0(Apr 2, 2022)

    What's Changed

    • feat(search): add shift+tab functionality by @jeroentvb in https://github.com/jeroentvb/spicetify-power-bar/pull/22
    • fix: handle missing images - fixes #19 by @jeroentvb in https://github.com/jeroentvb/spicetify-power-bar/pull/23

    Full Changelog: https://github.com/jeroentvb/spicetify-power-bar/compare/v1.1.2...v1.2.0

    Source code(tar.gz)
    Source code(zip)

  • v1.1.2(Mar 29, 2022)

    What's Changed

    • fix: issue where power bar sometimes would not show when pressing activation key combo by @jeroentvb in https://github.com/jeroentvb/spicetify-power-bar/pull/21

    Full Changelog: https://github.com/jeroentvb/spicetify-power-bar/compare/v1.1.1...v1.1.2

    Source code(tar.gz)
    Source code(zip)

  • v1.1.1(Mar 24, 2022)

    This release updates spcr-settings, which fixes the power-bar settings on the settings page.

    Full Changelog: https://github.com/jeroentvb/spicetify-power-bar/compare/v1.1.0...v1.1.1

    Source code(tar.gz)
    Source code(zip)

  • v1.1.0(Mar 2, 2022)

    What's Changed

    • Tab to next category & add what's new modal by @jeroentvb in https://github.com/jeroentvb/spicetify-power-bar/pull/17

    Full Changelog: https://github.com/jeroentvb/spicetify-power-bar/compare/v1.0.2...v1.1.0

    Source code(tar.gz)
    Source code(zip)

  • v1.0.2(Feb 27, 2022)

    What's Changed

    • Keyboard shortcut fix for Windows by @machinemessiah in https://github.com/jeroentvb/spicetify-power-bar/pull/15

    New Contributors

    • @machinemessiah made their first contribution in https://github.com/jeroentvb/spicetify-power-bar/pull/15

    Full Changelog: https://github.com/jeroentvb/spicetify-power-bar/compare/v1.0.1...v1.0.2

    Source code(tar.gz)
    Source code(zip)

  • v1.0.1(Feb 19, 2022)

    What's Changed

    • Fix: React cannot be imported with using the minify option. by @FlafyDev in https://github.com/jeroentvb/spicetify-power-bar/pull/13 This caused the minified power-bar.js to be unable to initialize.

    Full Changelog: https://github.com/jeroentvb/spicetify-power-bar/compare/v1.0.0...v1.0.1

    Source code(tar.gz)
    Source code(zip)

  • v1.0.0(Feb 17, 2022)

    The feature set of the power bar has gotten to a point where I'm comfortable calling this a v1 release 🎉 See the radme for the current featureset and some more info.

    Full Changelog: https://github.com/jeroentvb/spicetify-power-bar/compare/v1.0.0-beta.2...v1.0.0

    Source code(tar.gz)
    Source code(zip)

  • v1.0.0-beta.2(Feb 2, 2022)

    What's Changed

    • Fix key shortcut activating the power bar. For windows/Linux use ctrl+space. For macOs use alt+space
    • Selected item will now always appear in view (thanks @FlafyDev)
    • Encode search query. Allowing non-latin characters in searches (#9)
    • Dim background when the power bar is active

    Full Changelog: https://github.com/jeroentvb/spicetify-power-bar/compare/v1.0.0-beta.1...v1.0.0-beta.2

    Source code(tar.gz)
    Source code(zip)

  • v1.0.0-beta.1(Jan 28, 2022)

Owner
Jeroen
Front-end developer by day, windsurfer by, uhm... night?
Jeroen
GitHub
SpotLight is a web app which uses spotify developer APIs and lists your most listened songs, albums, artists and genres.

SpotLight is a web app which uses spotify developer APIs and lists your most listened songs, albums, artists and genres.

Sahil Saha 9 Dec 31, 2022
Spotify 2.0 com NextJS 12 - MIddleware, TailwindCSS, Spotify API, NextAuth, Recoil

Spotify Clone A spotify clone made with NextJS 12, TailwindCSS, NextAuth, Spotify API, Recoil Lessons Learned Setting up NextJS with Tailwind. NextAut

zF4ke 3 Mar 14, 2022
Spotify clone using Next.js, Spotify API, Tailwind, NextAuth, Recoil

Next.js + Tailwind CSS Example This example shows how to use Tailwind CSS (v2.2) with Next.js. It follows the steps outlined in the official Tailwind

Abdelwahab Hussein 2 Dec 25, 2021
spotify.ts is an wrapper built around Spotify's Web API

spotify.ts About spotify.ts is an wrapper built around Spotify's Web API. Features Fast Object Oriented Typescript, ESM, CJS support Easy to Use Insta

null 6 Nov 17, 2022
Search and Get the Music that you like from anywhere!

Music-Engines music-engines is a package to fetch a music/artist/album or even playlist from the platform you choose, there multi platforms that are s

EhsanFox 16 Dec 15, 2022
A simple package to download music tracks from spotify đŸŽ”

A simple package to download music tracks from spotify ??

Alen Yohannan 26 Dec 25, 2022
Web Application that represents a music player using the spotify API, React, JS, CSS, HTML, nodeJS, Firebase, material-ui, JSON and other technologies. Made by Yohan Hmaiti

Web Application that represents a music player using the spotify API, React, JS, CSS, HTML, nodeJS, Firebase, material-ui, JSON and other technologies. Made by Yohan Hmaiti

Yohan Hmaiti 2 Jan 8, 2022
Add some fire to your Spotify music playlists đŸ”„đŸŽ§

Spotifire ?? Add some fire to your Spotify music playlists ?? Built With Next.js React Tailwind CSS (v3.0) NextAuth Recoil Spotify Web API Preview Vis

Niloy Sikdar 15 Jun 19, 2022
SpotifyUiClone - A Ui Clone of Spotify, only studing purporses

Spotify Ui Clone An Kinda Clone of the Spotify Ui for studing purposes Summary This is a project made in React Js, so the idea is to make an ui for an

Jf_Dess 1 Jan 7, 2022
A review aggregator web application that allows users to review albums by leveraging the Spotify Web API.

Reviewify Summary Reviewify is a review aggregator platform that leverages the Spotify Web API. It allows users to: Login with their Spotify accounts

Abhi Ardeshana 3 Oct 7, 2022
now-playing: A website to show what I'm currently listening to on Spotify Run on Repl.it

now-playing: A website to show what I'm currently listening to on Spotify ❓ How does it work? This project is split into two parts - the frontend and

Connor Dennison 3 Apr 29, 2022
Edit CSS directly from Spotify.

Spotify CSS Editor Built with Spicetify Creator. Download from Spicetify Marketplace. Edit CSS directly from Spotify. Features Edit CSS directly from

Flafy 10 Dec 27, 2022
Spotify Web API with Next.js

Resumo Statsfy Ă© um site que exibe seus artistas e mĂșsicas mais escutadas, alĂ©m de mĂșsicas recentes. VocĂȘ pode usar clicando neste link. (Apenas usuĂĄr

otaviozin 8 Sep 5, 2022
Randomfy takes your most listened Spotify artists

Randomfy takes your most listened Spotify artists, selects one of them and shows you similar artists, so you can meet new artists based on the previous selected one.

Raul Andrade 9 Nov 6, 2022
Spotify Radio - JS Expert Week 6.0

Spotify Radio - JS Expert Week 6.0 Welcome to the sixth Javascript Expert Week. This is the starting code to start our journey. Tag this project with

Alison Lima 6 Mar 16, 2022
Pomodoro + spotify + todo list = awesome!

Turborepo starter This is an official Yarn v1 starter turborepo. What's inside? This turborepo uses Yarn as a package manager. It includes the followi

Cesar Muñoz 3 Jan 3, 2023
Spotify radio is an audio streaming app where you can add effects in real time.

Spotify Radio - Semana JS Expert 6.0 Spotify radio is an audio streaming app where you can add effects in real time. JS-Expert Project of the Week by

Luis Fernando 6 Apr 25, 2022
Advanced Music Bot It is an advance type of discord music bot which plays high quality of music with spotify

Advanced Music Bot It is an advance type of discord music bot which plays high quality of music with spotify, apple music support . You can save your songs and play it. It also has DJ mode system.

Diwas Atreya 65 Dec 25, 2022
Todas as aulas da Semana JS Expert 6.0 - Spotify Radio

Spotify Radio - Semana JS Expert 6.0 Seja bem vindo(a) Ă  sexta Semana Javascript Expert. Este Ă© o cĂłdigo inicial para iniciar nossa jornada. Marque es

Erick Wendel 1.3k Jan 7, 2023