Flexbar Plugin Youtube Music Desktop App

A Node.js plugin for the Flexbar macro pad that controls YouTube Music Desktop App via Socket.IO. Shows the current track, album art, and playback controls directly on the Flexbar display.

A Node.js plugin for the Flexbar macro pad that turns it into a now-playing remote for YouTube Music Desktop App: current track title, artist, and album art render directly on the Flexbar's display, with touch controls for play/pause, skip, and volume. It talks to YouTube Music Desktop App's companion server over Socket.IO, the same real-time channel the app's own remote-control features use, so track changes and playback state show up on the Flexbar immediately rather than through a slower polling loop.

Architecture

graph TD
  Flexbar["Flexbar plugin (src/)"] -->|Socket.IO, websocket transport| YTMD["YTMD companion server
127.0.0.1:9863"]
  YTMD -->|state-update event| Flexbar
  YTMD -->|playlist-created / playlist-delete| Flexbar
  Flexbar --> UI["UI .vue files
nowplaying, like, dislike, playpause, seek"]
  UI -->|render| Key["physical Flexbar keys"]

Under the hood

Now-playing state arrives as a single Socket.IO event — the plugin doesn't poll, it just reacts to state-update pushes from the YTMD companion server.

src/ytMusicRealtime.js

JavaScript

this.socket = io(socketUrl, {
    transports: ['websocket'], // Required: websocket only
    auth: { token: token },
    timeout: 10000,
    forceNew: true
});

// State update events - this is the primary way we get updates
this.socket.on('state-update', (state) => {
    logger.debug('Received state update event from Socket.IO', {
        title: state?.video?.title,
        artist: state?.video?.author,
        isPlaying: state?.player?.trackState === 1,
        volume: state?.player?.volume,
        progress: state?.player?.progress
    });
    this.handleStateUpdate(state);
});

this.socket.on('playlist-created', (playlist) => {
    this.handlePlaylistCreated(playlist);
});