[FEATURE] Waybar Media-Player

[jvarelaw]

**Is your feature request related to a problem? I can't even pause music while having spotify or youtube playing at the background properly, (Using the fn+ shortcut), it just stop or play the last media played/paused.

I think it could be a good idea integrating a media player on the waybar very close idea of KDE Plasma, so the user could select wich audio is controlling.

[Xalatesh]

Im using the minimal theme and i have added it myself like this.

"custom/spotify": {
        "exec": "~/.config/waybar/scripts/get_spotify_status.sh",
        "interval": 5,
        "return-type": "json",
        "on-click": "exec playerctl --player=spotify play-pause",
        "on-scroll-up": "exec playerctl --player=spotify next",
        "on-scroll-down": "exec playerctl --player=spotify previous"

With the Script in the exec it asks spotify what the current song is

#!/bin/bash

PLAYER="spotify"
FORMAT="{{ artist }} - {{ title }}"
STATUS=$(playerctl --player=$PLAYER status 2>/dev/null)

if [ "$STATUS" = "Playing" ]; then
    TRACK_INFO=$(playerctl --player=$PLAYER metadata --format "$FORMAT")
    echo "{\"text\":\"  $TRACK_INFO\", \"tooltip\":\"Playing\", \"class\":\"playing\"}"
elif [ "$STATUS" = "Paused" ]; then
    TRACK_INFO=$(playerctl --player=$PLAYER metadata --format "$FORMAT")
    echo "{\"text\":\"  $TRACK_INFO\", \"tooltip\":\"Paused\", \"class\":\"paused\"}"
else
    echo "{\"text\":\"  No music is playing\", \"tooltip\":\"Stopped\"}"
fi

In the Style-css i added

/* -----------------------------------------------------
 * Custom Spotify
 * ----------------------------------------------------- */

#custom-spotify {
    font-family: JetBrainsMono Nerd;
    font-size: 14px;
    padding: 0 10px;
}

#custom-spotify .icon {
    padding: 2px;
    margin-right: 5px;
}

#custom-spotify .icon:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

It works, but a refined version from Stephan i would like more.

[jvarelaw]

Im using the minimal theme and i have added it myself like this.

"custom/spotify": {
        "exec": "~/.config/waybar/scripts/get_spotify_status.sh",
        "interval": 5,
        "return-type": "json",
        "on-click": "exec playerctl --player=spotify play-pause",
        "on-scroll-up": "exec playerctl --player=spotify next",
        "on-scroll-down": "exec playerctl --player=spotify previous"

With the Script in the exec it asks spotify what the current song is

#!/bin/bash

PLAYER="spotify"
FORMAT="{{ artist }} - {{ title }}"
STATUS=$(playerctl --player=$PLAYER status 2>/dev/null)

if [ "$STATUS" = "Playing" ]; then
    TRACK_INFO=$(playerctl --player=$PLAYER metadata --format "$FORMAT")
    echo "{\"text\":\"  $TRACK_INFO\", \"tooltip\":\"Playing\", \"class\":\"playing\"}"
elif [ "$STATUS" = "Paused" ]; then
    TRACK_INFO=$(playerctl --player=$PLAYER metadata --format "$FORMAT")
    echo "{\"text\":\"  $TRACK_INFO\", \"tooltip\":\"Paused\", \"class\":\"paused\"}"
else
    echo "{\"text\":\"  No music is playing\", \"tooltip\":\"Stopped\"}"
fi

In the Style-css i added

/* -----------------------------------------------------
 * Custom Spotify
 * ----------------------------------------------------- */

#custom-spotify {
    font-family: JetBrainsMono Nerd;
    font-size: 14px;
    padding: 0 10px;
}

#custom-spotify .icon {
    padding: 2px;
    margin-right: 5px;
}

#custom-spotify .icon:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

It works, but a refined version from Stephan i would like more.

I am a little bit new to linux, and also to arch and Hyprland, but where do I need to put those text? Do i need to create the file to the script at waybar/scripts/get_spotify_status.sh, put the first one at config file in ml4w-minimal and the last one at style.css in ml4w-minimal? What am I doing wrong, I dont see anything, I tought I was knowing what I was doing lol.

[Xalatesh]

the first code needs to be in the modules.json, the second one is the script, i just created a script directory in the waybar folder, but you can put it anywhere you want, but need to change the path in the module, and the last bit of code needs to be in the style.css ^^ i forgot to add, that you need to put "custom/spotify" in the config file of the theme, i added it under custom/empty, but just test around and see where the best position for you would be

[jvarelaw]

It worked! But I passed like 1 hour trying to fix that my waybar dissapeared everytime I put "custom/spotify" in the config file, i needed to put there a ",".

[jvarelaw]

Also worked pretty well with blur colored!

[Xalatesh]

It worked! But I passed like 1 hour trying to fix that my waybar dissapeared everytime I put "custom/spotify" in the config file, i needed to put there a ",".

yeah xD that happens alot of time for me as well xD